Rss

  • youtube
  • linkedin
  • google

Archives for : กราฟิกดีไซต์

ได้เวลาปรับกระบวนการในการออกแบบเว็บไซต์สมัยใหม่ (ตอนที่ 2)

ต่อจากตอนที่แล้ว "ได้เวลาปรับกระบวนการในการออกแบบเว็บไซต์สมัยใหม่ (ตอนที่ 1)" เราคุยกันเรื่องของ Photoshop CC 2015 ไปแล้ว ทีนี้มาดูโปรแกรมสำคัญอีกตัวนึงคือ Adobe Dreamweaver CC 2015 ก่อนต่อ ก่อนอื่นผมต้องบอกก่อนว่า โปรแกรม Dreamweaver นั้น เปลี่ยนไปมาก ถ้าเทียบกับ Photoshop แล้ว เรียกว่า เปลีย่นมาเยอะจนบางที ต่อให้คนที่ใช้งานประจำก็ยังต้องปรับตัวเยอะพอสมควร จนบางคนรู้สึกว่ามันใช้งานไม่ง่ายเหมือนก่อน ที่จริงมันก็ไม่ได้ยากขึ้นนะครับ แต่ว่ามันบังคับให้เราทำงานอย่างถูกต้อง และเป็นระบบมากขึ้น โดยเริ่มจากการสร้างเอกสารใหม่กันเลยทีเดียว

อ่านต่อ

Inspiration แนะนำ

วันนี้ไปเจอเว็บไซต์ designil ได้โพสแนะนำสำหรับคนที่ต้องการหา Inspiration สำหรับคนกราฟฟิกดีไซต์ ใครที่สนใจอยากเข้าไปดูเพิ่มเติม

สามารถคลิกที่ลิ้งค์นี้เลยค่ะ http://www.designil.com/5-inspiration-website-designer.html ลองเข้าไปดูได้เลยค่ะ รับรองว่ามีความคิด ด้านดีไซน์มากขึั้้นแน่่่นอน

 

 

วิธีการสร้างหยดน้ำมหัศจรรย์

