http://devisefunction.com/2010/02/16/beautiful-music-streaming-website-design-in-photoshop/

คลิกที่รูปเพื่อดู ขนาดเต็มผลสุดท้าย .

คุณรู้หรือไม่คุณสามารถลงทะเบียนของคุณ ชื่อโดเมน รับเว็บโฮสติ้งและแม้กระทั่งค้นหาซอฟต์แวร์อีคอมเมิร์ซที่ Network Solutions? ไปกับการแสดงชื่อที่คุณสามารถไว้วางใจเมื่อคุณพร้อมที่จะออนไลน์ของคุณเริ่มต้น

ช่วยให้การเริ่มต้น

1 สิ่งแรกที่เราต้องการจะทำคือการสร้างเอกสารใหม่ที่มีขนาดของ 1020 × 1180

2 เริ่มต้นจากด้านบนเราต้องการเริ่มต้นด้วยส่วนหัวของเรา ใช้ Rectangle Marquee ของเครื่องมือให้เลือกลักษณะต่อไปนี้และกรอกด้วย # 000000

3 ทำให้มันดำก็จะน่าเบื่อดังนั้นขั้นตอนต่อไปคือการเพิ่มตัวเลือกการผสมบาง เมื่อต้องการทำเช่นนั้นให้ไปที่ชั้นของคุณในชุดชั้นและคลิกขวาและเลือกตัวเลือกผสมจากเมนูแบบเลื่อนลง แทรกดังต่อไปนี้

4 สำหรับการนำของเราเราต้องการที่จะให้มันดู"ฟอง"ที่ด้านล่าง เพื่อให้บรรลุนี้มีวิธีการที่แตกต่างกันไม่กี่ของการทำมันมีและวิธีที่ฉันจะแสดงให้คุณง่ายมาก การใช้รี Marquee ของเครื่องมือให้วงกลมง่ายๆดังต่อไปนี้และกรอกด้วย # 000000

5 ตอนนี้สิ่งที่เราต้องทำคือการซ้ำชั้นนี้โดยการเลือกชั้นของคุณในชุดชั้นและกด CTRL + J (Command + J) เพลสชั้นที่ซ้ำกันของคุณในลักษณะที่คล้ายกันดังต่อไปนี้ :

6 ชั้นผสานของคุณและให้ทำซ้ำขั้นตอนนี้จนกว่าคุณจะได้รับสิ่งที่มีลักษณะเช่นนี้จะข้ามส่วนหัวของคุณ :

7 ใช้ Rectangle Marquee ของคุณให้สี่เหลี่ยมผืนผ้าลักษณะต่อไปนี้และกรอกด้วย # 000000 บนชั้นของตัวเอง

8 ผสาน"ฟอง"ของคุณชั้นและชั้นสี่เหลี่ยมของคุณที่สร้างขึ้นใหม่รวมกันแล้วต่ำกว่าชั้นของคุณความทึบประมาณ 80% และแทรกตัวเลือกการผสมต่อไปนี้ลงบนชั้นของคุณ

9 สำหรับโลโก้ที่ผมใช้ ก้อนอักษร และสำหรับไอคอนดนตรี, I ดาวน์โหลด ชุดไอคอน Mono . เก็บชุดนี้มีประโยชน์ที่เราจะใช้ในส่วนอื่น ๆ ของกวดวิชานี้ ฉันแล้วใช้การผสมตัวเลือกดังต่อไปนี้ทั้งชั้นไอคอนและข้อความของฉันชั้น :

มันจะมีลักษณะคล้ายแบบนี้

10 การเชื่อมโยงของเราจะเป็นที่ตั้งอย่างเป็นธรรมทางด้านขวาของส่วนหัวของเรา โดยใช้ตัวอักษรคล้ายกับ Helvetica ไปข้างหน้าและเพิ่มบางข้อความสีขาวเพื่อแสดงการเชื่อมโยงของเรา สำหรับข้อความของลิงค์ของเราที่ใช้งานผมใช้สี # 1F282F ฉันแล้วใช้เครื่องมือสี่เหลี่ยมผืนผ้าโค้งที่มีรัศมีของ 5px เพื่อสร้างกล่องที่อยู่เบื้องหลังการเชื่อมโยงของฉันด้วยตัวเลือกการผสมต่อไปนี้ :

11 ส่วนหัวของคุณจะมีลักษณะคล้ายแบบนี้

