Làm thế nào để Xây dựng một Banner Graphic cho trang HTML5 và CSS3 của bạn - núm vú

Gần như mọi trang HTML5 và CSS3 thương mại đều có biểu ngữ đồ họa - một hình ảnh đặc biệt, thường với một kích thước thiết lập (900 × 100 là phổ biến), xuất hiện trên mỗi trang. Thông thường, nếu bạn đang sửa đổi một mẫu CSS, bạn sẽ có một banner mặc định. Bạn sẽ muốn sao chép hình ảnh này để bắt đầu với đúng kích cỡ và hình dạng.

Bạn có thể xây dựng một banner theo nhiều cách, nhưng đây là một kỹ thuật đơn giản bạn có thể sửa đổi:

1. Nạp hoặc tạo hình dạng cơ bản.

   Nếu bạn có đồ hoạ bắt đầu sử dụng, nạp nó vào GIMP. Nếu không, hãy tạo một hình ảnh mới về kích thước bạn cần. Mìn của tôi cao 100 pixel chiều rộng 900 pixel.

2. Tạo nền plasma.

   Sử dụng bộ lọc Plasma (Bộ lọc → Render → Clouds → Plasma) để tạo mẫu bán ngẫu nhiên. Sử dụng nút New Seed và Turbulence để thay đổi cảm giác tổng thể. Đừng lo lắng về màu sắc; bạn loại bỏ chúng trong bước tiếp theo.

3. Sau khi nền plasma được lắp tại chỗ, sử dụng bộ lọc Colorize để áp dụng màu nền.

   Chọn màu phù hợp với chủ đề của bạn. Đối với ví dụ này, đi cho một màu sáng hơn bởi vì bạn đang sử dụng bóng tối, trong đó đòi hỏi một nền ánh sáng. Sử dụng thanh trượt Lightness để tạo ra màu tương đối nhạt.

4. Tạo một lớp văn bản bằng cách sử dụng công cụ Văn bản.

   Văn bản trong một hình ảnh nên lớn và đậm. Công cụ Văn bản tự động tạo ra một lớp mới. Sau khi nhập văn bản của bạn, chỉ định phông chữ và kích thước.

5. Nhân đôi lớp văn bản.

   Trong bảng điều khiển Lớp, tạo một bản sao của lớp văn bản. Chọn thấp hơn của hai lớp văn bản (mà sẽ trở thành một bóng tối).

6. Làm mờ bóng.

   Với lớp bóng được chọn, áp dụng độ mờ Gaussian (Bộ lọc → Mờ → Gaussian Blur).

7. Di chuyển bóng.

   Sử dụng công cụ Move để di chuyển các vị trí tương đối của văn bản và bóng tối. Thông thường, người dùng mong đợi bóng tối hơi thấp và phải của văn bản (mô phỏng ánh sáng đến từ phía trên bên trái). Càng bóng thì từ văn bản càng cao thì văn bản xuất hiện càng nổi.

8. Làm cho bóng bán trong suốt.

   Với layer bóng vẫn được chọn, điều chỉnh thanh trượt Opacity xuống khoảng 50 phần trăm. Điều này sẽ làm cho bóng ít phát âm và cho phép một phần nền xuất hiện qua lớp bóng tối.

9. Mùa đến hương vị; thực hiện bổ sung dựa trên nhu cầu của bạn.

10. Lưu theo định dạng có thể sử dụng lại được.

    Định dạng gốc cho hình ảnh trong GIMP là XCF. XCF lưu trữ tất cả mọi thứ - lớp, cài đặt, và tất cả. Nếu bạn cần phải sửa đổi các banner sau (và bạn sẽ), bạn sẽ có một phiên bản tốt để làm việc từ.

    Chọn File → Save As để lưu tập tin. Nếu bạn chỉ định. phần mở rộng xcf, GIMP tự động lưu ở định dạng đầy đủ.

11. Xuất sang định dạng thân thiện với web.

    Nói chung, bạn nên lưu biểu ngữ đồ họa dưới dạng tệp PNG hoặc GIF. (Gimp hỗ trợ cả hai định dạng.) Xem xét PNG trừ khi lớp dưới cùng có độ trong suốt (vì một số trình duyệt vẫn không hỗ trợ các tính năng minh bạch tiên tiến của định dạng PNG). Không lưu hình ảnh có chứa văn bản ở định dạng JPG. Các chương trình nén JPG là nổi tiếng để thêm các hiện vật vào văn bản.

    

Thông thường, khi bạn lưu vào một định dạng khác, một hộp thoại các tùy chọn xuất hiện. Nếu nghi ngờ, hãy đi với các giá trị mặc định.