Photoshop Cơ Bản Cho Thiết Kế Web – Làm Web WP Tại Nhà: Bài 20

Bài này chúng ta sẽ ra ngoài trang web và cùng nhau tìm hiểu về photoshop cơ bản phục vụ cho thiết kế web. Phạm vi bài này mình sẽ giới thiệu các tính năng như tạo mới hình ảnh, place ảnh, lưu ảnh, giới thiệu các công cụ và layer. Chỉ vài bước đơn giản là bạn có thể tạo hoặc sửa được ảnh để up lên website.

Hướng dẫn photoshop cơ bản cho thiết kế web tự học

Trong bài 20 này mình sẽ mặc định là bạn đã cài sẵn photoshop ít nhất từ CS6 trở lên nhé. Bạn nào chưa cài đặt hãy tìm hiểu cách cài và tải trên google. Vì lý do bản quyền nên mình sẽ không chia sẽ file và cách cài photoshop, mong các bạn thông cảm.

Menu file và các menu thường dùng trên photoshop

Trên photoshop, phía trên cùng bên trái ta có các menu thường sử dụng nhất là: File, image, Layer, select, filter, dưới đây là chức năng của 5 menu này.

 

PTS cho người mới tập

5 Menu với các tùy chọn thông dụng nhất (Click xem ảnh lớn)

File:

1: New: là nơi tạo file mới

2: Open: Là mở file có sẵn

3: Save: Lưu file

4: Save as: Lưu file với tên mới

5: Place: Thêm ảnh khác vào file đang có sẵn.

Image:

6: Mode: Thay đổi hệ màu cho ảnh

7: Adjustments: Sửa bộ lọc ảnh như sáng tối, rực màu, cần bằng màu, cân bằng ánh sáng,….

8: Image size: Thay đổi kích thước ảnh

9: Canvas site: Thu phóng kích thước ảnh theo tâm điểm và drop luôn ảnh.

Layer:

10: New: Tạo layer mới (Ctrl + Shift + N)

11: Duplicate Layer: Nhân đôi (copy) layer (Ctrl + J)

Select:

12: Color rank: Tạo vùng chọn theo màu, nghĩa là tất cả các màu được chọn chó trong ảnh sẽ được lập vùng chọn (Select).

Filter: Trong menu này là toàn bộ các hiệu ứng, bạn có thể tìm hiểu bằng cách thử từng mục. Và để quay trở về như các ứng dụng khác, chúng ta chọn undo (Ctrl + Alt + Z) Hoặc mở công cụ history lên và chọn bước cần quay trở lại.

PTS cho người mới tập

Hướng dẫn undo trong photoshop cơ bản cho người thiết kế web (click xem ảnh lớn)

Cách tạo mới file trong photoshop

Trong ảnh dưới đây ta có các cách thiết lập như sau:

PTS cho người mới tập

Tạo file mới trong photoshop cơ bản cho thiết kế website (click xem ảnh lớn)

  • Trong phần Preset: Bạn muốn thiết lập kích thước ảnh theo chuẩn như A0 A1 A2 A3 A4 A5,… Bạn có thể chọn international paper, Nếu bạn muốn thiết lập kích thước tùy chọn theo ý mình thì chọn custom.
  • Phần WidthHeight: Chúng ta có thể thay đổi kích thước tùy ý, bên phải là chọn đơn vị đo của kích thước.
  • Resolution: Là độ phân giải của ảnh, bạn chọn 300 nếu là ảnh để in ấn. Còn nếu chỉ để đăng web, xem trên các thiết bị máy tính, điện thoại, tablet,… thì chỉ nên chọn 72.
  • Color mode: Bạn chọn hệ màu cho ảnh, ảnh in ấn thì bạn chọn CMYK (tất nhiên còn phụ thuộc vào hệ màu của máy in, thường chỉ là CMYK) còn ảnh xem trên màn hình, website thì chọn RGB.
  • Các tùy chọn khác bạn cứ nên để mặc định là xong, bấm OK để tạo file.

Thanh công cụ chính và layer cơ bản cho việc thiết kế web

Thanh công cụ của photoshop (trong ngoặc là phím tắc):

