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

Bài này mình dịch lại từ một website nước ngoài

Thiết kế giao diện web bằng photoshop

Kết quả

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.

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

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.

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

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

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.

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

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

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

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

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

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

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

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.

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

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.

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

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.

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

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.

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

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

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

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

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

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

Tạo Content

Bắt đầu bằng cách thêm một gạch phân chia đơn giản bên dưới header.

Gạch được tạo ra đơn giản với "Type Tool (T)" gõ ký tự gạch ngang “(—)”. Sau đó thêm layer style sau

Cuối cùng chỉnh Opacity 50% . Bây giờ, sử dụng Type (T) thêm vài dòng content, các font tôi được sử dụng là" Vijaya "mà bạn có thể tải về từ danh sách tài nguyên.
• Vijaya Font
Kết thúc bằng cách nhân đôi gạch phân chia bạn đã tạo trước đó sau đó kéo nó xuống bên dưới

Tải về "Set Icon Woofunction" từ danh sách tài nguyên sau đó thêm hai icon vào content. Ở bên cạnh của mỗi icon thêm một tiêu đề và phụ đề.
• Woofunction Icon Set