Đang tải... (xem toàn văn)
Trang giấy có kích thước đúng như bạn đặt đã hiện ra, và bây giờ bạn sẽ thỏa thích tô vẽ lên đó để tạo nên banner cho trang web của mình.. Tuy nhiên, một banner cũng có những yêu cầu về [r]
(1)Giáo trình Thiết kế banner cho trang web Photoshop Người viết: Đỗ Mạnh Hà
Mục đích:
- Tự thiết kế banner (đầu đề) cho website (trang web) đơn vị hệ thống website violet.vn
Yêu cầu:
- Người thực nắm số kiến thức phần mềm Photoshop (có thể tìm hiểu trang web: http://daotao.violet.vn)
Thao tác:
- Các bạn khởi động phần mềm Photoshop Tạo trang giấy (Ctrl N) Hộp thoại New Bạn điền tên trang “banner” Kích thước banner trang web violet.vn có chiều ngang (width) 770 pixels, cịn chiều cao tùy ý Tuy nhiên bạn không nên để chiều cao lớn làm cho banner chốn hết hình máy tính Bạn nên để độ cao (height): 100 pixels đến 200 pixel
Bạn nhấn OK để đồng ý tạo trang giấy Trang giấy có kích thước bạn đặt ra, bạn thỏa thích tơ vẽ lên để tạo nên banner cho trang web
Tuy nhiên, banner có yêu cầu nội dung mỹ thuật nó:
Nội dung:
+ Đơn vị chủ quản (nếu có) + Tên đơn vị (là tên trang web) + Địa liên lạc
VD:
Mỹ thuật:
PHÒNG GIÁO DỤC VÀ ĐÀO TẠO QUẬN HAI BÀ TRĂNG
(2)+ Dùng Font chữ dễ đọc, rõ ràng: không dùng chữ hoa lá, uốn lượn,… hay chữ có nét mảnh Nên dùng chữ in hoa với dòng tên trang web, chữ thường với dòng địa Dòng địa chỉ cần nhỏ, vừa đủ để đọc được, khơng nên q lớn chiếm nhiều diện tích Mầu chữ nên bật so với
+ Phần trang trí nên có tơng màu thích hợp, khơng q lịe loẹt khiến người xem nhức mắt màu hồng tươi, màu xanh nõn chuối sáng rực, v v… Bạn thêm lơ gơ – biểu trưng đơn vị, ảnh minh họa,… Lôgô phải rõ ràng xác Ảnh minh họa: minh họa phần banner Nếu chốn banner nên mờ nhạt đằng sau chữ làm
VD:
1 Tô màu nền:
- Bạn tạo mầu cho banner sau:
Chọn cơng cụ tạo vùng chọn nhìn chữ nhật: Rectangular Marquee Tool (M) khoanh lấy toàn phần banner Lúc bạn chọn Layer background - Bạn chọn mầu để đổ lên vùng chọn cách nhấn vào ô Set foregronund
(3)2 Tạo đầu trang (header):
- Mỗi website thuộc hệ thống website violet.vn thành viên đăng nhập vào hiển thị lời chào tên thành viên phía bên phải website
VD:
Xin chào thầy giáo: Đỗ Mạnh Hà Xin chào giáo: Ngơ Thị Chinh
- Vì bạn cần tạo mảng mầu nằm ngang phía có độ cao khoảng 30 pixel Mảng mầu có mầu sáng lời chào hiển thị chữ màu đen
- Bạn tạo layer chứa mảng mầu này: menu chọn: Layer \ Layer… (Ctrl + Shift + N) Bảng New layer Bạn điền tên cho layer vào mục Name để dễ quản lý Ví dụ tơi đặt tên “đầu trang”: dau trang
Sau nhấn OK để tạo layer mới.(**)
- Trên Layer đầu trang bạn lại tạo vùng chọn công cụ Rectangular Marquee Tool (M) Trên tùy chọn công cụ này, mục Style, chọn Fixed size
Ô Width (chiều rộng) bạn chọn nhiều ngang banner: 770 pixel Ô Heitgh (chiều cao) bạn chọn khoảng 30 pixel
Nhấn chuột lên trang giấy, bạn thấy vùng chọn có kích thước bạn đặt Bạn di chuyển vùng chọn lên phía banner Chọn mầu đổ lên vùng chọn (như mục (*))
3 Viết chữ:
- Chọn công cụ Type Tool (T), click chuột vào hình type nhấp nháy bạn gõ chữ Gõ xong bạn chọn cơng cụ Move Tool (V) để khỏi công cụ Type Tool (T)
- Để thay đổi font chữ, cỡ chữ, kiểu chữ, lề, mầu chữ, v…v… bạn chọn tùy chọn:
(4)- Blending Options: lựa chọn chung - Drop Shadow: bóng đổ
- Inner Shadow: bóng đổ vào - Outer Glow: tỏa sáng xung quanh - Inner Glow: tỏa sáng vào - Bevel and Emboss: tạo khối - Contour: viền xung quanh - Texture: tạo bề mặt - Satin: làm bóng bề mặt
- Color Overlay: phủ mầu lên bề mặt - Gradient Overlay: tạo chuyển mầu bề mặt - Pattern Overlay: tạo chất liệu bề mặt - Stroke: Nét bao quanh
Lúc bạn hồn thành 50% cơng đoạn thiết kế banner
Bây ta cịn việc làm cho đẹp hơn, thêm logo, thêm hình minh họa, v…v…
4 Trang trí:
- Để thêm logo vào banner, bạn kéo file ảnh logo từ máy tính vào giao diện phần mềm photoshop Lúc hình logo nằm phần mềm photoshop cửa sổ khác cửa sổ banner mà ta thiết kế Bạn dùng công cụ Move Tool (V), chọn giữ chuột hình logo, kéo sang cửa sổ ta thiết kế banner
- Nếu logo bị to quá, bạn chọn layer chứa logo, nhấn Ctrl + T Xung quanh hình layer xuất nút vng Đưa chuột đến nút góc, xuất mũi tên chéo chiều, ta giữ vào nút phím Shift, kéo cho nhỏ lại hợp lý Nhấn Enter Dùng công cụ Move Tool (V) để di chuyển logo, đặt vào vị trí mà bạn muốn
(5)- Để thêm hình ảnh ảnh đơn vị bạn, ảnh học sinh, hoa, v…v… Bạn kéo ảnh vào hình soạn thảo kéo logo vào
- Bức ảnh to, bạn thu nhỏ lại cách nhấn Ctrl + T thu nhỏ logo
- Bạn dùng cơng cụ tẩy: Erase Tool (E) để tẩy nét cạnh ảnh để làm mềm ảnh Chú ý chọn tẩy nét to (tăng Brush), chọn độ tẩy nhẹ (giảm Opacity Flow)
Lúc bạn hoàn thành banner mình:
5. Xuất dạng ảnh:
- Bước cuối bạn xuất file Photoshop thành file ảnh để đưa lên trang web
- Ảnh để đưa lên Web cần phải nhẹ đến mức tối đa để trang web không bị chậm Bạn vào File \ Save for web (Alt + Shift + Ctrl + S)
- Trong bảng Save for web, bạn chọn ảnh dạng JPEG, chất lượng (Quality) 60 Nhấn Save Cửa sổ Save as ra, bạn chọn nơi lưu ảnh lại máy tính nhấn OK
Ghi - Thủ thuật:
- Bạn lấy ảnh hoa làm thay mảng mầu Nếu ảnh rõ, bạn làm mờ cách giảm Opacity layer ảnh bảng Layer
Ghi nhớ:
- Cơng việc thiết kế có quy tắc chung mỹ thuật để cho đẹp Tuy nhiên ln cần có sáng tạo để có cách nhìn đẹp Vì thiết kế, bạn khơng phải đặt logo vị trí đó, khơng phải đặt chữ vị trí cân đối ảnh góc Mỗi người có cách thể hiện, có ý tưởng khác nên bạn thỏa sức sáng tạo, nội dung đầy đủ, banner mầu sắc đẹp – phù hợp, rõ ràng, v…v…
Bài tập:
- Thiết kế banner kích thước 770 x 170 pixel - Nội dung mang tên đơn vị
- Có logo (hoặc khơng) - Có ảnh minh họa
http://daotao.violet.vn