articleท่านผู้อ่านเวลามองเห็นภาพหยดน้ำ กลิ้งอยู่บนใบบัว หรือบนกลีบดอกไม้ แล้วนึกอยากได้ภาพเหล่านั้น มาประดับตกแต่งเว็บไซต์บ้าง แต่ครั้นจะไปถ่ายรูปเจ้าหยดน้ำเหล่านี้ หลายท่านอาจจะไม่ใช่มืออาชีพทางด้านการถ่ายภาพ ภาพเลยออกมาไม่สวยอย่างที่ตั้งใจ มุมแสงตกกระทบไม่สวยบ้าง ภาพมัว หยดน้ำไม่ได้รูป และปัญหาอื่น ๆ อีกสารพัด วันนี้จะมาแนะนำวิธีการสร้างหยดน้ำแบบทำได้เองง่าย ๆ ด้วยโปรแกรม Photoshop ค่ะ

 
ขั้นตอนการทำ
  1. เปิดโปรแกรม Photoshop ขึ้นมา แล้วเลือกรูปภาพที่เราต้องการนำมาทำเป็นพื้นหลังไปที่ File–>Open

    เลือกรูปที่ต้องการกด Open 
     

  2. ไปที่เครื่องมือ Selection เพื่อทำการสร้างรูปหยดน้ำ โดยวิธีการ Copy พื้นหลัง เลือกเครื่องมือ Selection ที่ชื่อว่า Elliptical Maquee Tool 


     

  3. ทำการ Selection พื้นที่ โดยลากลงไปในเลเยอร์พื้นหลังให้ได้ขนาดตามที่ต้องการ เพื่อทำการ Copy 
     

    จากนั้นไปที่ Edit –>Copy
     

    แล้ววางลง Edit –>Paste

  4. สร้างเลเยอร์ใหม่ไว้ด้านบนสุด เพื่อทำเงาข้างในหยดน้ำ ไปที่ Layer –> New–> Layer
     

     

  5. กดปุ่ม Ctrl + click ไปที่ Layer2 จะเห็นว่ามีเส้นประเกิดขึ้น 

     
     

    5.1 จากนั้นให้เลือกเครื่องมือเทสี ที่ชื่อว่า Paint Bucket Tool เลือกสีเข้มให้ใกล้เคียงกับสีพื้นหลัง และต้องมีความเข้มมากกว่า เพื่อที่จะให้เกิดความสมจริงที่สุด

    เทสีลงไปในเส้นประ


     

  6. หลังจากนั้นให้ทำการหดเส้น Selection โดยมาที่คำสั่ง Select –> Modify –> Contract กำหนดขนาด 3 pixels

     

     

  7. จากนั้นทำการ Delete เพื่อให้มีลักษณะกลวงข้างใน ดังรูป
     

  8. จากนั้น Load Selection ที่ Layer 2 ที่เราทำการ copy พื้นหลัง โดยการกดปุ่ม Ctrl + click ที่ Layer2 ก็จะเกิด เส้น Selection แล้ว Clik ที่ Layer 2 เพื่อย้ายการทำงานมาที่ Layer นี้
      
     

    ย้ายการทำงานมาที่ Layer 2


     

  9. ไปที่ Filter –> Blur –> Gaussian Blur 


     
    แล้วปรับค่า Radius = 4.0 pixels ก็จะได้ดังภาพ
     

     

     

  10. ต่อไปต้องทำเงาให้หยดน้ำด้วย โดยทำการ Copy Layer2 ไปที่ Layer –>Duplicate Layer จะได้เลเยอร์ใหม่

    ให้ลากลงมาวางใต้ Layer 2

  11. จากนั้นทำการ คลิกที่ Layer ใหม่แล้วทำการเทสีลงไป ขั้นตอนเดียวกันกับข้อ 5.1 ควรจะเป็นสีเดียวกันกับที่ใช้ทำเงาด้านในของหยดน้ำ ยกเลิกการ Selection ไปที่ Select–>Deselect 
     

  12. แล้วทำการยกเลิกเส้น Selection โดยมาที่ Select –> Deselect 

  13. จากนั้นทำการ Blur โดยมาที่ Filter –> Blur –> Gaussian Blur แล้วปรับค่า Radius = 3.0 pixels แล้วลดค่า Opacity = 50 แล้วขยับเงาให้เฉียงหน่อย 

     

     


     

  14. จะเห็นว่า หยดน้ำที่ได้ยังไม่มีความสมจริงเท่าใดนักต้องเพิ่มแสงตกกระทบให้กับหยดน้ำ โดยสร้าง Layer ใหม่ให้อยู่บนสุด Layer–>Duplicate Layer(ดูรูปในข้อ 4) เมื่อได้ Layer ใหม่ขึ้นมาแล้ว หลังจากนั้นให้ทำการสร้างเส้น Selection ขึ้นมา ดูภาพประกอบในข้อ 2 ,3 

  15. แล้วทำการไล่เฉดสีสีขาวโปร่งใสโดยใช้อุปกรณ์ Gradient Tool
     

    เลือก สีขาว ไล่เฉดแนวตั้งในแนวตั้งตามภาพ 

    ลากจากจุด 1 สู่จุด 2 


     

     

  16. ปรับ ให้โปร่งแสงมากขึ้น ไปที่ Opacity ใส่ตัวเลขที่ 50 

    สามารถขยับ แสงตกกระทบได้ตามชอบใจเลยนะคะ แล้วอาจจะเพิ่มจำนวนหยดน้ำมาวางข้างๆ ได้ค่ะ เพื่อให้หยดน้ำมีหลายๆ หยด

ภาพผลลัพธ์ที่ได้


***แม้ว่าทางทีมงาน ReadyPlanet จะไม่สามารถ Support โปรแกรม Photoshop ให้ท่านได้ แต่บทความนี้ เป็นความตั้งใจของทีมงานฝ่าย Web Design ที่เขียนขึ้นมาเพื่อให้ท่านได้เป็นแนวทางในการศึกษาเพิ่มเติม จากโปรแกรม Photoshop เพื่อใช้ในการออกแบบ และตกแต่งภาพบนเว็บไซต์ให้ออกมาสวยงามเท่านั้น***

ขอบคุณแหล่งที่มา    อุฬาลักษณ์ ฮะค่อม
Web design Team
www.Readyplanet.com  

การวาดภาพล้อเลียนด้วยโปรแกรม Adobe Illustrator ขั้นที่1 ส่วนหัว

YouTube Preview Image

การวาดภาพล้อเลียนด้วยโปรแกรม Adobe Illustrator ขั้นที่1 ส่วนหัว

ขอบคุณแหล่งที่มา http://www.youtube.com/watch?v=kVehlknGdfo

ตรงนี้มีสาระ !!! แนะนำเครื่องมือของโปรแกรม Adobe Illustrator ซึ่งถ้า ใช้ไปบ่อยๆก็จะสามารถจำได้โดยที่ไม่ต้องมานั่งจดนั่งจำ.

