Học tập

THIẾT KẾ WEBSITE VÀ CÁCH SỬ DỤNG PHOTOSHOP

Xin chào mọi người, hôm nay thời tiết thật đẹp và cũng là ngày cuối tuần nữa, cuối tuần mọi người thường làm gì vậy? Còn mình vẫn miệt mài học tập và tìm hiểu những cái mình chưa biết, tiện ôn lại bài cũ mình lại muốn chia sẻ tiếp seri về vụ học lập trình website của mình.

Bài viết hôm nay mình xin trình bày chút về việc thiết kế website là gì và cách sử dụng photoshop cơ bản. Nếu bạn nào có hứng thú và muốn học chuyên sâu thì hãy theo dõi website của mình nhé.

THIẾT KẾ WEBSITE LÀ GÌ?

Thiết kế website là chính là việc tạo lên một trang web cung cấp những thông tin về dịch vụ, sản phẩm, quảng cáo gì đó về công ty nào đó, và được sử dụng trên máy tính, điện thoại, ipad.

Mục đích của việc thiết kế web là làm thế nào đó mà thông tin được trình bày và truyền tải một cách dễ hiểu, chính xác nhất về công ty và dịch vụ của công ty.

Có những webiste nhìn rất dễ thương nhưng nếu như khách hàng muốn tìm kiếm thông tin và các thao tác khó sử dụng thì không được cho là một trang web tốt.

Có rất nhiều nguyên tắc được giới thiết kế lưu ý trong thiết kế web, nhưng 4 nguyên tắc cơ bản nhất mà bạn cần nắm vững đó là

  • Tiếp cận 近接 Thiết kế dễ hiểu bằng cách sắp xếp thông tin theo nhóm
  • Căn chỉnh 整列 Căn chỉnh các phần tử để tạo ra một thiết kế thống nhất.
  • Lặp lại 反復 trang web được thiết kế bằng cách lặp lại các yếu tố giống nhau dễ đọc và hiển thị thông tin
  • Tương phản 対比 Nhấn mạnh những gì bạn muốn truyền tải bằng cách tương phản

Mình sẽ viết một bài chi tiết về thiết kế web ở bài viết sau các bạn nhé. Vì phần này khá dài và cần viết chi tiết hơn.

PHOTOSHOP VÀ ILLUSTRATOR LÀ GÌ

Cả 2 phần mềm này nếu bạn muốn dùng thì thuê theo tháng ở công ty ADOBE nhé. Đây là công ty chuyên về các phần mềm chỉnh sửa ảnh. Phí thuê rẻ nhất là 1,070yen một tháng, nếu bạn muốn dùng lâu dài thì có thể thuê 1 năm luôn, phí sẽ rẻ hơn rất nhiều so với việc thuê lẻ từng tháng..

Photoshop là phần mềm chuyên về chỉnh sửa ảnh, cắt dán, hình ảnh minh họa

Illustrator là phần mềm chuyên về tạo logo, icon, layout, hình ảnh minh họa.

Như ảnh bên trên thì photoshop và illustrator khi phóng to lên sẽ có sự khác nhau.

Cũng nhiều công ty họ sẽ chỉ sử dụng photoshop trong việc thiết kế biển quảng cáo và thiết kế web.

MỘT VÀI PHÍM TẮT ĐƯỢC SỬ DỤNG TRONG PHOTOSHOP. Các bạn cần ghi nhớ để tiện dụng khi sử dụng photoshop nhé.

※Windowsの場合:⌘=Ctrl

Máy tính hệ điều hành mac thì dùng comand

⌘ + C :オブジェクトやテキストのコピー(複製)dùng để copy

⌘ + V :オブジェクトやテキストのペースト(貼り付け)dùng để dán sau khi đã copy

⌘ + X :オブジェクトやテキストのカット(複製ではなく切り抜き)dùng để xóa bỏ toàn bộ dòng chữ vừa viết

⌘ + A :オブジェクトやテキスト・選択範囲の全選択 chọn toàn bộ để copy, xóa…*bôi đen toàn bộ

矢印キー:選択したオブジェクト・テキスト・選択範囲などを移動(上下左右)

⌘ + S :保存(上書き保存)lưu lại những gì đã làm

⌘ + shift + S :別名保存 lưu bằng tên khác

