Home > Photoshop > Thiết Kế Website Multimedia bằng Photoshop

Thiết Kế Website Multimedia bằng Photoshop

Sản Phẩm Cuối Cùng

Ấ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.

Tài liệu tham khảo

Các tài liệu sau đây đã được sử dụng trong việc tạo ra hướng dẫn này:


Bước 1

Tạo một bức vẽ có kích thước 960px x 620 trong Photoshop. Đây 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.

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.


Bước 2

Bây 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”.


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 khi bạn phải chỉnh 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 Ctrl + T để kích hoạt “Free Transform”.


Bước 4

Hãy 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.


Bước 5

Tạo một layer “Clouds” mới. Tải Clouds brushes và sơn màu trắ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 khi 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 trung 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.


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ở Illustrator 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 trắng; Bạn cũng có thể thay đổi bằng một phông chữ rộng, dày khác. Để mang lại cho text một hiệu ứng 3D, vào Effect>3D & gt Extructe & Bevel. Hãy quan sát hình ảnh bên dưới để cài đặt.


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”


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 Burn đối với cả hai layer.


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 chỉnh 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.


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 Extra Bold, 32px, màu đen. 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 Cityscape 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 Textures 1Render 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”.


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 trong đó 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.


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ù hơi 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 khi 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”.


Bước 20

Sử dụng các bút vẽ đám mây để sơn một vài đám mây nhỏ trê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ây 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ẽ tròn, nhỏ.


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, camera 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.


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 trong folder mới “props”.


Bước 25

Khi thiết kế một trang chủ, các yếu tố tương tác đóng một vai trò quan trọng trong 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 trong các trang 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ài đặt. từ trái qua phải.


Bước 28

Copy tác phẩ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).


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.


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à “Rainbow1” và giữ các thiết lập mặc định với đúng hướng nằm ngang.


Bước 32

Bây giờ gắn các bút vẽ cầu vồng vào các line khá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ẻ trong 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.


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.


Bước 39

Bước cuối cùng!! Thêm footer và bạn đã hoàn tất! Sử dụng Verdana, 10px, # 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.


Kết luận

Tôi hy vọng hướng dẫn này sẽ hữu ích với bạn. Hãy chia sẻ các ý kiến, ý tưởng của bạn, và tôi sẽ rất vui nếu có thể giải đáp các thắc mắc của bạn. Hãy sáng tạo và khám phá những kỹ thuật mà bạn đã học được ở đây. Cảm ơn!

Dịch và biên tập từ: Psd.Tutsplus

Xem bài viết gốc

Categories: Photoshop
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: