Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Thiết kế giao diện web bằng Photoshop – Phần 1: Các thông số cơ bản và Bootstrap Grid

5/5 - (4 bình chọn)

Trong các thành phần tạo nên một website thì giao diện là một yếu tố rất quan trọng. Giao diện ảnh hưởng trực tiếp và đầu tiên quyết định người dùng có tiếp tục dừng chân lại để xem tiếp các nội dung trong website của bạn hay không.

Một website có giao diện bắt mắt khiến khách ghé thăm hấp dẫn và dừng lại lâu hơn. Điều này làm tăng khả năng tiếp cận các nội dung của website hay thậm chí các sản phẩm tới người dùng. Đó cũng là một phần tạo ra cú click mua hàng.

Thiết kế giao diện web bằng Photoshop

Một bản vẽ trên photoshop cũng giống như một bản thiết kế kiến trúc. Bạn muốn xây một ngôi nhà đẹp và đúng ý muốn, bạn cần một bản thiết kế. Đối với thiết kế website cũng như vậy, một bản vẽ trên photoshop giúp coder định hướng trước các thành phần cần thiết để thực hiện một cách nhanh chóng và chính xác hơn.

Sau đây là nội dung Phần 1: Các thông số cơ bản và Bootstrap Grid trong chuyên mục Thiết kế giao diện web bằng Photoshop

Yêu cầu:

  • Photoshop ( ở đây mình sử dụng Photoshop CC 2017 )
  • Chuột, bàn phím
  • Và 1 trí tưởng tượng bay cao bay xa

Các cài đặt cơ bản

Đơn vị

Đầu tiên, bạn cần chuyển đơn vị sang dạng pixel. Để làm điều này, chọn Edit > Preferences > Units & Rulers hoặc nhấn Ctrl + K và chọn mục Units & Rulers. Chọn đơn vị pixel như trong hình

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid 2017-02-11_144302

Workspace

Trong Photoshop CC 2017 có một môi trường làm việc thích hợp cho web design. Chọn Workspace Graphic and Web tại góc trên cùng bên phải, workspace này ưu tiên sắp xếp các công cụ thường dùng cho thiết kế giao diện web.

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid Screenshot-4

Proof Setup

Chọn Internet Standard RGB (sRGB)

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid Screenshot-5

Các thông số của file PSD

Kích thước

Chọn File > New để tạo một file mới. Chọn Web và thiết lập các tùy chọn như trong hình. Ở đây có các kích thước màn hình phổ thông của các loại máy tính, mình chọn kích thước phổ biến nhất 1366×768. Nhấn Create để tạo file.

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid 2017-02-11_142453-1024x617

Lưới Bootstrap (Bootstrap Grid)

Các template website hiện nay có rất nhiều là sử dụng hệ thống lưới của Bootstrap Framework. Ở đây mình sẽ hướng dẫn tạo lưới Bootstrap và lưu thành Preset để sử dụng cho các lần sau.

Chọn View > New Guide Layout

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid Screenshot-2-1024x576

Thiết lập các thông số như trong hình

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid 2017-02-11_142747-1024x546

Chọn Save Preset… để lưu lại lưới Bootstrap cho lần sử dụng sau.

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid 2017-02-11_154846

Sau đó nhấn OK, ta được một layout như hình

Thiết kế giao diện web bằng Photoshop - Phần 1: Các thông số cơ bản và Bootstrap Grid 2017-02-11_155209-1024x546

Lời kết

Như vậy qua bài này chúng ta đã có một số thiết lập cơ bản để thiết kế một giao diện cho website bằng Photoshop. Bài tiếp theo sẽ tiếp tục với việc sử dụng các công cụ để tạo ra các thành phần trên web

Xem thêm: AMP HTML là gì

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Cuộc sống con người trong thế ký 21 ngày càng quen với sự tương tác trên không gian số. Những...
    16 giây trước
  2. Google đã phát hành phiên bản sửa đổi của 164 trang để cập nhật nguyên tắc xếp hạng chất lượng...
    5 giây trước
  3. Gần đây tôi đã tìm hiểu về những cách mà SEO và tiếp thị nội dung có thể làm việc cùng...
    4 giây trước
  4. Trong bài này chúng ta sẽ cùng nhau tìm hiểu về Bootstrap form. Form được sử dụng khá nhiều trong...
    9 giây trước
  5. Nội dung SEO là gì? Nội dung SEO là nội dung trực tuyến được thiết kế để xếp hạng trong...
    6 giây trước
  6. Mỗi ngày có rất nhiều tài khoản blog mới xuất hiện trên Internet. Có nhiều người sở hữu nhiều hơn...
    25 giây trước
  7. Các thương gia trực tuyến thường nghĩ rằng bằng cách liệt kê hàng trăm hoặc thậm chí hàng nghìn sản...
    25 giây trước
  8. Như chúng ta đã đề cập trước đó, việc có một bản sao xuất sắc trên trang web của bạn...
    9 giây trước
  9. Đối với người bắt đầu tự học WordPress muốn chuyển file HTML sang WordPress theme một cách dễ dàng thì...
    27 giây trước
  10. Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...
    5 giây trước