Thiết kế trình nghe nhac media bằng photoshop

Thiết Kế trình nghe nhac Media bằng Photoshop (phần 1) Ấn tượng đầu tiên là thực hiện việc tính toán! Để cho mọi người được xem một portfolio trực quan hấp dẫn là một trong những điều quan trọng nhất mà người thiết kế có thể làm để lôi cuốn khách hàng mới. Hôm nay, chúng ta sẽ chứng minh cách sử dụng các bức ảnh, bút vẽ, texture các đối tượng 3D để tạo ra layout website đa phương tiện trong Photoshop. Chúng ta cùng bắt đầu nào. Bước 1 Tạo một bức vẽ có kích thước 960px X 620 trong Photoshop. Đâỵ là độ phân giải tốt cho các website khi hầu hết các màn hình đều có thể thích ứng được. N-PW ỉ M r Name: Untitled-1 1 OK Preset: Custom ▼ Cancel .;S(ze: Save Preset... i Width: &60 pixels ▼ 1 Deists Preset... Ị Ị Device Central... Ị Height: &2Q pixels - r Resolution: 72 pixels/inch -*■ Color Mode: RGB Color ▼ 8 bit ▼ Background Contents: White ¥ Advanced Image See: 1.70M Nhấn phím Ctrl+ R để thêm một thước kẻ và vẽ một vài đường dẫn để đánh dấu các ranh giới của phạm vi nội dung chính, Các ranh giới này sẽ có ích để chỉnh tâm thiết kế của bạn. UrtfctW-Í @ 56,7% S ] r i O " |SP |0 |50 |K» | t ạ |20> |ì-so_ Ịreọ ỊÌSỌ I*» JJSO |SW ¡550 _ Ị60Ọ ]tạọ |?a> ỊSÕỌ Ị6SỌ [WO |9S» jic ■7% f> Owe: l.TOM'a by*« Bước 2 Bâỵ giờ, phạm vi nội dung chính đã được giới hạn một cách chính xác, chúng ta hãy thay đổi kích thước của bức vẽ lên 1224 X 620 Image > Canvas Size) để tạo ra một background lớn hơn. Phạm vi tràn tín hiệu này sẽ có ích đối với khách truy cập với các màn hình rộng lớn tạo ra một tầm nhìn “không biên giới”. Canvas Size [■Ể5ỉmJ Current Size: 2 .17M Width: 1224 pixels Height: 62Ũ pixels [ OK I Cancel Width: 1223 pixels ▼ Height: 62Ũ pKels ▼ Relative Anchor: \ t k - u — I * Canvas extension colar: other... ▼ Bước 3 Bước cuối cùng trong việc chuẩn bị tài liệu của chúng ta là thêm một đường dẫn ở trung điểm. Đướng dẫn này sẽ rất thuận tiện khỉ bạn phải chinh tâm các thành phần thiết kế. Cách nhanh chóng để tìm trung điểm là tạo ra một layer mới và nhấn phím Cừl + T để kích hoạt “Free Transform”. Bước 4 Hãỵ tạo ra platform hình đám mây nơi mà chúng ta sẽ thiết kế các yếu tố chính. Tạo một gradient background màu xám. Layer> Layer Style> Gradient Overlay. Gradient # 434.344 đến # EAECEC. Mặc định toàn bộ các thiết lập khác. Sỉỹ« Binding ữtSKMIM fefsufc Orcp Shjijfoiv F"J Inrwf Kiadwr ' C*ubor Sic^ M 13 xníír GÍaw L Sivcil aftd Er*be« Ẹ : Ciiilcw E Geter OvtrÍTí £3 C ndiíM OV*rI*y ị ^íttĩrn Oytrlw □ stroke Gradic-nt Ovỉ rtiy Grjdpcrrt. SVdMmte: rfermji Qprc-tyr GndBcnÌ! r 5W= An í « í k it ; 0 ÍMS-mé; CưstBRìGradtMt Typ« Sởtó SsTCrôttìiìôíí-; ICO $ %. r/A rJ r/ / • > - LOỈẼ... Sỉve., Cobi; Haw_ # 4 3 4 3 4 4 Stops ũữaclty: Ị I * Ị % .ccsi-cn II #EAECEC m [ p-éi¥ĩe I LoCatíớn; a ữelẽtB Bước 5 Tạo một layer “Clouds” mới. Tải Clouds brushes và sơn màu ừắng một vài đám mây với các hình dạng, kích thước và độ mờ đục khác nhau cho tới khỉ nào bạn đạt được kết quả tương tự như bên dưới. Bước 6 Tạo một layer thử hai “Clouds 2", thêm một vài đám mây ở phần trang tâm. ' Bước 7 Tạo một layer thứ ba “Clouds 3". Lần này sử dụng Abstract glow brushes, bút vẽ thứ 2, kích thước 420px. Flip vào nó, nhấn phím Ctrl + T> Flip Horizontal. Điều này sẽ giúp cho các đám mây trông thành từng làn và thanh tao, nhẹ nhàng hơn. Mast-sr Damster 42î|px ® u Use Ssmpie Sa* [ J * m w A 12Ĩ1 IỈH 144& « Ế 1720 Bước 8 Bây giờ, chúng ta sẽ tạo ra một chữ “M” có nghĩa là “Multimedia” hiệu ứng 3D. Bạn có thể thay thế bằng chữ cái đầu của công ty bạn. Mở Hlustrator và paste background đám mây mà bạn vừa mới tạo ra vào một layer mới. Sử dụng layer đó như là đường dẫn để thiết kế chữ “M” hiệu ứng 3D. Gõ chữ cái “M”: phông chữ Handel Gothic Ex, 181 pt, màu ừắng; Bạn cũng có thể thay đổi bằng một phông chữ rộng, dày khác. Đe mang lại cho text một hiệu ứng 3D, vào Effect>3D & gt Extracte & Bevel. Hãy quan sát hình ảnh bên dưới để cài đặt. n- -o ____ OK_____! [ Cancel | Map Art... j More Options ! Preview H e ig h t: 4 p t ► j J l — Extrude & Bevel Extrude Depth i &P pt *■ Cap-, E « 3D Extrude & Bevel Options Poston; Custom Rotation -w Surfaia; Plastic Shying -*• r r ~\ Thiêt Kê trình nghe nhac Media băng Photoshop (phân 2) Bước 9 Copy chữ “M” hiệu ứng 3D này và trở lại Photoshop rồi paste nó vào tài liệu của bạn. Đổi tên layer này thành “m”. Bây giờ chúng ta sẽ gắn vào một vài hiệu ứng và texture để làm cho nó hiện thực và thú vị hơn. Đầu tiên gắn Layer Style sau vào layer “m” L a y e r S ty le Styles I Blending Options: Default !_7j Drop Shadow Inner Shadow □ Outer Glow I ! Inner Glow !y j Bevel and Emt>oss US Contour ] Texture £ | Satin _j Color Overlay i'~l Gradient Overlay PI Pattern Overlay IT! Stroke Blending Options G enera l Blending BkndMode: Norma| Opacity! -fj ỈOO % A dvanced Blending Ril Opacity: Crsannes: ¡y ỊR. |7 j& 0 B fj 10Ơ Knockout: none T J Eisnd interior Effects as Group '; Btend Clipped Layers as Group ¡■/ITransparency Shspas Layer ¡Layer Mask Hides Effects J Vector Mask Hides Effects OK Cancel N ew 5ty le. Preview Biend If: Gray ”» This Layers 0 A Underlying Layer: 0 255 255 db đi Bước 10 Tạo một thư mục mới “m texture”. Chọn chữ “M” với công cụ Magic Wand Tool và với lựa chọn này, hãy thêm một Layer Mask cho thư mục. Bây giờ chúng ta có toàn bộ các texture cho chữ cái “M” hiệu ứng 3D bên trong thư mục này. Sử dụng “texture 4.jpg” từ gói Rust Textures Copy, paste và gọi tên layer này là “texture”. Sao chép thành 2 bản và chia layer được sao chép “texture 2” xuống 12.5 %. Bước 11 Điều chỉnh Layer Opacity tới 40% và thay đổi Blending Mode layer sang Color Bum đối với cả hai layer. C olor Bum 'V, O paõty: I 40% I / ' Bước 12 Thêm một texture layer khác “texture3" sử dụng “metal_plaque__bump_seam.jpg” Armored Metal Textures. Điều chinh Layer opacity tới 26% và thay đổi Blending Mode của layer sang Hard light. Chuyển dịch layer này xung quanh cho tơi khi bạn cảm thấy hài lòng về vị trí của texture. Hard Light TT Opacity! 2S% >1 Bước 13 Sử dụng bút vẽ Soft Round với opacity khoảng 30% để gắn một shadow dưới chữ “M”. Sử dụng Công cụ Smudge Tool để điều chỉnh và tạo ra một shadow nghiêng như bên dưới. Bước 14 Thêm tên công ty của bạn vào, trong trường hợp “Multimedia”. Sử dụng Heritage Exữa Bold, 32px, màu đea Tiếp theo thêm một shadow nhạt phía dưới. Sao chép layer này thành hai bản, đổi tên nó thành “multimedia shadow”. Nhấn phím Ctrl+ T để truy cập vào Transform Tool, nhấp chuôt phải và chọn Flip Vertical. Thêm Motion Blur vào. Thay đổi Layer Opacity lên 50%. Bổ sung Layer Mast và cuối cùng, gắn một gradient để làm mờ dần bottom. Bước 15 Bây giờ chúng ta sẽ tạo ra cảnh quan đường phố cho Multimedia thế giới. Bạn có thể sử dụng Citvscapẹ Brushes cho các tòa nhà cao tầng. Download một vài gói mang tính trừu tượng được đưa ra ở đây: Render Pack Texturas 1 vàRender Pack Textures 2 cho các texture. Gói đầu tiên sử dụng bút vẽ để vẽ một vài tòa nhà. Vẽ từng tòa nhà trên các layer riêng biệt, giữa các layer “clouds” và “clouds2’\ 9 9 W 9 \___cbuds2 ] douds Bước 16 Thay đổi kích cỡ, vị trí và cắt bỏ phần của tòa nhà mà bạn không cần. Bước 17 Đối với mỗi tòa nhà, hãy tạo ra một folder mới ữong đó sẽ chứa các texture riêng. Sử dụng một phương pháp như nhau để gắn texture cho chữ “M”, mỗi lần lại chọn một tòa nhà, với Magic Want Tool và thêm Layer Mask vào folder. Đặt Blending Mode của folder layer lên Lighten. 1. '€[ e a t ,;i:i Add layer mask T _ J ¡1 'bỉ isaitu re • ^■SỔK !■» r 1 bl Lighten T »pacity: tỉ»0* » r r ~\ Thiêt Kê trình nghe nhac Media băng Photoshop (phân 3) Bước 18 Bây giờ, gắn texture trừu tượng cho cảnh quan đường phố dưới đây. Di chuyển, xoay, thay đổi kích thước các texture cho đến khi bạn hài lòng với các hiệu ứng. Bước 19 Đây là lúc thích hợp để làm sạch và tổ chức các layer của bạn. Lúc đầu, mặc dù hod tẻ nhạt, nhưng việc thực hành này thực sự sẽ giúp bạn tiết kiệm được thời gian quỷ báu của mình khỉ tìm kiếm các file. Đặt tất cả các layer buiding vào một folder mới “Buildings” và mang folder này xuống giữa 2 layer “clouds” và “clouds2”. 9 I clouds2 & ữ" buikiĩrKp W ► __ | !ỊỊj bã texture L _ J b5 & _ J $ m ^ tesdure 'ế l I w m ► □ i b3 texture 9 I ‘ I tô ~ _ l m b2 texture & l ' J bỉ m _ J $J b l tSKturs m o bi ft [""" cbuóỉ Bước 20 Sử dụng các bút vẽ đám mây để san một vài đám mây nhỏ ừên layer của “clouds2” che phủ nền của các tòa nhà. Bước 21 Hãy thêm các đạo cụ đa phương tiện truyền thông vào: camera cổ điển, ghế của giám đốc. TV camera, Laptop« Microphone, khinh khí cầu 1, khinh khí cầu 2, Câv nhỏ. Đối với mỗi đối tượng này tách background của chúng bằng cách sử dụng Magic Wand Tool (W) và sau đó nhấp chuột vào nủt Refine Edge để điều chỉnh các cạnh. Muốn loại bỏ các cạnh thô cồn lại, sử dụng Eraser Tool(E) vởi một bút vẽ ừòn, nhỏ. Toieranee: 12 IJ] Arrti-slas • / Contiguous 'ỉ Sample Ail Layers Rafir-e E d ũ ẽ 42,1 px I OK I [ Cancel 7 ỗ % Í------- ——— I I default -Q----- m preview Radius: Contrast; Smooth Feather; contract/Exp and * Descnprion »íots p to to-g * ptW'+M * * <fd^ Prsts (= to ■eye* through th* p rw rim ĨĨTQÓQS. an d X to tsmpc-rar^y Vi*w “tmagtì. Bước 22 Thay đổi kích cỡ và sau đó gắn Filter > Smart Sharpen hoặc nhấn phím (Ctrl + F) cho từng đối tượng. Vị trí của chúng như dưới đây. Bước 23 Thêm các shadow vào ghế, TV, laptop, microphone, caméra và xe hơi làm theo các kỹ thuật tương tự như chúng ta đã làm với chứ “M”. Đối với cái cây, sử dụng bút vẽ thiên nhiên và điều chỉnh hình dạng bằng cách sử dụng Smudge Tool. Thiết Kế trinh nghe nhac Media bằng Photoshop (phần 4) Bước 24 Liên kết mỗi object layer với shadow layer tương ứng của nó, như vậy sẽ dễ dàng bật và tắt mỗi object khi cần thiết. Để thực hiện điều này, Nhấn Shift + click lên cả 2 layer. Kích chuột phải và chọn Link Layers, sau đó đặt tất các props layers ừong folder mới ‘‘props’ t b P ro p s 9 | 1 hotairi | J hota:r2 xập 1 1 car 9 | J shadow 1 | chair Ặ? j | shadow IBE 1---------11 I ^PtoP Ị#* I shadow w> | 1 micro 1 1 1 | shadow W | J P'-arit 9 | I vtcfeQ_carriera | 1 shadow m 1 | camera 91 | 1 shadow Bước 25 Khỉ thiết kế một trang chủ, các yếu tố tương tác đóng một vai trò quan trọng ừong việc xác định sự thành công của website. Vì vậy chúng ta nên tạo ra các button chính nổi bật và hấp dẫn để người dùng cảm thấy muốn nhấp chuột vào chứng. Chứng ta sẽ tạo ra các hộp hiệu ủng 3D, các hộp này sẽ được kết nối với quang cảnh đường phố thông qua các dây dẫn đấy màu sắc. Chúng biểu trưng cho các phần ừong các ừang khác nhau. Các bạn hãy xem trước hình ảnh của những cái mà chúng ta sẽ thiêt kê. Bước 26 Quay lại Illustrator để vẽ các hộp 3D và các dây đầy màu sắc. Sử dụng Rectangle Tool (M) để vẽ 6 hộp màu trắng với chiều rộng khác nhau tùy thuộc vào chiều dài của text mà hộp này sẽ chứa. Ví dụ “Web” sẽ có một hộp nhỏ hơn và “Contact” sẽ có một hộp rộng hơn Bước 27 Áp hiệu ứng Effect> 3D> extrude & Bevel cho mỗi hộp. Xem hình ảnh về các hiệu ứng của mỗi hộp đã được càỉ đặt. từ ưáỉ qua phải. BOX 1 ■ X M ■ /• 3D ‘Extrude & Bevel O ptions B (k 3 3D 'Extrude & Bevel Options Positon; C istern Rotation -r OK Cancel Map Art. More Options Z; Preview Bước 28 Copy tácphẳm nghệ thuật mà bạn đã tạo ra qua Photoshop và paste vào một “background” layer như một đường dẫn. Vẽ một vài đường line với Pen Tool (P) hoặc Pencil Tool (T). Thiết Kế trình nghe nhac Media bằng Photoshop (phần 5) Bước 29 Bây giờ chúng ta sẽ làm việc với một vài bút vẽ cầu vồng. Sử dụng Rectangle Tool (M) để vẽ hình chữ nhật, sau đó copy và paste thành 4 đến 5 hình chữ nhật, đặt hình này bền cạnh hình khác theo chiều dọc. Thay đổi màu sắc của chủng. Chọn tất cả hình chữ nhật và sử dụng Align Left canh hàng. - X Swatched 4 Ali-gn X pa th finder j Align Objects; B I ã s ẵ l 1 " Ọ o J L l Distribute ob jects: 5 s Ẻ L ỉ * iW Bước 30 Tạo ra một vài biến thể cầu vồng. Dưới đây là một vài mẫu ví dụ. Bước 31 Để tạo bút vẽ, chọn một cụm cầu vồng, kéo và thả nó vào Brush Panel của bạn. Chọn New Art Brush. Gọi tền Art Brush của bạn là “Rainbow 1 " và giữ các thiết lập mặc định với đủng hướng nằm ngang. Mew Brush Select a brush type: OK New Calligraphic Brush Cancel New Scatter Brush o New Art Brush New Pattern Brush A rt Brush O p tio n s Mame: Rainbow! Colorization Method: None Key Color: J* | [ | | Tips OK Cancel Direction Width: 100% H Proportional Flip Flip Along Flip Across ~+2“' Bu&c 32 Báy giá gán các bút ve cau vóng váo các line kfaác nhau. Bước 33 Sao chép và dán từng dây dẫn cầu vồng (line) riêng lẻ ừong Photoshop. Dán các layer ở phía trước của các tòa nhà, nhưng đằng sau các đạo cụ và chữ “M”. Gắn Layer Mask trên các layer dây dẫn và sử dụng các bút vẽ đám mây để làm cho các phần của dây dẫn trong suốt. Bước 34 Để mang lại cho các dây một cái nhìn 3D và làm cho chúng bóng, sáng hơn, hãy gắn Bevel & Emboss Layer Style với các thiết lập tương tự như hình dưới đây. Mỗi một dây dẫn chúng ta chỉnh sửa một chút để đạt được cái nhìn như mong muốn. Styles Bsndlric Options; Default □ Drop shadow I i Inner Shadow i j Outer Glow i j Inn er Giovi ElBesici and Emboss Bevel and Embcrss S truc tu re Styie; inner Bevel Technique: Smooth ▼ D e p t h s - Q — Direction; o Up Down Size: y Soften; Q-- 3&S px PX 0 Satin FH C o b r Overiay O Gradient Overlay ! Pattern Overlay F~| Stroke G ? Shading Angles Aiitude: Gross Gen tour,; Highlight Mcdej ^ - r“ n Opacity? Shadow Mode: r-iufepry Opacity: 170 0 Lise Global Lght Anti-aiased ~ U D — TJ— 75 % OK Cancel I N ew Style. Prev iew Bước 35 Sao chép và dán các hộp 3D từ Illustrator vào các layer riêng biệt. Bước 36 Gắn texture “metal_plaque bump seam.jpg” từ Armored Metal Textures.sử dụng các kỹ thuật tương tự như trong Bước 10 và bước 17. Thiết lập Blending Mode của texture layer tới Hard Light với Opacity 26%. Bước 37 Thêm text vào các hộp. Sử dụng Heritage Extra Bold, 14px, màu đen. Xoay text theo gốc cạnh của hộp Bước 38 Clean các layer và tổ chức các button vào các folder. & » » 9 9 m & m m l ĩ button! fiinan~Ị___ T □ i | □ ted I ỉ bo« □ wire I button ĩ ► 1 I button 3 __Ị bưtton4 ► Ũ J buttons p* ___ j buttons Bước 39 Bước cuối cùng ỉ ỉ Thêm footer và bạn đã hoàn tất! Sử dụng Verdana, lOpx, # cccccc cho dòng đầu tiên và # 999.999 cho dòng dưới cùng. Đây là những màu sắc an toàn cho web. 15 L O i i HOME | FILM I TV | WEB | BLOG | ABOUT | CONTACT Sfeemap | 2010 M u ltim ed ia . Afl Rights. P-eserve-d J Character X [ Verdana Reg u lar IT A j a px T 100% C o lo r!! - X iT 110 px El it (Auto) 3%m Metres 3 A V i—> 0 3 T T ¡TV Tt T1 T, T T Englishi USA ▼ Sharp K et luan Toi hy vgng hucmg din nay se huu ich v6i ban. Hay chia se cac y ki6n, y tuong cua ban, va toi se rat vui neu co the giai dap cac th&c mile cua ban. Hay sing tao vk khdm p ta nhung ky thuat mk ban da hoc ducrc d day. Cam on!