Các nhà thiết kế web chuyên nghiệp phát triển các mẫu trang web, thường là trong các trình chỉnh sửa đồ họa mạnh mẽ như Adobe Photoshop. Kết quả của công việc là một tệp có hình ảnh, ở dạng này được cung cấp cho khách hàng. Để sử dụng thiết kế làm sẵn, nghĩa là, để bố trí một trang web, bạn cần phải cắt mẫu.
Cần thiết
Trình biên tập đồ họa raster Adobe Photoshop
Hướng dẫn
Bước 1
Mở tệp mẫu trong trình chỉnh sửa đồ họa Adobe Photoshop. Chọn Tệp và Mở từ menu hoặc nhấn tổ hợp phím Ctrl + O. Trong hộp thoại xuất hiện sau đó, hãy chuyển đến thư mục có tệp, chọn tệp trong danh sách và nhấp vào nút "Mở".
Bước 2
Chọn một tỷ lệ thuận tiện để xem hình ảnh mẫu. Sử dụng Công cụ thu phóng hoặc các mục menu ngữ cảnh. Chọn tỷ lệ cho phép bạn định vị con trỏ với độ chính xác pixel. Điều này là cần thiết để thiết lập chính xác các đường tham chiếu.
Bước 3
Tạo thành một tập hợp các dòng tham chiếu phía trên hình ảnh mẫu. Bật hiển thị thước trong cửa sổ tài liệu nếu nó chưa được bật. Để thực hiện việc này, hãy nhấn Ctrl + R hoặc chọn Chế độ xem và Thước từ menu.
Bước 4
Di chuyển con trỏ chuột qua thước trên cùng để thêm đường tham chiếu ngang. Bấm và giữ phím trái. Di chuyển con trỏ chuột xuống vùng ảnh. Tương tự như vậy, sử dụng thước kẻ phù hợp, bạn có thể thêm các đường ngang.
Bước 5
Thêm số lượng đường tham chiếu cần thiết và định vị chúng dọc theo ranh giới của sự phân chia các vùng của mẫu. Các dòng phải đi qua tất cả các vị trí mà bạn muốn cắt mẫu. Chúng phải hạn chế tất cả các hình ảnh và các vùng logic (logo, tiêu đề trang, menu ngang và dọc, v.v.) sẽ được trình bày trên một trang web.
Bước 6
Kích hoạt công cụ Slice. Nút của nó nằm trên thanh công cụ dọc.
Bước 7
Tạo số lượng vùng cắt cần thiết bằng Công cụ Slice. Chọn một tỷ lệ thuận tiện để hiển thị mẫu. Sử dụng chuột để thiết lập ranh giới của các khu vực. Các hướng dẫn được thêm vào trong bước thứ ba sẽ cung cấp vị trí chính xác của ranh giới của các đối tượng bạn tạo. Điều chỉnh các khu vực hiện có nếu cần bằng công cụ Slice Select Tool.
Bước 8
Thay đổi đặc tính của các vùng cắt theo yêu cầu. Kích hoạt công cụ Slice Select Tool. Nhấp chuột phải vào khu vực mong muốn. Trong menu ngữ cảnh, hãy chọn mục Chỉnh sửa tùy chọn lát cắt. Trong hộp thoại Slice Options xuất hiện, hãy chọn loại vùng (hình ảnh, vùng trống, bảng), chế độ tô nền, chỉ định tên, URL đích, nội dung của thuộc tính alt="Image" và các giá trị khác nếu cần.. Bấm OK.
Bước 9
Cắt tiêu bản. Chọn Tệp và Lưu cho Web & Thiết bị từ menu hoặc nhấn Shift + Ctrl + Alt + S. Trong hộp thoại Lưu cho Web & Thiết bị, chỉ định định dạng và các thông số nén hình ảnh mà mẫu sẽ được cắt. Nhấp vào nút Lưu. Hộp thoại Save Optimized As sẽ được hiển thị.
Bước 10
Chọn HTML và Hình ảnh (*.html) trong danh sách Loại tệp thả xuống và trong trường Tên tệp, hãy nhập tên tệp nơi đánh dấu HTML mẫu sẽ được đặt. Trong danh sách Slices, hãy chọn All Slices. Chỉ định thư mục cho đầu ra và nhấp vào nút "Lưu".
Bước 11
Một tệp HTML sẽ được đặt trong thư mục đích, trên thực tế, đây là một mẫu trang web được tạo sẵn. Thư mục con hình ảnh sẽ chứa tập hợp các hình ảnh mà mẫu gốc đã được cắt.
