HƯỚNG DẪN PHẦN LÝ THUYẾT
Bài 1
TỔNG QUAN VỀ PHOTOSHOP CS
Tóm tắt
Lý thuyết 1 tiết - Thực hành 1 tiết
Mục tiêu Các mục chính Bài tập
Trình bày các kiến thực cơ bản về xử lý ảnh cho Web và việc tối ưu hóa hình ảnh cho Web. Học viên được cung cấp các kiến thức về thết kế bố cục cho trang Web …
1. Cài đặt chương trình Photoshop
2. Chế độ xem ảnh
3. Chế độ cuộn hình ảnh
4. Làm việc với cửa sổ Palette
5. Quản lý file
Adobe Photoshop CS là một chương trình xử lý ảnh cực mạnh, các công cụ chỉnh sửa của nó đã trở thành chuyên nghiệp giúp cho các nhà thiết kế web tạo những ứng dụng cho web. Đồng hành với Adobe photoshop CS là chương trình Adobe ImageReady cung cấp các công cụ cho web như: tối ưu và xem ảnh trước, xử lý hàng loạt ảnh đồng thời bằng cách drag - thả từ bảng Action, tạo các file GIF hoạt hình. Photoshop và ImageReady kết hợp với nhau sẽ tạo ra môi trường hoàn hảo cho việc thiết kế đồ họa cho Web.
I. Cài đặt chương trình Photoshop
Muốn cài đặt chương trình Photoshop cần mua đĩa CD chứa chương trình Photoshop theo các bước sau:
Start\ Run chọn ổ đĩa CD E:\Setup.exe (Photoshop) OK (có những đĩa CD có Auto Run thì không cần thao tác này). Xem thông báo cài đặt về đường dẫn, số Serial Number.
Đối với những hiệu ứng phải cài đặt Photoshop trước. Khi cài đặt Effect, phải đặt ở đường dẫn C:\Adobe\ Photoshop CS\ Plug-Ins\ Filter.
Sau khi cài đặt xong, chương trình được lưu trong máy.
Khởi động chương trình: Start -> Programs -> Adobe Photoshop CS (hoặc double-click vào biểu tượng Photoshop CS trên màn hình).
I.1. Độ phân giải màn hình
Đó là số lượng điểm ảnh hiển thị trong một đơn vị chiều dài của màn hình, thường được tính bằng dotperinch (dpi). Độ phân giải màn hình phụ thuộc vào kích thước màn hình và số pixel phân bố trên màn hình. Độ phân giải tiêu biểu của một màn hình PC là 96 dpi, còn màn hình Max OS là 72 dpi.
Photoshop chuyển đổi trực tiếp số pixel của tập tin ảnh ra số pixel trên màn hình, do đó khi tập ảnh có độ phân giải cao hơn độ phân giải của màn hình thì số pixel của tập ảnh lớn hơn số pixel của màn hình, cho nên màn hình sẽ hiển thị tập ảnh đó lớn hơn kích thước của nó.
Ví dụ:
Khi hiển thị tập ảnh 1x1 inch có độ phân giải là 144 ppi trên màn hình 72 dpi thì nó sẽ xuất hiện trên màn hình với kích cỡ là 2x2 inch. Bởi vì màn hình chỉ có thể hiển thị 72dpi trong chiều dài một inch nên nó phải sử dụng đúng hai inch để hiển thị 144 dpi.
I.2. Ảnh vectơ
Các ảnh đồ họa vector được tạo ra bởi các nét thẳng và các nét cong điều chỉnh bằng các vector (toán học). Các vector diễn tả hình ảnh bằng hình học, khi di chuyển phóng to thu nhỏ hoặc thay đổi màu sắc không làm mất đi nét vẽ trong hình ảnh.
Các tập ảnh đồ họa vector thì không phụ thuộc độ phân giải nghĩa là chúng có thể chỉnh sửa kích cỡ khi hiển thị màn hình. Các ảnh vector được dùng để thiết kế các đường nét sinh động được in ra và hiển thị ở độ phân giải bất kỳ và không bị hư hao về đường nét, đó là sự chọn lựa tốt nhất cho việc thiết kế ký tự.
I.3. Cấu hình cho Photoshop
Photoshop cần cấu hình máy tính đủ mạnh để xử lý những hình ảnh ở độ phân giải cao. Cấu hình tối thiểu:
CPU: Pentium III
RAM: 256 MB
Card màn hình: 24 bit
Màn hình: 15 - 21 inch
Ổ đĩa cứng: 40GB
Ổ đĩa CD – ROM
Giao diện photoshop
I.4. Thanh tiêu đề
Là thanh thứ nhất chứa tên chương trình (Application Name Adobe Photoshop)
Cực tiểu (Minimize): thu màn hình nhỏ lại trong biểu tượng Adobe Photoshop
Cực đại (Maximize)
Đóng chương trình (Close)
I.5. Thanh Menu Bar
Thanh trình đơn (Menu bar) chứa các trình đơn dropdown (sổ xuống) là thanh thứ hai trên màn hình chứa các trình đơn trong Photoshop.
I.6. Thanh Option (Menu Window Option)
Là thanh thứ ba luôn luôn thay đổi lệnh mỗi khi thay đổi việc chọn công cụ. Thanh này chứa những lệnh hỗ trợ cho công cụ làm việc.
Ví dụ:
Khi chọn công cụ Rectangular Marquee thì trên thanh này xuất hiện Option Rectangular Marquee.
I.7. Thanh công cụ Toolbox
Là thanh chứa các công cụ trong Photoshop, xuất hiện ở bên trái màn hình. Một số công cụ trong hộp này có các tùy chọn xuất hiện trên thanh Options. Những công cụ này giúp bạn tạo vùng chọn, nhập văn bản, tô vẽ, hiệu chỉnh, di chuyển chú thích và xem hình ảnh. Số còn lại cho phép thay đổi màu tiền cảnh (foreground), màu nền (Background) và sự chuyển đổi qua lại giữa chương trình Photoshop và ImageReady là một chương trình hỗ trợ cho việc thiết kế ảnh động.
Để chọn công cụ trong Photoshop ta có thể nhấp chọn trực tiếp công cụ đó trên thanh công cụ hoặc có thể chọn bằng phím tắt của công cụ đó trên bàn phím. Để hiển thị tên và phím tắt của bất kỳ công cụ nào ta chỉ cần đặt trỏ chuột lên trên công cụ đó cho đến khi tên phím tắt đó hiển thị.
Một số công cụ trong thanh công cụ hiển thị hình tam giác nhỏ ở góc phải bên dưới để báo cho biết nó có chứa thêm vài công cụ ẩn. Để chọn các công cụ ẩn này có các cách sau:
Nhấn giữ trỏ chuột vào công cụ có chứa công cụ ẩn kéo rê chuột tới công cụ cần chọn và thả chuột. Nhấn giữ Alt và nhấp vào công cụ cần chọn trong thanh công cụ. Mỗi lần nhấp công cụ theo trong chuỗi công cụ ẩn sẽ được chọn.
Nhấn giữ Shift đồng thời nhấn phím tắt của công cụ đó và lặp lại cho đến khi công cụ bạn muốn chọn.
II. Chế độ xem ảnh
Photoshop cho phép bạn xem hình ảnh từ 0,15% đến 1.600%
Sử dụng phím tắt:
Để phóng to: Ctrl + (phím +)
Để thu nhỏ: Ctrl + (phím -)
Nhấn Ctrl + Alt + (phím +) hoặc (phím -) để phóng to thu nhỏ cả hình ảnh và cửa sổ chứa hình ảnh đó.
Nhấn Ctrl + Alt + (phím số 0) để đưa hình ảnh về tỉ lệ 100%.
Sử dụng công cụ zoom: Để xác định chính xác phần hình ảnh mà muốn phóng to hoặc thu nhỏ: Chọn công cụ Zoom (+) sau đó đặt trỏ công cụ lên trên phần hình ảnh đó và nhấp chuột. Hoặc Ctrl + SpaceBar và drag mouse để phóng to một khu vực.
Sử dụng menu lệnh: Nhấp chọn Menu Window > Navigator. Bấm kéo thanh trượt qua trái, phải hoặc nhập thông số cụ thể trong ô giá trị.
III. Chế độ cuộn hình ảnh
Để cuộn xem hình ảnh mà kích thước hình ảnh lớn hơn cửa sổ hiển thị nó: dùng công cụ Hand (H).
Khi đang kích hoạt bất kỳ công cụ nào mà muốn trở về công cụ Hand: ta nhấn phím H hoặc thanh Space bar trên bàn phím.
IV. Làm việc với cửa sổ Palette
Hiển thị các Palette: Menu Window\ tên Palette
Giấu các Palette: Menu Window \tên Palette
Để mở hoặc giấu các thanh Palette và công cụ: Nhấn phím Tab
Để giấu hoặc mở tất cả các thanh Palette (không ảnh hưởng tới hộp công cụ: Nhấn Shift + Tab)
Để di chuyển một thanh Palette nào đó ra khỏi nhóm (hoặc trở lại nhóm đó): nhấp chuột vào palette và kéo thanh Palette đó ra khỏi nhóm (hoặc kéo vào trong nhóm).
V. Quản lý File
V.1. Tạo mới một tập tin
Chọn File\ New: tạo tập tin mới.
Hộp thoại New xuất hiện:
Ta nên xác lập các giá trị cho tập tin mới như sau:
Name : tên tập tin
Width : chiều rộng (đơn vị tính)
Height : chiều cao (đơn vị tính)
Resolution : độ phân giải (pixel\inch)
Mode : chế độ màu
Grayscale : thang độ xám
RGB color : hệ 3 màu
CMYK : hệ 4 màu
Contents : nền của tập tin
White : màu trắng
Background Color : nền mang màu background hiện hành
Transparent : nền trong suốt.
Image size : kích thước ảnh
Save Present :Tạo lưu kích thước đã khai báo trong bảng Document Present
V.2. Lưu tập tin
Chọn File > Save lưu tập tin đầu tiên (hoặc save as với một phần mở rộng khác, một nơi khác).
Xác định đường dẫn để lưu giữ tập tin
Save in: chọn ổ đĩa trong vùng nhãn xuất hiện nhiều thư mục bên dưới.
File name: đặt tên tập tin
Format: chọn đuôi file photoshop *.PSD
Chọn nút Save
Ta nên lưu thường xuyên trong suốt quá trình làm việc để tránh tình trạng hỏng tập tin khi có sự cố bất ngờ xảy ra như treo máy, cúp điện…
Chọn File > Save for web: Lưu hình ảnh với chức năng tối ưu hóa sử dụng cho Web (VD: *.gif, *.jpg, *.png,…)
Chọn File > Open: cho phép mở tập tin hình ảnh bất kỳ
V.3. Mở tập tin
Look in: chọn thư mục, ổ đĩa
File name: tên tập tin muốn mở
File of Type: kiểu tập tin mở rộng
Open: để mở tập tin, tập tin hình ảnh sẽ hiện trên màn hình Photoshop.
Open As: Chỉ cho phép mở một tập tin dạng *.PSD
V.4. Đóng tập tin
Chọn File> Close: đóng tập tin file
Chọn File> Revert: trả lại tập tin đã lưu lần cuối cùng.
Chọn File> Exit: thoát khỏi chương trình Photoshop.
VI. Tổng quan ảnh trong trang Web
Ảnh là một thành phần giúp thêm phần hấp dẫn, đầy màu sắc cho trang Web. Ảnh được sử dụng nhiều trong trang trí, bố cục trang. Ngoài ra một số ảnh rất quan trọng như Logo, Banner, ảnh nút liên kết… Một ảnh minh họa phù hợp có thể thay thế cho những dòng văn bản giải thích, mô tả dài dòng.
Ảnh cần nhiều thời gian hơn khi hiển thị trên trình duyệt, nên khi quyết định chèn ảnh vào trang, ảnh đó phải mang một nội dung, một ý nghiã nhất định. Không tự tiện chèn ảnh, cố làm đầy trang bằng những ảnh to quá cỡ.
VI.1. Kiểu tập tin ảnh:
Hiện nay, các dạng tập tin GIF, JPG, PNG được hổ trợ đầy đủ bởi hầu hết các trình duyệt
Dạng thức GIF (Graphic Interchange Format): Là dạng thường được sử dụng nhất với nhiều ưu điểm, như ảnh trong suốt, số màu đếm được, kích thước tập tin nhỏ…và còn có thể là ảnh động .GIF. Nhưng số màu tối đa 256 màu.
Dạng thức JPEG (Joint Photographic Experts Group): Là ảnh chụp cao cấp với số màu lên đến 16 triệu màu. Tập tin JPG (dạng thức JPEG) thường có số bytes lớn so tập tin dạng.GIF. Nhưng tập tin JPG có khả năng tự nén dữ liệu, bạn có quyền ấn định mức độ nén và kiểm soát mức độ trung thực của ảnh.
Dạng thức PNG (Portable Network Group): Là dạng thay thế cho GIF của Macromedia Fireworks, nó hổ trợ bảng màu Index, Grayscale, RGB và kênh Alpha điều khiển độ trong suốt ảnh.
VI.2. Thiết kế thành công ảnh cho trang web
Trên trình duyệt, tốc độ hiển thị ảnh tùy thuộc vào số kilobyte (Kb) của tập tin ảnh. Nêú muốn thiết kế thành công thì bạn cố gắng tìm đủ mọi cách giảm số Kb của ảnh xuống thấp nhất mà nó vẫn còn trung thực và chấp nhận được.
Sau đây là 4 yếu tố, bạn cần quan tâm:
Dạng thức Format:
Nên chọn GIF, JPG, PNG là tùy thuộc vào kinh nghiệm, ví dụ ảnh Logo không quá 4 màu chọn .GIF được ưu tiên, ảnh chụp JPG nên nén mức độ nào là phù hợp. Ảnh PNG cần lưu hiệu ứng đi kèm, số lớp, hệ màu…hay không. Hãy tích lũy kinh nghiệm bằng cách xuất ảnh theo các dạng thức khác nhau, rồi đánh giá cân bằng giữa chất lượng ảnh và kích thước tập tin.
Kích thước Size:
Kích thước ảnh tỉ lệ thuận với số Kb cần lưu trữ. Không phóng lớn, thu nhỏ ảnh trong thiết kế, mà nên chọn hoặc phải xử lý để ảnh có kích thước chính xác như mong muốn. Với những Website chuyên nghiệp, để quảng cáo một số sản phẩm cần ảnh rõ ràng, chất lượng cao, họ luôn tạo Album ảnh đại diện có kích thước nhỏ, mỗi ảnh liên kết một trang chứa ảnh gốc đúng kích thước.
Độ phân giải Resolution:
Trang Web được xem trên màn hình máy tính, mà độ phân giải màn hình là 72dpi, nên ảnh thích hợp nhất là 72 dpi. Nếu ảnh quá nhỏ có thể tăng độ phân giải lên 96 dpi, nếu nền thuần màu ảnh trang trí…có thể giảm độ phân giải xuống 36 hoặc 24 dpi
Số màu trong ảnh Color depth:
Với những ảnh có số màu đếm được, thì hãy cố giảm từ 256 màu xuống 128, 64, 16, 8, 4 màu, giảm cho tới khi độ trung thực ảnh vẫn gần với màu ảnh gốc.
VI.3. Kích thước một số ảnh
Tùy thuộc vào màn hình hiển thị, loại ảnh, ảnh nền… mà bạn chọn hoặc xử lý hình ảnh để có kích thước phù hợp.
Màn hình hiển thị: Một số kích thước màn hình
Ngang 640 pixels x cao 480 pixels
Ngang 800 pixels x cao 600 pixels
Ngang 1024 pixels x cao 768 pixels
Kích thước các thành phần trang web:
Logo: Biểu tượng công ty, cơ quan thường nằm góc trên trái màn hình, tùy theo mẫu có kích thước giao động 72 pixel, 100 pixel, 120 pixel
Banner: Cao: 72, 100, 120 pixel - Ngang : 480, 600, 1024 pixel
Nút: Ngang: 120, 130, 140 pixel - Cao: 19, 22, 25 pixel
Icon: Nút chức năng 30 pixel, 50 pixel, 64 pixel
Picture: Tùy thuộc vào chủ đề, minh họa, có kích cở riêng.
Mẫu nền: 50 pixel x 50 pixel
Bờ lề: 1024 pixel x 30 pixel
KỶ QUANG DESIGNER
https://www.facebook.com/daotaophanmemvathietke/?ref=hl