⌘ + Z :操作の取り消し xóa bỏ thao tác

⌘ + shift +Z :取り消した操作のやり直し quay lại thao tác vừa lỡ xóa

Trước khi đi vào photoshop thì bạn cần vào ADOBE và đăng ký dùng thử 7 ngày nếu như bạn muốn thực hành, bài học này là cơ bản nhất về photoshop, các bạn nếu muốn kiếm tiền tại Nhật bằng công việc thiết kế biển quảng cáo バナーデザイン / バナー作成 thì hãy thực hành ngay nào. Ở nhật rất nhiều công việc dùng tới photoshop cho bạn làm đó. Lương cũng không hề rẻ đâu, cố lên bạn nha.!

CÀI ĐẶT CƠ BẢN MÀN HÌNH PHOTOSHOP

cài đặt đơn vị trong photoshop

Sau khi đã có sẵn phần mềm trong máy thì việc đầu tiên là khởi động mở phần mềm photoshop lên nha, nếu bạn dùng Mac thì ấn photoshop cc sau đó chọn như ảnh minh họa bên trên.

Còn nếu bạn dùng máy hệ điều hành windows thì ấn 編集/環境設定・単位・定規

Sau khi đã cài đặt xong thì ấn OK nha. Về cơ bản thì website người ta sẽ thường sử dụng pixel size.

KHỞI TẠO MỘT FILE MỚI 新規ドキュメント作成

màn hình để tạo kích thước của ảnh muốn tạo

Sau khi mở phần mềm photoshop ra thì ấn vào chữ 新規作成 sẽ hiện ra màn hình như bên trên ạ, tiếp đó đặt tên cho file nhé, tên nào cho dễ nhớ để dễ tìm khi cần. Sau khi cài xong bạn ấn nút xanh ở góc dưới cùng màn hình 作成.

Các bạn nhìn phía bên tay phải ảnh trên, 幅 là chiều ngang, còn 高さ là chiều cao, vì chủ thuê họ sẽ yêu cầu kích thước của biển quảng cáo baner, bạn đừng quên chi tiết này khi làm nha.

Độ phân giải cài là 72 là ok nhé.

Màu sắc thì chọn RGB *RGB là ảnh chuyên dùng để hiển thị trên máy tính, website… còn màu CMYK là màu dùng để in tài liệu.

CẤU HÌNH MÀN HÌNH PHOTOSHOP

1) Thanh menu:メニューバー Cài đặt hoạt động của Photoshop, cài đặt hiển thị màn hình, tạo tệp mới, xử lý ảnh chi tiết, v.v.

2) Thanh tùy chọn オプションバー: Bạn có thể đặt công cụ đã chọn và nội dung hiển thị trên thanh tùy chọn thay đổi tùy thuộc vào công cụ bạn đang sử dụng.

3) Thanh công cụ ツールバー: Các chức năng được sử dụng cho các hoạt động như xử lý ảnh, vẽ hình ảnh và đường thẳng, và chèn các ký tự được xếp hàng.

4) Bảng điều khiển パネル: Nhiều cài đặt khác nhau để chỉnh sửa hình ảnh, điều chỉnh và thực hiện các chức năng hữu ích, v.v.

Để có thể nhanh chóng học được photoshop một cách thành thạo thì chỉ có cách là bạn thực hành nhiều lần, hiểu được chức năng của từng công cụ có trong đó.

Bản thân mình học có vài ngày, nghịch tới nghịch lui thì hiểu ra rất được nhiều chức năng của từng công cụ trong đó.

THANH CÔNG CỤ TRONG PHOTOSHOP

Thanh công cụ trong photoshop

Thanh công cụ này bên trái màn hình. Tiếng Nhật gọi là ツールバー