photoshop cơ bản cho thiết kế web
Các công cụ trong photoshop (Click xem ảnh lớn)
1: Move tool (V): Công cụ thao tác như con trỏ chuột, dùng để chọn layer, kéo thả, thay đổi vị trí,….

2: Select tool (M, L, W): Công cụ tạo vùng chọn, chúng ta sẽ thao tác được trong những khu vực được chọn, còn ngoài khu vực được trọn thì không ảnh hưởng. Đảo ngược vùng chọn là tổ hợp phím Ctrl + Shift + I.

3: Drop tool (C): Công cụ để Drop kích thước ảnh.

4: Eyedroper tool (I): Công cụ để lấy mẫu màu có sẵn.

5: Spot healing brush tool (J) và Clone stemp rool (S): Công cụ xóa mụn và các chi tiết không cần thiết.

6: Brush (B): cọ vẽ, này dùng cho tính năng vẽ và chỉnh sửa nét nâng cao.

7: Eraser tool (E): Cục tẩy, để xóa chi tiết.

8: Gradian tool (G): Hộp tô màu chuyển sắc

9: Blur / Sharpen / Smudge Tool: Bộ công cụ làm mờ chi tiết, nét chi tiết và kéo dãn chi tiết (Chỉnh sửa nâng cao).

10: Dodge tool (O): Bộ công cụ này để chỉnh sửa làm sáng hoặc tối chi tiết.

11: Pen tool: Công cụ vẽ nét hoặc tạo vùng chọn nâng cao.

12: Horizontal type tool (T): Công cụ thêm văn bản vào hình ảnh.

13: Rectangle tool (U): Công cụ vẽ các hình khối tròn vuông đa giác,…

14: Hand tool (space) và  zoom tool (Z): Công cụ thu phóng và sau đó co thể dùng hand tool để kéo hiển thị đến nơi cần nhìn thấy.

15: Background Color và Forestground color: Màu trước và màu sau, để tô màu trước thì dùng tổ hợp phím Alt + Delete, còn tô màu sau (background) thì tô bằng Ctrl + Delete.

Layer trong photoshop là gì?

Trong tiếng Anh, layer có nghĩa là lớp (xếp chồng lên nhau tạo ra nhiều lớp), vậy từ trên xuống dưới thì các lớp sẽ nằm theo thứ tự như sau:

Ảnh thuộc layer trên sẽ nằm chồng lên layer phía dưới. Ví dụ trong hình dưới đây ta có 4 layer theo thứ tự từ trên xuống là: layer polygon 1 chứa hình ngủ giác màu cam, layer Elipse 1 chứa hình tròn màu xanh nó nằm dưới layer polygon 1 nên ảnh hình tròn nằm dưới ảnh hình ngủ giác. Tương tự layer rectangle 1 chứa hình vuông nằm dưới 2 layer kia nên hình vuông bị 2 hình kia đè lên. Và layer background đang có màu trắng là hình nên của hình ảnh nằm dưới cùng.

PTS cho người mới tập

Layer và thứ tự của layer liên quan tới thứ tự ảnh trong hình (click xem ảnh lớn)

Cách lưu file và tổng kết photoshop căn bản cho thiết kế website

Để lưu fle bạn vào file > Save (Ctrl + S) hoặc Save as(Ctrl + Shift + S) tùy vào nhu cầu lưu file của bạn. Khung file name thì bạn đặt tên cho file. Khung format để bạn chọn định dạng file, Ở đây phục vụ cho việc thiết kế web nên chúng ta chỉ sử dụng PSD, JPG và PNG để làm định dạng chính cho ảnh của website, ngoài ra đôi khi còn dùng Gif cho ảnh động.

photoshop cơ bản cho thiết kế web

Lưu file trong PTS tha đúng tên và định dạng (click xem ảnh to)

Như vậy mình đã giới thiệu xong về photoshop cơ bản cho người thiết kế web tại nhà. Để biết thêm về thao tác bạn nên xem kỹ video và thực hành nhiều hơn. Đừng ngại, hãy thực hành, chỉnh sửa thật nhiều thì bạn sẽ quen và tự nhiên hiểu rỏ mọi thứ thậm chí tự thân phát triển nâng cao.

Chúc bạn thành công!