Tự thiết kế web với photoshop

Tạo layer mới đặt tên là ‘Top’. sử dụng Rectangle Marquee Tool tạo một hình chữ nhật ở đầu trang (chiều cao khoảng 270 pixels, màu #29729f). Vào Blending Options, tick vào Gradient Overlay, đặt Blend Mode thành Soft Light, Scale 150%.
bữa nay chúng ta sẽ Phân tích khiến thế nào để tạo 1 Web Layout (bố cục web) một cách thức chuyên nghiệp và gọn ghẽ. ở bài Tut này, chúng ta sẽ Phân tích cách thức dùng Gradients, bộ lọc Noise và 1 số đường Line 1px để tạo chiều sâu 1 cách thức tinh tế cho website.
Bài Tut được chia thành 2 phần: phần trước hết, ta sẽ thiết kế bố cục web trong Photoshop sau chậm tiến độ ta sẽ chuyển file PSD vừa tạo thành các thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được đầy đủ thời kỳ thực hành 1 trang web và khiến cho thế nào để kiểu dáng và mã hóa một trang web giỏi
Có thể xem thêm thiết kế website chuẩn SEO
Bên dưới là kết quả trong khoảng sự quyết tâm của chúng tôi, một bố cục web gọn đẹp, giỏi.



thời kỳ thực hiện
Tôi khuyên bạn nên phác thảo trước lúc bề ngoài web bằng cách thức sử dụng Photoshop, nó là bước quan yếu đầu tiên. Hãy vẽ hồ hết bố cục trang web của bạn ra một tờ giấy để ghi nhớ vị trí và đặc điểm của số đông những đối tượng (các cột,Button, Module, Slider…)
Dưới đây là bản phác thảo cho “dự án” website của tôi, sở hữu tên Download.Movie.





Bước 1: Tài Liệu (Document)

Chúng ta hãy bắt đầu có Photoshop. đầu tiên, tạo một file với kích thước 1024×1200 pixels có độ phân giải 72 pixels/inch, nền trong suốt. Nhập mẫu 960 grid (12 Col Grid), nó rất bổ ích để tạo website trong khoảng 960 pixels.

Bước 2: Tạo phông nền (Background)

Tạo vùng tuyển lựa (dùng the Selection Tool) kéo hết tất cả tài liệu, tạo một layer mới đặt tên là ‘background’, tô màu #f9f9f9 cho vùng tuyển lựa (Alt+Backspace), sau Đó khóa layer này lại.







Duplicate layer ‘Top’, tạo thêm một layer mới, nhấn Ctrl+Click vào ‘Top’ à Ctrl+E. Đặt tên lại cho Layer vừa gộp là ‘Top’.
Vào Filter Filter>Noise>Add Noise.







Tạo Layer mới đặt tên là ‘Login’ dùng Rectangle Marquee Tool tạo 1 biên ngang trên Top chiều cao 5px, tô màu #162850, sau chậm tiến độ tiêu dùng Rounded Rectangle Tool tạo một ô nhỏ sắp góc phải của ‘Top’, cũng tô màu #162850.








Tạo chiều sâu cho vùng này bằng bí quyết sử dụng Drop Shadow như hình:


Bước 3: Logo

Chúng ta sẽ đặt một Logo ở vùng top-left của web.
Để tạo hiệu ứng soft light cho Background, bạn với thể sử dụng công cụ Elliptical Marquee Tool tạo 1 hình Elip màu trắng, sau chậm tiến độ Add Gaussian Blur cho nó là 40px , chỉnh lại Opacity cho thích hợp. (Mục đích để khiến sáng nhẹ vùng Logo). Tạo tiếp 1 elip dẹt, làm cho mờ nhẹ và Opacity là 20%.




Tạo thêm 3 hình elip (mỗi hình 1 layer), đặt fill là 0% (fill chỉnh ở khung Layer), thêm Gradient Overlay cho mỗi elip như hình bên dưới.



hiện giờ là phần việc bề ngoài logo, hãy tiêu dùng trí hình dung của bạn. Ở đây tôi sẽ sử dụng một số Shape với sẵn trong PTS.
sử dụng Rounded Rectangle Tool vẽ một hình vuông nhỏ (giữ nút shift khi mà kéo nó mới ra hình vuông). tiếp tục tiêu dùng Custome Shape Tool vẽ 1 mũi tên nhỏ.
Rasterize 2 Layer này, sau ngừng thi côngĐây tiêu dùng hình mũi tên để cắt nó ra khỏi hình vuông. Nhớ xoay hình vừa cắt một tẹo cho đẹp.


hiện tại sử dụng Type Tool (T) viết tên tổ chức (hoặc cái gì bạn thích), add style giống như style vừa sử dụng với icon ở trên.

công đoạn cuối cùng để hoàn tất Header cho website là thêm thực đơn và khuông Login/Signup. tiêu dùng Type Tool và thêm Drop Shadow nhẹ cho text.