Thiết kế web style clean bằng photoshop

Th8 21, 2018
Photoshop
0 0

Nguồn tài nguyên sử dụng Trong tutorial này
• Woofunction Icon Set
• Hora Del Juego By Reevolver
• Vijaya Font

Tạo background

Tạo một tài liệu mới (Ctrl + N) với kích thước 1200 x 1245 với màu background trắng #ffffff . Đặt tên cho layer background sau đó thêm một “Gradient Overlay” bằng cách sử dụng các cài đặt dưới đây.

[​IMG]

Chọn Elliptical Marquee Tool (M) sau đó kéo ra một hình elip lớn lên trên cùng.

[​IMG]

Tạo một layer mới trên layer background sau đó đặt tên nó “Background Jazz “. Bây giờ chọn công cụ Gradient Tool với các tùy chọn sau đây.

[​IMG]

Kéo gradient qua một phần trên của ellipse

[​IMG]

Bỏ chọn hình elip (Ctrl + D) và chúng ta có một cái gì đó như thế này.

[​IMG]

Nhân đôi, xoay và điều chỉnh opacity của mỗi layer ngẫu nhiên. Tôi làm điều này 3 lần.

[​IMG]

Tạo Header

Ở phía bên trái, thêm logo và slogan,sử dụng “Type Tool (T). Font được sử dụng là “Vijaya” và có thể được tải về từ resource list.

• Vijaya Font

[​IMG]

Chọn layer logo, sau đó thêm layer styles sau đây.

[​IMG]
[​IMG]

Sẽ nhìn như thế này.

[​IMG]

Ở bên phải của logo và slogan chúng ta thêm menu với cùng font chữ . Đối với các hiệu ứng di chuột vào một trong các liên kết đơn giản là cho các text thành màu đậm hơn và thêm một gạch dưới.

[​IMG]

[​IMG]

Tạo Slider

Chọn “Rounded Rectangle Tool (U) với radius 10px sau đó kéo ra một hình chữ nhật bên dưới menu

[​IMG]
[​IMG]

Sau đó thêm layer styles sau đây.

[​IMG]
[​IMG]

Bây giờ thiết lập các layers để opacity 50%, sẽ nhìn như thế này.

[​IMG]

Chúng ta cần phải thêm hình ảnh bên trong hình chữ nhật, hình ảnh này sẽ nhỏ hơn và cách 15px so với viền xung quanh hình chữ nhật. Giữ Ctrl và click vào hình nhỏ trên layer.

[​IMG]

Khi đã có vùng chọn,vào “Select> Modify> Contract”. Điền 15px sau đó nhấn OK.

• Hora Del Juego By Reevolver ( Hình ảnh cho Slider)
Cho hình ảnh vào và thay đổi kích thước hình ảnh để nó trông như bạn muốn

[​IMG]

Chọn công cụ Pen Tool (P) hoặc ” Polygonal Lasso Tool (L)” và tạo vùng chọn như hình dưới đây.

[​IMG]

Fill (G) lên một layer mới với màu trắng #ffffff, sau đó thiết lập opacity của layer xuống khoảng 35%.

[​IMG]

Tiếp theo, chúng ta cần thêm các chú thích bên dưới hình ảnh. Chọn “Rectangular Marquee Tool (M) sau đó kéo ra một vùng chọn hình chữ nhật ở phía dưới của hình ảnh.

[​IMG]

Fill (G) màu sắc bất kỳ sau đó thêm các layer style sau đây.

[​IMG]
[​IMG]
[​IMG]

Chọn “Type Tool (T) sau đó thêm một số text bên trong hình chữ nhật, ví dụ thế này.

[​IMG]

Tạo Thanh trượt Gallery cho slider

Chọn “Rounded Rectangle Tool (U) sau đó kéo ra một hình vuông nhỏ bên dưới 

[​IMG]

Thay đổi màu hình vuông thành màu trắng #ffffff sau đó tạo một hình vuông nhỏ hơn và cách viền 5-10px giống như chúng ta đã làm cho hình ảnh slider bên trên. Sau đó chèn hình ảnh bạn muốn vào

[​IMG]

Lặp lại bước này thêm 3 lần, bạn sẽ có tổng số 4 ảnh.

[​IMG]

Bên trái và bên phải của dãy hình nhỏ thêm hai mũi tên.

[​IMG]

Thêm layer style cho hai mũi tên.

[​IMG]
[​IMG]

Bây giờ sẽ như thế này.

[​IMG]

Comments are closed.