วันอังคารที่ 31 พฤษภาคม พ.ศ. 2554

รูปแบบ และชนิดไฟล์ภาพสำหรับงานกราฟฟิก

Pixel (Picture + Element )
หน่วยพื้นฐานของภาพที่เป็นสี่เหลี่ยมเล็กๆที่บรรจุค่าสี(ลองซูมภาพของเราเข้าไป มากๆแล้วเราจะเห็นสี่เหลี่ยมเล็กๆ
ที่แต่ละสี่เหลี่ยมที่เล็กสุดจะเก็บสีไว้ 1 สีครับ
Resolution(ความละเอียดของภาพ)
คือจำนวน Pixel ต่อพื้นที่หนึ่งหน่วย เช่น
-จำนวนเม็ดสีต่อตารางนิ้ว
pixels  per inch : ppi 
dot per inch : dpi
-จำนวนเม็ดสีต่อตารางเซนติเมตร
 pixel per cm : ppi
72 ppi              : งาน Website
100-150 ppi    :งานทั่วไป
300-350 ppi    :งานออกแบบสิ่งพิมพ์ที่ต้องการความคมชัดในการแสดงผลสูง
รูปแบบของภาพ
1.ภาพแบบ บิตแมป(Bitmap) หรือ ราสเตอร์(Raster)
คือภาพที่เกิดจากหน่วยภาพเล็กๆมารวมกันจนเป็นภาพใหญ่คล้ายจิ๊กซอร์สามารถดูได้โดยการซูมภาพเข้าไป
กล่าวคือภาพเหล่านี้ยิ่งซูม(ขยาย)ยิ่งแตก จนดูไม่รู้เรื่อง เช่นภาพนามสกุล .JPEG, .TIFF,.GIF เป็นต้น
2.ภาพแบบเวคเตอร์(Vector)คือภาพที่เกิดจากเส้นโค้ง, เส้นตรง และคุณสมบัติสีของเส้นนั้นๆที่เกิดจากการคำนวณทางคณิตศาสตร์(ที่เรา
มองไม่เห็นด้วยตา)กล่าวคือ ที่จุดๆหนึ่งของภาพที่เราซูมเข้าไปมันจะเกิดจากการกำหนดคุณสมบัติไว้ว่าภาพ
เกิดจากเส้นตรง หรือเส้นโค้งที่เอียงกี่องศา เก็บค่ารหัสสีอะไรไว้ เมื่อเราซูมขยายภาพไม่ว่าจะขนาดเท่าไหร่ก็ตาม
ภาพมันจะไม่แตก(ไม่สูยเสียความละเอียดไป) เพราะการซูมภาพเป็นการคูณจำนวนเท่า ลงไปที่คุณสมบัติภาพนั่นเอง
ดังนั้น ถ้าเราแก้ไขภาพก็คือไปแก้ไขคุณสมบัติทางคณิตศาสตร์ ไม่ว่าจะย่อหรือขยายกี่ครั้งภาพแบบนี้จะยังคมชัดเท่าเดิม
ภาพVector เหล่านี้ได้แก่
-ภาพ .wmf (Clipart ที่เราไว้ตกแต่งใน Microsoft Office นั่นเอง)
-ภาพใน Adobe Illustrator, Macromedia Freehand
ชนิดของภาพสำหรับงานกราฟฟิก
1.JPEG(Joint Photograhic's Experts Group)

จุดเด่น
-สนับสนุนสีได้มากถึง 24 bit
-สามารถกำหนดคุณภาพ และตั้งค่าการบีบอัดไฟล์ภาพได้
-ใช้ใน Internet(Worl Wild Web) มีนามสกุล.jpg
-มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
-เรียกดูภาพได้ใน Graphic Browser ทุกตัว
จุดด้อย-ไม่สามารถทำให้พื้นที่ของภาพเป็นแบบโปร่งใสได้(Transparent/Opacity)
-หากกำหนดค่าการบบอัดไว้สูง เมื่อส่งภาพจาก Server(แม่ข่าย)--->Client(ลูกข่าย) จะทำให้การแสดงผลช้า
เพราะต้องเสียเวลาในการขยายไฟล์
2.TIFF(Tag Image File Format)มักใช้ในงานสิ่งพิมพ์-Desktop publishing, 3D application, Faxing, Medical Imaging Application
(ประสบการณ์ตรงของข้าพเจ้าคือ ภาพที่เราทำและตกแต่งในPhotoshop และ Microsoft PowerPoint ไม่ว่าจะเซฟมาเป็นนามสกุลอะไรก็ตาม ตอนส่งเข้าเครื่องพิมพ์ที่โรงพิมพ์ เขาจะแปลงไฟล์และส่งเข้าเครื่องในนามสกุล .TIFF เท่านั้น ดังนั้นถ้าท่านออกแบบสิ่งพิมพ์ใน Photoshop หรือ MicrosoftPowerPoint ขอให้เซฟงานเป็นนามสกุล .TIFF ไปเลยครับ)
โดยรูปแบบของ TIFF มีหลายประเภทคือ -Grayscale, Color Pallete, RGB full color
จุดเด่น-เป็นรูปแบบที่ทำให้ภาพแบบราสเตอร์หรือบิตแมป สามารถใช้งานร่วมกับ Appication ต่างๆรวมทั้งโปรแกรมจัดการภาพจากScaner
จุดด้อย
-ไฟล์ภาพขนาดใหญ่ เพราะต้องเก็บรายละเอียดความคมชัดไว้สูง
3.GIF(Graphics Interchange Format)
จุดเด่น
-เป็นที่นิยมมากที่สุดสำหรับภาพที่จะแสดงบน Web/Internet
-มีขนาดเล็กมาก
-สามารถทำพื้นให้เป็นแบบโปร่งใสได้(Transparent/Opacity)
-สามารถทำเป็นภาพเคลื่อนไหวบน WebPage ได้ โดยใช้เครื่องมือช่วยสร้างเช่น JAVA, Flash
-มีโปรแกรมสนับสนุนในการสร้างจำนวนมาก
-สามารถเรียกดูภาพได้ใน Graphic Browser ทุกตัว
จุดด้อย-แสงภาพได้เพียง 256 สีเท่านั้น ไม่เหมาะสำหรับการนำเสนอภาพถ่ายหรืองานที่ต้องการความคมชัดสูง
4.PNG(Portable Network Graphics)
จุดเด่น
-เอาคุณสมบัติของ(JPEG+GIF) มาใช้คือ สีมากกว่า 256สีและโปร่งใสได้(Transparent)
-PNG มีการบีบอัดข้อมูลโดยไม่เสียคุณภาพ
-ทำให้โปร่งใสได้(Transparency) และยังสามารถควบคุมองศาของความโปร่งใส(Opacity)ได้ด้วย
-เก็บบันทึกภาพด้วยสีจริง(True Color) ได้เช่นเดียวกับตารางสี(Pallete) และสีเทา(Grayscale)แบบ GIF
จุดด้อย
-ไม่สนับสนุนภาพเคลื่อนไหว เพราะไม่สามารถเก็บภาพหลายๆภาพไว้ด้วยกันได้

ที่มา :  http://www.oknation.net/blog/Photoshop-Tips/2008/10/10/entry-1

การสร้างหัวใจใสๆ

การสร้างหัวใจใสๆ
ขั้นตอนที่1.
ให้ทำการสร้างไฟล์ใหม่ขนาดใดก็ได้ตามที่เราต้องการ โดยมาที่คำสั่ง File --> New

ขั้นตอนที่2.
จากนั้นให้ทำการสร้าง Layer ใหม่ขึ้นมาโดยคลิ๊กไอค่อนรูปกระดาษตรง Layer
แล้วทำการเลือก Foreground & Background color ปรับระดับ สีแบบโทนๆ
เดียวต่างน้ำหนัก

ขั้นตอนที่3.

ให้ทำการใช้อุปกรณ์ Custom Shape tool ลักษณะรูปหัวใจ แล้วทำการ
แดรกเม้าส์โดยทำการกด Shift แล้วกางออก ก็จะได้ Shape
รูปหัวใจดังภาพ Layer ก็จะมี Paths เกิดขึ้นดังภาพ.









ขั้นตอนที่4.
ให้ทำการ Load Selection Layer Shape รูปหัวใจโดยกดปุ่ม Ctrl แล้วคลิ๊กเม้าส์ ก็จะเกิดเส้น
Selections ขึ้นมา จากนั้นให้ทำการปิดตา Layer Shape เสียแล้วทำการสร้าง Layer ใหม่
แล้วทำการไล่เฉดสีสองสี โดยใช้อุปกรณ์ Gradient tool แบบ
Foreground to Background color ในลักษณะเฉียง ก็จะได้ รูปหัวใจที่มีมิติเฉดสีสองสีดังภาพ.




ขั้นตอนที่5.
หลังจากนั้นให้ทำการหด Selection โดยมาที่คำสั่ง Select --> Modify --> Contract = 1 Pixels
แล้วให้ทำการ สร้าง Layer ใหม่ให้อยู่บนสุด แล้วทำการเปลี่ยน Foreground ให้เป็นสีขาว
จากนั้นให้ไล่เฉดแบบ Foreground to Transparent ในลักษณะ ลงล่างครึ่งหนึ่ง
จากนั้นให้ทำการยกเลิก Selection โดยมาที่ Select -->Desselect ก็จะได้ดั่งภาพตัวอย่าง.




ขั้นตอนที่6.
หลังจากนั้นให้ทำการ Perspective Layer ไล่เฉดสีขาวแบบโปร่ง (Layer2)
โดยมาที่คำสั่ง Edit ---> transform --> Perspective แล้วทำการหดเข้าดังภาพ
จากนั้นให้ทำการลดค่า Opacity Layer = 50% ก็จะได้หัวใจใสๆ ดังภาพสำเร็จ.







http://www.comcn.in.th/elearnning/sutatip/photoshop36.html

สร้างลูกแก้วแบบง่ายๆ








สร้างสายรุ้งด้วย Polar Coordinates

สร้างสายรุ้งด้วย Polar Coordinates บทความนี้ขอต้อนรับหน้าฝนด้วยสายรุ้ง ขั้นตอนการทำไม่ยาก มาลองทำกันดู

ขั้นตอนการทำ

1. เตรียมภาพที่เราจะนำสายรุ้งมาใส่หลังจากที่ทำเสร็จ





2. หลังจากนั้นสร้างเอกสารขนาด 600 x 600 px (ให้ชิ้นงนาเป็นจตุรัสนะครับ) แล้วใช้เครื่องมือ Rectangular Marquee Tool สร้าง Selection ตรงกลางของภาพ



3. เทสี Gradient สีรุ้ง แล้วยกเลิกเส้น Selection







4. จากนั้นใส่ Filter -> Distort -> Polar Coordinates จะได้ผลดังภาพ ถ้าผลที่ได้มีขนาดเล็กให้เราใช้เครื่องมือ Free Transform (Ctrl + T)



5. หลังจากนั้นให้ Copy สายรุ้งไปใส่ภาพที่เราเตรียมไว้ จัดตำแหน่งภาพให้ดี ดูแล้วให้เข้ากับภาพ



6. ใช้เครื่องมือ Layer -> Add Layer Mask -> Reveal All จากนั้นนำสี Gradient ขาว-ดำ มาระบายลงไปยังส่วนที่ Mask



7. หลังจากนั้นคลิกที่สายรุ้งใน Layer อีกครั้งใส่ Filter -> Blur -> Gaussian Blur ใส่ค่าประมาณ 8 เืพื่อปรับให้สายรุ้ง Blur

ที่มา :  http://www.webthaidd.com/

วันจันทร์ที่ 30 พฤษภาคม พ.ศ. 2554

สร้างลูกแก้วง่ายๆ

สร้างลูกแก้วง่ายๆ

สร้างลายกราฟฟิคด้วย Selection

1. เมนู File > New หรือ  กด Ctrl+N เพื่อสร้างหน้ากระดาษใหม่ขึ้นมา แล้วตั้งค่าดังรูป








2. เลือกเครื่องมือ Marquee (M)

Marquee Tool (M)
 

3. ทำการสร้าง Selection ดังรูป


tip photoshop
สร้าง Selection เป็นรูปแท่งสี่เหลี่ยมแนวตั้งจากทางด้านซ้าย




4. กด Alt+Del เพื่อเติมสีของ Foreground (ในที่นี้จะแสดงสีดำเนื่องจากสีที่เลือกใน Foreground คือ สีดำ)


สอน photoshop

Tip: ถ้ามี Selection อยู่แล้วกด Alt+Del จะเป็นการลงสีของ Background ลงไปใน Selection แทน


5. กด V เพื่อใช้เครื่องมือ Move Tool กด Alt ค้างไว้และลากเมาส์จะเป็นการ Copy สิ่งที่ Selection อยู่ ทำการลากเมาส์มาทางด้านขวาเล็กน้อยเพื่อ Copy สีดำที่ทำไว้ ลักษณะดังรูป
 
เรียน photoshop
Tip: ควรจำคีย์ลัดที่ใช้งานเสมอ เช่น Move Tool (V) และเมื่อใช้ Move Tool อยู่ ทำการกด Alt ค้างและลากเมาส์ จะเป็นการ Copy สิ่งที่ Selection อยู่


6. ทำการ Copy แท่งสีดำไปเรื่อยๆจนเต็มหน้ากระดาษ ดังรูป

photoshop มือใหม่
Tip: ควรให้ช่องสุดท้ายเป็นสีขาวเพราะเส้นที่ออกมาจะดูสวยกว่า


7. สังเกตุด้านบนสุดของหน้า Photoshop จะมีเมนูอยู่หลายอย่าง
     แต่ให้เราเลือก Filter > Distort > Polar Coordinetes จะได้ผล ดังรูป และกด OK

photoshop




8. เสร็จเรียบร้อย สำหรับลายแฉกๆ
background
ลายแฉกๆ แบบหมูๆ ด้วย Photoshop

ภาพขอบฟุ้ง

ภาพขอบฟุ้ง คือ ภาพที่นำมาปรับแต่ง โดยการใส่ลักษณะ ขอบภาพแบบ Soft ทำให้ขอบภาพมีลักษณะฟุ้ง เพื่อลดความกระด้าง ของขอบภาพ ทำให้ภาพดูนุ่มนวลขึ้น ซึ่งมีวิธีการทำ ดังนี้
 
          1.  เปิดไฟล์ภาพที่ต้องการทำให้มีลักษณะขอบฟุ้ง
 
 
 
 
 
          2.  เลือกเครื่องมือ Marquee ส่วนนี้จะมีเครื่องมือให้เลือกหลายแบบ ได้แก่ เครื่องมือเลือกภาพแบบสี่เหลี่ยม หรือเครื่องมือเลือกภาพแบบวงกลม / วงรี หากสมาชิกต้องการให้ภาพเป็นลักษณะใด ให้เลือกเครื่องมือนั้น ๆ นะคะ

 
 

          3.  จากนั้นทำการลากเมาส์ลงบนภาพ เพื่อให้ได้ระยะเส้นประที่ต้องการค่ะ
 
 

          4.  เลือกคำสั่ง Select, Feather ใส่ตัวเลขค่าความฟุ้งของภาพ ซึ่งค่ายิ่งมาก ขอบของภาพจะฟุ้งมากขึ้น จากนั้นกดปุ่ม OK
 
 
 
 
 

          5.  ทำการตัดขอบนอกของภาพ เลือกคำสั่ง -->Select -->Inverse แล้วกดปุ่ม โปรแกรมจะตัดพื้นที่รอบนอก Selection ออก และแสดงขอบแบบฟุ้งตามที่ต้องการแล้วล่ะค่ะ
 
 
 
 

เทคนิคการทำพื้นทรายแบบง่าย ๆ

เทคนิคการทำพื้นทรายแบบง่าย ๆ
เทคนิคการทำภาพพื้นทราย ที่เราสามารถจะนำเทคนิคนี้ไปใช้ต่อยอด กับการทำภาพประกอบตกแต่งหน้าเว็บไซต์ของเราได้ เพื่อความสวยงามของหน้าเว็บไซต์ครับ
เรามาเริ่มกันเลยดีกว่าครับ
        1. ทำการสร้างไฟล์ใหม่โดยการเลือก File --> New
               
        2. ทำการใส่สีที่ Foreground และ Background
               
        3. ที่ Foreground เลือกค่าสีเป็น 330000 ตามภาพ
        4. ที่ Background เลือกค่าสีเป็น 996600 ตามภาพ
        5. ไปที่เมนู Filter --> Render --> Clouds
               
        6. จะได้ดังภาพ
        7. ไปที่เมนู Filter --> Noise --> Add Noise
        8. คำการเลือกที่ Monochromatic และปรับค่าตามความเหมาะสม
               
        9. เราก็จะได้ภาพพื้นทรายที่เราเป็นผู้ทำขึ้นมาเองครับ
        10. การสร้างภาพพื้นทรายยังมีวิธีง่ายๆ อีก 1 วิธี ไปที่เมนู Paint Bucket เลือก Fill เป็น Pattern
               
        11. คลิกที่เครื่องหมายลูกศร เลือก Rock Patterm แล้วทำการเลือก Pattern ตามภาพครับ
        12. ใช้เครื่องมือ Paint Bucket ทำการเทสีลงบนพื้นงานครับ