Layout with photoshop

Sử dụng kết hợp các công cụ của Photosho để thiết kế giao diện web




(Kết quả)

Bước 1
Tạo file flash è save với tên index.fla

Tạo file flash mới

Ctrl + N è chọn Action Script 3.0

Ctrl + J è set thuộc tính cho file flash như hình




Bước 2
Chuẩn bị hình ảnh cho bằng photoshop.

Mở file mới (Ctrl + N) è định thuộc tính theo hình.



Nhấn phím D è nhấn Alt + Delete để tô nền đen.



Bước 3
Nhập hình và cắt thành các hình tròn.

Chọn file / Place è chọn hình cần nhập.

Nhấn Ctrl + T (Free transform) è thu nhỏ hình cho phù hợp.

Chọn công cụ Elliptical marquee tool (M) è vẽ vùng chọn hình tròn bao quanh hình vừa nhập.

Nhấn Ctrl + Shift + I (Select / Inverse) è đảo vùng chọn.

Nhấn delete để xóa phần dư của ảnh.








1. Tạo viền cho hình.

Nhấn F7 è mở bảng Layer.

Chọn layer è Add layer style è Stroke è chọn thuộc tính như hình.



Size: độ lớn.

Position: vị trí

Opacity: độ trong suốt.

Color: màu của troke.





Bước 4
Tạo nút home

Nhấn F7 mở bảng Layer è Create new layer è tạo layer mới.

Tạo Stroke, giảm Fill như hình để nút trong suốt.




1. Nhập text Home cho nút.



Bước 5
Tạo nút Service

Copy nút home.

Nhấn F7 è mở bảng layer

Chọn công cụ Move tool (M) è nhấn Shift + click chọn các layer của nút home è kéo hình ảnh đồng thời nhấn phím Alt để Copy.




 Đổi màu cho nút Serveces.

Chọn nút Servece.

Nhấn phím Ctrl + U (Image/Adjustment/Hue|Saturation) và chỉnh màu theo tham số như hình.




Đổi hình minh họa cho nút Serveces.

Nhấn Ctrl + Click vào hình trên bảng layer để load vùng chọn.

Mở file hình dịch vụ h2.jpg è vẽ vùng chọn hình chữ nhật và copy.

Chuyển sang file index è chọn Edit / Paste into (Ctrl + Shift + V) è dán ảnh vào vùng chọn.

Nhấn Ctrl + M để chỉnh ánh sáng cho ảnh.







Thực hiện tương tự cho các nút còn lại.



Tags: Photoshop