งานดีไซต์ในปัจจุบัน มักจะเน้นไปที่ฟังชั่นการใช้งาน มากว่าเน้นดีไซน์ที่ดูหรู หรือเน้นมิติ อย่างยุคก่อนๆ ในปีนี้งานดีไซน์จะเป็นร่วมสมัย เน้นสีสันสดใส ไม่เน้นรายละเอียดเน้นความเรียบง่าย งานดีไซน์สไตล์นี้เรียกว่า Flat design

Flat design ก็คือ การออกแบบทุกอย่างให้ดูแบนราบ โดยตัดส่วนที่เป็นรายเอียดเล็กน้อยๆ  ที่จะทำให้ดูมีมิติออกไป เช่น แสงและเงา การใส่ Texture การไล่สี และเอฟเฟคต่างๆ ที่ทำให้วัตถุนั้นลอยออกมา แต่ไม่ใช่แค่นั้น การออกแบบแนว Flat Design ยังมุ่งโฟกัสไปที่โทนสีที่ใช้งานจะต้องให้ความรู้สึกสบายๆ ง่ายๆ ซึ่งจะเห็นได้ตามหน้าเว็บ หรือหน้าแอพพลิเคชั่นต่างๆ ซึ่งสีที่นิยมใช้ก็มีไม่กี่สี อย่างเช่น ตัวอย่างที่จะแนะนำต่อไปนี้เป็น เฉดสี่ที่พบเห็นได้บ่อยในงานดีไซน์สไตล์ Flat ดังนี้

>FREE DOWNLOAD .PSD FILE <

ที่มา : http://leoaw.deviantart.com/art/Colors-in-Flat-Design-368574314

หลายคนคงอึดอัดใจและจะไม่ทน กับการใช้งาน Photoshop ที่ไม่สามารถกด Ctrl Z เพื่อที่จะย้อนกลับไปแก้ไขในขั้นตอนก่อนหน้าได้ ซึ่งจริงๆ แล้วก็สามารถกด Ctrl+Atl+Z (ค่า Default) เพื่อนย้อนกลับไปได้ และมั่นใจว่า เกิน 90% คงไม่มีใครอยากจะกด 3 ปุ่มแน่นอน ส่วนใหญ่ค่อนข้างชินกับ Ctrl+Z จากโปรแกรมอื่นๆ ซึ่งวิธีการนั้นก็ง่ายมากเพียงแค่สองขั้นตอน

ขั้นตอนที่ 1 เข้าไปที่ Edit > Keyboard shortcut เพื่อเข้าไปแก้คีย์ลัดของเรา ค่าเริ่มต้นจะเป็นดังภาพด้านล่างนี้ครับ

ขึ้นตอนที่ 2 ให้ทำการลบ Undo/Redo ออกไปซะ แล้วก็เปลี่ยนมาใส่แทนที่ Step Backward เสร็จแล้ว!!!

ภาพประกอบจาก
http://cdn.imore.com/sites/imore.com/files/field/image/2012/08/retina_mac_photoshop_hero.jpg
http://www.techillustrationarts.com/photoshop-tutorials/18/

สวัสดีวันอาทิตย์ วันหยุดพักผ่อนอยู่บ้าน เบื่อๆ มาหาอะไรทำสนุกๆ กันดีกว่าสำหรับวันนี้ขอเสนอ “วิธีการทำภาพ wallpaper มือถือคู่รัก” ที่ทำง๊ายง่าย (ไม่รู้จะอธิบายยังไงว่าง่ายสุดๆ) เหตุผลที่เลือกทำ Tutorial นี้สาเหตุเนื่องมาจากแนวโน้มการใช้ Smart phone ของคนไทยมีอัตราสูงขึ้นอย่างต่อเนื่อง และกว่า 20% ของผู้ใช้ smart phone ที่เป็นคู่รัก มักจะใช้มือถือยี่ห้อเดียวกัน รุ่นเดียวกัน จึงอยากนำเสนอวิธีการนี้นำไปใช้กับ smart phone ได้ทุกรุ่น แต่แนะนำว่า ควรมีขนาดใกล้เคียงกัน ซึ่งสามารถดู สัดส่วนความละเอียด หน้าจอของแต่ละรุ่นยอดฮิต ได้ด้านล่างนี้เลยครับ (มือถือบาง OS อาจจะมี Application รองรับ แต่อีกหลายรุ่น ยังไม่มี ก็สามารถนำวิธีนี้ไปใช้ได้ครับ)