แนะนำเครื่องมือของโปรแกรม Adobe Illustrator 

 

 

 

 

 

 

Selection tool เครื่องมือกลุ่มนี้ว่าด้วยเรื่องการเลือกวัตถุ ประกอบไปด้วย
 
Selection tool(ลูกศรสีดำ)ใช้เลือกวัตถุทั้งชิ้น
Direct-selection tool(ลูกศรสขาว)ใช้เลือก points หรือ path ของวัตถุ (กดคีย์ Alt)
Magic wand tool(ไม้เท้าวิเศษ)เป็นเครื่องมือใหม่ ใช้เลือกวัตถุที่มีสีเดียวกัน การใช้งานเหมือนใน Photoshop (กดคีย์ Alt และ Shift)
Lasso tool ใช้เลือกโดยการคลิกเมาส์ Drag การใช้งานเหมือนใน Photoshop (กดคีย์ Alt และ Shift)
   

 

Create tool เครื่องมือกลุ่มนี้ว่าด้วยการสร้าง objects ไม่ว่าจะเป็นเส้น รูปทรงต่างๆ และตัวหนังสือ
 
Pen tool สร้างเส้น parthอย่างแม่นยำ โดยการใช้แขน มีผลทำให้ object มีจุดน้อย-น้อยมาก ส่วนเครื่องมือย่อยจะเอาไว้ใช้ปรับแต่ง curved ไม่ว่าจะเป็นการเพิ่มจุด ลบจุด หักแขนของแกนเส้นสัมผัส (กดคีย์ Alt)
Type tool ใช้พิมตัวหนังสือ ข้อความต่างๆ ส่วนเครื่องมือย่อย ก็ง่ายๆตามรูป ใช้พิมพ์ตัวหนังสือให้อยู่ในกรอบบ้าง ทำตัวอักษรวิ่งตาม paths บ้าง ซึ่งผมจะไม่อธิบายมากเพราะ ไอคอนก็ง่ายต่อการจดจำอยู่แล่ว
Line segment tool อันนี้ไว้ลากเส้นตรง ในรายละเอียดของเครื่องมือย่อยก็ไม่มีอะไรมาก เช่นไว้ทำขดก้นหอย ทำ grid ของตารางหมากรุก grid แบบใยแมงมุม
Basic shape tool เอาไว้วาดรูปทรงพื้นฐาน 3-4-หลายเหลี่ยม และวงกลม shape รูปดาว แต่ที่เด่นที่สุดคือ flare tool ใช้สร้างเอฟเฟค lens-flare (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Paintbrush tool แปรงที่เอาไว้สร้างเส้น parth โดยการ drag เมาส์ลากอย่างอิสสระ สามารถใช้ brush แบบพิเศษ (กดคีย์ Alt)
Pencil tool จะคล้ายๆ paintbrush tool แต่จะมีเครื่องมือย่อยให้เรียกใช้ในการแก้ไขเส้น ซึ่งจะช่วยในการปรับแต่งแก้ไข และทำให้งานดูดี+เร็วขึ้น (กดคีย์ Alt)
   

 

Transform tool เครื่องมือกลุ่มนี้ใช้ในการปรับแต่งรูปทรงของวัตถุ ไม่ว่าจะเป็นหมุน เอียง บิด กลับด้าน ย่อ ขยาย นอกจากนี้ยังมีเอฟเฟคต่างๆด้วย
 
Rotate tool ใช้ในการหมุนวัตถุ โดยการกำหนดจุดหมุนก่อนแล้วจึงทำการหมุน ซึ่งสามารถกำหนดได้ว่าต้องการหมุนกี่องศา (กดคีย์ Alt)
Reflect tool ใช้ในการกลับด้านของวัตถุ (กดคีย์ Alt)
Twist tool ใช้ในการบิดวัตถุ โดยการกำหนดจุดก่อนแล้วจึงทำการบิด ซึ่งสามารถกำหนดได้ว่าต้องการบิดมากน้อย (กดคีย์ Alt)
Scale tool ปลับย่อขยายวัตถุ (กดคีย์ Alt และ Shift)
Shear tool ใช้เอียงวัตถุ (กดคีย์ Alt)
Reshape tool ใช้เพิ่มจุด และดึงยืดวัตถุ
The warp tool ใช้โน้มวัตถุให้บิดเบี้ยว (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Twirl tool ทำให้วัตถุบิดตามจุดที่กำหนด (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Pucker tool ดึงดูดจุดให้เข้าสู่จุดศูนย์กลาง (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Bloat tool ทำให้วัตถุแบออก (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Scallop tool ดึงวัตถุให้เข้าศูนย์กลางพร้อมกับสร้างรอยหยัก (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Crystallize tool ขยายวัตถุให้ออกจากศูนย์กลางพร้อมกับสร้างรอยหยัก (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Wrinkle tool สร้างคลื่นให้วัตถุ (กดคีย์ Alt หรือ Shift และ Alt+Shift)
Free transform tool ย่อ ขยาย หมุน เอียง วตถุ โดยอิสระ
   

 

Special tool เป็นเครื่องมือใหม่ที่จัดการเกี่ยวกะ Symbol และ graph
 
Symbol tool ใช้จัดการเกี่ยวกับ symbol ซึ่งมีเครื่องมือย่อยมากมาย แต่จะไม่ขอกล่าวถึง เพราะเครื่องมือแต่ละชิ้นมีไอคอนที่ง่ายต่อการเข้าใจอยู่แล้ว ขอให้ทดลองนำไปใช้เอง แล้วจะเข้าใจว่า tool แต่ละชิ้นใช้ทำอะไรได้บ้าง (กดคีย์ Alt)
Graph tool ใช้สร้าง graph ในรูปแบบต่างๆ ซึ่งง่ายต่อการเข้าใจ และจะไม่ขอกล่าวถึงเช่นกัน (กดคีย์ Alt หรือ Shift และ Alt+Shift)
   

 

Paint color tool เป็นกลุ่มเครื่องมือที่ใช้จัดการเรื่องของสี
 
Mesh tool เป็นเครื่องมือสีที่เจ๋งสุดขีด(แต่ควบคุมยากเหมือนกัน)โดยการสร้าง point และมีแกนในการควบคุม (กดคีย์ Alt และ Shift)
Gradient tool เครื่องมือไล่ระดับสี ซึ่งมีการไล่ระดับอยู่ด้วยกัน 2 แบบ คือ Linear และ Radial ใช้การลากจากจุดเริ่มต้น และ สิ้นสุดที่จุดปล่อยเมาส์ ในการควบคุมการไล่ระดับของสี (กดคีย์ Shift)
Eyedropper tool หลอดดูดสี ใช้ copy สีของวัตถุ สามารกำหนดได้ด้วยว่าจะ copy ลักษณะอย่างไร อะไรบ้าง (กดคีย์ Alt และ Alt+Shift)
Paint bucket tool ส่วนใหญ่จะใช้ควบคู่กับ eyedropper tool ใดยใช้เทสีลงบนวัตถุ (กดคีย์ Alt)
Measure tool เครื่องมือวัดขนาด (กดคีย์ Shift)
Blend tool เครื่องมือไล่ระดับการเปลี่ยนรูปร่างและสี สามารถควบคุมการไล่ระดับได้ 3 ชนิด
Auto trace tool ใช้ในการ trace จากภาพต้นฉบับที่เป็น bitmap ไปเป็น Vector ซึ่งเป็นเครื่องมืออำนวยความสะดวกสำหรับคนขี้เกียจโดยเฉพาะ
   

 

View tool กลุ่มเครื่องมือกลุ่มนี้จะเน้นที่มุมมองเป็นหลัก
 
Slice tool ใช้เกี่ยวกับการตัดแบ่งภาพออกเป็นส่วนๆ ใช้ในงานเวบ
Scissors tool ใช้คลิกบริเวณ outine ของวัตถุเพื่อกำหนดจุดตัด 2 จุดเพื่อแยกวัตถุออกจากกัน (กดคีย์ Alt)
Knife tool ใช้ drag ลากผ่านวัตถุเพื่ออแยกวัตถุออกจากกันเป็น 2 ส่วน โดยจะทำการ close paths ให้เราโดยอัตโนมัติ (กดคีย์ Alt)
Hand tool ใช้เลื่อนดูบริเวณพื้นที่การทำงานบนหน้าจอ (กดคีย์ Spacebar)
Page tool ใช้กำหนด print size
Zoom tool ใช้ย่อ และ ขยายพื้นที่การทำงาน (กดคีย์ Ctrl+Spacebar และ Ctrl+Alt+Spacebar)

 

ดูข้อมลูดีๆ เพิ่มมเติมได้ที่ http://www.webthaidd.com/illustrator/webthaidd_article_209_.html.

Top 10 Best Product in Home Kit 2017 Top 10 Best Product in Women Fashion 2017 Top 10 Best Product in Technology 2017 Top 10 Best Product in Car Accessories 2017