Nhất là trong quá trình thiết kếchỉnh sửa hình ảnh bằng các phần mềm chuyên nghiệp, thì màu sắc được liệt kê ra lanrộng, có thể lên đến hàng nghìn màu pha trộn lại với nhau, sau đó sẽ đị
5
SỬ DỤNG Color Picker
II Sử dụng EyeDropper Tool
2 Chương 2: Tạo hiệu ứng Rollover cho trang web
II Tạo và chia một Slices để xây dựng bảng
III Tạo hiệu ứng Rollover bằng cách ẩn hiện layer
3 Chương 3: Tạo hình động cho trang web 12 4 8
I Tạo hình động trong ImageReady
II Tạo hình động bằng cách ẩn hiện layer
4 Chương 4: Sử dụng công cụ Slices tool để cắt layout
II Tạo Slices trên layer
III Tối ưu hóa và lưu Slices
CÁCH LẤY MÀU TỪ PHOTOSHOP Giới thiệu
Trong bảng mã màu CSS, không chỉ dừng lại ở những màu sắc đơn giản như xanh, đỏ, tím, vàng hay hồng; khi thiết kế và chỉnh sửa hình ảnh bằng các phần mềm chuyên nghiệp, danh sách màu được mở rộng lên hàng nghìn sắc thái pha trộn khác nhau và được định dạng dưới nhiều dạng mã màu như HEX, RGB hay HSL, giúp người dùng dễ dàng tìm kiếm và xác định chính xác màu sắc chi tiết theo đúng mã màu của nó, phục vụ cho các hoạt động thiết kế web và đồ họa một cách hiệu quả.
Trong mỗi bảng mã màu sơn, màu hiển thị có thể khác nhau trên các màn hình, nên màu thực tế có thể không khớp giữa các thiết bị Vì vậy, quá trình điều chỉnh màu máy tính trở thành một bước rất quan trọng để xác định chính xác gam màu và độ đậm nhạt của từng màu sắc, từ đó thuận tiện cho việc phối màu trên Photoshop một cách chính xác Việc hiệu chỉnh màu giúp giảm lệch màu giữa các màn hình và đảm bảo hình ảnh đầu ra phù hợp với bảng mã màu sơn bạn đang dùng, hỗ trợ thiết kế và chỉnh sửa ảnh chất lượng hơn.
Mục tiêu: sau khi học xong bài học này người học có khả năng:
- Biết cách lấy màu trong photoshop bằng công cụ color picker
- Biết cách lấy màu trong photoshop bằng công cụ eyedroper tool
Trước khi bắt đầu tô màu trong Photoshop, bạn cần biết cách chọn và quản lý màu sắc Có nhiều cách để chọn màu, như từ bảng màu Color (nhấn F6), bảng Swatches (Window → Swatches), hoặc từ Color Picker (hai ô Foreground/Background ở cuối thanh công cụ) Thông thường, người dùng hay dùng Foreground/Background để thiết lập màu nhanh chóng và linh hoạt với dự án của mình.
Bảng color picker gồm hai ô màu: foreground color và background color, tương ứng với màu phía trên và màu phía dưới khi làm việc Để thay đổi màu cho hai ô màu, bạn nhấp đúp chuột trái vào ô màu để mở bảng chọn màu Khi bảng màu hiện ra, bạn tiến hành chọn màu mong muốn và áp dụng cho ô tương ứng.
Bạn có thể nhập màu theo hệ RGB hoặc CMYK, kéo màu tự do trên ô màu và thanh màu, hoặc tích vào ô 'only web color' ở dưới để chọn màu dễ hơn Cuối cùng nhấp OK để xác nhận màu, rồi để tô màu của ô màu phía trên (foreground color) hãy nhấn Alt+Delete, còn để tô màu của ô màu phía dưới (background color) hãy nhấn Ctrl+Delete Để đảo vị trí của foreground và background, nhấn phím X trên bàn phím hoặc nhấp vào mũi tên hai chiều ở trên biểu tượng hai ô màu.
1 Tô màu nền (background) trong photoshop
Trong Photoshop, tô màu nền (background) hoặc thêm một layer màu là cách để tạo phần nền cho bức ảnh hoặc bản thiết kế; bạn có thể tô màu cho toàn bộ vùng làm việc hoặc chỉ một phần cụ thể tùy mục đích, nhằm nhấn mạnh chủ đề, tăng độ tương phản hoặc tạo hiệu ứng thẩm mỹ Để thực hiện tô màu nền hiệu quả, hãy chọn hoặc tạo một layer màu nền, sau đó sử dụng công cụ tô hoặc hộp màu để áp dụng màu mong muốn và điều chỉnh độ mờ, chế độ hòa trộn để nền hòa quyện với các yếu tố còn lại trong thiết kế.
Trước khi bắt đầu bạn nên tạo một layer mới, bằng cách Trong hộp thoại layer (F7) -> click chọn new layer
Bước 2: Lựa chọn khu vực tô màu:
Trong Photoshop có nhiều cách để chọn khu vực tô màu; để tô màu một vùng cụ thể, cần tạo vùng chọn bao phủ đúng khu vực cần tô Ở đây, ta dùng công cụ Rectangular Marquee Tool để tạo vùng chọn hình chữ nhật Nếu muốn tô màu cho toàn bộ vùng làm việc, bỏ qua bước này.
Lựa chọn màu cần tôvà ấn tổ hợp phím Alt+Delete
2 Tô màu đối tượng trong photoshop
Tô màu đối tượng trong Photoshop là một kỹ thuật tô màu theo vùng, cho phép chia đối tượng thành các mảng màu khác nhau và mỗi mảng được tô bằng một màu riêng Điều quan trọng nhất của kỹ thuật này là tạo vùng chọn ở đúng phần cần tô màu Có nhiều cách khác nhau để tạo vùng chọn, ví dụ như Pen Tool (công cụ Pen), bộ công cụ Lasso Tool, hoặc Quick Selection, và sau khi có vùng chọn, bạn có thể áp dụng màu cho từng mảng màu tương ứng.
Các bước thực hiện như sau:
Bước 1: Chọn layer chứa đối tượng, bằng cách trực tiếp chọn vào layer trong hộp thoại layer (f7)
Bước 2: Trên thanh công cụ Chọn Magic wand tool
Bước 3: Click chuột vào khu vực cần tô màu, Giữ Shift +click chuột để lấy thêm các vùng khác
Bước 4: Từ bản color picker, chọn màu muốn tô và ấn tổ hợp phím Alt+delete
SỬ DỤNG EYEDROPER TOOL
Eyedropper tool trong Photoshop có phím tắt là I, tiện lợi hơn việc lấy mã màu theo cách 1 Bạn chỉ cần nhấp vào biểu tượng Eyedropper trên giao diện Photoshop để lấy nhanh mã màu bạn cần.
Đầu tiên mở bảng Color Picker như ở bước 1 để lấy mã màu đã có, vì hai phương pháp đều tương tự nhau Tuy nhiên, sử dụng công cụ Eyedropper sẽ cho kết quả mã màu chuẩn xác hơn, đặc biệt với những bức ảnh đòi hỏi độ tỉ mỉ cao về màu sắc Khi bạn đã nắm được mã màu, bạn có thể ứng dụng vào bất kỳ công việc thiết kế nào: xác định, sao chép và chỉnh sửa để màu y hệt với mục tiêu mong muốn.
Bảng mã màu hex thường được các chuyên gia thiết kế đồ họa hoặc thiết kế
HEX là từ viết tắt của hexadecimal, được dùng phổ biến trên website để biểu thị dãy ký tự mã hóa Viết mã HEX bắt đầu bằng dấu #, theo sau là một chuỗi ký tự Latin gồm cả chữ cái và số, và không phân biệt chữ hoa chữ thường Trong thiết kế web, mã màu HEX được dùng để định hình màu sắc cho giao diện và trải nghiệm người dùng, đồng thời HEX còn là cách diễn giải dữ liệu ở hệ thập lục phân.
Những ký tự Latinh có thể chấp nhận ở bảng mã màu bao gồm: a,b,c,d,e,f,A,B,C,D,E,F.
Ví dụ: #00ffff, theo đó chúng ta có thể tiến hành viết rút gọn màu theo các cách tương ứng như sau:
• Rút gọn 3 cặp ký tự thành 3 ký tự: #ff0066 => #f06
• Rút gọn 6 ký tự giống nhau thành 3 ký tự: #ffffff => #fff
Bảng mã màu RGB phổ biến và được nhiều người biết đến, được sử dụng tùy theo mục đích thiết kế như web, đồ họa và nội dung số Quá trình xác định màu RGB dựa trên sự kết hợp của ba màu cơ bản: đỏ (Red), xanh lá cây (Green) và xanh dương (Blue), tạo ra mọi sắc thái màu hiển thị trên màn hình Hiểu cách phối trộn RGB giúp đồng nhất màu sắc trên các nền tảng số, tối ưu giao diện người dùng và tăng tính nhận diện thương hiệu.
Một số giá trị đặc biệt bao gồm:
Màu xanh lá cây: rgb (0,255,0)
Màu vàng: rgb (255,255,0) Đối với cách viết thể hiện cụ thể tên màu được viết theo tiếng Anh.
Những tên thường được nhiều người sử dụng bao gồm:
Màu xanh lá cây: green
Trong thiết kế đồ họa và nhận diện thương hiệu hiện đại, một số màu cơ bản và ấn tượng được chọn làm nền tảng cho quá trình pha trộn màu, nhằm tạo bảng màu đa dạng phục vụ cho thiết kế website, hộp đèn thiết kế thời trang, bảng hiệu, banner và khu vực tập vẽ Việc kết hợp các màu này giúp thể hiện phong cách riêng, tăng tính nhận diện và thu hút người xem trên nhiều chất liệu và nền.
Trong Photoshop, màu foreground và background được hiển thị ở cuối của thanh công cụ.
Trong giao diện, hình vuông màu xanh ở trên biểu thị màu foreground, còn hình vuông màu vàng ở dưới biểu thị màu background Để đưa foreground và background về màu mặc định trắng và đen, ta dùng phím tắt D hoặc nhấp vào hai hình vuông đen trắng ở phía trên Để nghịch đảo màu foreground và background, ta dùng phím tắt X hoặc nhấp vào mũi tên hai đầu vòng cung ở trên Để chọn màu cho foreground hoặc background, nhấp chuột vào hình vuông tương ứng và chọn màu mong muốn.
Khi click vào hình vuông foreground hoặc background, bảng chọn Color Picker sẽ mở Ở đây, bạn có thể chọn màu bằng cách di chuyển vòng tròn trong vùng màu cho đến khi đạt sắc thái mong muốn Thông tin màu được hiển thị ở bên phải, bao gồm các giá trị như RGB, HSB, CMYK, và đặc biệt là mã màu ở dòng cuối cùng bắt đầu bằng dấu # Mỗi màu sắc đều có một mã màu riêng biệt, và mã màu này được sử dụng rất nhiều trong đồ họa và lập trình để truyền đạt màu sắc một cách chính xác.
Eyedropper tool (Phím tắt I) là công cụ trong Photoshop để chọn bất kỳ màu sắc nào từ ảnh bằng cách lấy mẫu màu Khi xem một bức ảnh và thấy một mảng màu ưng ý nhưng chưa biết chính xác mã màu, bạn có thể dùng Eyedropper để lấy màu đó và nhận được thông số màu như HEX hoặc RGB để sao chép và áp dụng vào dự án ngay lập tức Công cụ này giúp xác định màu chuẩn cho thiết kế, chỉnh sửa màu và đảm bảo sự nhất quán của bảng màu trên toàn bộ tác phẩm.
Click vào một điểm màu bất kỳ,bạn có thể thấy màu của foreground đã biến thành màu đó.
Bài 1: Sử dụng công cụ Color Picker chọn màu để tô cho các hình sau:
Bài 2: Sử dụng công cụ Eyedroper Tool hút màu trên hình mẫu để tô cho hình còn lại:
TẠO TRANG THÁI ROLLOVER
Rollover là một hiệu ứng tương tác phổ biến hiện nay, cho phép thay đổi giao diện của một trang web mà người dùng vẫn ở trên cùng một trang và không cần điều hướng sang trang khác Khi người dùng di chuột qua một điểm được xác định trước trên trang, điểm đó sẽ chuyển sang một trạng thái hoàn toàn khác Thường thì vùng thay đổi được xem như một lệnh, nơi nhấp chuột sẽ kích hoạt các hành động tiếp theo như mở một trang mới, đi tới một biểu mẫu, hoặc hiển thị nội dung bổ sung ngay trên giao diện hiện tại.
Hiện nay có một số hiệu ứng Rollover phổ biến trong thiết kế giao diện người dùng: khi di chuột lên một nút, nút sẽ thay đổi trạng thái, và khi nhấn vào nút đó, nút có thể thay đổi hình dạng Các hiệu ứng rollover này tương ứng với các trạng thái R hoặc các trạng thái biểu thị các điều kiện khác nhau trong Layer Palette Những điều kiện này có thể bao gồm sự ẩn hiện của một layer, vị trí của layer và các thuộc tính liên quan khác, giúp tối ưu hóa trải nghiệm người dùng và khả năng kiểm soát giao diện.
Trạng thái Rollover trong ImageReady được gắn với sự kiện kích hoạt trên vùng hình ảnh hoặc bản đồ ảnh, và Dạng R từ xa (remote R) sẽ tạo ra sự thay đổi ở một vùng khác khi một vùng nào đó được kích hoạt; ví dụ khi bạn di chuột qua một nút trên trang web và ở trên banner xuất hiện chữ Nói ngắn gọn, nó tạo ra thay đổi không trên bản thân nút mà trên một đối tượng khác Chỉ có User Slice mới có trạng thái Rollover, nhưng bạn có thể chọn Slices > Promote để biến một slice tự động thành một User Slice và sau đó thêm hiệu ứng R vào slice đó Các trạng thái Rollover trong ImageReady được tự động chỉ định cho một trong các trạng thái R sau đây và một slice bạn tạo: Over Activates sẽ làm thay đổi hình khi người dùng di chuột qua một slice hoặc một bản đồ ảnh (image map) nhưng chưa nhấn chuột; Down Activates làm thay đổi hình ảnh khi người dùng nhấn chuột trên một nút của một slice hoặc vùng bản đồ ảnh, trạng thái này xuất hiện ngay sau khi người dùng nhấn vào nút đó; Click Activates làm thay đổi hình ảnh khi người dùng nhấp chuột vào một slice hoặc một vùng bản đồ ảnh, trạng thái sẽ xuất hiện cho đến khi người dùng di chuột ra khỏi vùng R.
Chú ý: những trình duyệt web khác nhau, hoặc phiên bản khác nhau, có thể xử lý chuột trái và nhấp đúp khác nhau.
Custom Activate cho phép đổi tên một tấm hình khi người dùng tương tác được định nghĩa bằng đoạn mã JavaScript kèm theo; để tạo hiệu ứng này, bạn cần tạo đoạn mã JavaScript và thêm nó vào trang HTML của mình để kích hoạt Custom Rollover Chế độ None Preserve giữ nguyên trạng thái hiện tại của hình để dùng sau, nhưng sẽ không cho đầu ra khi tài liệu được lưu dưới dạng trang web Việc kết hợp các thuật ngữ như Custom Activate, Custom Rollover, đoạn mã JavaScript và HTML không chỉ giúp trải nghiệm người dùng mượt mà mà còn hỗ trợ SEO nhờ tối ưu từ khóa, thẻ alt và mô tả hình ảnh.
Selected Activates kích hoạt trạng thái R khi người dùng nhấp chuột lên slice hoặc vùng bản đồ ảnh; trạng thái này sẽ duy trì cho đến khi người dùng kích hoạt một trạng thái R khác, và có thể có một trạng thái R khác xuất hiện ngay cả khi trạng thái R hiện tại đang được kích hoạt.
- Out Activate kích hoạt một tấm hình khi người dùng di chuột ra khỏi một slice hoặc một vùng bản đồ ảnh (đây chính là trạng thái Normal State)
Up Activate kích hoạt thay đổi một tấm hình khi người dùng thả chuột trên một slice hoặc một vùng bản đồ ảnh.
Nếu bạn đã hoàn thành các chương trước của cuốn sách này, bạn hẳn đã tích lũy được nhiều kinh nghiệm trong việc thiết lập không gian làm việc hiệu quả ImageReady cung cấp một số môi trường làm việc được thiết lập sẵn, giúp bạn nhanh chóng bắt đầu dự án và duy trì tính nhất quán trong quá trình làm việc Việc chọn đúng môi trường phù hợp với yêu cầu của dự án sẽ tối ưu hóa thời gian, giảm thiểu lỗi và tăng hiệu suất làm việc.
1 Khởi động ImageReady Nếu những Palette không nằm ở những vị trí như mặc định, chọn Window> Workspace > Default Palette Location.
2 Kéo nhóm pallete Web Content sang phía bên trái của Info Palette, ở trên cùng của vùng làm việc.
3 Đóng Info Palette và Color Palette lại Hoặc bạn có thể đóng chúng bằng cách chọn Info và Color trong menu View.
4 Kéo nhóm Layer Palette lên phía trên bên phải của vùng làm việc đặt nó ngay bên cạnh nhóm palette Web Content (nơi mà bạn vừa đóng Info Palette lại)
5 Trong nhóm Slice Palette, chọn thẻ Talbe để mang nó ra phía trước và sau đó nhấp vào mũi tên hai đầu ở thẻ đó để mở rộng toàn bộ Palette Sau đó kéo xuống phía dưới, bên phải của vùng làm việc.
6 Kéo góc phía dưới bên phải của Web Content và Layer Palette để tận dụng hết những khoảng trống nằm dưới nó
7 Chọn Window > Workspace > Save Workspace và đặt tên nó là 17_Rollover trong hộp thoại Save Workspace.
Trong quy trình chuẩn bị, thiết lập đúng vùng làm việc của ImageReady là một bước quan trọng Có một số thiết lập chỉ có thể được cấu hình sau khi tài liệu được mở, nên bạn nên bắt đầu bằng việc mở tài liệu trước để tiến hành các thiết lập cần thiết cho vùng làm việc.
2 Trong hộp thoại Open bạn tìm đến thư mục Lesson17
3 Chọn file 17Start.psd và nhấp Open.
4 Nếu cần, định lại kích thước cửa sổ ảnh và phóng to hoặc thu nhỏ để có thể nhìn thấy toàn bộ tấm hình.
5 Mở View Menu và menu phụ của nó và chắc chắn những lệnh sau được chọn hoặc chọn chúng nếu chưa:
• Guides và Slices trong menu phụ Snap To
• Guides và Slices trong menu phụ Show
Hiệu ứng Rollover khi chữ được uốn cong là một tính năng thú vị của ImageReady, cho phép chữ được uốn cong sao cho trông như thể được tạo bởi hiệu ứng không gian 3 chiều Ta sẽ kết hợp chữ uốn cong với một trạng thái Rollover, và khi người dùng thực hiện một thao tác trên trang HTML, chữ uốn cong đó sẽ xuất hiện tại tài liệu HTML ở trạng thái tương ứng.
1 Chọn công cụ Slice và kéo một đường hình vuông bao quanh chữ "Museo Arte" sử dụng đường guide làm chỉ dẫn để cho đường biên của Slice dính vào nó.
2 Trong Web Content Palette, nhấp đúp vào tên được tự động đặt của User Slice (17Start_02) để chọn nó Gõ chữ Museo Arte để đặt lại tên cho nó và nhấn Enter.
3 Chọn nút Creat Rollover State Một trạng thái Over sẽ xuất hiện bên dưới Slice Museo Arte trong Web Content Palette.
4 Trong Layer Palette, chọn layer Museo Arte.
5 Trong hộp công cụ, chọn Type Tool để hiển thị tuỳ chọn text trên thành tuỳ biến công cụ và chọn nút Create Warrped Text
Chú ý: Bạn không cần dùng công cụ Type hoặc chọn chữ Hiệu ứng uốn cong luôn áp dụng cho toàn bộ layer chữ, chứ không áp dụng cho từng từ hay từng ký tự riêng lẻ.
6 Chọn Fisheye trong menu xổ ra Style và kéo thanh trượt Bend đến 30% Để hai thanh trượt còn lại là Vertical và Horizontal Distortion là 0%, nhấn OK ta sẽ thấy chữ Museo Arte được uốn cong đi.
7 Trong Web Content Palette, nhấn Normal để bỏ chọn trạng thái R hiển thị trên cửa sổ hình ảnh
Chú ý: Uốn cong chữ không giống như viết chữ theo path — đây là một tính năng của Photoshop Để biết thêm thông tin về viết chữ theo quỹ đạo định sẵn, xem tài liệu trợ giúp của Photoshop và Layer Palette Tính năng này không có trong ImageReady.
TẠO HIỆU ỨNG ROLLOVER BẰNG CÁCH ẨN HIỆN LAYER
3 Chương 3: Tạo hình động cho trang web 12 4 8
I Tạo hình động trong ImageReady
II Tạo hình động bằng cách ẩn hiện layer
4 Chương 4: Sử dụng công cụ Slices tool để cắt layout
II Tạo Slices trên layer
III Tối ưu hóa và lưu Slices
CÁCH LẤY MÀU TỪ PHOTOSHOP Giới thiệu
Trong bảng mã màu CSS, không chỉ có những màu cơ bản như xanh, đỏ, tím, vàng hay hồng mà các phần mềm thiết kế cho phép hàng nghìn màu pha trộn khác nhau Quá trình chỉnh sửa hình ảnh bằng các công cụ chuyên nghiệp giúp tập hợp và chuẩn hóa màu sắc thành nhiều mã màu khác nhau, nhằm bạn có thể xác định và tìm đúng màu sắc chi tiết theo mã màu của nó Việc nắm vững các định dạng màu phổ biến như HEX, RGB và HSL giúp đảm bảo tính nhất quán khi áp dụng trong CSS và thiết kế giao diện Nhờ đó, người thiết kế có thể tối ưu hóa màu sắc cho dự án, tăng tính chuẩn xác, sáng tạo và hiệu quả cho công cụ tìm kiếm.
Vì mỗi bảng mã màu sơn sẽ hiển thị khác nhau, không phải màn hình máy tính nào cũng thể hiện đúng màu được ghi trên bảng mã Do đó, quá trình hiệu chỉnh màu trên máy tính là rất quan trọng để xác định chính xác gam màu và độ đậm nhạt của từng màu sắc, từ đó hỗ trợ việc phối màu trên Photoshop trở nên chính xác và thuận tiện hơn.
Mục tiêu: sau khi học xong bài học này người học có khả năng:
- Biết cách lấy màu trong photoshop bằng công cụ color picker
- Biết cách lấy màu trong photoshop bằng công cụ eyedroper tool
Trước khi bắt đầu tô màu trong Photoshop, bạn cần nắm rõ cách chọn và quản lý màu sắc để làm việc hiệu quả Có rất nhiều cách để chọn màu, chẳng hạn như bảng màu Color (phím tắt F6), bảng màu Swatches (Window > Swatches), hoặc color picker (còn gọi là foreground/background, hai ô màu ở dưới cùng thanh công cụ) Thông thường, chúng ta hay sử dụng foreground/background để điều chỉnh màu sắc nhanh chóng khi tô.
Bảng color picker gồm hai ô màu: foreground color và background color, tương ứng với màu trước (phía trên) và màu nền (phía dưới) Để thay đổi màu cho hai ô này, nhấp đúp chuột trái vào ô màu để mở bảng chọn màu Khi bảng màu hiện lên, hãy chọn màu mong muốn và áp dụng cho foreground hoặc background tùy nhu cầu.
Bạn có thể điền mã màu theo hệ RGB hoặc CMYK, hoặc kéo màu tự do trên ô màu và thanh màu để chọn nhanh; để đơn giản hơn, có thể tích vào ô Only Web Color ở dưới Sau khi chọn, nhấp OK để áp dụng màu cho ô màu phía trên (foreground color) Để tô màu cho ô màu phía dưới (background color) hãy ấn Ctrl+Delete, và để tô màu cho foreground hãy ấn Alt+Delete Để đảo ngược vị trí giữa foreground và background, nhấn phím X trên bàn phím hoặc nhấp vào mũi tên hai chiều ở trên của biểu tượng hai ô màu.
1 Tô màu nền (background) trong photoshop
Tô màu nền hoặc tô màu cho layer trong Photoshop là kỹ thuật tạo nền cho ảnh hoặc thiết kế Bạn có thể tô màu cho toàn bộ vùng làm việc hoặc chỉ một phần cụ thể để nhấn mạnh yếu tố quan trọng Việc tô màu nền giúp cân bằng màu sắc, tăng độ tương phản và tạo hiệu ứng thẩm mỹ tổng thể, đồng thời cho phép chỉnh sửa linh hoạt sau khi hoàn tất.
Trước khi bắt đầu bạn nên tạo một layer mới, bằng cách Trong hộp thoại layer (F7) -> click chọn new layer
Bước 2: Lựa chọn khu vực tô màu:
Có nhiều cách để chọn vùng tô màu trong Photoshop và bước quan trọng là tạo vùng chọn bao phủ đúng khu vực cần chỉnh màu Trong hướng dẫn này, ta dùng công cụ Rectangular Marquee Tool để tạo vùng chọn hình chữ nhật, giới hạn khu vực cần tô màu Nếu bạn muốn tô màu cho toàn bộ vùng làm việc, có thể bỏ qua bước này.
Lựa chọn màu cần tôvà ấn tổ hợp phím Alt+Delete
2 Tô màu đối tượng trong photoshop
Tô màu đối tượng trong Photoshop là kỹ thuật tô màu theo mảng, trong đó đối tượng được chia thành các mảng màu khác nhau và mỗi mảng nhận một màu riêng Với mỗi mảng màu như vậy, ta tô bằng một màu khác nhau để tạo hiệu ứng đa sắc cho đối tượng Điều cốt lõi của kỹ thuật này là tạo vùng chọn đúng phần cần tô màu, đảm bảo vùng tô màu chính xác và đồng nhất Có nhiều cách để tạo vùng chọn, bao gồm Pen Tool, Lasso Tool và Quick Selection, phù hợp với nhiều tình huống chỉnh sửa khác nhau.
Các bước thực hiện như sau:
Bước 1: Chọn layer chứa đối tượng, bằng cách trực tiếp chọn vào layer trong hộp thoại layer (f7)
Bước 2: Trên thanh công cụ Chọn Magic wand tool
Bước 3: Click chuột vào khu vực cần tô màu, Giữ Shift +click chuột để lấy thêm các vùng khác
Bước 4: Từ bản color picker, chọn màu muốn tô và ấn tổ hợp phím Alt+delete
II SỬ DỤNG EYEDROPER TOOL
Eyedropper tool có phím tắt là I, tiện lợi hơn cách 1 để lấy mã màu Bạn chỉ cần nhấp vào biểu tượng Eyedropper trên giao diện Photoshop để lấy mã màu ngay từ bất kỳ điểm màu nào trên hình.
Tiếp theo, mở bảng Color Picker như ở cách 1 và lấy đúng mã màu bạn vừa có Cả hai cách đều cho kết quả tương tự, nhưng sử dụng công cụ Eyedropper sẽ cho phép bạn lấy được các mã màu chuẩn xác hơn khi làm việc với những ảnh có độ chi tiết cao Khi đã nắm được mã màu, bạn có thể dễ dàng áp dụng vào bất kỳ công việc nào; việc lấy mã màu giúp xác định và sao chép chỉnh sửa để màu sắc trùng với màu gốc ở mọi dự án.
Bảng mã màu hex thường được các chuyên gia thiết kế đồ họa hoặc thiết kế
Trang web ngày nay sử dụng mã màu HEX, viết tắt của từ hexadecimal Mã HEX được thể hiện bằng ký hiệu '#' theo sau là một chuỗi ký tự Latin gồm cả chữ cái và số (thường là chữ số 0–9 và chữ cái A–F), và nó không phân biệt chữ hoa chữ thường.
Những ký tự Latinh có thể chấp nhận ở bảng mã màu bao gồm: a,b,c,d,e,f,A,B,C,D,E,F.
Ví dụ: #00ffff, theo đó chúng ta có thể tiến hành viết rút gọn màu theo các cách tương ứng như sau:
• Rút gọn 3 cặp ký tự thành 3 ký tự: #ff0066 => #f06
• Rút gọn 6 ký tự giống nhau thành 3 ký tự: #ffffff => #fff
Bảng mã màu RGB là một chuẩn phổ biến được nhiều người biết đến và thường được dùng tùy theo mục đích thiết kế hoặc trình chiếu Quá trình xác định màu RGB dựa trên sự kết hợp của ba màu cơ bản: đỏ (Red), xanh lá cây (Green) và xanh dương (Blue), từ đó tạo ra vô số sắc thái và hiệu ứng màu sắc trên các màn hình kỹ thuật số.
Một số giá trị đặc biệt bao gồm:
Màu xanh lá cây: rgb (0,255,0)
Màu vàng: rgb (255,255,0) Đối với cách viết thể hiện cụ thể tên màu được viết theo tiếng Anh.
Những tên thường được nhiều người sử dụng bao gồm:
Màu xanh lá cây: green
Các màu cơ bản và ấn tượng thường được ưu tiên dùng để pha trộn và tạo màu sắc trong quá trình thiết kế website, hộp đèn thiết kế thời trang, bảng hiệu và banner tập vẽ, nhằm định hình phong cách và tăng nhận diện thương hiệu Việc chọn và phối màu hợp lý không chỉ nâng cao thẩm mỹ mà còn cải thiện trải nghiệm người dùng trên website, đồng thời giúp các ấn phẩm quảng cáo như hộp đèn, bảng hiệu và banner tập vẽ nổi bật hơn Khi màu sắc được phối một cách cân đối, yếu tố thị giác trở nên hài hòa, dễ đọc và sinh động, từ đó tối ưu hóa hiệu quả truyền thông và hỗ trợ SEO nhờ tích hợp các từ khóa liên quan đến thiết kế màu sắc, pha trộn màu và ứng dụng của màu sắc trong thiết kế.
Trong Photoshop, màu foreground và background được hiển thị ở cuối của thanh công cụ.
Hình vuông màu xanh ở trên biểu thị màu foreground, còn hình vuông màu vàng ở dưới là màu background Để đưa foreground và background về màu mặc định (trắng và đen), dùng phím tắt D hoặc click vào hai hình vuông đen trắng ở phía trên Để nghịch đảo màu foreground và background, dùng phím tắt X hoặc click vào mũi tên hai đầu vòng cung ở phía trên Để chọn màu cho foreground hoặc background, click chuột vào hình vuông tương ứng và chọn màu bạn muốn.
Khi bạn nhấp vào hình vuông foreground hoặc background, bảng chọn Color Picker sẽ mở ra Ở đây, bạn có thể chọn màu bằng cách di chuyển dấu tròn trong vùng màu Bạn sẽ dễ dàng nhìn thấy thông tin màu ở phía bên phải, bao gồm các giá trị RGB, HSB và CMYK Lưu ý giá trị màu cuối cùng ở dưới cùng có ký hiệu # ở đầu, chính là mã màu (mã màu HEX) Mỗi màu sắc đều có một mã màu riêng biệt, và mã màu này được ứng dụng rộng rãi trong đồ họa và lập trình.