Bootstrap Project A-Z 03 – Cắt layout bằng Photoshop

0
686

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Mục đích bài học

Trước khi viết mã HTML cho giao diện, designer sẽ thiết kế nên giao diện đó và lưu vào các file .psd. File .psd này là các file ảnh nhưng nó bao gồm rất nhiều ảnh nhỏ được xếp lên nhau. Nhiệm vụ của ta là phải cắt ra những ảnh nhỏ này và dùng HTML + CSS để viết nên giao diện trang theo file đã thiết kế.

2. Cách download và cài đặt Photoshop

Các bạn vào tham khảo cách download và cài đặt photoshop CS6 tại đây: http://sinhvienit.net/forum/adobe-photoshop-cs6-full-crack.208139.html

Tiếp theo các bạn donwload file PSD mẫu sẽ theo chúng ta trong suốt khóa học tại đây

3. Cách sử dụng Photoshop

B1: Các bạn mở file .psd lên. Để làm ẩn các xọc kẻ trên màn hình, các bạn ấn tổ hợp phím Ctrl+H

1

B2: Các bạn làm hiện lên thanh thước kẻ bằng cách vào View chọn Rules (hoặc ấn tổ hợp phím Ctrl + R ).

 

2

B3: Đổi đơn vị sang pixel bằng cách click chuột phải vào thanh Rules chọn pixel

3

B4: Tắt mở các cửa sổ tại: window

Các cửa sổ hay dùng:

Layer : Danh sách các lớp ảnh của file PSD

History : Quay lại các bước đã làm.

Info : Thông tin chiều cao và chiều rộng ảnh

Thu phóng ảnh bằng : Ctrl + + hoặc Ctrl + –

B5: Lấy thông tin chiều cao chiều rộng:

Để làm chức năng này ta cần sử dụng công cụ Marquee tool (M)   và cửa sổ info

Sử dụng Marquee tool (M) để chọn một vùng nào đó để đo kich thước . Xem chi tiết thông tin ở cửa sổ Info

Các thông tin về chiều rộng và chiều cao ở mục WH

5

B6: Lấy mã màu bằng cáchs sử dụng Eyedropper tool (I)   để chỉ vào một điểm mà có màu cần lấy. Sau đó click theo phần chỉ dẫn ở dưới và ta thu được mã màu ở đây là #1bbc9b

6

B7: Lấy font chữ và cỡ chữ sử Horizontal type tool (T)  để bôi đen đoạn text  cần lấy thông tin

7

4. Cắt layout

B1: Chọn ảnh mà bạn muốn cắt

B2: Giữ alt và click chuột trái vào biểu tượng con mắt ở phía trước cái ảnh, lập tức các layer khác sẽ biến mất và chỉ còn lại ảnh bạn muốn cắt.

8

B3: Vào Image chọn Trim và ấn OK

9

Kết quả thu được là bức ảnh bạn cần:

10

B4: Lưu ảnh: các bạn vào File chọn Save As. Nếu các bạn chọn Save cả file PSD của bạn sẽ bị lưu thành bức ảnh bạn vừa cắt. Chọn Save As xong sẽ xuất hiện hộp thoại

11

Ở phần File Name: đặt tên file

Ở phần Format: các bạn chọn đuôi mở rộng cho ảnh. Nếu ảnh có background trong suốt ta chọn PNG (ảnh thường dùng để trang trí website hoặc ảnh nặng). Nếu muốn ảnh có background trắng thì chọn JPEG (ảnh thường để là ảnh sản phẩm, ảnh đại diện). Chọn xong ấn OK để hoàn tất việc cắt ảnh.

B5: Các bạn mở Window chọn History, ấn vào ô ảnh ban đầu để bắt đầu cắt ảnh tiếp theo.

12

Tôi vừa hướng dẫn các bạn cách cắt một giao diện từ file .psd . Ở bài viết sau tôi sẽ hướng dẫn các bạn cách để ghép những giao diện vừa cắt vào thành một trang HTML. Cảm ơn các bạn đã theo dõi và hẹn gặp lại các bạn ở bài viết sau.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Xem thêm các bài học tiếp theo:

Tác giả: Đạt Nguyễn Vietpro

 

 

 

[Total: 3    Average: 4.7/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here