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

Hiện nay, có rất nhiều phần mềm thiết kế web được nhiều người dùng tin tưởng sử dụng. Bên cạnh đó những hình ảnh mà chúng ta sử dụng để đưa lên website thì cũng cần được xử lý qua công cụ chỉnh sửa ảnh và công cụ VIDOCO lựa chọn là photoshop.
 

Trước khi ta bắt đầu bài viết vê thiết kế giao diện web bằng photoshop thì bạn cần một phần mềm là APhotoshop. Bạn có thể download phần mềm photoshop phù hợp với máy tính của bạn. Nào chúng ta cùng bắt đầu nhé

1. Trong Photoshop, chọn File > Browse in Bridge. Và chọn hình ảnh bạn muốn thực hiện để thiết kế giao diện web bằng photoshop

2 Chọn File > Save As, Tiếp theo hãy lưu hình ảnh vào một file làm việc thích hợp và tiếp tục những bước sau
Thêm văn bản

Bạn có thể thêm một đoạn văn bản hay giới thiệu gì đó lên trên hình. Đoạn văn bản sẽ đóng vai trò như các liên kết trên trang website của bạn.

1. Chọn công cụ Horizontal Type (T) (tạo đoạn văn bản viết theo chiều ngang) và nhấn chuột vàobất cứ điểm nào ở trên hình ảnh mà bạn lựa chọn, con trỏ văn bản sẽ xuất hiện. Trên thanh Options ở đỉnh của màn hình, chọn Myriad Pro ở menu thả Font family (họ font), Bold (in đậm) ở menu thả Font style và 60 ở menu thả Font size (cỡ font).

2. Nhấn nút Center text (căn giữa văn bản), sau đó nhấn chuột một lần vào nút Set the textcolor (màu của đoạn văn bản) trên thanh Options và chọn màu trắng từ hộp thoại Color Picker mới xuất hiện -> Nhấn OK.

3. Sau khi thiết lập các tùy chọn cho văn bản, bạn hãy nhập đoạn văn mà bạn muốn nó hiển thị trên hình ảnh. Bây giờ, bạn sẽ tinh chỉnh văn bản bằng cách điều chỉnh độ giãn dòng (leading — khoảng cách giữa các dòng văn bản) và độ giãn chữ (kerning — khoảng cách giữa các chữ cái).

4. Với vùng văn bản đang kích hoạt, ấn Ctrl+A (Windows) hoặc Command+A (Mac OS) để chọn tất cả văn bản, sau đó nhấn Alt+mũi tên lên (Windows) hoặc Options+mũi tên lên (Mac OS) để giảm khoảng cách giữa các dòng. Nếu khoảng cách này bị giảm quá mức, hãy nhấn Alt+mũi tên xuống (Windows) hoặc Options+mũi tên xuống (Mac OS) để tăng khoảng cách giữa các dòng. Bạn hãy thử đặt độ giãn dòng, sao cho văn bản chồng ngay lên trên dòng văn bản tiếp theo.

5. Hãy giảm khoảng cách của văn bản bằng cách nhấn chuột để đặt con trỏ ở bất cứ điểm nào giữa các chữ cái này. Sau đó, ấn và giữ phím Alt+mũi tên trái (Windows) hoặc Option+mũi tên trái (Mac OS) và ấn liên tiếp cho đến khi khoảng cách giữa các chữ nhỏ lại. Bạn có thể chọn một khoảng cách tùy ý. 

6. Trong khi văn bản vẫn đang kích hoạt, hãy nhấn chuột vào nút Create warped text (tạo hiệu ứng uốn cong văn bản) trên thanh Options. Hộp thoại Warp Text xuất hiện. Bạn có thể dùng tính năng này để tạo ra rất nhiều kiểu hiệu ứng. 

7. Trong hộp thoại Warp Text, chọn Rise (uốn cong lên) từ menu thả Style và đảm bảo là nút xoay Horizontal (áp dụng hiệu ứng theo phương nằm ngang) đã được chọn.

8. Nhấn chuột và kéo thanh trượt Bend (mức độ uốn cong) sang trái để thay đổi giá trị thành +10, hoặc nhập +10 vào trường văn bản Bend.

9. Đảm bảo thông số Horizontal Distortion (biến dạng theo chiều ngang) là 0, sau đó nhấn chuột và kéo thanh trượt Vertical Distortion (biến dạng theo chiều dọc) về bên phải tới giá trị 25 hoặc nhập 25 vào trường văn bản Vertical Distortion. Nhấn OK. 

10. Nhấn chuột vào hộp kiểm Commit ở bên phải thanh Options để xác nhận các thay đổi đối với văn bản. Nếu cần, hãy chọn công cụ Move, sau đó nhấn và kéo chuột để đặt lại vị trí, sao cho văn bản hiển thị đầy đủ ở góc trên bên trái hình ảnh.
 

Bạn đã tạo văn bản tiêu đề. Bây giờ bạn sẽ thêm một hiệu ứng layer cho văn bản đó.

1. Với layer văn bản vẫn đang được chọn, hãy nhấn chuột vào nút Add a layer style(fx) (thêm một hiệu ứng layer) ở cuối bảng Layers. Chọn Outer Glow (quầng sáng bên ngoài) từ menu thả Layer style. Hộp thoại Layer Style xuất hiện với các thiết lập Outer Glow.

2. Từ menu thả Blend Mode (chế độ hòa trộn), chọn Normal (bình thường).

3. Trong phần Structure (kết cấu quầng sáng), nhấn chuột vào nút chọn màu cho mẫu Glow, hộp thoại Color Picker sẽ xuất hiện. Nhấn chuột và kéo thanh trượt ở phía phải của ô màu cho đến khi bạn thấy dải màu xanh da trời. Chọn màu xanh đậm và nhấn OK.

4. Trong phần Elements (các phần tử sáng), nhấn chuột và kéo thanh trượt Size (kích thước) về phía phải tới giá trị 25, hoặc nhập 25 vào trường văn bản Size. Nhấn OK để đóng hộp thoại.

Chúng tôi đã giới thiệu đến các bạn những cách cơ bản để chỉnh sửa hình ảnh phù hơp với website để chuẩn bị cho việc thiết kế giao diện web bằng photoshop phần tiếp theo