Thiết kế giao diện web với Photoshop

Bài này tôi sẽ hướng dẫn các bạn thiết kế hoàn chỉnh một trang Website Thương Mại Điện Tử đơn giản và để khởi đầu cho công việc kinh doanh của mình.

Tôi dùng phần mềm Adobe Photoshop 5. Các bạn có thể dùng CS3, CS4 cũng đều giống như nhau.

Trước mở một tài liệu mới từ Photoshop và chọn kích thước và các thông số như hình dưới: 


Các bạn nên nhớ một điều quan trọng khi thiết kế hoàn chỉnh một Layout thì sẽ có rất nhiều layer được tạo ra, vì vậy các bạn nên tạo những danh mục liên quan và đặt tên cho nó để dễ quản lý khi chỉnh sửa giúp tiết kiệm thời gian.

Đầu tiên là tạo một một group mới trong bảng quản lý layer và đặt tên ví dụ tôi đặt cho nó là home sao đó trong Floder home tôi tiếp tục tạo những group khác để quản lý và làm việc từng group riêng biệt.




Đầu tiên chúng ta sẽ thiết kế các thành phần sau: Logo, Nút Shopping Cart, Các nút tiền tệ và chữ.

B1.Logo: công ty ta có thể dùng phần mềm vẽ logo như illustrator hoặc corel tạo làm logo khi làm xong ta sẽ xuất file hình ảnh để dùng cho Photoshop. Như hình bên dưới:



 

B2.Nút shopping Cart: cách làm nút shopping cart như sau, chọn công cụ Rectangle Tool (U) – tiếp tục chọn Rounded Rectangle tool trên thanh menu ngang cho Radius (độ bo góc) là 6 px – ta sẽ vẽ một khung hình chữ nhật trên mẫu thiết kế như hình: 




Đổi màu lại cho khung Shopping Cart như sau: chọn lại công cụ Move Tool (V) sau đó click phải chuột vào Layer Shape mà ta mới vừa vẽ xong chọn Blending Options. Bảng Blending Options hiện ra ta click chọn vào Gradient Overlay và chọn lại màu cho khung Shopping Cart, các bạn có thể biến tấu cho màu sắc phù hợp với tiêu chí của mình.




Sau đó ta tiếp tục trở lại công cụ Rectangle Tool để vẽ hình chiếc xe đẩy, bạn chọn vào biểu tượng ngôi sao, chọn vào nút mũi tên xổ xuống chọn vào hình chiếc xe đẩy, sau đó vẽ lên trên khung Shopping cart, như hình bên dưới:

 

Tiếp tục chọn công cụ Text gõ chữ vào, vẽ một đường line với chiều ngang 1 pixed tô màu trắng và giảm Opacity còn 70%. Vậy là hoàn thành nút Shopping Cart.

B3.Nút tiền tệ và chữ đăng nhập: Tương tự như nút Shopping cart chúng ta sẽ vẽ tiếp ba nút tiền tệ. Và dùng công cụ Text để gõ các câu còn lại như hình bên dưới:

 

B4.Bây giờ chúng ta sẽ tiếp tục thực hiện menu ngang danh mục sản phẩm. Tạo Floder đặt tên là Menu sản phẩm sau đó tạo một layer mới trong Floder đó, sau đó tiếp tục chọn công cụ Rectangular Marquee Tool (M) vẽ một thanh menu như hình bên dưới:

 

Vẫn giữ nguyên vùng chọn ta tiếp tục chọn công cụ Gradient Tool (G), chọn màu sắc từ lại và sau đó giữ chuột drag một đường vào vùng chọn để tô màu cho đối tượng.

 

Sau khi tô màu xong ta sẽ làm hai viền cho thanh menu ngang này như sau: Click phải vào layer vừa mới tô màu chọn Blending Options – tiếp tục chon Stroke và chọn thông số như trong hình mẫu bên dưới ta sẽ có viền trên và dưới của thanh menu:

 

Tạo bóng mờ bên dưới thanh menu. Tạo một layer tên “bóng mờ” và cho nằm dưới layer thanh ngang menu, dùng công cụ Rectangular Marquee Tool vẽ một khung nhỏ hơn thanh menu, sau khi vẽ xong ta sẽ tiếp tục vào Menu Select – Modify – Feather (Shift + F6) thông số bằng 5 sau đó tô màu cho nó nên chọn màu xám đen, sau khi tô màu xong nếu vẫn còn thấy đậm thì ta có thể giảm Opacity để phù hợp với giao diện hơn:

 

 

