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
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 新規ドキュメント作成
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ụ 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
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ụ 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 * (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 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ụ 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ụ 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ụ 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.
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.
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.
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 (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
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 ý.
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.
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.
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
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.
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.
Color Sampler Tool ( I ) カラーサンプラーツール
Công cụ lấy mẫu màu cho từng điểm vị trí trong ảnh.
Ruler Tool ( I ) ものさしツール
Công cụ Thước đo đo khoảng cách, vị trí và góc độ.
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.
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
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ỏ…
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.
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.
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.
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.
Brush Tool * ( B )バラシツール
Là công cụ vẽ chính của Photoshop.
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.
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.
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ụ 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 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.
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.
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.
Eraser Tool * ( E )消しゴムツール
Xóa các vùng điểm ảnh.
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.
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 * (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.
Paint Bucket Tool ( G )塗りつぶしツール
Công cụ đổ mà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ờ ^^)
Blur Tool *ばかしツール
Công cụ Blur làm mờ và làm mềm các vùng được tô.
Sharpen Tool シャープツール
Công cụ Sharpen làm sắc nét các vùng được tô.
Smudge Tool 指先ツール
Giống như hành động miết ngón tay qua vùng sơn ướt.
Công cụ Dodge * (O) 覆焼きツール
Làm sáng vùng ảnh được tô.
Burn Tool ( O ) 焼きこみツール
Công cụ Burn sẽ làm tối các vùng được tô.
Sponge Tool ( O )スポンジツール
Giảm độ bão hòa màu sắc.
Nhóm công cụ vẽ và văn bản
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.
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ẽ.
Add Anchor Point Tool アンカーポイントの追加ツール
Thêm điểm neo vào path hoặc shape
Delete Anchor Point Tool アンカーポイントの削除ツール
Công cụ xoá điểm nối, hay điểm neo (Anchor Point).
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.
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).
Vertical Type Tool ( T ) 縦書き文字ツール
Công cụ giúp viết văn bản dạng đứng trên xuống dưới.
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.
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.
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.
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).
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.
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.
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.
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.
Line Tool ( U )ラインツール
Công cụ vẽ đường thẳng trong Photoshop.
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
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ụ 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 * (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 ạ.