หัวข้อนี้จะเป็นการใช้เครื่องมือพื้นฐานของ Photoshop สร้างภาพโลโก้แบบง่ายๆ เพื่อนำไปใช้กับเว็บเพจ ลักษณะเด่นของภาพโลโก้ส่วนใหญ่ก็คือมักเป็นภาพลายเส้นที่มีรายละเอียดไม่ซับซ้อนนัก ประกอบด้วยชิ้นส่วนหลักไม่กี่ชิ้น และใช้สีเพียงไม่กี่สี เพียงแต่เราต้องออกแบบให้สะดุดตา จำได้ง่าย และมีเอกลักษณ์เฉพาะตัว ในตที่นี้สมมติว่าเราจะออกแบบโลโก้ของเว็บ WAISAI.NET (วัยใส.เน็ท) ซึ่งเกี่ยวกับเรื่องราวของวัยรุ่น ดังนั้นส่วนหนึ่งจะใช้ภาพโครงร่างของคนที่โปรแกรมมีมาให้และใช้สีสันที่ออกแนวสดใส

1.สร้างรูปภาพใหม่ให้มีความกว้าง 200 และสูง 92 พิกเซล สำหรับโหมดสีกำหนดเป็น RGB Color พื้นหลังเป็น White ส่วน Resolution เนื่องจากเป็นรูปนี้เป็นรูปที่จขะนำไปแสดงบนจอคอมพิวเตอร์ ดังนั้นกำหนดเท่ากับ 72 pixel/inch
2.เลือกคำสั่ง Window>Color เพื่อแสดงพาเล็ต Color(ถ้าจำเป็น) แล้วคลิกปุ่ม..เลือกโหมดสีเป็น HSB Sliders จากนั้นปรับค่า HSB เพื่อกำหนดสีที่จะใช้เป็นพื้นหลังของโลโก้(การใช้โหมด HSB จะช่วยให้เลือกสีที่เหมาะสมได้ง่ายกว่าโหมด RGB)
3.เลือกเครื่องมือ Paint Bucket แล้วคลิกเพื่อเติมสี foreground ลงบนรูป

4.เลือกเครื่องมือ Custom Shape

5.คลิกปุ่ม..บนออปชั่นบาร์เพื่อเปิดพาเล็ต Custom Shape คลิกปุ่ม..แล้วเลือก All เพื่อแสดงรูปทรงสำเร็จรูปทั้งหมดที่โปรแกรมมีมาให้ จากนั้นคลิก Ok เพื่อยืนยัน
6.คลิกเลือกรูปภาพจากพาเล็ต Custom Shape จากนั้นบนออปชั่นบาร์คลิกปุ่ม Shape Layers

7.ใช้พาเล็ต Color เลือกสีจะใช้กับรูปทรง

6.คลิกเลือกรูปภาพจากพาเล็ต Custom Shape จากนั้นบนออปชั่นบาร์คลิกปุ่ม Shape Layers

8.คลิกเมาส์บนรูปภาพจนได้รูปคนที่มีขนาดตามต้องการ รูปคนนี้จะอยู่บนเลเยอร์ใหม่ชื่อ Shape1

9.กลับด้านซ้าย-ขวาของรูปทรงโดยเลือกคำสั่ง Edit>Transform>Flip Horizontal แล้วใช้เครื่องมือ Move เพื่อปรับตำแหน่งตามต้องการ

10.ใส่รูปทรงเพิ่มเติม โดยเลือกเครื่องมือ Custom Shape แล้วคลิกเลือกรูปเส้นซิกแซกจากพาเล็ต Custom Shape
11.บนออปชั่นบาร์คลิกปุ่ม Shape layers และ Create new shape layer (เพื่อให้รูปทรงใหม่ถูกสร้างบนเลเยอร์ใหม่) แต่ยกเลิกปุ่ม.. (เพื่อให้การกำหนดสีและออปชั่นอื่นบนออปชั่นบาร์มีผลต่อรูปทรงที่กำลังจะสร้างแทนนที่จะเป็นการแก้ไขคุณสมบัติของรูปทรงเดิมที่กำลังเลือก)
12.ใช้พาเล็ต Color เลือกสีที่จะใช้กับรูปทรง
13.คลิกลากเมาส์บนรูปภาพ จนได้รูปทรงที่มีขนาดตามต้องการ รุปเส้นซิกแซกนี้จะอยู่บนเลเยอร์ใหม่ชื่อ Shape 2

14.บนพาเล็ต Layers ให้คลิกลากเลเยอร์ Shape 2 สลับลงมาอยู่ใต้ Shape 1 และใช้เครื่องมือ Move เพื่อปรับตำแหน่งตามต้องการ

15.คลิกเลือกเลเยอร์ Shape 1 จากนั้นเลือกเครื่องมือ Horizontal Type บนออปชั่นบาร์เลือกฟอนต์,สไตล์,ขนาด และสีตัวอักษรตามต้องการ (ในที่นี้ใช้สีขาว)
16.คลิกบนรูปภาพแล้วพิมพ์ข้อความ WAISAI.NET เมื่อเสร็จก็คลิกปุ่มเครื่องหมายถูก บนออปชั่นบาร์ แล้วใช้เครื่องมือ Move ปรับตำแหน่งตามต้องการ
17.ถ้าต้องการปรับแก้ลักษณะตัวอัษร ก็เลือกเครื่งมือ Horizontal Type อีก แล้วเปลี่ยนค่าบนออปชั่นบาร์ เช่น ทดลองเปลี่ยนฟอนต์และขนาดตัวอักษรจนกว่าจะพอใจ

18.ใส่รูปทรงเพิ่มอีกโดยทำข้อ 10-13 ซ้ำ แต่คราวนี้เลือกรูปทรงรูปดาว และเลือกสีเป็นสีเหลือง (ค่า HSBคือ H:60,S:50,B:100)จะได้รูปดาวอยู่บนเลเยอร์ใหม่ชื่อ Shape 3

19.บนพาเล็ต Layers คลิกลากเลเยอร์ Shape 3 ลงมาทับปุ่ม..จะได้เลเยอร์ใหม่ชื่อ Shape 3 copy จากนั้นใช้เครื่องมือ Move ย้ายรูปดาวแยกออกจากกัน

20.ย่อรูปดาวดวงที่ 2 นี้ลงเล็กน้อย โดยเลือกคำสั่ง Edit>Transform Path>Scale คลิกลากเมาส์ที่แฮนเดิลเพื่อปรับขนาด เสร็จแล้วกดคีย์ Enter ผลก็คือจะได้ภาพโลโก้สำหรับนำไปใช้กับเว็บดังรูป

21.เราอาจตกแต่งโลโก้นี้เพิ่มเติมอีกเล็กน้อย โดยคลิกเลือกเลเยอร์ Background แล้วคลิกปุ่ม..จะได้เลเยอร์ใหม่ชื่อ Layer 1

22.เลือกคำสั่ง Edit>Fill แล้วเติมด้วยpattern ตามที่สร้างไว้ในหัวข้อ "ลายริ้วในรูปภาพ"
23.ปรับค่า Opacity ของ Layer 1 ลดลงเหลือ 20% จะได้ผลลัพธ์ดังรูป

บันทึกรูปภาพสำหรับนำไปใช้ในเว็บ

1.เลือกคำสั่ง File>Save for Web

2.คลิกแท็บ 4-Up เพื่อทดลองปรับออปชั่นการบันทึกภาพหลายๆแบบ

3.คลิกบนรูปตัวอย่างผลลัพธ์รูปแรก

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

ได้รูปที่นำไปใช้ในเว็บแล้ว