Sau đó ta sẽ dùng công cụ Text để gõ vào danh mục menu ngang. Tiếp theo là tạo nút “Tìm kiếm”, dùng công cụ Rectangle Tool vẽ khung “tìm kiếm”, tô màu trắng, cho viền màu xám đậm như hình bên dưới:


B5. Tạo danh mục sản phẩm, tương tự như các bước trên tạo Floder đặt tên là “Danh mục sản phẩm” dùng công cụ Rectangle Tool (U) vẽ một khung hình chữ nhật vào tô màu cho nó, dùng công cụ Text để gõ vào danh mục sản phẩm, vẽ đường Line màu trắng (Opacity là 50%) sau đó Duplicate đường line đó lên thành 7 Layer và sắp xếp cho chúng đều nhau (xem hình mẫu), Tiếp tục dùng công cụ Rectangle Tool vẽ nút cho danh mục sản phẩm cũng Duplicate thành 7 Layer và sắp xếp những nút đó đều nhau ở trước tiêu đề sản phẩm, sau khi thực hiện xong các bước trên ta sẽ có Danh mục sản phẩm như hình bên dưới:


B6. Tạo một Slice sản phẩm mới. Dùng công cụ Rectangle Tool vẽ một khung slice lớn, sau đó chọn một hình mẫu đưa vào Layout. Sau đây tôi sẽ hướng dẫn các bạn tạo một Clipping Mask (có nghĩa đơn giản là tấm hình sẽ nằm bên trong khung chữ nhật mà ta vừa mới vẽ), Click phải vào layer “hình người mẫu” vừa đưa vào khung làm việc chọn Creater Clipping Mask, thế là hình đã nằm ở trong khung Slice. Tương tự ta sẽ thực hiện cho các Slice nhỏ còn lại, lưu ý các bạn có thể dùng công cụ Transform (Ctrl+T) để thu nhỏ hay phóng to hình ảnh, và khi hoàn thành sẽ như hình bên dưới:

 

B7. Tạo sản phẩm trong trang website, cũng tương tự như các bước trên chủ yếu dùng công cụ Rectangle Tool vẽ khung dùng Clipping Mask để lồng sản phẩm vào khung Shape đó, dùng công cụ text để gõ thêm thông số sản phẩm vào.

B8. Tạo các banner quảng cáo bên dưới Danh mục sản phẩm. Banner quảng cáo thì có thể là hình ảnh hoặc các đoạn Javacript hình ảnh, Banner Fash, sau khi lập trình hoàn tất trang website thì ta sẽ đưa lên sau, tuy nhiên chúng ta cũng thiết kế một banner ảnh demo cho đẹp về bố cụ và hoàn chỉnh một Layout. Làm banner cũng là kết hợp giữa vẽ khung, thêm hình ảnh, thêm câu chữ…

 

B9. Tạo Footer cho trang website, tạo floder mới đặt tên là Footer vẽ khung hình chữ nhật dùng Gradient tô màu chuyển sắc từ màu xám đậm (mã màu: b6b6b6) đến xám nhạt (mã màu: e4e4e4). Sau đó dùng công cụ text gõ các danh mục vào, Copy logo đổi thành màu xám (mã màu: 898989) đưa xuống góc phải, gõ vào dòng chữ Powered By OpenCart Sport © 2012. Thế là xong rồi đấy. Tác phẩm hoàn thành sau cùng  

  Download File Gốc: tại đây! Lưu ý: Ta thấy trong khi thiết kế giao diện Website
 chúng ta sẽ dụng các công cụ vẽ khung, đường rất nhiều, như Rectangle Tool, Rectangular Marquee Tool, công cụ Text, Gradient, kết hợp màu sắc… đây là những kiến thức cơ bản trong Photoshop, các bạn chỉ cần nắm được kiến thức căn bản cùng với sự tìm tòi và sáng tạo thì chắc chắn các bạn sẽ có một thiết kế đẹp mắt. Điều quan trọng nhất sau khi đọc xong bài này là: HÃY MỞ PHOTOSHOP RA VÀ BẮT ĐẦU THIẾT KẾ NÀO!