Việc biến một giao diện được thiết kế trong Photoshop thành HTML - psd to html là một phần rất quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML, psd to email, psd to wordpress là việc đầu tiên bạn phải làm.
Trong phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi bằng photoshop. Trong phần này, chúng ta sẽ sử dụng một giao diện đã thiết kế ở phần 1 để thực hiện cắt lấy hình ảnh đưa lên tài liệu html.
Cắt giao diện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần lặp lại các bạn sẽ bỏ đi. (Phần văn bản cho web các bạn sẽ xử lý ở phần lập trình và lấy từ database).
Nguyên tắt cơ bản:
Mỗi sản phẩm > 1 file hình.
Hình nền hay màu chuyển sắc > lấy đúng bước lặp lại và lưu thành 1 file hình.
Sử dụng các định dạng hình cho web: *.jpg, *.png, *.gif.
Công cụ sử dụng:
Slice tool > vẽ vùng chọn cho hình, mỗi vùng chọn > tạo thành 1 file
Slice Select Tool > chỉnh vùng chọn của Slice tool
Bước 1:
Trước tiên các bạn nên phẩn tích giao diện để có được cái nhìn tổng thể nhất về giao diện mình sẽ cắt css. Từ đó bạn sẽ xác định được phần ảnh cần lưu lại và phần ảnh cần bỏ đi. Với giao diện này tôi chi làm 4 phần: Header: gồm logo, ngôn ngữ và menu top. Phần menu-left, cột phải: gồm các sản phẩm và phần footer.
Bây giờ chúng ta sẽ bắt đầu cắt giao diện theo phân chi ở trên, bắt đầu với phần header của mẫu thiết kế.
Với phần này bạn sẽ lấy logo, giỏ hàng, 2 lá cờ, phần menu và nền bỏ qua.
Sử dụng Slice tool > vẽ các vùng chọn và đặt tên tương ứng. bắt đầu cho logo
Tương tự cho các phần còn lại như hình bên dưới
Bước 2:
Cắt hình các sản phẩm và banner quảng cáo
Dùng Slice tool > vẽ vùng chọn cho sản phẩm 1 > double click đặt tên sp1.
Dùng công cụ Slice Select Tool > chọn copy vùng chọn Slice của sản phẩm 1 cho các sản phẩm còn lại > đạt tên tương ứng: sp2, sp3, sp4,...
Tương tự bạn chon cho banner quảng cáo và đặt tên banner.
Trường hợp có 9 nút giỏ hàng cho 9 sản phẩm giống nhau nên bạn chỉ cần lưu đúng 1 giỏ hàng.
Bước 3:
Tiếp theo bạn sẽ lưu hình ảnh cho web
Chọn File / Save for web and Devices... (Ctrl + Shift + Alt + S), chọn định dạng file cho từng vùng chọn tương ứng như sau
Các sản phẩm, banner > *.jpg
Logo, các button > *.png-8
Click Save > chọn folder mới để lưu với file name: zzzzz, Save as Type: Images Only > chọn Save.
Bây giờ các bạn đã có các hình ảnh trong folder images, hãy chọn các file ảnh bạn đã đặt tên và lưu lại, các file có tên là zzzz... bạn hãy xóa bỏ.
Bước 4:
Tiếp theo là cắt lấy nền trong suốt và ảnh nền.
Dùng Slice vẽ vùng chọn hình vuông nhỏ khoản 2x2pixel > double click > đặt tên nts
Để có nền trong suốt bạn phải ẩn hình nền và background màu trắng > chọn File / Seve for Web and Devices... > chọn định dạng hình là: png-24 > Save
Tiếp theo bạn sẽ ẩn hình sản phẩm, menu, logo để lấy hình nền (nếu tinh ý bạn có thể chuyển hình nền lên trên cùng sẽ nhanh hơn). > Vẽ vùng chọn bằng Slice tool cho hình nền và đặt tên là bg.
Chọn Save for web and Devices > chọn định dạng file *.jpg > Save.
Bây giờ bạn hãy lưu các hình đã cắt vào folder images trong website.
Bạn thấy việc cắt giao diện web cũng khá đơn giản và lý thú, tuy nhiên đây là giao diện khá đơn giản. Trong thực tế giao diện sẽ khó hơn nhiều, vì thế bạn phải luyện thật cẩn thận cho trường hợp này trước đã. Ở phần tiếp theo tôi sẽ hướng dẫn các bạn cách layout giao diện bằng html và css.