12 ต่อไปเราต้องการสร้างเรืองแสงสีที่จะอยู่ข้างหลังภาพตัวอย่างหน้าจอของเราในพื้นที่ที่โดดเด่นของเรา สร้างกลุ่มใหม่ชุดชั้นในของคุณ (Command + G) และป้ายชื่อมัน"สีโกลว์" จากนั้น Command + คลิกที่เลเยอร์ภาพตัวอย่างภาพพื้นหลังสีฟ้าของคุณในชั้นของคุณจานสีเพื่อให้เลือกใช้งานอยู่ กับกลุ่มใหม่ที่คุณเลือกไว้ในชุดชั้นไปข้างหน้าและเลือกไอคอนหน้ากากชั้นที่ด้านล่างของเลเยอร์พาของคุณ ซึ่งจะทำให้มันจึงไม่มีอะไรจะสามารถมองเห็นได้ในพื้นที่เนื้อหาของเว็บไซต์ของเรา

13 ต่อไปใช้แปรงขนอ่อนเพื่อเพิ่มสีสดใสบางอย่างในทางเดียวกันกับต่อไปนี้ในแต่ละชั้นของตัวเอง จากนั้นลดความทึบของแต่ละชั้นจนกว่าคุณจะชอบผลของคุณ นี่คือสิ่งที่ฉันมาด้วย :

14 ฉันต้องการที่จะเพิ่ม Starburst ผลเพียงเล็กน้อยเช่นกันว่าจะแผ่หลังหน้าจอของเราดังนั้นฉันดาวน์โหลดนี้ แปรง Pack ดวงอาทิตย์ขึ้น และเพิ่มผล Starburst

15 จับภาพหน้าจอของเว็บไซต์ที่คุณชื่นชอบเพลงแบบสตรีมมิ่ง (ฉันเลือก last.fm สำหรับกวดวิชานี้) และที่หน้าจอของคุณในแบบที่คล้ายกัน

16 สิ่งที่เหลือสำหรับการนี​​้คือการเพิ่มเงาใต้ภาพหน้าจอเล็ก ๆ ของเรา ใช้รี Marquee ของคุณกับบิตของขนและการเลือกเติมลักษณะต่อไปนี้ด้วย # 000000 จากนั้นลดความทึบแสงไปยังจุดที่คุณต้องการ

17 สิ่งสุดท้ายที่ฉันไม่ได้ที่จะเพิ่ม"Play"ไอคอนที่ผมทำโดยใช้ Marquee รีของฉันกับเติมสีดำ, และหลายเหลี่ยม Lasso ของเครื่องมือที่มีสีขาวกรอก ลดความทึบบนและด้านซ้ายของพื้นที่ที่โดดเด่นของเราจะมีลักษณะบางอย่างเช่นนี้เมื่อเราเสร็จสมบูรณ์ จากนั้นเราจะสามารถย้ายไปยังด้านขวา

18 การใช้เครื่องมือข้อความของคุณให้เพิ่มข้อความในลักษณะที่คล้ายกันบางอย่างดังต่อไปนี้ หัวเรื่องของเราคือ # 1E282F ในขณะที่ตัวเนื้อหาของเราเป็น # FFFFFF

19 ด้วยปากกาเครื่องมือของคุณให้เส้นทางลักษณะต่อไปนี้ของคุณภายใต้หัวข้อ :

20 เราต้องการที่จะเพิ่มจังหวะให้เส้นทางของเรา เลือกแปรงจากเครื่องมือจานสีของคุณและให้แน่ใจว่าพื้นหน้าของคุณถูกตั้งค่าเป็น # 1E282F กับเกี่ยวกับแปรงขนอ่อน 2px ที่ใช้งานอยู่ ให้แน่ใจว่าคุณจะอยู่บนเลเยอร์ใหม่แล้วเลือกเส้นทางของคุณออกจากเส้นทาง Palette จากนั้นเลือก Stroke Icon ที่ด้านล่างเพื่อเพิ่มจังหวะในเส้นทางของคุณ

21 บนชั้นแทรกจังหวะของคุณตัวเลือกการผสมต่อไปนี้

22 สิ่งสุดท้ายที่เราต้องทำสำหรับกล่องที่โดดเด่นของเราคือการเพิ่ม"ลงทะเบียนตอนนี้"ของเราปุ่ม, และ"หาข้อมูลเพิ่มเติม"ของเราปุ่ม เมื่อต้องการทำเช่นนี้เราต้องการใช้รูปสี่เหลี่ยมผืนผ้าโค้งของเรามีรัศมีการเกี่ยวกับการ 20px

23 เพิ่มทางเลือกการผสมต่อไปนี้ในชั้นของคุณ :