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í 17++ 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.

Contents

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. Chúng ta đều yêu thích ý tưởng kiếm thêm tiền từ trực tuyến. Đó là lý do tại sao chúng...
    29 giây trước
  2. Phần mềm phát sóng trực tiếp đang trở thành xu hướng phát triển trên internet trực tiếp dễ dàng và...
    25 giây trước
  3. Có lẽ bạn đã nghe đến sự diệu kỳ của blog kinh doanh và quyết định sử dụng blog để...
    23 giây trước
  4. Nghiên cứu từ khóa là một khâu quan trọng trong quá trình SEO website của bạn. Nó có mối liên...
    23 giây trước
  5. Xin chào mọi người, sau một tuần chắc hẳn lượng kiến thức tích lũy được về PHP của các bạn...
    8 giây trước
  6. Hôm nay Đệm Tốt sẽ tư vấn tới mọi người nên dùng loại đệm nào tốt cho sức khỏe. Với...
    8 giây trước
  7. Sau buổi học tìm hiểu và biết về SEO là gì? Và các cỗ máy tìm kiếm hoạt động như...
    9 giây trước
  8. URL là gì? Công cụ kiểm tra URL có chức năng gì? URL là viết tắt của cụm từ tiếng...
    22 giây trước
  9. Là một marketer web, tôi rất tỉ mỉ trong marketing online để có thể phát triển website của mình.  Ngoài các nỗ...
    25 giây trước
  10. Bạn có biết các yếu tố xếp hạng SEO sẽ tạo sự khác biệt cho doanh nghiệp của bạn trong...
    29 giây trước