Lam banner

Sö dông phÇn mÒm Photoshop trong xö lý ¶nh cho Web
Sơ lược về đồ hoạ trên Web
Phần mềm xử lý đồ hoạ PHOTOSHOP
Bài tập thực hành

Đồ hoạ trên WEB
Màu sắc
Bố cục
Sự khác biệt của đồ hoạ trên web
Màu sắc
Màu sắc: Là một khía cạnh hết sức thú vị đối với Web bởi vì nó quyết định sự thành công của trang web bạn tạo ra
Ngày nay, các máy tính thể hiện được màu sắc tương đối hoàn chỉnh so với màu trong thực tế vì vậy bạn có thể yên tâm lựa chọn màu sắc theo cảm nhận chủ quan của mình
Việc sử dụng màu dựa trên sắc độ của vòng màu cơ bản. Trên thực tế có rất nhiều các chế độ màu khác nhau như: RGB, CMYK, Lab, v..v.. Tuy nhiên chế độ màu thường được sử dụng trên các trang web là mô hình RGB
Mô hình RGB là chế độ màu dựa trên 3 màu cơ bản: Red (đỏ) - Green (xanh lục) - Blue (xanh dương)
Bố cục
Bố cục là cách sắp xếp các đối tượng trong bản thiết kế sao cho truyền tải đến người sử dụng thông tin của bạn một cách dễ hiểu và logic
Để có một bố cục tốt bạn cần phải quan tâm đến các vấn đề sau
Bố cục phải đem đến sự cân bằng, chặt chẽ
Bố cục phải có chính có phụ
Bố cục có thể phá cách nhưng không thể phá vỡ các quy chuẩn chung, nói cách khác bạn có thể tạo ra điểm nhấn vào phần chính của toàn bộ thiết kế nhưng màu sắc hay vị trí vẫn phải hài hoà và có sự liên hệ với các phần khác
Sự khác biệt của đồ hoạ trên WEB
Luôn bị giới hạn trong khuôn khổ màn hình nên không tạo được sự bao quát toàn bộ
Phải có sự liên hệ về màu sắc và hình ảnh giữa các trang được liên kết để tạo ra sự thống nhất của một website
Không nên dùng các hình ảnh có dung lượng lớn trên các website vì nó làm giảm đáng kể tốc độ truy cập
Hình ảnh động là một lợi thế của đồ hoạ trên web, tuy nhiên nếu bị sử dụng quá nhiều sẽ làm cho trang web của bạn trở nên rối loạn, kém tính thẩm mỹ
Phần mềm xử lý đồ hoạ PhotoShop
Giới thiệu chung
Các công cụ chọn và các lệnh chọn đặc biệt
Các lệnh xử lý vùng chọn và chỉnh sửa hình ảnh
Các công cụ tô vẽ
Các công cụ sửa chữa và hiệu chỉnh hình ảnh
Các công cụ trợ giúp
Tìm hiểu về lớp và các lệnh làm việc với lớp
Tìm hiểu về các hiệu ứng đặc biệt hay sử dụng
Tìm hiểu về kênh màu
Giới thiệu chung
ứng dụng của PhotoShop
Khởi động và thoát khỏi chương trình
Giới thiệu cửa sổ làm việc
Các lệnh quản lý hình ảnh
ứng dụng của PhotoShop
Là chương trình làm việc và xử lý các tập tin ảnh. Photoshop có thể giúp người sử dụng phục hồi lại một tấm ảnh đã bị cũ nát vì thời gian hoặc mờ nhoè vì đã trải qua nhiều lần chụp đi chụp lại. Nó cũng có thể giúp người ta ghép một hoặc nhiều phần của các tấm ảnh khác nhau để tạo nên một ảnh mới. Ngoài ra Photoshop còn cung cấp cho ta nhiều kỹ xảo và hiệu ứng đặc biệt giúp nâng cao hiệu quả mỹ thuật của một bản thiết kế
Khởi động và thoát khỏi
chương trình
Khởi động: Kích chọn Start Programs Adobe PhotoShop 6.0 Adobe Photoshop 6.0
Thoát: Kích chọn menu File Exit
Giới thiệu cửa sổ làm việc
Giới thiệu cửa sổ làm việc
Cửa sổ làm việc của Photoshop được sắp xếp từ trên xuống dưới như sau
Thanh tiêu đề: Là nơi ghi tên chương trình và nút tắt chương trình, nút phóng to thu nhỏ cửa sổ thành biểu tượng ở đáy màn hình
Thanh menu: Là nơi chứa toàn bộ lệnh làm việc của chương trình
+ File: Các lệnh về quản lý hình ảnh
+ Edit: Các lệnh về chỉnh sửa nội dung hình ảnh
+ Image: Các lệnh điều chỉnh kích cỡ và độ phân giải của hình ảnh
+ Layer: Các lệnh quản lý và làm việc với các lớp của hình ảnh



