Hướng dẫn thiết kế website bằng Photoshop

Bấm phím tắt CTRL + K để vào bảng cài đặt PS.
– Tick chọn Zoom with Scroll Wheel ( Cuộn chuột để thu phóng )
– Tick chọn Use Shift Key for Tool Swich ( Bấm phím để đổi công cụ nhanh hơn )

1. Ở bên phải của PS. Ẩn tất cả các mục chỉ để lại bảng chọn Properties, Character, Paragraph và Layer vì những mục này thường xuyên sử dụng nhất trong việc thiết kế Website.
2. Ngoài ra để tiện cho việc xem chọn Layer. Ở góc trên cùng bên phải, bạn ấn tick vào Auto-Select – Layer ( Để click chọn layer ) và Show Transform Controls ( Hiển thị khung layer khi bạn click vào layer đó )
3. Ấn CTRL + R để hiển thị thanh thước kẻ Ruler

Ấn vào Create New để tạo một file làm việc mới

Nhập Width 1366px, Height 7000px, Resolution 77

Để tạo lưới phần nội dung của website. Bạn vào View – New Guide Layout

Nhập các thông số như hình trên, để cách lề trái phải 83px ( Còn lại nội dung sau khi cách 2 lề là 1200px )

Ấn phím tắt U – Chọn Rectangle Tool

Để tạo Khung chứa Header và Slider cho website bạn nhập các thông số sau:
Width 1366px ( Chiều rộng của khung Website )
Height 700px ( Chiều cao trung bình của màn hình máy tính )

Sử dụng công cụ Move Tool ( Phím tắt V ) và kéo thả Rectangle vừa mới tạo canh lề trên cùng của Background như hình trên.
– Hoặc bạn có thể nhập thông số X:0, Y:0 bảng chọn Properties ( X – Cách lề trái, Y – Cách lề trên )

Tiếp tục sử dụng phím tắt U ( Rectangle ) và nhập thông số Width 1366px và Height 100px. Height 100px là độ cao bình thường để chứa Menu và Logo

Khi tạo ra Rectangle mới này thì sẽ cùng màu với Rectangle chứa header và slider đã tạo trước đó. Muốn đổi màu Rectangle mới để dễ phân biệt, ở phía bên phải mục Properties, bạn ấn vào mục có bảng màu sắc và chọn màu tuỳ ý để dễ phân biệt.

Sau khi đổi màu xong, bạn tiếp tục ấn phím V ( Move tools ) và ấn vào Rectangle mới tạo và kéo lên đầu ở phần header sẽ được như hình trên.

Đầu tiên, ta sẽ tạo khoảng cách giữa phần Slider và Giới thiệu với phím tắt U, nhập chiều cao là 100px

Sử dụng phím V để duy chuyển Rectangle vừa mới tạo và kéo vào phần dưới cùng của Rectangle Slider

Tiếp tục click và kéo thanh đường line từ thanh Ruler ở trên cùng xuống phần dưới cùng của Rectangle mới tạo để tạo đường ngăn cách phần giới thiệu với slider.

Ấn U để tạo Rectangle chứa hình phần giới thiệu với Width và Height là 600px ( Có thể thay đổi tuỳ bố cục của website mà bạn muốn thiết kế )

Lại sử dụng phím V để kéo thả Rectangle vừa mới tạo vào vị trí bạn muốn, lưu ý không được vượt quá đường line màu xanh trên cùng vừa mới tạo.
– Nếu bạn muốn bo cong các góc của Rectangle mới tạo, ở bản chọn Properties, mục bôi xanh ( có biểu tượng bo góc ) bạn chọn thông số px mà bạn muốn bo góc. Ở đây tôi chọn 20px.

Để thêm văn bản vào thiết kế, bạn ấn phím tắt T ( Horizontal Type Tool ) và kéo thả vào thiết kế kích cỡ giới hạn văn bản mà bạn muốn.

Ở mục Properties – Character bạn có thể điều chỉnh các thông số của chữ như Font, Kích thước chữ, Khoảng cách chữ…

Bạn tìm hình ảnh bất kỳ và copy hình ảnh đó

Vào lại Photoshop ấn vào Rectangle muốn chèn hình vào và ấn CTRL + V để dán hình đã copy trước đó

– Dùng Phím V để kéo hình vào vị trí của Rectangle, Click vào các cạnh và kéo để phóng to – thu nhỏ hình ảnh.
– Chuột phải vào Layer hình ảnh ở bản chọn Layer bên phải màn hình và chọn mục Create Cliping Mask ( Phím tắt CTRL + ALT + G )
* Lưu ý hình muốn đưa vào khung Rectangle thì phải nằm phía trên liền kề Rectangle bạn muốn đưa vào ở bảng chọn Layer bên phải.