วิธีการทำ

1. เลือกภาพคู่รัก ที่คิดว่าโดนใจที่สุด ในตัวอย่างขออนุญาตใช้ภาพประกอบ จากซีรียส์ที่ผมชื่นชอบเลยละกันครับ

ที่มา (http://images6.fanpop.com/)

2. เข้าโปรแกรม Photoshop และทำการสร้างชิ้นงานใหม่ขึ้นมา ตั้งค่าตามขนาดหน้าจอมือถือรุ่นนของคุณได้เลย ที่เลือกมาเป็นตัวอย่างคือ iPhone5 ครับ
3. ทำการลากรูปภาพที่เลือกไว้ในขั้นตอนที่ 1 มาใส่ในชิ้นงานใหม่ ให้เราจินตนาการว่านี่คือ หน้าจอของมือถือ 1 เครื่อง ปรับตำแหน่งให้พอดี
4. ทำการเพิ่มพื้นที่การทำงาน โดยเข้าไปที่ image>canvas size (คียลัด ctrl+alt+c) จะแสดงหน้าจอ ให้เพิ่มพื้นที่การทำงานของภาพ ให้เพิ่ม การทำงานไปทางด้านขวามือ บวกความกว้าง ไปอีก 1 เท่า นั่นหายความว่า หากหน้าจอ 1 เครื่อง มีขนาด 640 พื้นที่การทำงานนี้จะมีขนาด 1280 นั่นเอง ภาพที่ถูกครอบไว้ก็จะเพิ่มมา
5. จากนั้นให้ทำการตัดแยกทั้งสองภาพออกจากกัน โดยใช้เครื่องมือ selection tool แต่ให้ fixed ขนาดของหน้าจอมือถือไว้ด้วย

6. จากนั้นให้ทำการคัดลอก ภาพมาใส่ในหน้าใหม่ โดยวิธีการง่ายๆ กด Ctr+shift+C และ Ctrl+N เพิ่มพื้นที่การทำงานใหม่ และสุดท้าย Ctrl+V เพื่อวางภาพที่คัดลอกมา ให้ทำเหมือนกันทั้งสองภาพ จากนั้น ก็ทำการ บันทึกและนำไปใช้งานได้แล้ว ครับ

หลังจากที่ห่างหายกันไปพักใหญ่ วันนี้กลับมาพร้อมกับเทคนิค Photoshop แบบง่ายๆ เป็นการเปลี่ยนภาพที่แสนจะธรรมดา ให้กลายเป็นภาพ 3 มิติน่าสนใจ ทำได้ง่ายๆ เพียงแค่ ดาวน์โหลด Action เหล่านี้มาใช้งาน ก่อนที่จะไปดาวน์โหลดเรามารู้จัก ภาพ 3 มิติกันก่อนว่าจะมีที่มาที่ไปอย่างไร
ภาพ 3D คืออะไร???
3D โดย D ย่อมาจาก Dimension ที่แปลว่า มิตินั่นเอง ประกอบด้วย ความกว้าง ความยาว และความลึก โดยหลักการที่ทำให้เกิดภาพ 3 มิติ คือ เกิดจากภาพ 2 ภาพเหลื่อมกัน (Anaglyph image) ซ้ายขวา ซึ่งเมื่อภาพสองภาพซ้อนทับกันทำให้ได้มุมมองแบบสามมิติด้วยวิธีการ Anaglyph โดยใช้ตัวกรองสีแดง (ตาซ้าย) และฟ้า (ตาขวา) โดยวิธีการดูควรใส่แว่นสามมิติแดง ฟ้า เพื่อดูภาพนี้ในมุมมอง 3 มิติชัดเจนยิ่งขึ้น เมื่อพอจะทราบหลักการแล้วก็ตามไปดาวน์โหลดกันได้เลยครับผม รวมไว้กว่า 10 แบบให้เลือก

<Link Download>

<Link Download>

<Link Download>

<Link Download>

<Link Download>

<Link Download>

<Link Download>

<Link Download>

<Link Download>

ที่มา http://www.inspirewetrust.com
http://it.wikipedia.org/wiki/Anaglifo

มีใครบ้างครับ? ที่ชอบโหลดของฟรีมาใช้ ขอสารภาพเลยว่าผมก็เป็นคนหนึ่งที่ชอบหาโหลดพวกไฟล์ .PSD มาใช้ แต่ก็ไม่วายที่จะเปิดดูไฟล์ source ที่โหลดมาดูว่าเขาทำวิธีไหน มีเลเยอร์อะไรบ้าง ใช้เอฟเฟคอะไรบ้างก็จะทำให้เราได้เรียนรู้ไปด้วยในตัว ซึ่ง Tutorial นี้ก็เป็นอีกหนึ่งผลพวงจากการโหลดของฟรีมาใช้ครับ เป็นการทำ แว่นขยาย ด้วย Photoshop ครับ

ขั้นตอนที่ 1 เปิดรูปภาพที่ต้องการ ทำแว่นขยายขึ้นมาครับ

ขึ้นตอนที่ 2 ทำการสรร้างวงกลมขึ้นมา

ขึ้นตอนที่ 3 ใส่ Effect Stroke แล้วตั้งค่าตามด้านบนเลยครับ /stroke สีขาว #fff /size 5 px /Opacity 5%

ขั้นตอนที่ 4 ใส่ Inner Shadows  ตั้งค่าตามด้านบนเลยครับ

ขั้นตอนที่ 5 ใส่ Outer Glow ตั้งค่า Opacity 12% เลือกสีเป็น สีดำ #000

ขึ้นตอนที่ 6 เอฟเฟคสุดท้ายให้ใส่ Drop Shadow เข้าไป ลด Opacity ลงหน่อย 83%

ผลลัพท์ ก็จะได้ดังรูปด้านบนนี้ครับ

จากนั้นให้ทำการ Copy layer ที่ต้องการใส่เป็นภาพขยายในแว่นขยาย และนำไปไว้ด้านบนเลยเยอร์วงกลม
แล้วทำการ Create Clipping Mask ภาพนั้น โดยคลิ๊กขวาที่ Layer ภาพนั้น เลือก Create Clipping Mask  ภาพก็จะเข้าไปอยู่ด้านในวงกลมสุดท้ายคือการขยายภาพข้างใน คลิ๊ก Ctrl+T แล้วก็ทำการขยายภาพนั้นได้ทันที เสร็จจ้า….

***หมายเหตุ Create Clipping Mask ดูได้จากบทความ Clipping Mask ทำรูปภาพอยู่ในตัวหนังสือแบบง่ายๆ ด้วย Photoshop
การขยายภาพไม่ให้แตก ต้องเปลี่ยนภาพให้เป็น Smart Object ก่อน

สำหรับคนที่ออกแบบ ui การพรีเซนต์ผลงานให้ออกมาสวยงามและดูดี Mockup ถือว่าเป็นสิ่งสำคัญที่ทำให้ผู้ใช้ หรือลูกค้าได้เห็นงานของเราบนอุปกรณ์ต่างๆ ประกอบการตัดสินใจ ก่อนที่จะพัฒนาให้ใช้งานได้จริง ซึ่งตามเว็บฝรั่ง ก็มีให้โหลดไฟล์ psd มาใช้งานกันฟรีๆ ผมก็เลยลองโหลดมาลองใช้และก็คิดว่า ทำไว้ใช้งานเองคงไม่ยาก ซึ่งเราสามารถนำไปประยุกต์กับอุปกรณ์ต่างๆ ตามที่เราต้องการได้ เช่น สมาร์ทโฟน แทบเล็ต แลปท๊อป หรือ PC
สิ่งที่เราจะต้องเตรียมคือไฟล์ภาพต้นฉบับ ที่เราถ่ายเอง อาจจะต้องเน้นความคมชัดกันหน่อย ทำการปรับแสดงปรับสีให้ได้ตามต้องการก่อนที่จะนำไปดีไซน์ต่อใน Photoshop

ที่มาภาพ : techcrunch.com

ขั้นตอนที่ 1 เปิดภาพที่เราต้องการ

ขั้นตอนที่ 2 ใช้เครื่องมือ rectangle tool สร้างสี่เหลี่ยมขึ้นมา ขั้นตอนนี้สำคัญ เพราะเราจะสร้างขึ้นมาเองลอยๆ ไม่ได้ เพราะจะต้องอ้างอิงจาก Resolution ของหน้าจออุปกรณ์ต่างๆ เพื่อให้ได้สัดส่วนที่แน่นอน อย่างที่ผมเลือกมา เป็น iphone5s Resolution จะอยู่ที่ 640 x 1136px

ขั้นตอนที่ 3 ไปที่ layer panel ให้เปลี่ยนสี่เหลี่ยมนั้น เป็น smart object โดยคลิ๊กขวาที่ layer > convert to smart object เพื่อความเนียนก็ใส่ เอฟเฟค เพิ่มได้ inner shadows เพิ่มแสงต่างๆ

ขั้นตอนที่ 4 ปรับสี่เหลี่ยมให้เข้ากับภาพต้นฉบับของเรา เทคนิคง่ายๆ เลย คลิ๊กที่ layer สี่เหลี่ยม แล้วกด Ctrl+T แล้วก็ ลากมุมให้กับจอทีละมุม (ตอนลากกด Ctrl ค้างไว้ด้วยนะ)

ขั้นตอนสุดท้าย เปลี่ยนรูปสีเหลี่ยมให้เป็นรูป ui ของเรา ง่ายๆ คือ ดับเบิลคลิ๊กที่เลเยอร์ สี่หลี่ยมนั้นเลย จากนั้น คลิ๊ก OK มันจะเปิด ไฟล์ใหม่มาให้ เราก็นำรูปของเรามาใส่ได้เลย กด save หนึ่งที กลับมาดูที่ไฟล์ต้นฉบับ แค่นี้ก็เสร็จแล้ว

Adobe Photoshop ถือว่าเป็นหนึ่งในโปรแกรมที่มีความสามารถในการจัดการแก้ไขและตกแต่งรูปภาพ ที่ได้รับความนิยมมาก ๆ เพราะด้วยประสิทธิภาพและการทำงานได้อย่างไม่มีที่สิ้นสุดด้านการออกแบบทำให้ Adobe ต้องคอยพัฒนาและออกเวอร์ชั่นใหม่ ๆ ออกมาเพื่อให้ตอบสนองการใช้งานของผู้ใช้ ซึ่งแม้ว่าจะออกมาหลายเวอร์ชั่นแล้ว แต่ก็ยังคงสร้างความคุ้นชินให้กับผู้ใช้ได้ดีเพราะว่า User interface ที่ค่อนข้างคงเดิมเรียกได้ว่าแทบจะไม่แตกต่างกันเลย เช่นตำแหน่งของเครื่องมือ หรือไอคอนตา่ง ๆ ก็คล้าย ๆ กัน แต่ลองมาดูกันว่าจะเป็นอย่างไรถ้าสมมุติว่าในอนาคต Photoshop ได้ปรับปรุงหน้าตาโปรแกรมใหม่แบบยกแผง จนแทบไม่มีเค้าเดิมเลย เหมือนผลงานของ Aurélien Salomon UX/Ui Designer  ชาวแคนนาดา ที่จู่ๆ ก็นึกสนุกลุกขึ้นมา Redisign คอนเซปหน้าตาโปรแกรม Photoshop ใหม่ให้เปลี่ยนไปจากเดิมแบบมากๆ ดู Flat ยิ่งขึ้นแถมยังดูสะอาดตาอีกด้วย ซึ่งส่วนตัวค่อนข้างชอบไอเดียนะครับ ดูสบายตาดี แต่ถ้าให้ใช้จริงๆ ก็คงต้องมาเริ่มต้นกันใหม่เลยทีเดียว แล้วเพื่อนๆ หละครับคิดว่ายังไงกันบ้าง?

ที่มา : https://dribbble.com/shots/1715880-Photoshop-redesign/attachments/274705

ในวงการนักถ่ายภาพก็คงจะรู้จักกันดีกับการถ่ายภาพสไตล์ Double exposure หรือบางทีก็จะเรียกว่า Multiple Exposure คือเป็นการถ่ายภาพซ้อนกันทำให้ภาพดูมีสไตล์ที่ไม่ซ้ำใคร ซึ่งกล้องดิจิตอลบางรุ่นก็มีโหมด Double exposure อยู่แล้ว แต่ก็น้อยคนที่ถ่ายภาพสไตล์นี้ด้วยกล้อง เพราะเนื่องจากว่า เราไม่สามารถที่จะกำหนดตำแหน่งของวัตถุที่เราต้องการได้ 100% หลายคนจึงหันมาใช้โปรแกรมแต่งภาพ เพราะสามารถกำหนดได้อย่างชัดเจน อย่างเช่นตัวอย่างที่จะนำมาให้ดูวันนี้ เป็นการแต่งภาพสไตล์ Double exposure ด้วยการนำภาพ Portrait และ Lanscape มาซ้อนทับกันด้วยโปรแกรม Photoshop จะสวยงามแค่ไหน ลองมาดูกัน พร้อมกับ วิดิโอ Tutorial ด้านล่างมาให้ลองทำตามกันดูเล่นๆ ครับ

ภาพของผมเองครับ

 สามารถดูวิธีการทำได้ที่บทความ วิธีการแต่งภาพสไตล์ Double exposure ภาพซ้อนภาพ

 นี่เป็นลิงค์วิดิโอ จาก Youtube Chanal ของ Photoshop Tutorials by Howard Pinsky

ที่มากจาก :  Pinterest.com

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

ขั้นตอนที่ 1 เปิดภาพ Portrait ที่ต้องการจะใช้เป็นภาพต้นแบบขึ้นมา และเริ่มต้นตัดภาพ โดยใช้ เครื่องมือ Pen tool เดินเส้น Path จนรอบรูปของเรา

ขั้นตอนที่ 2 ให้คลิก ขวาที่บนเส้น Path แล้วเลือก Make selection และปรับค่า feather Radius 0.5 ตามภาพด้านบน

ขั้นตอนที่ 3 จากนั้นให้ไปที่ Select>Refine Edge เพื่อปรับความคมชัดของขอบภาพที่ตัด หรือส่วนที่เป็นเส้นผม โดยใช้พู่กัน ลากๆ ไปบริเวณผม จากนั้น เลือก Output To เป็น Selection ด้วย แล้วกด OK

ขั้นตอนที่ 3 คัดลอก Layer ของภาพที่ไดคัดขอบขึ้นมา (Ctrl+J) จากนั้นก็เลือกภาพพื้นหลังที่ต้องการจะใช้ซ้อนไปในภาพหลัก แล้วนำไปไว้ด้านบนสุดโหลดภาพได้ฟรีที่ Unsplash

ขั้นตอนที่ 5 สร้าง Layer สีขาวขึ้นมาอันนึง นำไปไว้ด้านล่าง จากนั้นให้ คลิก Ctrl ค้างไว้ แล้วคลิ๊กเลือกที่เลเยอร์ รูปคน เพื่อทำการ Copy Mask จากนั้นคลิ๊กที่ภาพวิว และ Add Layer Mask (ไอคอนขวามือติดกับ fx) ภาพวิวก็จะมี Mask ที่เป็นรูปคนดังภาพด้านบน

ขั้นตอนที่ 6 จากนั้น Copy Layer คนอีกครั้งนึงแล้วนำไปบนสุด จากนั้นให้ไปที่ Image>Adjustment Levels เพื่อปรับ Levels ให้ภาพดูมืดๆ หน่อย จากนั้นก็ปรับ Blending Mode ให้เป็น Screen

เพียงเท่านี้ ก็ได้ ภาพสไตล์ Double exposure
หากต้องการลบส่วนที่ไม่ต้องการ ให้ Add layer Mask แล้วก็ใช้ยางลบๆ ในส่วนที่ไม่ต้องการออก โดยใช้สี Foreground ที่เป็นสีขาว

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

วิธีทำแบบง่ายๆ
1. หาอุปกรณ์แข็งแรง สามารถรองรับน้ำหนักร่างกายได้ แต่ไม่ใหญ่มาก เช่น เก้าอี้ หรือโต๊ะ
2. ใช้กล้องถ่ายภาพตัวแบบลอยอยู่บนเก้าอี้ หรือวัตถุที่รองรับ (ภาพที่ 1)
3. ถ่ายภาพเฉพาะ Background ที่ว่างเปล่า ระวังอย่าให้แสงเปลี่ยนมาก ต้องทำด้วยความรวดเร็วต่อเนื่อง (ภาพที่ 2)
4. นำภาพทั้งสองเข้าไปซ้อนกันใน Photoshop แล้วทำการลบวัตถุที่รองรับตัวแบบออกทั้งหมด

ไม่ยากเลยใช่ไหมครับ ง่ายแบบนี้ต้องลองไปทำดูแล้วหละครับ