+ Select: Các lệnh tạo và chỉnh sửa vùng chọn hình ảnh
+ Filter: Các lệnh lọc và tạo hiệu ứng cho hình ảnh
+ View: Các lệnh về hiển thị của hình ảnh và chương trình
+ Window: Các lệnh quản lý cửa sổ của chương trình
+Help: Các lệnh về trợ giúp
Các bảng không cố định
Gọi là bảng không cố định vì người sử dụng có thể cho phép hiển thị hoặc không hiển thị các bảng này trên màn hình làm việc
+ Hiển thị các bảng không cố định: Kích chọn menu Window Show + tên bảng cần hiển thị (VD: Show Layer)
+ ẩn các bảng không cố định: Menu Window Hide + tên bảng cần ẩn
Hộp công cụ: Gồm 22 công cụ giúp cho việc sửa chữa, chọn lựa và điều chỉnh hình ảnh. Trong hộp công cụ còn có 2 ô chỉ thị màu foreground và background Thanh Options: Cho phép lựa chọn các xác lập cho từng công cụ (VD: chế độ hoà trộn, kiểu chổi vẽ,...). Tuỳ chọn trên thanh options thay đổi tuỳ theo công cụ được làm việc và các lựa chọ của bạn tiếp tục có hiệu lực cho đến lúc bạn thay đổi chúng.
Bảng Color: Dùng để pha và chọn màu. Chọn mô hình màu cho bảng Color từ menu lệnh của bảng màu. Pha màu bằng thanh trượt hoặc chọn nhanh màu bằng cách nhấp lên thanh màu ở dưới cùng của bảng màu
Bảng Swatches: dùng để chọn màu pha sẵn
Bảng Styles: Cho phép áp dụng từng hiệu ứng đơn lẻ hoặc hiệu ứng kết hợp đã lưu trước đó.
Bảng Navigator: Là nơi cho bạn cơ hội di dời hình ảnh trong cửa sổ của nó hoặc thay đổi kích thước hiển thị ảnh
Bảng Info: Hiển thị các giá trị màu của pixel hiện đang nằm dưới con trỏ. Bảng này cũng cung cấp giá trị tối đa 4 công cụ lấy mẫu màu. Ngoài ra, nó còn xác định toạ độ x/y của con trỏ trên màn hình
Bảng Layer: Hiển thị các lớp tạo thành bản thiết kế của bạn. Hoạt động này rất hiệu quả vì nó cho phép bạn làm việc với từng phần nhỏ của bản thiết kế
Bảng Channels: Hiển thị các kênh cấu thành hình ảnh. Ngoài ra nó còn có công dụng giúp tạo và hiển thị kênh alpha (dùng để lưu vùng chọn) và kênh màu vết (tạo bản màu vết)
Bảng Paths: Dùng để lưu và truy cập path. Path là hình dạng cấu thành từ nhiều đoạn cong và đoạn thẳng nối với nhau bằng các điểm neo
Bảng History: Hiển thị các bước trong tiến trình hiệu chỉnh ảnh. ở đây bạn có thể huỷ bỏ có chọn lọc các bước làm việc từ khi bắt đầu mở file ảnh đang làm việc
Bảng Actions: Mục đích chính là tự động hoá tiến trình xử lý ảnh
Bảng Character và Paragraph: Cho phép bạn áp dụng các định dạng nhằm chỉnh sửa nội dụng đoạn văn bản
Các lệnh quản lý hình ảnh
Mở 1 tập tin mới
Kích chọn menu File New hoặc sử dụng phím nóng Ctrl + N
Mở 1 tập tin có trong bộ nhớ
Kích chọn menu File Open hoặc sử dụng phím nóng Ctrl + O
Lưu 1 tập tin
Kích chọn menu File Save hoặc sử dụng phím nóng Ctrl + S
Các công cụ chọn
Công cụ chọn hình chữ nhật
Công cụ chọn hình elip
Công cụ chọn 1px theo chiều ngang
Công cụ chọn 1px theo chiều dọc
Công cụ chọn sợi dây tự do
Công cụ chọn sợi dây thẳng
Công cụ chọn sợi dây từ tính
Công cụ dịch chuyển
Công cụ chọn vùng có màu tô tương tự
Các lệnh chọn đặc biệt
Chọn toàn bộ lớp hiện hành (Select All)
Xoá bỏ vùng chọn hiện hành (Select Deselect)
Khôi phục vùng chọn vừa bỏ (Select Reselect)
Chọn vùng ngược lại vùng chọn hiện hành (Select Inverse)
Tạo vùng chọn theo màu được lấy mẫu (Select Color Range)
Chọn toàn bộ hình ảnh trên một lớp bất kỳ (Select Load Selection)
Các lệnh xử lý vùng chọn
Bành trướng vùng chọn (Select Grow và Select Similar)
Làm dịu vùng chọn (Select Feather)
Điều chỉnh vùng chọn (Select Modify)
Thay đổi hướng vùng chọn (Select Transform Selection)
Lưu và tải vùng chọn (Select Save Selection và Select Load Selection)
Tạo đường viền cho vùng chọn (Edit Stroke)
Các lệnh chỉnh sửa hình ảnh
Sao chép hình ảnh (Edit Copy)
Di chuyển hình ảnh (Edit Paste)
Khôi phục hình ảnh (Edit Undo)
Xoá vùng hình ảnh được lựa chọn (Edit Clear)
Thay đổi kích thước và hướng của hình ảnh trên lớp hiện thời (Edit Free Transform)
Thay đổi kích thước vùng hình ảnh được chọn (Edit Transform)
Các công cụ tô vẽ
Công cụ chổi vẽ kiểu phụt sơn
Công cụ bút lông
Công cụ bút chì
Công cụ phục hồi ảnh như ban đầu
Công cụ phục hổi tạo hình dáng NT
Công cụ tô chuyển màu
Công cụ tô màu
Công cụ tẩy dùng màu Foreground
Công cụ tẩy dùng màu Background
Công cụ tẩy vùng ảnh có thuộc tính tương tự nhau
Công cụ chọn màu
Chọn nhiều màu
Thước đo
Công cụ tạo đường dẫn




