Sản phẩm mà chúng ta sẽ tạo ra
final Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trong hướng dẫn Photoshop này, chúng ta sẽ học cách tạo ra một layout web 2.0. Xuyên suốt toàn bộ hướng dẫn, chúng ta sẽ giải quyết rất nhiều các kỹ thuật Photoshop. Có vẻ như đây là một bài hướng dẫn dài. Vì nó là một hướng dẫn thực sự chi tiết. Tôi đảm bảo rằng bạn sẽ làm theo một cách dễ dàng và có được thành quả, chỉ cần một chút cố gắng.
Bước 1
Để giữ cho mọi thứ được căn chỉnh tốt, chúng ta sẽ sử dụng 960s Grid System (hãy tìm nó từ đây) khi bạn đã mở file đã download “960_grid_24_col.psd”.
Chúng ta bắt đầu bằng cách tạo layer từ Background, nhấp chuột phải lên layer “Background”, sau đó, chọn Layer From Background và gọi tên nó là “bg”.
1 Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 2
Vì chúng ta sẽ sử dụng Guide rất nhiều, do đó chúng ta cần xem Rulers. Để thực xem, chúng ta vào View > Rulers.
2 Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 3
Chúng ta cần thiết lập các border thấp hơn vùng Header, tuy nhiên, chúng ta sẽ Drag một Guide mới theo chiều ngang 100px. Vào View > New Guide, Position: 100.
3 Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 4
Chúng ta hãy tạo tiêu đề. Chúng ta sẽ bắt đầu tạo một vùng chọn có kích thước 1020 x 100px. Sau đó, nhấn Shift+Backspace để tô màu (với bất kỳ màu sắc nào).
4a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đưa vào đó một Gradient Overlay theo như hình ảnh sau:
4b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, gọi layer này là: “header_bg”.
4c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 5
Viết tiêu đề trang web của bạn với các cài đặt này:
* Font Family: Rockwell (tìm từ đây)
* Font size: 30px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: Không quan trọng, vì chúng ta sẽ đưa vào đó một Gradient Overlay
5a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, chúng ta sẽ thêm một Gradient Overlay cho text với các thiết lập sau:
5b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Để căn chỉnh tiêu đề trang web với header background; Chọn tiêu đề layer và layer“header_bg”, sau đó, nhấp chuột lên Align Vertical Centers.
5c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 6
Viết text Navigation với các thiết lập sau:
* Font Family: Arial
* Font size: 20px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #ffffff
6a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một hình chữ nhật tròn làm biểu tượng cho một đường link được quét. Nó có kích thước khoảng 65 x 35px– Radius có kích thước 5px, (tô màu bằng bất kỳ màu sắc nào).
6b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đưa vào đó một Stroke và Gradient Overlay theo hình ảnh sau:
6c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trước khi chúng ta chuyển sang bước tiếp theo, hãy chắc bạn đã sắp xếp các layer một cách có tổ chức, đây là cách tổ chức mà tôi đã làm.
6d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 7
Đây là lúc tạo ra một vùng thiết kế đặc sắc. Chúng ta sẽ bắt đầu bằng cách thiết lập các Border thấp hơn bằng cách thêm một Guide mới theo chiều ngang có kích thước 430.
7a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một vùng chọn có kích thước 1020 x 430px như là một Background dành cho vùng thiết kế đặc sắc. Và tô màu bằng bất kỳ màu sắc nào.
7b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Sau đó, đưa vào đó một Gradient Overlay với các thiết lập sau:
7c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, tạo hiệu ứng đánh bóng. Tạo một vùng chọn có kích thước 1020 x 120px, tô màu bằng bất kỳ màu sắc nào.
7d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Và sau đó, thêm một Gradient Overlay. Hãy sử dụng hình ảnh bên dưới để tham khảo.
7e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, giảm Opacity của layer xuống 40%.
7f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 8
Chúng ta sẽ thêm một vài đường nét. Với Single Row Marquee Tool, tạo một vùng chọn có kích thước 1px và căn chỉnh nó giống như sau:
8a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Thiết lập màu sắc của Foreground #acd86e, sau đó, nhấn Shift+Backspace để tô màu nó; hãy chắc sử dụng màu sắc Foreground như được chọn.
8b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tôi đảm bảo bạn sẽ có các chi tiết px hoàn hảo.
8c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta phải thực hiện bằng cách tạo ra các yếu tố Background, vì vậy, hãy chắc bạn sẽ mang lại cho chúng những cái tên lý tưởng và tổ chức chúng, nhóm chúng lại với nhau.
8d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 9
Chúng ta sẽ làm cho chúng chính xác hơn. Drag 2 Guide mới theo hình ảnh sau
9a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy viết các từ “Welcoming” với các thiết lập sau:
* Font Family: Rockwell
* Font size: 40px
* Font weight: Regular
* Anti-aliasing setting: Sharp
* Color: #f4f4f4
9b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bản thân tôi, tôi đã viết: “Đây là thương hiệu công việc mới của chúng tôi. Xin chào mừng”, icon wink Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web nhưng chúng ta cần phải nhấn mạnh chữ “Wellcome!” bằng một cách nàu đó. Vì vậy, về cơ bản, chúng ta phải đưa vào đó một Gradient Overlay. Hãy làm theo hình ảnh sau.
9c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, Drag 2 Guide mới theo chiều ngang theo hình ảnh sau.
9d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trước khi chúng ta tạm biệt bước này, hãy chắc các layer text của bạn đã được tổ chức tốt.
9e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 10
Chúng ta bắt đầu bằng cách tạo một vùng chọn có kích thước 250 x 150 px (tô màu bằng bất kỳ màu sắc nào), đây sẽ là bệ đỡ hình ảnh.
10a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy gọi layer này là “pic_holder” và thử căn chỉnh nó như hình ảnh bên trên.
Và đưa vào đó một Stroke.
10b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta thêm một hình ảnh thiết kế đặc sắc, để làm như vậy, vào File > Place và chọn một hình ảnh. Hãy gọi layer “pic” của nó, và đảm bảo để đặt nó chính xác bên trên layer “pic_holder”.
Nhấp chuột phải lên“pic” layer và chọn Create Clipping Mask..
10c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 11
Để tạo shadow, chúng ta sẽ bắt đầu bằng cách sao chép 2 layer “pic” và “pic_holder”.
11a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trong khi chúng ta đang sao chép 2 layer đã chọn, vào Edit > Free Transform, và chỉnh sửa Height lên: –100%.
11b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trong khi chúng ta còn chọn 2 layer đã sao chép, nhấp chuột phải lên chúng và chọn Convert sang Smart Object; hãy gọi layer này là “Shadow” và hãy chắc bạn đă đặt nó ở Bottom.
11c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chọn “Shadow” layer, sau đó, nhấp chuột lên Add layer mask (ở Bottom của layers panel).
11d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chọn Gradient Tool (G) có Linear Gradient đen – trắng, drag từ dưới lên trên.
11e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bạn sẽ có một cái gì đó như cái này.
11f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 12
Chúng ta cần thêm một mô tả cho hình ảnh của chúng ta. Vì vậy, chúng ta sẽ tạo một vùng chọn có kích thước 240 x 25px, và tô màu bằng một giá trị màu: # 1a1919, chúng ta sẽ làm như một mô tả Background.
12a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy viết một vài mô ta với các cài đặt đặc tính:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #82aa48
12b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy chắc chắn bạn đã giữ document của bạn thật gọn gàng.
12c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 13
Tạo một bản copy với hình ảnh thiết kế đặc sắc và căn chỉnh nó sang phải.
13a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta sẽ làm cho bức ảnh ở chính giữa lớn hơn một chút, vì vậy, tạo một vùng chọn có kích thước 340 x 200 px, căn chinhrh nó như sau, và tô màu nó bằng bất kỳ màu sắc nào.
13b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta cũng sẽ đưa vaò đó một Stroke. Hãy sử dụng hình ảnh sau đây để tham khảo.
13c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Và đây là những gì chúng ta có
13d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy tạo tổ chức các layer và nhóm chúng lại. Tôi đã tạo ra 3 nhóm riêng biệt. Bạn có thể tham khảo.
13e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 14
Chúng ta sẽ tạo Sliding Button. Chúng ta sẽ bắt đầu tạo một Ellipse có kích thước 50 x 50 px bằng cách sử dụng Elliptical Marquee Tool (M), và tô màu nó bằng bất kỳ màu sắc nào.
14a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, đưa vào đó một số Layer Styles theo hình ảnh sau
14b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Custom Shape Tool (U), tạo một mũi tên và đưa vào đó các Layer Styles sau.
14c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bạn sẽ một cái gì đó như thế này.
14d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đừng quên căn chỉnh Button của bạn theo hình ảnh sau
14e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy tạo một bản copy khác của mũi tên và căn chỉnh nó sang phải.
14f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 15
Chúng ta sẽ làm việc trên phần nội dung. Bắt đầu bằng cách tạo một vùng chọn có kích thước 1020 x 815 px.
15a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Nhấn Shift+Backspace để tô màu vùng chọn này với màu sắc: # e8e8e8
15b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Single Row Marquee Tool (M), tạo một vùng chọn có kích thước 1px, đặt nó giống như hình ảnh sau, và tô màu nó bằng màu trắng (# FFFFFF).
15c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, bạn sẽ có các chi tiết pixel hoàn hảo.
15d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 16
Chúng ta cần phải thiết lập Border bên dưới cho phần nội dung của chúng ta. Do đó, chúng ta sẽ drag một Guide theo chiều ngang mới có kích thước 50px.
Download bộ icon này: Basic Set – Pixel Mixer và định vị chúng như sau.
16a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Drag một Guide theo chiều ngang mới tại Bottom của icon, để lại 20 px, sau đó, Drag một Guide mới.
Bây giờ, hãy viết một vài tiêu đề với các thiết lập này:
* Font Family: Rockwell
* Font size: 29px
* Font weight: Regular
* Anti-aliasing setting: Sharp
* Color: #81aa48
16b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Drag 2 Guide khác nữa theo hình ảnh bên dưới
16c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết một số text theo cách thiết lập này:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #2f3235
16d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Drag thêm 3 Guide nữa theo hình ảnh sau.
16e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 17
Đây là lúc tạo một Button “tìm hiểu thêm”. Với Rounded Rectangle Tool (U), hãy tạo một hình chữ nhật có kích thước 100 x 30px và Radius có kích thước 5px. Và tô màu bằng bất kỳ màu nào.
17a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đưa vào hình chữ nhật này một vài layer styles. Hãy nhìn vào hình bên dưới để tham khảo.
17b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Ellipse Tool (U), tạo một hình Elip có kích thước 15 x 15px và tô màu nó bằng giá trị màu sắc này: # 4d4d4d.
Để căn chỉnh nó một cách chính xác, chọn layer của nó và layer của hình chữ nhật, sau đó, nhấp chuột vào Align vertical centers trong khi đang chọn 2 layer đó.
17c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Nhập “+”, tô màu nó bằng màu trắng (# FFFFFF) và định vị nó như thế này.
17d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy viết chữ “tìm hiểu thêm” với các cài đặt đặc tính như sau:
* Font Family: Tahoma (tìm từ đây)
* Font size: 12px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #ffffff
17e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đưa vào đó một Drop shadow. Hãy sử dụng hình ảnh bên dưới để tham khảo.
17f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 18
Để tạo ra một đường phân cách theo chiều dọc, sử dụng Line Tool (U) để tạo 2 đường phân cách theo chiều dọc, đứng cạnh nhau, và tô màu chúng bằng các giá trị màu sắc: FFFFFF # — # b3b3b3.
18a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Căn chỉnh đường phân cách của bạn như hình ảnh bên dưới
18b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đừng quên việc tổ chức các layer của bạn. Hãy tham khảo việc tổ chức của tôi.
18c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 19
Thực hiện 3 bản copy của những cái chúng ta đã tạo ra trong 2 bước trước. Và bạn sẽ có một cái gì đó như thế này.
19 Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 20
Chúng ta sẽ tạo ra dấu phân cách.
Drag một Guide theo chiều ngang mới có kích thước 50px
20a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Elliptical Marquee Tool (M), tạo một vùng chọn như hiển thị bên dưới.
20b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Thiết lập màu của Foreground sang màu đen (# 000000), sau đó, nhấn Shift + Backspace để tô màu vùng chọn. Gọi tên layer này là “separator_bg”.
20c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Để làm cho nó trông mờ, vào Filter > Blur > Gaussian Blur – radius: 3px.
20d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Trong khi bạn đang chọn“separator_bg” layer đã chọn, tạo một vùng chọn giống như hình hiển thị bên dưới, sau đó nhấn Delete.
20e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Nhấp chuột lên Add layer mask icon. Và thiết lập Gradietn Editor sang màu đen, trắng, đen.
20f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Gradient Tool (G), Drag một Linear Gradient theo hình ảnh sau.
20g Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Giảm Opacity của layer xuống 50%
20h Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Line Tool (U), tạo 2 đường theo chiều ngang ở phía trên cùng một layer khác và đặt chúng chính xác như dấu phân cách ở phía trên. Tô màu chúng bằng màu # b3b3b3 — # FFFFFF và thêm layer mask tương tự cho chúng.
20i Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 21
Chúng ta sẽ bắt đầu làm việc trên phần nội dung bên dưới, bằng cách Drag một Guide mới có kích thước 50px.
21a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Thêm tiêu đề bằng cách thiết lập đặc điểm này:
* Font Family: Rockwell
* Font size: 30px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #81aa48
21b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Drag 2 guide theo chiều ngang mới theo hình ảnh sau.
21c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy viết một số Text với các thiết lập đặc tính sau:
* Font Family: Arial
* Font size: 14px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #505150
21d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Drag một Guide mới có kích thước 160px như là một border của phần nội dung bên dưới.
21e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 22
Hãy viết một tiêu đề và Text khác bằng cách sử dụng các đặt tính cài đặt tương tự mà chúng ta đã sử dụng trong bước trước.
22a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Nhập một dấu ngoặc kép trên bàn phím của bạn, với các đặc điểm thiết lập:
* Font Family: Arial
* Font size: 200px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #505150
Và giảm Opacity của layer xuống 50%
22b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết một từ thể hiện sự hiểu biết của bạn hoặc một câu châm ngôn với đặc tính thiết lập sau:
* Font Family: Arial
* Font size: 14px
* Font weight: Italic
* Anti-aliasing setting: Smooth
* Color: #81aa48
22c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 23
Để tạo ra một đường phân cách theo chiều dọc, chúng ta tạo ra hai đường thẳng đứng cạnh nhau, và tô màu chúng bằng các giá trị màu này: # FFFFFF — # b3b3b3.
23a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy chắc chắn layer của bạn đã được tổ chức tốt, đây là cách tôi đã tổ chức chúng.
23b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 24
Viết một tiêu đề nữa như tiêu đề bên trái (hãy viết một cái gì đó đại diện cho nhóm, chẳng hạn như tôi đã viết “Nhóm của chúng tôi”).
24a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Sử dụng Rectangle Tool (U), tạo một hình chữ nhật có kích thước 90 x 90px, và tô màu nó bằng bất kỳ màu sắc nào. Gọi layer này là“photo1_holder”
Layer này hoạt động như là một giá đỡ của bức ảnh thành viên trong nhóm. Bây giờ, đưa vào đó một Stroke. Hãy sử dụng hình ảnh bên dưới để tham khảo.
24b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Định vị bức ảnh của một thành viên và gọi nó là “photo1”. Hãy chắc layer “photo1” nằm ngay trên “photo1_holder” layer. Sau đó, nhấp chuột phải lên “photo1″ layer và chọn Create clipping mask. Bạn sẽ có cái gì đó như hình bên dưới.
24c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 25
Viết một số Text về thành viên này, sử dụng đặc tính cài đặt sau:
* Font Family: Arial
* Font size: 14px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #7ba344
25a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta sẽ tạo ra các icon truyền thông xã hội. Chúng ta bắt đầu với Twitter, Nhập chữ “T” với các đặc tính thiết lập này:
* Font Family: Pico-Black (get it from here)
* Font size: 30px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #2fcfff
Sau đó, đưa vào đó một Stroke theo hình ảnh sau.
25b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta tạo ra LinkedIn. Nhập “IN” với các đặc tính thiết lập sau:
* Font Family: Myriad Pro (get it from here)
* Font size: 30px
* Font weight: Bold
* Anti-aliasing setting: Smooth
* Color: #0081ac
25c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Facebook!? Nhập chữ “F” với các đặc tính thiết lập sau:
* Font Family: Klavika (get it from here)
* Font size: 30px
* Font weight: Bold
* Anti-aliasing setting: Smooth
* Color: #395796
25d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 26
Tạo thêm một bản copy bức ảnh của thành viên này nữa. Trong khi đang chọn Photo layer, vào Layer > New Adjustment Layer > Black & White. Hãy chắc bạn đã chọn“Use Previous Layer to Create Clipping Mask”
26a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Nhập Text, các chữ cái truyền thông xã hội mà chúng ta đã viết trước khi sử dụng các đặc tính cài đặt tương tự, nhưng đưa chúng vào các giá trị màu sắc: # 505150.
26b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Do đó, thành viên này sẽ trông có màu xám khi nó không được căng lên.
Hãy tạo 2 bản copy và căn chỉnh chúng theo cách này
26c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Để đảm bảo chúng được căn chỉnh tốt, hãy tạo 4 nhóm riêng biệt, mỗi nhóm chứa nội dung của một thành viên, và nhấp chuột lên Distribute Left Edge trên Control Bar, có 4 nhóm đã chọn.
26d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tôi đã tổ chức các layer của mình, còn bạn?
26e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 27
Trước khi chúng ta bắt đầu trên phạm vi các đường link truyền thông xã hội, chúng ta cần thiết lập một số Border, đó là lý do tại sao chúng ta Drag 2 Guide mới theo hình ảnh sau.
27a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một vùng chọn có kích thước khoảng 940 x 70px và căn chỉnh chúng như hình ảnh bên dưới.
27b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tô màu nó bằng bất kỳ màu sắc nào, và sau đó, đưa vào đó một Gradient Overlay. Sử dụng hình ảnh bên dưới để tham khảo.
27c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một hình chữ nhật có kích thước 70 x 45px. Sử dụng hình ảnh bên dưới để căn chỉnh nó và đưa vào đó một số Layer Style. Gọi layer này là “tw_bg”
27d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Ẩn layer “tw_bg” để làm việc cho thoải mái. Tạo một hình chữ nhật khác có kích thước 10 x 43px, và vào Edit > Transform Path > Skew. Điều chỉnh các lựa chọn này trên Control Bar:
* X: 40px
* Y: 1253px
* V: –39
Gọi layer này là Effect” và làm cho“tw_bg” layer hiển thị.
27e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Copy layer style từ “tw_bg” layer và Paste nó vào trong layer “effect”.
27f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết chữ “T” với các đặc tính thiết lập này:
* Font Family: Pico-Black
* Font size: 35px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: Không quan trọng, chúng ta sẽ đưa vào đó một Gradient Overlay
Ngoài ra, đưa vào đó một số layer styles theo hình ảnh sau.
27g Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 28
Lặp lại bước 20 để tạo ra một dấu phân cách hoặc copy nó. Sau đó, định vị nó theo cách này:
28a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Chúng ta cần cắt phần bên phải của hình chữ nhật. Để thực hiện điều đó, chọn “tw_bg” layer và nhấp chuột lên Add layer mask.
Tạo một vùng chọn trên phần bên phải (mà chúng ta cần cắt) của hình chữ nhật, thiết lập màu Forefground sang màu đen (# 000000) sau đó, nhấn Shift + Backspace để tô màu nó.
28b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 29
Viết một số Text – trong đo cần có một Tweet – với các đặc tính thiết lập này:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #222222
29a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Để căn chỉnh text cho tốt, trong khi đang chọn layer text và Green Bar layer, nhấp chuột lên Align vertical centers.
29b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 30
Lặp lại bước 27 để tạo ra một cái gì đó giống như trong hình dưới đây. Ngoài ra, tạo một hình chữ nhật, tô màu với màu sắc # 334814 và giảm Opacity của layer đó xuống 40%..
30a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đưa vào hình chữ nhật lớn một số layer styles theo hình sau.
30b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, tô màu hình chữ nhật nghiêng bằng màu sắc tối hơn với giá trị màu sắc: # 2a6788
30c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết chữ “T” với các đặc tính thiết lập này:
* Font Family: Pico-Black
* Font size: 35px
* Font weight: Regular
* Anti-aliasing setting: Smooth
* Color: #2fcfff
Và đưa vào đó một Stroke, sử dụng hình ảnh bên dưới để tham khảo
30d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Hãy chắc bạn đã sắp xếp và nhóm các layer lại với nhau.
30e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 31
Tạo một bản copy khác của Twitter icon, thay đổi Color Overlay (đối với hình chữ nhật lớn) sang: # 0080ab, và tô màu hình chữ nhật nghiêng với giá trị màu sắc này: # 00526d.
31a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết chữ “IN” với các đặc tính thiết lập này:
* Font Family: Myriad Pro
* Font size: 35px
* Font weight: Bold
* Anti-aliasing setting: Smooth
* Color: white (#ffffff)
31b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một bản sao thứ ba của Twitter hay LinkedIn icon, thay đổi Color Overlay (đối với hình chữ nhật lớn) sang: # 395796, và tô màu hình chữ nhật nghiêng với giá trị màu sắc này: # 263e6f.
31c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết chữ “F” với các đặc tính thiết lập sau:
* Font Family: Klavika
* Font size: 35px
* Font weight: Bold
* Anti-aliasing setting: Smooth
* Color: white (#ffffff)
31d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một bản copy cuối cùng, thay đổi Color Overlay (đối với hình chữ nhật lớn) sang: # e8e8e8, và tô màu hình chữ nhật nghiêng với giá trị màu sắc: # cdcdcd.
31e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết chữ “Fr” với các đặc tính thiết lập sau:
* Font Family: Frutiger Black (tìm từ đây here
* Font size: 35px
* Font weight: Bold
* Anti-aliasing setting: Smooth
* Color: f: #0079d2 – r: #ff3093
31f Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Đặt mỗi bản copy của các Icon trong từng nhóm riêng biệt, và trong khi chọn 4 bản copy này, nhấp chuột lên Distribute left edges .
31g Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 32
Hãy giữ như nó đang hoạt động. Chỉ trên Footer bên trái. Tạo một vùng chọn có kích thước 1020 x 460px và tô màu nó bằng bất cứ màu nào.
32a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Gắn một Gradient Overlay cho nó. Sử dụng hình ảnh bên dưới để tham khảo.
32b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bạn phải có một Shadow đẹp.
32c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Single Row Marquee Tool (M), tạo ra một vùng chọn có kích thước 1px và tô màu nó bằng màu trắng (# FFFFFF).
32d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 33
Drag 2 Guide theo chiều ngang mới theo hình bên dưới.
33a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết tiêu đề với các đặc tính cài đặt sau:
* Font Family: Rockwell
* Font size: 30px
* Font weight: Regular
* Anti-aliasing setting: Sharp
* Color: #7ea547
33b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết tiêu đề phụ với các đặc tính cài đặt:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #d3d3d3
33c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Sử dụng Line Tool (U) để tạo 2 đường thẳng nằm ngang phía trên cùng, và tô màu chúng bằng các giá trị màu sắc: # 151515 — # 2f2f2f.
33d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Căn chính nó theo cách này.
33e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 34
Drag 2 Guide nằm ngang mới theo hình sau.
34a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với Rounded Rectangle Tool (U), hãy tạo 2 hình chữ nhật có kích thước 210x25px — Radius có kích thước 5px, tô màu chúng bằng màu: # 141313 và đưa vào đó một Inner Shadow.
34b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết một số Text bên trong 2 hình chữ nhật với các đặc tính thiết lập:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: #7ea547
34c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo một hình chữ nhật khác giống như hình chữ nhật bên trên, nhưng lần này chiều cao của nó sẽ là: 110px. Ngoài ra, viết một số Text bên trong nó với các đặc tính thiết lập bên trên.
Tạo một bản copy của Button mà chúng ta đã tạo ra trong bước 17, và căn chỉnh nó theo hình ảnh sau.
34d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 35
Viết một tiêu đề khác như tiêu đề bên trái
35a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết một số Text. Sử dụng hình ảnh bên dưới để tham khảo.
35b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo 2 bản copy về những gì bạn đã làm.
35c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 36
Tô màu phần bên phải với tiêu đề thứ 3 và một số Text.
36a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bây giờ, Footer của bạn sẽ trông như thế này.
36b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Bước 37
Chúng ta hầu như đã hoàn thành. Drag một guide nằm ngang mới có kích thước 50px.
37a Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tạo 2 đường thẳng nằm ngang phía trên cùng, và tô màu chúng với các giá trị màu này: # 181818 — # 2f2f2f.
37b Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Viết một số Text về quyền tác giả với các đặc tính thiết lập:
* Font Family: Arial
* Font size: 15px
* Font weight: Regular
* Anti-aliasing setting: None
* Color: white (#ffffff) – #82aa48
37c Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
With the same character settings write a sub-navigation.
37d Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Với các đặc tính thiết lập tương tự cho thanh navigation phụ.Hãy chắc bạn đã sắp xếp và nhóm chúng lại với nhau. Đây là cách mà tôi đã tổ chức các layer của mình.
37e Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Kết luận
Chúng ta đã hoàn thành. Chúng ta đã tạo ra web 2.0 layout rất chuyên nghiệp. Bạn có thể thấy các kỹ thuật được sử dụng ở đây rất đơn giản, nhưng lại mang lại các kết quả độc đáo.
final small Thiết Kế Layout Web 2.0 Chuyên Nghiệp thiết kế web
Tôi thực sự đã cố gắng để giải thích mọi thứ một cách hết sức cẩn thận. Tuy nhiên, nếu bạn không đồng ý bất kỳ vấn đề gì, đừng ngần ngại yêu cầu giúp đỡ. Chỉ cần Drop một bình luận và chúng tôi sẽ làm hết sức mình để giúp đỡ bạn.
