Khái niệm cơ bản về thiết kế web: Thêm các yếu tố nút vào khung dây

Sử dụng Photoshop CS2, tôi sẽ chứng minh việc tạo các thành phần nút cho thiết kế khung dây của bạn và sau đó cuối cùng cũng thêm chúng vào thiết kế trang web cuối cùng của bạn. Chúng tôi sẽ tạo hai tệp hình ảnh png và lưu chúng, sau đó chuyển đổi chúng thành các loại tệp gif khi hoàn tất. Lưu ý: Tôi đã phóng to cửa sổ hoạt động cho hầu hết các ảnh chụp màn hình để xem tốt hơn. Hướng dẫn này là phần tiếp theo của bài đăng "Những điều cơ bản: Thiết kế khung dây trang web trong Photoshop."

Tạo một khung vẽ trống ở 75px (chiều rộng) x 25px (chiều cao) để bắt đầu thiết kế nút. Tạo một layer mới và gọi nó là B ackground_01 . Chọn công cụ Hình chữ nhật Tròn, giữ phím SHIFT và vẽ hình vuông cạnh tròn ở giữa. Bất kỳ màu nào là tốt ở giai đoạn hiện tại, tôi đang chọn một màu xám.

Nhấp đúp vào Background_01 từ bảng xếp lớp để mở Tùy chọn Trộn, sau đó điều chỉnh các kiểu sau: Thả bóng
  • Độ mờ đục: 40%
  • Khoảng cách: 0px
  • Lây lan: 0%
  • Kích thước: 6px
Lớp phủ Gradient
  • Điểm dừng màu: 0%, #cccccc
  • Điểm dừng màu: 100%, # 333333
Sử dụng Marquee hình chữ nhật, bao quanh khu vực như trong Hình A ; sau đó, từ thanh menu, bấm Chọn, Phạm vi màu và nhấp vào OK . Sau đó bấm Chọn, Sửa đổi, Hợp đồng, và 1 pixel như trong hình B. Sau đó bấm OK .

Hình A

Hình B

Tạo một layer mới và đặt tên là Background_02. Điền vào vùng được tô sáng với bất kỳ màu nào. Trong ví dụ này, như bạn có thể thấy trong Hình C, tôi đang sử dụng # 000000 màu đen.

Hình C

Nhấp đúp vào Background_02 để khởi chạy các tùy chọn Trộn và điều chỉnh kiểu sau. Đối với mục đích của hướng dẫn này, chọn các màu sắc và kiểu dáng sau:

Lớp phủ Gradient
  • Dừng màu: 0%, # cccc99
  • Điểm dừng màu: 100%, # 666633
Hình D hiển thị nút hoàn thành ở chế độ xem 10%. Lưu cái này dưới dạng Nút_02. Sau đó lưu nút dưới dạng gif (Nút_02.gif). Kết quả là hình ảnh nút được hiển thị trong Hình E.

Hình dung

Hình E

Bây giờ chúng tôi sẽ tạo một nghịch đảo của nút này và nó sẽ trở thành nút di chuột qua của chúng tôi.

Khi tệp Button_02.ype được mở, bấm đúp vào lớp Background_02 để mở các tùy chọn Trộn, sau đó chọn Lớp phủ Gradient. Thay đổi góc tới -90 ° như trong Hình G.

Hình F

Bây giờ bấm vào OK. Nút bây giờ sẽ trông giống như một hình ảnh đảo ngược của bản gốc, như bạn có thể thấy trong Hình G.

Hình G

Lưu nút mới này dưới dạng gif bằng cách đặt tên là Nút_Over_02.gif.

Chúng ta có thể sử dụng nút này, thêm một lớp văn bản cho mỗi nút được đặt tên hoặc chúng ta có thể sử dụng mã bảng kiểu xếp tầng (CSS) để thêm văn bản trong khi triển khai trang.

Thêm văn bản

Với hình ảnh Nút_02.sheet mở, bước đầu tiên là thêm một lớp văn bản ngang bằng cách chọn công cụ văn bản T sau đó kéo một hộp ngang trong các kích thước của hình ảnh như trong Hình H.

Hình H

Tiếp theo chúng ta có thể thêm văn bản, chẳng hạn như từ Home trong trường hợp này như được thấy trong Hình I. Vì độ dài của văn bản có thể thay đổi, bạn có thể điều chỉnh độ rộng của nút để phù hợp với tiêu đề dài hơn. Chúng tôi sẽ lưu tệp này dưới dạng Nút_02_home. Picks, sau đó lưu tệp cho web dưới dạng hình ảnh gif. Tạo một nút Home khác bằng cách sử dụng hình ảnh Nút_Over_02. Picks và lưu theo cách tương tự như được mô tả ở trên.

Hình I

Vì lợi ích của khung dây, chúng ta có thể đặt các nút văn bản thủ công này trong mô hình giả của mình. Tiếp tục với khung dây của Công ty Gỗ Juniper mà chúng ta đã thảo luận trong phần đầu tiên của loạt bài này, chúng tôi sẽ tạo các nút còn lại cho mô hình giả. Đối với tất cả các nút, cả Nút_02.sheet và Nút_Over_02.: 54 được sử dụng và lưu với tiêu đề cho mỗi nút được đặt tên. Tất cả các nút giữ nguyên chiều rộng cho tất cả các tiêu đề được đặt tên.

Tiếp tục với quy trình trên cho các nút văn bản bổ sung Blog, Danh mục, Nổi bật, Thư việnVideo . Vì mỗi tiêu đề yêu cầu hai hình ảnh, nút và nút trên, bạn sẽ kết thúc với mười hai tệp hình ảnh gif riêng biệt.

Sửa đổi chiều rộng để phù hợp với tiêu đề dài hơn

Mở rộng chiều rộng của nút khá đơn giản. Mở một tệp gốc, chẳng hạn như Nút_02., Sau đó sửa đổi kích thước hình ảnh. Trong trường hợp này, bạn sẽ mở rộng chiều rộng lên 125px. Mở hộp thoại Kích thước hình ảnh bằng cách nhấp qua Hình ảnh và Kích thước hình ảnh từ thanh menu, như trong Hình J. Thay đổi cài đặt độ rộng thành 125, đảm bảo Bỏ chọn Tỷ lệ ràng buộc, sau đó bấm OK. Nút chiều rộng được sửa đổi được hiển thị trong Hình K.

Hình J

Hình K

Đặt các nút trên khung dây

Để hình ảnh nút, chỉ cần thêm chúng vào khu vực điều hướng hiện có trong tệp hình ảnh khung dây, sau đó đặt từng hình ảnh nút vào lớp đó như trong hình ảnh chụp màn hình trong Hình L. Mở từng tệp hình ảnh nút, sau đó Chọn , Tất cả, từ thanh menu. Sao chép hình ảnh, đặt mẫu khung dây thành cửa sổ hoạt động, sau đó chọn dán và sử dụng công cụ di chuyển để định vị từng hình ảnh nút vào khu vực mong muốn của mẫu khung dây.

Hình L

Sẽ không tốt sao nếu chỉ tạo một vài nút nền và được thực hiện với nó? Đây là lý do tại sao tôi thích tạo các lát cho các nút nền và tận dụng sức mạnh của CSS để hiển thị văn bản. Tôi sẽ chứng minh cắt lát cho nền và vị trí CSS trong một bài viết trong tương lai.

© Copyright 2020 | mobilegn.com