Có một số lượng lớn các mẫu trang web trên web, nhưng chúng có một nhược điểm - chúng không phải là duy nhất. Nếu chủ sở hữu trang web không muốn thiết kế trang web của mình bị lặp lại ở nơi khác, anh ta có thể đặt hàng một mẫu từ một nhà thiết kế chuyên nghiệp hoặc cố gắng tự tạo mẫu đó.
Nó là cần thiết
Chương trình Adobe Photoshop
Hướng dẫn
Bước 1
Tạo mẫu của riêng bạn không phải là một nhiệm vụ khó khăn như thoạt nhìn. Để làm việc, bạn cần có Adobe Photoshop - tất nhiên, bạn cần có ít nhất hiểu biết cơ bản về cách làm việc với nó. Nhưng trước khi khởi chạy chương trình và bắt đầu tạo, bạn cần phải suy nghĩ trước về thiết kế trong tương lai. Cách thuận tiện nhất để làm điều này là trước tiên hãy làm quen với ít nhất một trăm mẫu làm sẵn, đánh giá ưu và nhược điểm của chúng. Chú ý đến các giải pháp thành công của các yếu tố thiết kế nhất định. Điều này không có nghĩa là bạn sẽ sao chép chúng, nhưng hoàn toàn hợp lý khi lấy một số giải pháp đẹp và tiện lợi làm cơ sở.
Bước 2
Dựa trên phân tích các mẫu của người khác và sự sáng tạo của riêng bạn, bạn sẽ có được ý tưởng về cách trang web của bạn sẽ trông như thế nào. Tốt nhất bạn nên phác thảo sơ bộ thiết kế tương lai bằng bút chì màu trên tờ A4 thông thường. Bạn chỉ nên bắt đầu làm việc với Photoshop sau khi bạn đã có một ý tưởng rõ ràng về những gì chính xác bạn sẽ vẽ.
Bước 3
Khởi động Photoshop, tạo một dự án 1200x1600 mới, đặt nền trong suốt. Bật công cụ Thước kẻ, nếu nó chưa được bật, để thực hiện việc này, hãy nhấn tổ hợp phím Ctrl + R. Bật chụp nhanh: Xem - Chụp nhanh.
Bước 4
Bây giờ chúng ta cần chia mẫu bằng các đường dẫn sẽ hiển thị đường viền của các phần tử của nó - các cạnh, cột, v.v. Ví dụ: bạn muốn chia mẫu để có một cột hẹp ở bên trái, một cột rộng ở bên phải bên phải của mẫu và có chỗ ở trên cùng cho tiêu đề. Điều này có nghĩa là bạn cần ba đường dọc (đường viền bên trái của mẫu, bên phải và đường kẻ giữa chúng) và một đường nằm ngang, hiển thị đường viền dưới cùng của tiêu đề. Để đặt một đường thẳng đứng, hãy di chuyển con trỏ đến thước kẻ bên trái ở phía bên trái, nhấn V và trong khi giữ phím, hãy kéo đường thẳng đó đến vị trí mong muốn. Làm tương tự với hai đường dọc còn lại. Những cái ngang được xây dựng giống nhau, chỉ sử dụng thước trên.
Bước 5
Tìm một nền cho mẫu của bạn, nó phải là một mẫu nhỏ, lặp lại. Mở nó trong Photoshop, chọn, sao chép. Sau đó, dán vào mẫu nhiều lần nếu bạn cần để lấp đầy nền. Dán được thực hiện như sau: "Chỉnh sửa" - "Dán", và sau đó kéo vùng nền đến vị trí mong muốn. Chèn một hình ảnh bằng cách sử dụng lệnh Ctrl + V thậm chí còn nhanh hơn. Thêm nền cho tiêu đề trang web theo cách tương tự. Bạn có thể sử dụng các tô màu chuyển sắc khác nhau để tạo nền.
Bước 6
Sử dụng công cụ Pencil, vẽ các đường viền của mẫu, tập trung vào các đường đã được vẽ (nghĩa là ở trên chúng). Bạn đã nhận được cơ sở của mẫu đơn giản nhất, bây giờ bạn cần bổ sung nó với các chi tiết cần thiết - các nút điều hướng, dòng menu, các yếu tố trang trí khác nhau, v.v. Để biết thêm thông tin về cách tạo các nút và các phần tử khác, hãy đọc các bài viết tương ứng về cách làm việc với Adobe Photoshop.
Bước 7
Mẫu đã được tạo xong, bây giờ bạn cần cắt thành nhiều mảnh để chèn chúng vào trang html. Sử dụng công cụ Slice Tool để cắt. Để tìm nó, hãy nhấp chuột phải vào công cụ Frame và chọn Cutout từ menu mở ra. Bây giờ bạn có thể lồng mẫu như mong muốn, sau đó lưu: "Tệp" - "Lưu cho Web". Trong cửa sổ mở ra, chọn loại tệp: HTML & hình ảnh, chỉ định tên tệp: index.htm và lưu nó. Bạn sẽ có một tệp index.htm và một thư mục hình ảnh với các hình ảnh cắt lát.
