Trong phần 2 của bài hướng dẫn cắt layout photoshop sử dụng CSS có phần cắt hình để làm background, bài này sẽ hướng dẫn chi tiết cách thực hiện. Nếu có cách nào nhanh, thực tế và hay hơn thì các bạn trình bày trong phần comment để chúng ta trao đổi nhé.
1 - Mở file layout mà các bạn đã download trong phần 1, bấm Ctrl - + vài lần để phóng to file ảnh lên đến khi nào bạn cảm thấy đủ lớn để cắt chính xác. Dùng công cụ Crop tạo vùng cắt như hình sau:
1 - Mở file layout mà các bạn đã download trong phần 1, bấm Ctrl - + vài lần để phóng to file ảnh lên đến khi nào bạn cảm thấy đủ lớn để cắt chính xác. Dùng công cụ Crop tạo vùng cắt như hình sau:
Lưu ý:Nên bật chế độ bắt dính lên để chọn chính xác (menu View \ Snap)
2 - Sau khi chọn chính xác khung cắt (chiều cao thì phải thật chính xác, chiều ngang thì tùy ý nhưng nhỏ thôi vì chúng ta sẽ dùng thuộc tính repeat-x khi viết CSS) bấm Enter để crop file, kết quả như sau:
2 - Sau khi chọn chính xác khung cắt (chiều cao thì phải thật chính xác, chiều ngang thì tùy ý nhưng nhỏ thôi vì chúng ta sẽ dùng thuộc tính repeat-x khi viết CSS) bấm Enter để crop file, kết quả như sau:
3 - Trong file này còn dính một phần đường viền màu vàng,bấm phím V xong nhấp chuột phải vào ngay đường viền đó và chọn dòng đầu tiên ( ở đây là layer 11). Khi đó trên bảng layer, layer 11 sẽ có nền xanh. Bấm phím Delete để xóa layer này, trên file ảnh vừa cắt chỉ còn lại hình nền background. Cuối cùng thì save lại dưới dạng GIF để dùng làm background khi viết CSS.
Các bạn có thể ẩn hoặc xóa bỏ những đối tượng nằm trên phần nền mà chúng ta định dùng làm background rồi tiến hành Crop cũng được. Phần backgound này nếu không dùng ảnh thì chúng ta có thể dùng cách khác là sử dụng thuộc tính background-color cho phần nền xám nhạt kết hợp với border. Các phần khác còn lại cũng thực hiện tương tự như thế.
0 Ý kiến:
ĐỂ LẠI Ý KIẾN CỦA BẠN:
Hãy để lại thắc mắc, ý kiến đóng góp của bạn, xin viết tiếng Việt có dấu để tôn trọng người xem và cũng đừng Spam.