Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Thiết kế web bằng photoshop > Hướng dẫn tạo Porfolio Web Layout trong Photoshop
Hướng dẫn tạo Porfolio Web Layout trong Photoshop
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo Porfolio Web Layout trong Photoshop

Trong bài viết này tôi sẽ hướng dẫn bạn các thao tác để có thể tạo được một Porfolio Web Layout trong Photoshop và cách sử dụng 960 Grid System để sắp xếp các bố cục trên web của bạn.

I. Tài nguyên dùng trong Tutorial

II. Preview
Cùng xem thành quả của chúng ta sau khi hoàn thành nhé. Bạn có thể xem kích thước thật tại đây
Portfolio web layout in photoshop
III. Giới thiệu
Đối với bài viết này, chúng tôi sẽ sử dụng 960 Grid System. Bạn có thể tải về, sau đó giải nén, và mở tập tin 960_grid_12_col.psd trong photoshop. Khi bạn mở ra sẽ xuất hiện 12 cột màu hồng. Đó là hệ thống grid mà bài này sử dụng, bạn có thể ẩn đi bằng cách tích vào con mắt trong layer panel. OK chúng ta cùng học nhé
IV.Bắt đầu
Bước 1: Setting up the document
Mở “960_grid_12_col.psd” trong Photoshop. Vào Edit> Kích thước Canvas và thay đổi chiều rộng 1200px và chiều cao là 1400px.
Fill background với màu #333333. Nhấp chuột phải vào layer Background và chọn Convert to Smart Object. Sau đó, vào Filter> Noise> Add Noise và sử dụng các thiết lập từ hình ảnh dưới đây.
Setting up the document
Bước 2: Creating the header background
Tạo một Group đặt tên là “Header”. Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật với kích thước 1200px và 140px với màu #30a0b8. Đặt tên cho layer này là “header bg”. Click chuột phải sau đó chọn Convert to Smart Object và tiếp tục dùng noise giống với thao tác bên trên.
Creating the header background
Bước 3
Chọn Rectangle Tools (U) và tạo một đường thẳng với chiều cao 4px với màu #33b9d6. Đặt tên là layer “top bar”
top bar
Bước 4: Creating a triangle pattern
Bây giờ chúng ta sẽ tạo một pattern để sử dụng cho phần header này. Tạo một file mới với kích thước 20×8 px. Zoom vào gần, sau đó chọn công cụ Pen Tool (P) vẽ một hình tam giác và đổ màu đen cho nó, sau đó Chọn Edit> Define Pattern. Click OK và close cửa sổ này đi.
Creating a triangle pattern
Bước 5: Applying the pattern
Chọn Rectangle Tool (U) và tạo một hình có kích thước 1200px by 10px. Sau đó set Fill là 0%. Đặt tên layer này là “Top pattern”. Click đúp vào layer, sau đó áp dụng pattern bên trên cho layer với style Pattern Overlay
Applying the pattern
Bước 6: Changing the color of the pattern layer
Chuột phải vào layer “Top pattern” chọn Convert to Smart Object. Double click để mở cửa sổ layer Style. Sau đó thiết lập như hình dưới với màu #33b9d6
Changing the color of the pattern layer
Bước 7: Duplicating the pattern layer
Copy layer “Top Pattern” để tạo layer mới, đặt tên là “Bottom Pattern” sau đó kéo layer này xuống phía dưới phần header. Mở layer style lên và thay đổi Color Overlay là #30a0b8
Duplicating the pattern layer
Bước 8: Creating a texture for the header
Sử dụng Rectangular Marquee Tool (M) để tạo một hình chữ nhật trên khu vực header. Tạo layer mới và fill màu là #aaaaaa. Nhấn Ctrl/Cmd + D để bỏ chọn. Đặt tên layer này là “texture”. Sau đó Convert to Smart Object nó.
Chúng ta chỉ muốn texture này áp dụng riêng cho phần header mà thôi. Để làm điều này, bạn hãy giữ phím Ctrl/Cmd sau đó click vào phần ảnh nhỏ của layer “Header bg” và “bottom pattern”. Sau đó vào Layer > Layer Mask > Reveal Selection.
Với layer “texture” được chọn, bạn vào Filter > Noise > Add Noise và Filter > Sketch > Water Paper với thiết lập như hình. Sau đó chỉnh chế độ blend mode là Soft Light
Creating a texture for the header
Bước 9: Adding the name of the layout
Chọn Type Tool(T) và sử dụng font Univers Ultra Condensed với màu #e3eef2 để tạo chữ cho phần logo của chúng ta. Nhớ thiết lập như hình dưới nhé.
Adding the name of the layout
Bước 10: Creating the navigation bar
Tạo một group mới có tên “navigation”. Chọn Type Tools (T) và viết từng menu cho navigation. Sử dụng màu #ffffff và font Univers Light Condensed với cỡ chữ 18pt. Hãy chắc chắn rằng bạn active guides để sắp xếp các menu cho đẹp hơn. Áp dụng shadow cho những menu này theo thiết lập như hình dưới.
Download gói icon bên trên về, giải nén và mở ra trong photoshop, sau đó đặt chúng vào những vị trí thích hợp.
Creating the navigation bar
Bước 11: Creating the style for the active navigation item
Chọn Rounded Rectangle Tool (U) với Radius là 2px. Sau đó tạo một hình chữ nhật viền tròn với màu #3895a8 và các thiết lập như hình dưới. Đặt tên layer này là “active”.
Creating the style for the active navigation item
Bước 12: Create a diagonal stripes pattern
Tạo một file mới với kích thước 4px by 4px. Sau đó zoom vào gần và dùng Rectangular Marquee Tool (M) để tạo ra file như hình dưới. Xong ta nhấn Edit>Define Pattern -> OK.
Create a diagonal stripes pattern
Bước 13: Creating the image slider
Tạo một group mới tên “Slider”. Chọn Rectangle Tool (U) và tạo hình với kích thước 1000px by 350px với màu #9eafb2. Đổi tên thành “slider border” và sử dụng thiết lập như hình
Creating the image slider
Bước 14:
Tạo một hình vuông với kích thước 980px by 330px fill màu #ffffff. Đổi tên thành “image_holder”. Để thêm một hình ảnh vào trong phần image_holder này, chúng ta mở 1 hình trong photoshop. Sau đó dupplicate layer đó sang bài của chúng ta. Đặt tên cho layer này là “image”. Chuột phải chọn Creat Clipping Mask
image_holder
Bước 15: Creating the image slider arrows
Tạo một group mới với tên “right arrow”. Chọn Ellipse Tool (U) để tạo một hình tròn có kích thước 45px by 45px đổ mầu là #33b9d6. Đặt tên layer này là “circle”. Copy ký tự “»”. Chọn công cụ Type Tool (T) để paste nó vào trong vòng tròn trên. Đổ mầu là #f4f4f4 với font Univers Condensed.
Dupplicate group “right arrow” sau đó sử dụng Edit > Transform > Flip Horizontal, đặt tên là “left arrow” và kéo sang vị trí bên kia.
Creating the image slider arrows
Bước 16: Creating the headline for the featured area
Giờ chúng ta sẽ tạo một ribbon cho phần slider này, nhìn cho nó bắt mắt chút. Tạo một group mới với tên “headline”. Chọn Pen Tool (P) để vẽ một hình như hình dưới với màu #ac1eda và đổi tên thành “bg”. Thiết lập như dưới.
Creating the headline for the featured area
Bước 17: Adding shadows to the ribbon
Tạo một layer bên trên layer “bg” đặt tên là “shadow”. Chuột phải chọn Create Clipping Mask. Chọn Brush Tool(B) sử dụng màu đen và opactiy 60% để vẽ một vài đường tạo hiệu ứng ánh sáng cho ripbon. Sau đó chọn chế độ blend mod Soft Light 70%.
Adding shadows to the ribbon
Bước 18:
Sử dụng Type Tool, font chữ Univers Ultra Condensed với màu #ffffff viết chữ “FEATURED”
Univers Ultra Condensed
Bước 19:
Dùng Line Tool(U) với độ rộng 1px tạo một đường thẳng ngang rộng 10px và tiếp tục lặp đi lặp lại cho gần hết phần ribon. Đặt tên cho group này là “top” và bên trong một group khác là “dashed line”. Dupplicat group “top” lên, đặt tên là “bottom” và kéo xuống bên dưới của ribon. Chuyển chế độ blend mode của “dashed lines” là Soft Line 50%
dashed lines
Bước 20:
Chọn Rectangular Marquee Tool (M) tạo một vùng chọn như hình. Tạo một layer mới, sử dụng black soft brush để add thêm shadow cho phần bên trái của ribon. Nhấn Ctrl+D để bỏ chọn. Đổi tên thành layer “shadow” và hạ opacity 50%.
Rectangular Marquee Tool (M)
Bước 21: Creating the background for the content
Tạo một group mới có tên “content bg”. Chọn Rectangle Tool (U) và tạo một hình chữ nhật có kích thước 1000px by 1670px. Chuột phải chọn Convert to Smart Object. Sau đó Filter > Noise > Add Noise như hình dưới
Creating the background for the content
Bước 22: Creating white triangle patterns
Tạo một file mới với kích thước 20px by 10px. Zoom in và dùng công cụ Pen Tool vẽ một hình tam giác và dùng nó để làm pattern như hình dưới.
Tiếp tục chọn Edit > Transform > Flip Vertical để xoay hình tam giác ngược lại. Dùng công cụ Move Tool (V) để kéo hình tam giác xuống phía dưới cùng của file. Lại tiếp tục Edit > Define Pattern để tạo thêm 1 pattern nữa.
Creating white triangle patterns
Bước 23: Applying the triangle patterns
Sử dụng công cụ Rectangle Tool (U) để tạo một hình chữ nhật có kích thước 1000 by 10px ở phần trên của layer “content bg”. Đặt tên là “top triangles” và set Fill 0%. Sau đó áp dụng với pattern vừa tạo được. Làm tương tự đối với phần dưới của “content bg”.
Applying the triangle patterns
Bước 24: Creating the “Services” area
Tạo một group mới với tên “Services”. Dupplicate group “headline” ở trên phần image slider. Và kéo nó xuống vị trí như hình bằng công cụ Move Tool(V). Thay đổi màu nền thành #da1e4a và dùng Type Tool(T) viết chữ “Services”.
Creating the “Services” area
Bước 25: Adding a description of the services
Tạo một group mới với tên “Web design”. Active guides bằng tổ hợp phím Ctrl+;. Dùng công cụ Rectangle Tool(U) tạo một hình chữ nhật kích thước 220px by 320px với màu #f4f4f4. Bật Layer Style thiết lập Stroke là 1px với màu #d4d4d4.
Adding a description of the services
Bước 26:
Tạo một hình chữ nhật có kích thước 200 by 300px bên trong hình chữ nhật ở bước trên với màu nền là #ffffff. Đặt tên cho layer này là “image_holder”. Sử dụng stroke như bước trên.
Stroke to this rectangle
Bước 27:
Chọn Type Tool để viết như hình dưới
Step 27
Bước 28: Creating a “Read More” button
Tạo một group mới đặt tên là “button”. Chọn Rounded Rectangle Tool (U) với Radius 4px tạo một hình chữ nhật có kích thước 140px by 30px có màu #ac1eda. Mở Layer Style và làm như hình.
Creating a “Read More” button
Chọn Type Tool(T) và viết chữ “Read More »”. Tôi sử dụng màu trắng font Univers Light Condensed với cỡ 16pt.
Univers Light Condensed
Bước 29:
Dupplicate group “Web design” ra thành 4 group nữa, và sửa sao cho phù hợp với các service của bạn nhé.
web design
Bước 30: Creating the “Portfolio” area
Tạo một group mới với tên “Portfolio”. Dupplicate group “Headlines” bên trên, sau đó dùng Move Tool(V) kéo nó xuống dưới như hình. Đổi màu của “bg” thành #aec81e.
Creating the Portfolio area
Tiếp tục làm giống như bước tạo ra “Web design” bên trên, nhưng ở đây chúng ta tạo ra những ô vuông có kích thước 140px by 140px.
border layers
Dupplicate group “button” bên trên nhưng chúng ta đổi màu đi thành #aec81e.
#aec81e
Bước 31: Creating the “About” area
Tiếp tục dupplicate 2 group là “Button” và “Headline” bên trên. Chúng ta sử dụng Edit > Transform > Flip Horizontal để xoay group “Headline” đi và thay đổi màu cho nó là #40b1e6. Dùng Type Tool(T) với font Helvetica Regular kích thước 12pt, màu #515151 để tạo phần chữ viết bên trong.
Creating the About area
Bước 32: Creating the “Blog” area
Tiếp tục dupplicate group “Headline” đổi màu là #da7be1.
Creating the Blog area
Tạo một group mới với tên “post #1”. Sau đó tạo một image_holder giống bên trên có kích thước 200px by 200px. Thiết lập các thông số như hình.
post #1
Dupplicate group này lên và kéo xuống bên dưới ta được như hình.
Duplicate the post #1
Bước 33: Creating the sidebar of the blog
Tạo một layer mới có tên “Categories”. Chọn Type Tool(T),sử dụng font Univers Ultra Condensed cỡ 36pt, màu #515151 để viết chữ “Categories”. Tạo thêm một đường kẻ ngang có màu #b9b9b9.
Creating the sidebar of the blog
Dùng Rectangle Tool (U) tạo một hình chữ nhật với kích thước 300 by 5px ngay bên dưới đường kẻ chỉ bên trên. Đổi tên thành “diagonal lines” và set Fill 0%. Sau đó áp dụng Layer Style là Pattern Overlay như hình.
diagonal lines
Dùng Type Tool(T) để tạo danh sách các categories cho website. Chúng ta sử dụng font Helvetica Regular, cỡ 12pt, màu #515151 để viết.
Để tạo các bullet chúng ta sử dụng Ellipse Tool (U) tạo ra những hình tròn kích thước 5×5 màu #515151.
Ellipse Tool (U)
Bước 34: Adding separators between content sections
Chúng ta sẽ tạo ra các đường thẳng có độ rộng 1px màu #dbdbdb để ngăn cách các phần với nhau như hình
Adding separators between content sections
Bước 35: Adding the footer
Dùng Type Tool(T) với màu #ebebeb để tạo phần Footer.
Adding the footer
OK! Phù, xong rồi đó, chiêm ngưỡng thành quả đi nào các bạn. Show cho mình xem nữa nhé.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}