CHƯƠNG 1 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, hồng,… như các bạn thường nghĩ đến. 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 lan rộng, có thể lên đến hàng nghìn màu pha trộn lại với nhau, sau đó sẽ định dạng theo nhiều mã màu khác nhau, nhằm giúp các bạn có thể tìm kiếm được những màu sắc chi tiết, chính xác theo đúng mã màu của nó. Theo đó, trong mỗi bảng mã màu sơn sẽ hiển thị khác nhau, do đó không phải màn hình máy tính nào cũng thể hiện chính xác màu đăng hiển thị của nó. Do đó, quá trình điều chỉnh màu máy tính là một trong những việc rất quan trọng, nhằm giúp các bạn có thể tìm chính xác được gam màu, mức độ đậm nhạt của mỗi màu sắc để thuận tiện hơn trong quá trình phối màu trên phần mềm photoshop được chính xác.
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 Nội dung chính I. SỬ DỤNG Color Picker Trước khi bắt đầu thực hiện tô màu, bạn cần biết cách để lựa chọn, và quản lý màu sắc trong photoshop, có rất nhiều cách để lựa chọn màu sắc cần tô ví dụ: bảng màu color (F6), bảng màu Swatches (menu window ->swatches), hoặc color picker hay còn gọi là foreground/background (2 ô dưới cùng thanh công cụ). Thông thường chúng ta hay sử dụng foreground/background. Bảng color picker Bảng color picker bao gồm 2 ô màu foreground color và background color, hiểu nôm na đây là tô màu phía trên và phía dưới.
Để thay đổi màu sắc của 2 ô màu click đúp chuột trái vào ô màu để điều chỉnh. Một bản màu hiện ra, tiến hành lựa chọn màu như sau: Có thể điền mã màu theo hệ RGB hoặc CMKY, hoặc kéo màu tự do trên ô màu và thanh màu, cũng có thể lựa tích vào ô only web color ở dưới để chọn màu dễ hơn, cuối cùng là click OK Để tô màu của ô màu phía trên (foreground color) ấn tổ hợp phím Alt+Delete. Để tô màu của ô màu phía dưới (background color) ấn tổ hợp phím Ctrl+Delete. Để đảo vị trí của foreground và background ấn phím X trên bàn phím hoặc click chuột vào mũi tên 2 chiều phía trên của biểu tượng 2 ô màu Tô màu trong photoshop 5 1 Tô màu nền (background) trong photoshop Tô màu nền (backgroud) hoặc layer trong photoshop là trường hợp muốn tạo ra phần màu nền cho bức ảnh hoặc bản thiết kế.
Ta có thể tô màu toàn bộ vùng làm việc hoặc một phần cụ thể nào đó. Để có thể tô màu nền trong photoshop thực hiện các bước như sau: Bước 1: Tạo layer mới: 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ó rất nhiều cách để lựa chọn khu vực tô màu, cần tạo ra vùng chọn trong photoshop bao lấy khu vực cần tô. Ở đây ta dùng công cụ rectanger tool để tạo vùng chọn hình chữ nhật.
Trong trường hợp muốn tô màu cho toàn bộ vùng làm việc thì bỏ qua bước này Bước 3: Tô màu 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 PS là một kĩ thuật tô màu theo mảng. Đối tượng có các mảng màu khác nhau. Với mỗi mảng màng như vậy tô một màu khác nhau.
Điều quan trọng nhất với kĩ thuật này đó là cần tạo ra được vùng chọn vào đúng phần muốn tô màu. Có thể có rất nhiều cách khác nhau để tạo ra vùng chọn: pen tool, bộ công cụ lasso tool, quickselection…. 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 Công cụ Eyedropper tool có phím tắt là ( I ), công cụ này tiện lợi hơn việc lấy mã màu ở cách 1, chỉ cần click vào biểu tượng của Eyedropper tool trên màn hình photoshop Tiếp theo, mở bảng Color Picker giống như cách 1 và lấy mã mình vừa lấy.
Cả 2 cách đều giống nhau, thế nhưng đối với việc sử dụng công cụ Eyedropper tool sẽ giúp ta lấy được những bảng mã màu chuẩn hơn khi mà có những bức ảnh cần về độ tỉ mỉ của màu cao. Đối với việc biết được mã màu các bạn có thể dễ dàng sử dụng nó vào bất cứ công việc nào. Thông thường việc lấy mã màu sẽ giúp người dùng xác định được mã đó và để copy chỉnh sửa cho màu y hệt… Bảng mã màu hex thường được các chuyên gia thiết kế đồ họa hoặc thiết kế Website sử dụng. Theo đó, HEX được biết đến là từ viết tắt của “hexadecimal”.
Về 6 cách viết sẽ bao gồm dấu “#” kết hợp theo đó sẽ là một dãy ký tự Latin, gồm cả số hoặc là chữ. Tuy nhiên, ở đây nó sẽ không biệt là chữ thường hay chữ viết hoa. 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 cũng rất thông dụng và được nhiều người biết đến, sử dụng tùy vào từng mục đích của mình.
Quá trình xác định màu RGB là sự kết hợp của 3 màu cơ bản như: màu đỏ (Red), xanh lá cây (Green) và xanh dương (Blue) Ví dụ: rgb(155,167,1). Một số giá trị đặc biệt bao gồm: Màu đỏ: rgb (255,0,0) Màu xanh dương: rgb (0,0,255) Màu đen: rgb (0,0,0) Màu Trắng: rgb (255,255,255) 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. Ví dụ: Black 7 Những tên thường được nhiều người sử dụng bao gồm: Màu đỏ: red Màu đen: black Màu xanh lá cây: green Màu vàng: yellow Màu xanh dương: blue Màu nâu: Brown Màu tím: Purple Màu hồng: Pink Màu trắng: white Theo đó, một số màu cơ bản, ấn tượng thường được sử dụng để tiến hành pha trộn, tạo màu sắc trong quá trình thiết kế Website, hộp đèn thiết kế thời trang, các bảng hiệu, banner tập vẽ,… 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 chính là màu foreground và hình vuông màu vàng bên dưới chính là màu background.
Để đưa màu foreground và background về màu mặc định (trắng và đen), chúng ta dùng phím tắt D hoặc click vào 2 hình vuông đen trắng bên trên. Còn để nghịch đảo màu foreground và background, chúng ta dùng phím tắt X hoặc click vào mũi tên 2 đầu vòng cung bên trên. Để chọn màu cho foreground hoặc background, chúng ta click chuột vào hình vuông tương ứng và chọn màu. • Giá trị màu sắc Khi click vào hình vuông foreground hoặc background,bảng chọn Color Picker sẽ được mở .Ở đây, ta có thể chọn màu bằng cách di chuyển dấu tròn trong vùng màu.
Chúng ta sẽ dễ dàng thấy thông tin của màu đó ở bên phải như giá trị RGB,HSB,CMYK…Để ý đến giá trị cuối cùng bên dưới, có dấu # ở đầu, đây chính là mã màu. Mỗi màu khác nhau có một mã màu khác nhau. Thông số này sẽ được sử dụng rất nhiều, cả trong đồ họa và lập trình. 8 • Công cụ Eyedropper Eyedropper tool (Phím tắt I) là công cụ chọn một màu sắc bất kỳ trong Photoshop.
Ví dụ như khi xem một bức ảnh, ta thích một mảng màu trong đó nhưng không biết đó chính xác là màu gì, ta dùng công dụng của Eyedropper tool. 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 đó. 9 BÀI TẬP Bài 1: Sử dụng công cụ Color Picker chọn màu để tô cho các hình sau: 10 11 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: 12 I. CHƯƠNG 2 TẠO HIỆU ỨNG ROLLOVER CHO TRANG WEB Giới thiệu: hiểu rõ cách chia một Slice thành nhiều slice nhỏ, áp dụng hiệu ứng Wrap Text cho một layer chữ, tìm hiểu trạng thái Rollover cho các layer, layer style và layer chữ được Wrap, tạo ra các trạng thái Over, Down và Selected.
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 chia một Slice thành nhiều slice nhỏ hơn và bằng nhau - Nhóm được các Slice được chọn vào một bảng, áp dụng hiệu ứng Wrap Text cho một layer chữ, - Xác định được trạng thái Rollover cho các layer, layer style và layer chữ được Wrap, tạo ra các trạng thái Over, Down và Selected. Nội dung chính I. TẠO TRANG THÁI ROLLOVER - Rollover là một dạng hiệu ứng khá phổ biến hiện nay, nó có thể thay đổi giao diện của một trang web mà không cần phải đưa người đọc sang mộ trang web khác. Khi người dùng di chuột qua một điểm được xác định trước trên trang web, thì điểm đó sẽ thay đổi sang một trạng thái hoàn toàn khác.
Thường thì hiệu ứng này ám chỉ rằng vùng được thay đổi đó là một dạng lệnh, khi nhấp chuột vào đó sẽ có một điều gì xảy ra kế tiếp như là mở một trang mới, vào một form. - Hiện nay có một vài hiệu ứng Rollover phổ biến, như là khi bạn di chuột qua một nút nào đó nó sẽ thay đổi hoặc khi bạn nhấn vào nút đó, nút đó sẽ thay đổi hình dạng của nó. Hiệu ứng R hoặc các trạng thái biểu thị những điều kiện khác nhau trong Layer Palette. Những điều kiện này có thể bao hàm sự ẩn hiện của một layer, vị trí layer - Trạng thái Rollover được đặt tên theo sự kiện, ví dụ như là khi bạn di hoặc nhấn chuột vào một vùng của một tấm hình, nó sẽ tạo ra những thay đổi trên tấm hình hoặc một phần của tấm hình.
Tất cả những trạng thái Rollover của ImageReady được miêu tả ở phần dưới đây "Các trạng thái Rollover trong ImageReady".