Trong Photoshop các công cụ có chức năng liên quan được nhóm lại với nhau.

  • Move and Selection: 移動と選択ツール Nhóm công cụ lựa chọn, di chuyển
  • Crop and Slice: Nhóm công cụ cắt hình
  • Measurement tools: Nhóm công cụ đo lường màu, kích thước, vị trí…
  • Retouching and Painting: Như tên gọi, đây nhóm công cụ vẽ và chỉnh sửa ảnh.
  • Drawing and Type: Nhóm công cụ văn bản, vẽ hình (vuông, tròn, ngôi sao..v.v.
  • Navigation tools: Các công cụ điều hướng, di chuyển góc nhìn khi làm việc.

CHỨC NĂNG CỦA CÁC THANH CÔNG CỤ TRONG PHOTOSHOP

Mỗi công cụ được hiển thị bằng biểu tượng, thực tế có rất nhiều công cụ với chức năng gần giống nhau được lồng ghép vào cùng một biểu tượng.

Các mũi tên nhỏ ở góc dưới cùng bên phải của biểu tượng công cụ có nghĩa là sẽ có các công cụ bổ sung ở bên trong nó.

Nhóm công cụ lựa chọn và di chuyển

Photoshop Chuyển Công cụ.

Công cụ di chuyển * (V) 移動ツール
Công cụ di chuyển được sử dụng để lựa chọn và di chuyển các đối tượng.

Công cụ Photoshop Artboard.

 Công cụ Artboard (V) アートボードツール

Công cụ Artboard (mới có trong Photoshop CC) cho phép tạo nhiều vùng làm việc khác nhau giống như Illustrator

Công cụ Rectangular Marquee của Photoshop.

 Công cụ Rectangular Marquee * (M) 長方形選択ツール

Giúp khoanh vùng chọn hình chữ nhật. Nhấn và giữ phím Shift khi kéo để vẽ vùng chọn hình vuông.

 

Công cụ Elliptical Marquee của Photoshop.

 Công cụ Elliptical Marquee Tool (M) 精円形選択ツール

Giúp khoanh vùng chọn hình elip. Nhấn và giữ Shift để vẽ vùng chọn hình tròn

Công cụ Photoshop Single Row Marquee Tool.

 Công cụ Single Row Marquee Tool 一行選択シール

Công cụ Single Row Marquee Tool trong Photoshop giúp vẽ vùng chọn một hàng 1px từ trái qua phải

Công cụ Photoshop Single Row Marquee Tool.

Công cụ Single Column Marquee Tool 一列選択シール

Công cụ Single Column Marquee để vẽ vùng chọn một cột 1px pixel từ trên xuống dưới.

Công cụ Photoshop Lasso.

 Công cụ Lasso * (L) なげなわツール

Với công cụ Lasso Tool , chúng ta có thể tự do vẽ vùng lựa chọn bằng chuột.

Công cụ Lasso Photoshop Polygonal.

 Polygonal Lasso Tool ( L ) 多角形選択シール

Khoanh vùng lựa chọn bằng các đường thẳng để tạo thành hình đa giác.

Công cụ Lasso từ Photoshop.

Magnetic Lasso Tool ( L ) マグネット選択シール

Công cụ tự động bám dính để tạo vùng chọn khi di chuyển chuột quanh đối tượng cần tách.

Công cụ Chọn Nhanh của Photoshop.

Quick Selection Tool * ( W )クイック選択シール

Công cụ tạo vùng lựa chọn nhanh, chỉ cần nhấp chuột vào đối tượng thì Photoshop sẽ tự động tạo vùng chọn.

Công cụ Magic Wand của Photoshop.

Công cụ Magic Wand (W) 自動選択シール

Công cụ chọn các vùng có màu sắc giống nhau.

Nhóm công cụ cắt hình ảnh

Photoshop Crop Tool.

Crop Tool * ( C ) 切り抜きツール

Cho phép cắt hình ảnh với một khung (hình chữ nhật) lựa chọn tùy ý.

Công cụ Crop Perspective Photoshop.

Perspective Crop Tool ( C )遠近法の切り抜きツール

Cho phép cắt hình ảnh với một khung hình tùy chỉnh, giúp cắt một hình 3D thành phẳng 2D.

Công cụ Photoshop Slice.

Slice Tool ( C ) スライスツール

Công cụ Slice chia một hình ảnh thành các phần nhỏ hơn và xuất ra thành từng ảnh khác nhau.

Công cụ Photoshop Slice Select.

Slice Select Tool ( C ) スライス選択シール

Dùng để chọn các thành phần được tạo bằng Công cụ Slice.

Nhóm công cụ đo lường

Công cụ Eyedropper của Photoshop.

Eyedropper Tool * ( I ) スポイトツール

Công cụ Eyedropper của Photoshop lấy mẫu thông số màu trong một hình ảnh.

Công cụ Photoshop 3D Material Eyedropper.

3D Material Eyedropper Tool ( I ) 3D マテリアル スポイトツール

Sử dụng Công cụ 3D Material Eyedropper để lấy mẫu màu đối tượng từ mô hình 3D trong Photoshop.

Công cụ Photoshop Color Sampler.

Color Sampler Tool ( I ) カラーサンプラーツール

Công cụ lấy mẫu màu cho từng điểm vị trí trong ảnh.

Công cụ Ruler Photoshop.

Ruler Tool ( I ) ものさしツール

Công cụ Thước đo đo khoảng cách, vị trí và góc độ.

Photoshop Công cụ Ghi chú.

Note Tool ( I ) 注択ツール

Công cụ ghi chú cho phép đính kèm văn bản dạng text vào file Photoshop.

Công cụ Count của Photoshop.

Count Tool ( I ) カウントツール

Dùng để đếm nhiều vùng lựa chọn trong hình ảnh.

Công cụ chỉnh sửa ảnh

Công cụ Photoshop Spot Healing Brush.

Spot Healing Brush Tool * ( J ) 

Giúp loại bỏ nhược điểm và các khu vực có vấn đề nhỏ khác trong một hình ảnh như mụn, nốt ruồi, vết bẩn nhỏ…

Công cụ Photoshop Healing Brush.

Healing Brush Tool ( J )

Giữ Alt (Win) / Option (Mac) và nhấp chuột để lấy mẫu vùng ảnh tốt, thả phím và nhân tiếp lên vùng ảnh có khuyết điểm để lấp.

Công cụ Photoshop Patch.

Patch Tool ( J ) パッチツール

Với công cụ Patch, chúng ta vẽ một đường viền lựa chọn xung quanh vùng ảnh có vấn đề. Sau đó, fix nó bằng cách kéo sang một vùng ảnh đẹp tương tự để hoán đổi.

Công cụ Move Content-Aware Photoshop.

Content-Aware Move Tool ( J ) コンテンツに応じた移動ツール

Công cụ này dùng để chọn và di chuyển một đối tượng trên bức ảnh sang khu vực khác.

Photoshop Red Eye Công cụ.

Red Eye Tool ( J ) 赤目修正ツール

Công cụ Red Eye loại bỏ các vấn đề mắt đỏ phổ biến trong một bức ảnh do đèn flash của máy ảnh.

Photoshop Brush Tool.

Brush Tool * ( B )バラシツール

Là công cụ vẽ chính của Photoshop.

Photoshop Brush Tool.

Pencil Tool ( B ) 鉛筆ツール

Công cụ bút chì là một công cụ vẽ của Photoshop, trong khi công cụ Brush Tool có thể vẽ các nét cọ mềm cạnh, thì công cụ bút chì cho các nét vẽ cứng.

Công cụ Thay thế màu Photoshop.

Color Replacement Tool ( B ) 色の置き換えツール

Là công cụ Thay thế Màu sắc trong Photoshop, chọn màu và vẽ lên vùng khác rất chân thực.

Công cụ Photoshop Mixer Brush.

Mixer Brush Tool ( B ) 混合ブラシツール

Không giống như công cụ Brush chuẩn, Brush Mixer trong Photoshop có thể mô phỏng các yếu tố của bức tranh thật như pha trộn và kết hợp màu sắc, và sơn ướt.

Công cụ Photoshop Clone Stamp.

Công cụ Clone Stamp * (S)コピー スタンプツール

Công cụ Clone Stamp là công cụ chỉnh sửa cơ bản nhất của Photoshop. Nó lấy mẫu các điểm ảnh từ một vùng của ảnh và tô nó qua các khu vực khác.

Công cụ Pattern Pattern của Photoshop.

Công cụ Pattern Stamp (S) パターン  スタンプツール

Sử dụng Công cụ Pattern Stamp để vẽ các pattern lên hình ảnh, thường dùng để đóng dấu Watermark logo.

Công cụ Photoshop Brush lịch sử.

History Brush Tool * ( Y )ヒストリーブラシツール

Công cụ này dùng để Undo một phần của bức ảnh về trạng thái trước khi chỉnh sửa.

Công cụ Photoshop Brush.

Art History Brush Tool ( Y )アート ヒストリー ブラシ ツール

Art History Brush Tool cũng giúp undo một phần bức ảnh về trạng thái trước đó, nhưng sử dụng các nét vẽ kiểu cách điệu.

Công cụ Photoshop Eraser.

Eraser Tool * ( E )消しゴムツール

Xóa các vùng điểm ảnh.

Photoshop Công cụ Eraser nền.

Background Eraser Tool ( E ) 背景消しゴムツール

Xóa vùng màu tương tự trong một hình ảnh, dùng để xóa nền ảnh dễ dàng.

Photoshop Công cụ Magic Eraser.

Công cụ Eraser Magic (E) マジック消しゴムツール

Công cụ Magic Eraser tương tự như công cụ Magic Wand Tool ở chỗ nó chọn các vùng có màu tương tự chỉ bằng một cú nhấp chuột, nhưng sau đấy sẽ xóa các vùng màu được chọn.

Công cụ Gradient Photoshop.

Công cụ Gradient * (G)グラデーションツール

Công cụ Gradient dùng để vẽ hòa trộn dần dần giữa nhiều màu sắc, hay màu chuyển.

Công cụ Paint Paint của Photoshop.

Paint Bucket Tool ( G )塗りつぶしツール

Công cụ đổ màu

Photoshop Công cụ Thả 3D Chất liệu.

3D Material Drop Tool ( G )3D マテリアル ドロップ ツール

Được sử dụng trong mô hình 3D, Công cụ 3D Material Drop Tool cho phép bạn lấy mẫu từ một khu vực và sau đó thả nó vào một khu vực khác của mô hình, lưới hoặc lớp 3D. (Mình chưa dùng bao giờ ^^)

Công cụ Photoshop Blur.

Blur Tool *ばかしツール

Công cụ Blur làm mờ và làm mềm các vùng được tô.

Công cụ Photoshop Sharpen.

Sharpen Tool シャープツール

Công cụ Sharpen làm sắc nét các vùng được tô.

Công cụ Photoshop Smudge.

Smudge Tool 指先ツール

Giống như hành động miết ngón tay qua vùng sơn ướt.

Photoshop Công cụ Dodge.

Công cụ Dodge * (O) 覆焼きツール

Làm sáng vùng ảnh được tô.

Photoshop Công cụ Dodge.

Burn Tool ( O ) 焼きこみツール

Công cụ Burn sẽ làm tối các vùng được tô.

Công cụ Photoshop Sponge.

Sponge Tool ( O )スポンジツール

Giảm độ bão hòa màu sắc.

Nhóm công cụ vẽ và văn bản

Công cụ Bút Photoshop.

Pen Tool * ( P ) ペンツール

Công cụ Pen Tool dùng để vẽ các đường path cực kỳ chính xác dưới dạng vector hoặc các vùng lựa chọn.

Công cụ.

Freeform Pen Tool ( P )フリー フォーム ペンツール

Công cụ Freeform Pen để vẽ các đường path hoặc hình shape dạng tự do. Điểm neo được tự động thêm vào đường dẫn khi bạn vẽ.

Photoshop Thêm công cụ điểm neo.

Add Anchor Point Tool アンカーポイントの追加ツール

Thêm điểm neo vào path hoặc shape

Photoshop Thêm công cụ điểm neo.

Delete Anchor Point Tool アンカーポイントの削除ツール

Công cụ xoá điểm nối, hay điểm neo (Anchor Point).

Công cụ Chuyển đổi.

Convert Point Tool アンカーポイントの切り替えツール

Công cụ chuyển đổi điểm neo, giúp làm mượt hoặc chỉnh sửa các góc bo khi dùng Pentool.

Công cụ Loại ngang Photoshop.

Horizontal Type Tool * ( T ) 横書き文字ツール

Công cụ viết văn bản dạng bình thường (dạng ngang từ trái qua phải).

Công cụ.

Vertical Type Tool ( T ) 縦書き文字ツール

Công cụ giúp viết văn bản dạng đứng trên xuống dưới.

Photoshop Công cụ Vertical Mask Type.

Vertical Type Mask Tool ( T ) 縦書き文字 マスクツール

Công cụ tạo vùng lựa chọn theo dạng văn bản, ở đây là văn bản dạng đứng.

Photoshop Loại Mask Loại Công cụ.

Horizontal Type Mask Tool ( T ) 横書き文字マスクツール

Công cụ tạo vùng lựa chọn theo dạng văn bản, ở đây là văn bản ngang.

Photoshop Loại Mask Loại Công cụ.

Path Selection Tool * ( A )パスコンポネント選択シール

Sử dụng công cụ Path Selection Tool (mũi tên màu đen) trong Photoshop để chọn và di chuyển toàn bộ Shape.

Photoshop Loại Mask Loại Công cụ.

Direct Selection Tool ( A ) パス選択シール

Sử dụng công cụ Direct Selection Tool (mũi tên màu trắng) để chọn và di chuyển các điểm của hình (hình ở đây Shape).

Công cụ Rectangle Photoshop.

Rectangle Tool * ( U )長方形ツール

Công cụ Rectangle Tool giúp vẽ hình chữ nhật hình chữ nhật. Nhấn và giữ phím Shift khi kéo để chuyển thành hình vuông.

Công cụ Rectangle Rounded Photoshop.

Rounded Rectangle Tool ( U ) 角丸長方形ツール

Công cụ Rounded Rectangle Tool tương tự như công cụ Rectangle Tool nhưng các cạnh được bo tròn. Nhấn và giữ phím Shift để vẽ hình vuông có góc tròn.

Công cụ Ellipse của Photoshop.

Ellipse Tool ( U ) 精円形 ツール

Công cụ Ellipse Tool giúp vẽ hình elip dưới dạng vector hoặc dạng pixel. Nhấn và giữ phím Shift khi kéo để vẽ thành hình tròn.

Công cụ Photoshop Polygon.

Polygon Tool ( U )多角形ツール

Công cụ Polygon giúp vẽ các hình đa giác, có thể điều chỉnh được số cạnh.

Công cụ Photoshop Line.

Line Tool ( U )ラインツール

Công cụ vẽ đường thẳng trong Photoshop.

Công cụ Photoshop Custom Shape.

Công cụ Custom Shape Tool ( U )カスタムジェイプツール

Công cụ Custom Shape Tool cho phép lựa chọn và vẽ hình dạng tùy chỉnh có sẵn trong thư viện của photoshop.

Nhóm công cụ điều hướng

Photoshop Công cụ Tay.

Công cụ Hand Tool * ( H )手のひらツール

Công cụ Hand Tool giúp kéo một hình ảnh xung quanh vùng làm việc để xem các vùng khác nhau của bức ảnh khi phóng to.

Công cụ Photoshop Rotate View.

Công cụ Rotate View Tool ( R )回転ビューツール

Sử dụng công cụ Rotate View trong Photoshop để xoay vùng làm việc giúp bạn có thể xem và chỉnh sửa hình ảnh từ các góc độ khác nhau.

Công cụ Zoom của Photoshop.

Công cụ Zoom * (Z)ズームツール

Nhấp vào hình ảnh bằng công cụ Zoom Tool để phóng to một khu vực cụ thể. Nhấn và giữ Alt (Win) / Option (Mac) và nhấp chuột bằng công cụ Zoom Tool để thu nhỏ.

Bài viết hôm nay mình tạm thời kết thúc ở đây, mình sẽ tiếp tục chỉnh sửa và bổ sung đầy đủ các tính năng khác trong photoshop, bạn nào muốn dùng thử thanh công cụ nào thì có thể lên youtube tra từ khóa bằng tiếng việt, tiếng anh hoặc tiếng Nhật nhé. Đặc biệt mình nhận thấy phong cách sáng tạo trong photoshop của Nhật rất khác Việt Nam về style và màu sắc.

Nếu bạn muốn làm việc với người Nhật và ở Nhật thì nên học hỏi style của họ nha. Màu sắc ở Nhật dùng nhiều tone màu nhẹ nhàng. Bài viết sau nữa mình sẽ lấy một vài ví dụ về cách phối màu trong design của Nhật.

Rất mong thông tin mình tìm hiểu được có ích cho các bạn, bài viết được tham khảo và bổ sung từ nhiều nguồn trên internet cùng với chút kiến thức đã học được từ thầy cô của mình. Cảm ơn các bạn luôn theo dõi và ủng hộ các bài viết của mình ạ.

Trả lời

Email của bạn sẽ không được hiển thị công khai.

CAPTCHA