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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. Xin chào các bạn, mình là Đại -  một người đam mê về SEO và Marketing. Nói về quá trình...
    11 giây trước
  2. Backlink vẫn là chỉ số chính mà Google sử dụng để xác định thẩm quyền của một blog. Nếu các...
    22 giây trước
  3. Kiếm tiền bằng cách làm việc, nhưng việc làm đó có thu hút bạn? Nó mất nhiều thời gian và...
    8 giây trước
  4. SEO tổng thể bền vững càng được chú trọng bởi các chuyên gia SEO. Ở Việt Nam chủ yếu các...
    29 giây trước
  5. Hiện nay theo thống kê có đến hơn 90% số người có xu hướng ưa chuộng các nội dung xuất...
    4 giây trước
  6. Trong quá trình code website với WordPress đôi khi chúng ta cần lấy nội dung bài viết bởi một ID...
    13 giây trước
  7. Ngày nay, đi đôi với sự phát triển khoa học công nghệ hiện đại, vấn đề tiết kiệm năng lượng...
    3 giây trước
  8. CLS là gì? Cách khắc phục sự cố CLS có khó không? Là một trong những thắc mắc được rất nhiều...
    4 giây trước
  9. "SAI LẦM" là một điều không tránh khỏi ở bất cứ ai và không ngoại trừ ngành nghề nào. Nhất là...
    1 giây trước
  10. Khi bạn làm việc với các ứng dụng, bạn mở nó thực hiện thay đổi sau đó đóng nó. Khi...
    30 giây trước