1 ページ
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... Ị Height: &2Q pixels - r Ị Device Central... Ị Resolution: 72 pixels/inch -*■ Color Mode: RGB Color ▼ 8 bit ▼ Background Contents: White Image See: ¥ Advanced 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. ThiNganHang.com
2 ページ
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 X620 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”. ThiNganHang.com
3 ページ
Canvas Size [■Ể5ỉmJ C urrent Size: 2 . 1 7 M [ OK I Width: 1224 pixels Cancel Height: 62Ũ pixels Width: 1223 pixels ▼ Height: 62Ũ pKels ▼ Relative Anchor: t k \ - u — I * Canvas extension colar: o ther... ▼ 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”. ThiNganHang.com
4 ページ
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 ỉỹ« Gradic-nt Ovỉ rtiy r/A rJ r/ / • > Grjdpcrrt. LOỈẼ... Binding ữtSKMIMfefsufc SVdMmte: rfermji Orcp Shjijfoiv Sỉve., Qprc-tyr r - F"J Inrwf Kiadwr GndBcnÌ! ' C*ubor Sic^M 5W= 0 Haw_ 13 x níír GÍaw ÍMS-mé; CưstBRì L Sivcil aftd Er*be« Aní «í GradtMt Typ« Sởtó Ẹ :Ciiilcw k it ; SsTCrôttìiìôíí-; ICO %. $ E Geter OvtrÍTí £3 C ndiíM OV*rI*y # 4 3 4 3 4 4 #EAECECm ị ^íttĩrn Oytrlw Stops □ stroke ũữaclty: Ị I* Ị% .ccsi-cn [ p-éi¥ĩe I Cobi; I 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. ThiNganHang.com
5 ページ
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. ThiNganHang.com
6 ページ
Mast-sr Damster 42î|px ® u Use Ssmpie Sa* [ J * A m w 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. ThiNganHang.com
7 ページ
n- -o 3D Extrude & Bevel Options Poston; Custom Rotation -w ____ OK_____! [ Cancel | Map Art... j More Options ! Preview — Extrude &Bevel Extrude Depth i &P pt *■ Cap-, E « H e ig h t: 4 p t ► j J l Surfaia; Plastic S h yin g -*• ThiNganHang.com
8 ページ
Thiêt Kê trình nghe nhac Media băng Photoshop (phân 2)r r ~\ 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” ThiNganHang.com
9 ページ
L a y e r S t y le I B lending O p tio n s O K Styles G e n e ra l Blending Blending Options: Default BkndMode: Norma| Cancel !_7j Drop Shadow Opacity! -fj ỈOO % N e w 5ty le. Inner Shadow A d v a n c e d Blending P re vie w □ Outer Glow fj 10Ơ Ril Opacity: I ! In n e r Glow Crsannes: ¡ y ỊR. | 7 j & 0 B !y j Bevel and Emt>oss Knockout: none T US Contour JEisnd interior Effects as Group ] Texture '; Btend Clipped Layers as Group ¡■/ITransparency Shspas Layer £ | Satin ¡Layer Mask Hides Effects _j Color Overlay J Vector Mask Hides Effects i'~l Gradient O verlay Biend If: G ray ”» P I Pattern Overlay This Layers 0 255 IT! Stroke A db Underlying Layer: 0 255 đ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. ThiNganHang.com
10 ページ
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. ThiNganHang.com
11 ページ
C o lo r Bum 'V, O p a õ 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 ThiNganHang.com
12 ページ
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. ThiNganHang.com
13 ページ
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 \___ cbuds2 W 9 ] 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. ThiNganHang.com
14 ページ
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ỉ isaiture • ^■SỔK !■» r 1 bl Lighten T »pacity: tỉ»0* » ThiNganHang.com
15 ページ
Thiêt Kê trình nghe nhac Media băng Photoshop (phân 3)r r ~\ 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. ThiNganHang.com
17 ページ
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à. ThiNganHang.com
18 ページ
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 R afir-e E d ũ ẽ Radius: 42,1 px I OK I [ Cancel Contrast; 7ỗ % Í------- ——— I -Q----- I default mpreview Smooth Feather; contract/Exp and * Descnprion »íots p to to-g * ptW'+M * * <fd^ Prsts (=to ■eye* through th* p rw rim ĨĨTQÓQS. a n 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. ThiNganHang.com
19 ページ
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. ThiNganHang.com
コメント (0)
まだコメントはありません。最初のコメントを書きましょう！