Công cụ tạo hình



Công cụ tạo văn bản
Công cụ sửa chữa hình ảnh
Công cụ làm sáng ảnh
Công cụ tối ảnh
Công cụ bão hoà màu
Công cụ làm nhoè
Công cụ làm nét
Công cụ di mầu
Công cụ con dấu
Công cụ con dấu mẫu
Công cụ cắt hình ảnh
Công cụ chọn các hình véc tơ
Các lệnh điều chỉnh hình ảnh
Điều chỉnh độ phân giải và kích thước của ảnh (Image Image Size)
Điều chỉnh hướng hiển thị hình ảnh (Image Rotate Canvas)
Điều chỉnh chế độ ảnh (Image Mode)
Điều chỉnh đường nét (Image Adjust)
Các công cụ trợ giúp
Công cụ tạo vùng cho các trang web

Công cụ di chuyển hình ảnh
Công cụ phóng to, thu nhỏ hình ảnh
Công cụ tạo chú thích
Tìm hiểu về lớp
Khả năng tạo lớp cho từng thành phần riêng biệt của một bản thiết kế là một trong những đặc tính mạnh nhất của Photoshop. Lớp cho phép bạn di chuyển và chỉnh sửa từng phần hình ảnh mà không ảnh hưởng tới các phần ảnh khác
Có thể xem các lớp như những tấm phim có đặt các phần ảnh trên đó, chỉ có phần hình ảnh bạn cần sử dụng là không trong suốt và các phần còn lại sẽ trong suốt.
Một file có thể có một hoặc nhiều lớp xếp chồng lên nhau để tạo thành một hình ảnh đầy đủ
Các lệnh làm việc với lớp
Tạo một lớp mới (Layer New Layer)
Biến lớp Background thành một lớp layer bình thường (Layer New Layer from Background)
Nhóm nhiều layer thành một (Layer New Layer set)
Nhóm nhiều layer được liên kết với nhau thành một (Layer New Layer set from linked)
Tạo layer mới với vùng được chọn sẽ được sao chép sang (LayerNew Layer via copy)
Tạo layer mới với vùng được chọn sẽ di chuyển sang (Layer New Layer via cut)
Tạo bản copy của layer hiện hành (Layer Duplicate Layer)
Xoá layer hiện hành (Layer Delete Layer)
Hoà nhập lớp hiện hành vào với lớp đứng dưới nó (Layer Merge Down)
Hoà nhập các lớp đang hiển thị (Layer Merge Visible)
Hoà nhập tất cả các lớp thành một lớp duy nhất (Layer Flatten Image)
Các hiệu ứng trên lớp (Layer Layer Style)
Các hiệu ứng đặc biệt hay sử dụng
Artistic: Hiệu ứng kỹ xảo mỹ thuật
Blur: Hiệu ứng làm mờ
Distort: Hiệu ứng biến dạng
Render: Hiệu ứng liên quan đến việc chiếu sáng hoặc làm tối
Sharpen: Hiệu ứng tăng độ tương phản của ảnh
Other: Hiệu ứng nhóm
Tìm hiểu về kênh màu
Mỗi hình ảnh trong Photoshop là phiên bản phức hợp của một hay nhiêu kênh màu. Ví dụ như hình ảnh trong chế độ RGB được cấu thành từ ba kênh Red, Green, Blue. Có thể sửa màu trên từng kênh song thường thì bạn nên tiến hành chỉnh sửa trên phiên bản phức hợp kết quả bạn sẽ thu được sẽ tác động lên toàn bộ kênh có trong hình ảnh cùng lúc
Kênh màu thực sự hữu ích khi bạn dùng để lưu vùng chọn ở dạng mặt nạ, gọi là kênh alpha vào hình ảnh