Home > Photoshop > Thiết Kế Layout Web 2.0 Chuyên Nghiệp

Thiết Kế Layout Web 2.0 Chuyên Nghiệp

Sản phẩm mà chúng ta sẽ tạo ra

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


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.


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.


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

Đưa vào đó một Gradient Overlay theo như hình ảnh sau:

Bây giờ, gọi layer này là: “header_bg”.


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

Bây giờ, chúng ta sẽ thêm một Gradient Overlay cho text với các thiết lập sau:

Để 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.


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

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

Đưa vào đó một Stroke và Gradient Overlay theo hình ảnh sau:

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.


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.

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.

Sau đó, đưa vào đó một Gradient Overlay với các thiết lập sau:

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.

Và sau đó, thêm một Gradient Overlay. Hãy sử dụng hình ảnh bên dưới để tham khảo.

Bây giờ, giảm Opacity của layer xuống 40%.


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:

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.

Tôi đảm bảo bạn sẽ có các chi tiết px hoàn hảo.

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.


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

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

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”, ;) 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.

Bây giờ, Drag 2 Guide mới theo chiều ngang theo hình ảnh sau.

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.


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.

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.

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


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

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

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.

Chọn “Shadow” layer, sau đó, nhấp chuột lên Add layer mask (ở Bottom của layers panel).

Chọn Gradient Tool (G) có Linear Gradient đen – trắng, drag từ dưới lên trên.

Bạn sẽ có một cái gì đó như cái này.


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.

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

Hãy chắc chắn bạn đã giữ document của bạn thật gọn gàng.


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.

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.

Chúng ta cũng sẽ đưa vaò đó một Stroke. Hãy sử dụng hình ảnh sau đây để tham khảo.

Và đây là những gì chúng ta có

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.


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.

Bây giờ, đưa vào đó một số Layer Styles theo hình ảnh sau

Với Custom Shape Tool (U), tạo một mũi tên và đưa vào đó các Layer Styles sau.

Bạn sẽ một cái gì đó như thế này.

Đừng quên căn chỉnh Button của bạn theo hình ảnh sau

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.


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.

Nhấn Shift+Backspace để tô màu vùng chọn này với màu sắc: # e8e8e8

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

Bây giờ, bạn sẽ có các chi tiết pixel hoàn hảo.


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.

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

Drag 2 Guide khác nữa theo hình ảnh bên dưới

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

Drag thêm 3 Guide nữa theo hình ảnh sau.


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.

Đư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.

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

Nhập “+”, tô màu nó bằng màu trắng (# FFFFFF) và định vị nó như thế này.

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

Đưa vào đó một Drop shadow. Hãy sử dụng hình ảnh bên dưới để tham khảo.


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.

Căn chỉnh đường phân cách của bạn như hình ảnh bên dưới

Đừ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.


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.


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

Với Elliptical Marquee Tool (M), tạo một vùng chọn như hiển thị bên dưới.

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

Để làm cho nó trông mờ, vào Filter > Blur > Gaussian Blur – radius: 3px.

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.

Nhấp chuột lên Add layer mask icon. Và thiết lập Gradietn Editor sang màu đen, trắng, đen.

Với Gradient Tool (G), Drag một Linear Gradient theo hình ảnh sau.

Giảm Opacity của layer xuống 50%

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.


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.

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

Drag 2 guide theo chiều ngang mới theo hình ảnh sau.

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

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.


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.

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%

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

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.

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.


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”).

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.

Đị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.


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

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.

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

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

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”

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.

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

Để đả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.

Tôi đã tổ chức các layer của mình, còn bạn?


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.

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.

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.

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”

Ẩ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ị.

Copy layer style từ “tw_bg” layer và Paste nó vào trong layer “effect”.

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.


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:

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


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

Để 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.


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

Đưa vào hình chữ nhật lớn một số layer styles theo hình sau.

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

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

Hãy chắc bạn đã sắp xếp và nhóm các layer lại với nhau.


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.

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)

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.

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)

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.

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

Đặ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 .


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.

Gắn một Gradient Overlay cho nó. Sử dụng hình ảnh bên dưới để tham khảo.

Bạn phải có một Shadow đẹp.

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


Bước 33

Drag 2 Guide theo chiều ngang mới theo hình bên dưới.

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

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

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.

Căn chính nó theo cách này.


Bước 34

Drag 2 Guide nằm ngang mới theo hình sau.

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.

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

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.


Bước 35

Viết một tiêu đề khác như tiêu đề bên trái

Viết một số Text. Sử dụng hình ảnh bên dưới để tham khảo.

Tạo 2 bản copy về những gì bạn đã làm.


Bước 36

Tô màu phần bên phải với tiêu đề thứ 3 và một số Text.

Bây giờ, Footer của bạn sẽ trông như thế này.


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.

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.

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

With the same character settings write a sub-navigation.

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.


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.

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.

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: