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

Thiết kế một giao diện web chuyên nghiệp là công việc thiết yếu của một nhà thiết kế web. Bạn không phải là một nhà thiết kế web và bạn muốn tự tay tạo cho mình một trang web chuyên nghiệp. Bài viết này bao gồm tất tần tật cách thiết kế web bằng Photoshop một cách chuyên nghiệp, bạn có thể tham khảo để tự tay tạo cho mình một trang web.

Hiện nay có rất nhiều phần mềm thiết kế web được người dùng tin tưởng tải về để sử dụng, song song với việc sử dụng phần mềm thiết kế web thì các hình ảnh, chúng ta cần phải xử lý qua trên một công cụ chỉnh sửa ảnh khác, công cụ này Taimienphi lựa chọn là Photoshop

Trong bài viết này, Taimienphi.vn sẽ hướng dẫn bạn đọc cách thiết kế web bằng Photoshop, tạo một giao diện web chuyên nghiệp bằng phần mềm AdobePhotoshop. Sau khi thực hiện thật cẩn thận các bước hướng dẫn dưới đây, bạn sẽ tạo ra được một giao diện website rất đẹp mắt như hình dưới :

cach tao mot giao dien web chuyen nghiep bang photoshop 2

Trước khi thực hiện tạo một giao diện website chuyên nghiệp bằng Photoshop, bạn cần có một website template và đương nhiên là công cụ chỉnh sửa, thiết kế hàng đầu hiện nay Adobe Photoshop.

Tải về Adobe Photoshop tại đây : Download Photoshop

Tải file PSD Website Template về máy tính và sử dụng tại đây : Download Photoshop Website Template

Thiế kế web bằng Photoshop, tạo giao diện web chuyên nghiệp bằng Adobe Photoshop

Bước 1: Mockup

Trước khi bắt đầu thiết kế, bạn cần lên kế hoạch cho các yêu cầu, giao diện và chức năng. Sau đó phải sắp xếp các ý tưởng thành một layout phù hợp để thực hiện. Mockup và wireframe khá hữu ích trong việc tạo các layout linh hoạt.

Trong phần hướng dẫn này mockup và wire frame được đặt cùng các tone màu xám. Bằng cách này bạn có thể loại bỏ màu sắc trên nền, để tập trung vào layout và không bị rối mắt bởi các màu sắc khác nhau. Và bạn có thể tự do và điều chỉnh và sắp xếp mọi thứ. Một mockup có thể hiển thị các chi tiết như bạn muốn.

cach tao mot giao dien web chuyen nghiep bang photoshop 3

Bước 2: Thiết lập Canvas

Bước tiếp theo tạo một layout có chiều rộng 960 pixel. Tạo một tài liệu mới có kích thước 1200 x 1500.

cach tao mot giao dien web chuyen nghiep bang photoshop 4

Dưới đây là layout có chiều tộng 960 pixel, và bạn sẽ phải chọn khu vực để làm việc trên đó. Nhấn tổ hợp phím Ctrl + A để chọn toàn bộ tài liệu.

cach tao mot giao dien web chuyen nghiep bang photoshop 5

Chọn Select =>Transform Selection. Co chiều rộng phần đã chọn xuống 960 pixel. Đó là khu vực làm việc của layout.

cach tao mot giao dien web chuyen nghiep bang photoshop 6

Thêm đường dẫn guide line vào phần này.

cach tao mot giao dien web chuyen nghiep bang photoshop 7

Tiếp theo bạn cần tạo một số padding giữa border và nội dung mà bạn sẽ thêm sau đó. Trên khu vực đang hoạt động, chọn Transform Selection. Thay đổi kích thước chiều rộng khu vực đã chọn xuống 920 pixel. Điều này có nghĩa là 2 padding 2 bên có tổng kích thước padding là 40 pixel.

cach tao mot giao dien web chuyen nghiep bang photoshop 8

Thêm đường guide line vào khu vực đã chọn.

cach tao mot giao dien web chuyen nghiep bang photoshop 9

Bước 3: Tạo Header

Thực hiện theo các bước này để tạo header cho layout. Tạo một khu vực có chiều cao 465 pixel.

cach tao mot giao dien web chuyen nghiep bang photoshop 10

Đầu tiên Fill khu vực này bằng màu xám, sau đó sử dụng Layer Styles để thêm màu và gradient. Thực hiện thao tác này trong suốt quá trình thiết kế để duy trì hệ thống phân cấp thị giác (visual hierarchy).

thiet ke web bang photoshop

Thêm Gradient vào header. Kích đúp chuột vào hình thumb thu nhỏ của layer, chọn Gradient Overlay. Tạo 2 Gradient màu như hình dưới đây bằng cách sử dụng các thiết lập tương tự.

cach tao mot giao dien web chuyen nghiep bang photoshop 12

Lúc này màu sắc khu vực đã chọn giống như hình dưới đây:

thiet ke web bang photoshop

Bước tiếp theo là thêm điểm nổi bật vào header. Tạo một layer mới bằng cách sử dụng tổ hợp phím Ctrl+Alt+Shift+N. Chọn một brush mềm có đường kính 600px và chọn mã màu #19535a cho brush. Chỉ cần click chuột vào giữa header 1 lần.

cach tao mot giao dien web chuyen nghiep bang photoshop 14

Chọn khu vực ở phía trên đầu có chiều cao 110 pixel.

cach tao mot giao dien web chuyen nghiep bang photoshop 15

Nhấn Delete đẻ xóa phần đã chọn. Lúc này sẽ có dạng:

cach tao mot giao dien web chuyen nghiep bang photoshop 16

Co chiều dọc lại bằng cách nhấn tổ hợp phím Ctrl + T.

cach tao mot giao dien web chuyen nghiep bang photoshop 17

Hãy chắc chắn rằng điểm nổi bật nằm ở trung tâm header. Chọn layer, header và điểm nổi bật và nhấn phím V để chuyển qua công cụ Move Tool. Trên bảng Options Panel chọn nút Align Horizontal Centers.

thiet ke web bang photoshop

Tạo một layer mới, sử dụng công cụ Pencil Tool có mã màu #01bfd2 để vẽ một đường nổi bật.

cach tao mot giao dien web chuyen nghiep bang photoshop 19

Ẩn các cạnh bằng cách sử dụng gradient mask. Chọn công cụ Gradient Tool, tạo gradient trong bảng Options Panel như hình dưới đây:

cach tao mot giao dien web chuyen nghiep bang photoshop 20

Áp dụng gradient trên.

cach tao mot giao dien web chuyen nghiep bang photoshop 21

Bước 4: Tạo Texture và Pattern

Bước tiếp theo bây giờ là tạo một checker pattern và áp dụng checker pattern này vào header. Chọn công cụ Pencil Tool, thiết thập kích thước brush thành 2 pixel và thêm 2 chấm vào 2 góc đối diện nhau như hình dưới đây. Bỏ background và chọn các dấu chấm này. Chọn Edit =>Define Pattern.

cach tao mot giao dien web chuyen nghiep bang photoshop 22

Tạo một layer mới và đặt layer này vào bên dưới layer nổi bật. Chọn khu vực mà bạn muốn áp dụng pattern. Nhấn tổ hợp phím Shift + F5 để mở hộp thoại Fill. Chọn pattern mà bạn vừa tạo và chọn OK.

thiet ke web bang photoshop

Khu vực đó sẽ được fill bằng pattern.

cach tao mot giao dien web chuyen nghiep bang photoshop 24

Blend pattern vào header. Thêm một Layer Mask vào layer Pattern. Chọn brush mềm với mã màu #ffffff, Opacity của brush xuống 60% và sơn. Ngoài ra bạn có thể điểu chỉnh Opacity cho phù hợp với yêu cầu của bạn.

cach tao mot giao dien web chuyen nghiep bang photoshop 25

Sau khi hoàn tất, bạn có thể thấy rằng Blend khá bắt mắt.

cach tao mot giao dien web chuyen nghiep bang photoshop 26

Bước 5: Thêm biểu logo type (kiểu chữ)

Quá trình hoàn tất background đã thực hiện được khá nhiều. Nhiệm vụ bây giờ của bạn là thêm logo type. Trước khi thực hiện điều này, thêm điểm nổi bật vào phía sau logo. Chọn brush mềm có mã màu #19535a và thêm một điểm chấm.

thiet ke giao dien web bang photoshop

Tiếp theo thêm Type. Font chữ sử dụng trong ví dụ đưới đây là Bebas. Nếu muốn sử dụng font chữ này bạn có thể tải về máy và cài đặt, ngoài ra, có rất nhiều font chữ đẹp tiếng Việt khác dành cho các bạn, tải Font chữ đẹp về máy tính

thiet ke giao dien web bang photoshop

Thêm hiệu ứng Subtle cho logo.

cach tao mot giao dien web chuyen nghiep bang photoshop 29

cach tao mot giao dien web chuyen nghiep bang photoshop 30

Bước 6: Đường dẫn

Thêm các link đường dẫn.

cach tao mot giao dien web chuyen nghiep bang photoshop 31

tao giao dien web bang photoshop

Tạo nút đường dẫn. Sử dụng công cụ Rectangular Marquee Tool và fill bằng bất cứ màu sắc nào. Sau đó giảm Fill Opacity xuống 0.

cach tao mot giao dien web chuyen nghiep bang photoshop 33

Kích đúp chuột vào hình thumb thu nhỏ của layer, chọn Gradient Overlay, và sử dụng các thiết lập như hình dưới đây:

cach tao mot giao dien web chuyen nghiep bang photoshop 34

Bước 7: Content Slider

Chọn một khu vực có kích thước 580 x 295 pixel.

cach tao mot giao dien web chuyen nghiep bang photoshop 35

Fill khu vực bằng tone màu xám.

tao giao dien web bang photoshop

Thêm hình ảnh mà bạn muốn sử dụng, dán vào layer mà bạn vừa tạo ở trên.

cach tao mot giao dien web chuyen nghiep bang photoshop 37

Bây giờ là bước thêm hiệu ứng đổ bóng (shadow) cho slider. Tạo một layer mới, chọn công cụ Brush Tool được thiết lập đường kính là 400 pixel. Mở bảng Brushes và giảm kích thước các chấm tròn, sử dụng thiết lập như dưới đây.

cach tao mot giao dien web chuyen nghiep bang photoshop 38

Thiết lập mã màu brush là #000000 và thêm các chấm tròn.

cach tao mot giao dien web chuyen nghiep bang photoshop 39

Áp dụng Gaussian Blur để làm mềm các cạnh.

tao giao dien web bang photoshop

Chọn nửa phần dưới của bóng và xóa phần đó đi.

cach tao mot giao dien web chuyen nghiep bang photoshop 41

Thay đổi vị trí của bóng ngay trên slider.

cach tao mot giao dien web chuyen nghiep bang photoshop 42

Co bóng theo chiều dọc. Tiếp theo căn giữa trên thanh slider. Chọn cả 2 layer và trên bảng Options Panel, click chọn nút Align Horizontal Centers.

cach tao mot giao dien web chuyen nghiep bang photoshop 43

Nhân đôi bóng và xoay theo chiều dọc, đặt vào cạnh dưới cùng của thanh slider.

cach tao mot giao dien web chuyen nghiep bang photoshop 44

Tạo nút điều khiển thanh slider bằng cách sử dụng công cụ Rectangular Marqee Tool và fill mã màu #000000.

cach tao mot giao dien web chuyen nghiep bang photoshop 45

Giảm nút Opacity xuống 50%.

cach tao mot giao dien web chuyen nghiep bang photoshop 46

Mở AutoShapes trên bảng Option Panel và chọn biểu tượng mũi tên như dưới đây. Thêm biểu tượng đó vào nút.

cach tao mot giao dien web chuyen nghiep bang photoshop 47

Tiếp theo tạo một thanh như hình dưới đây và fill màu #000000.

cach tao mot giao dien web chuyen nghiep bang photoshop 48

Giảm Opacity xuống 50%.

cach tao mot giao dien web chuyen nghiep bang photoshop 49

Tại đây bạn có thể thêm miêu tả cho dự án của mình.

cach tao mot giao dien web chuyen nghiep bang photoshop 50

Bước 8: Thêm các dòng chào mừng cho trang web

Thêm các dòng chào mừng và miêu tả trang web tại đây. Để gõ được tiếng Việt trong Photoshop có dấu rất đơn giản, chỉ cần cài đặt phần mềm hỗ trợ gõ tiếng việt và lựa chọn các kiểu font tiếng việt có dấu là xong, nếu chưa hiểu, mời các bạn tham khảo cách gõ tiếng Việt trong Photoshop để biết cách thực hiện.

cach tao mot giao dien web chuyen nghiep bang photoshop 51

cach tao mot giao dien web chuyen nghiep bang photoshop 52

Bước 9: Hoàn tất Header

Đến đây gần như đã sắp hoàn thành header. Để hoàn thành header, bước cuối cùng là thêm hiệu ứng đổ bóng cho header. Tạo một bóng như hướng dẫn ở phần trên bằng cách sử dụng công cụ brush.

cach tao mot giao dien web chuyen nghiep bang photoshop 53

Để khoảng cách giữa header và bóng là 1 pixel.

cach tao mot giao dien web chuyen nghiep bang photoshop 54

Bước 10: Áp dụng gradient cho background

Tạo một màu xám nhạt thành gradient trắng sử dụng các thiết lập như dưới đây.

cach tao mot giao dien web chuyen nghiep bang photoshop 55

Tạo một layer mới đặt dưới header vào áp dụng gradient trên.

cach tao mot giao dien web chuyen nghiep bang photoshop 56

cach tao mot giao dien web chuyen nghiep bang photoshop 57

Bước 11: Thêm nút slider xoay

Tạo nút điều khiển xoay.

cach tao mot giao dien web chuyen nghiep bang photoshop 58

Áp dụng Inner Shadow trên từng nút để biết được các mục đang hoạt động trên thanh slider.

cach tao mot giao dien web chuyen nghiep bang photoshop 59

Bước 12: Tạo Content Divider

Chọn công cụ Pencil Tool và vẽ 1 đường kẻ. Chọn màu xám nhạt (mã màu #aaaaaa).

cach tao mot giao dien web chuyen nghiep bang photoshop 60

Sử dụng gradient mask để ẩn các cạnh.

cach tao mot giao dien web chuyen nghiep bang photoshop 61

Bước 13: Thêm Main Content (nội dung chính)

Bây giờ nhiệm vụ của bạn là thêm các phần nội dung. Layout dưới đây được chia làm 3 cột bằng nhau và có padding ở giữa. Để làm được điều này bạn có thể tính toán và chia không gian có sẵn thành 3 hộp bằng nhau có chiều rộng 25 pixel và có padding ở giữa.

cach tao mot giao dien web chuyen nghiep bang photoshop 62

Thêm đường guide line vào các hộp. Sau đó xóa các hộp này đi và phần còn lại là các cột bằng nhau.

cach tao mot giao dien web chuyen nghiep bang photoshop 63

Thêm một số dịch vụ đặc trưng. Thả các biểu tượng từ bộ biểu tượng Function. Duy trì khoảng cách giữa các đối tượng đồng bộ.

cach tao mot giao dien web chuyen nghiep bang photoshop 64

cach tao mot giao dien web chuyen nghiep bang photoshop 65

Tiếp theo tạo nút Read More (đọc thêm). Chọn công cụ Rounded Rectangle Tool để vẽ các hình dạng khác nhau. Hãy chắc chắn rằng đó là layer Shape.

cach tao mot giao dien web chuyen nghiep bang photoshop 66

Áp dụng Gradient Overlay Stroke cho nút Read More.

cach tao mot giao dien web chuyen nghiep bang photoshop 67

cach tao mot giao dien web chuyen nghiep bang photoshop 68

Nhân đôi nút này.

cach tao mot giao dien web chuyen nghiep bang photoshop 69

Bổ sung thêm các mục hoạt động gần đây. Trong ví dụ dưới đây là vẽ 3 hộp để thêm 3 hình ảnh và áp dụng 3 stroke.

cach tao mot giao dien web chuyen nghiep bang photoshop 70

Dán các hình ảnh vào các hộp.

cach tao mot giao dien web chuyen nghiep bang photoshop 71

cach tao mot giao dien web chuyen nghiep bang photoshop 72

Tạo bóng như ở các bước trên và đặt ở các hộp.

cach tao mot giao dien web chuyen nghiep bang photoshop 73

Thêm một số miêu tả cho dự án.

cach tao mot giao dien web chuyen nghiep bang photoshop 74

Bây giờ là bước tạo một giao diện web chuyên nghiệp bằng Photoshop với các tiện ích mạng xã hội như Twitter Feed. Kéo biểu tượng Twitter hình con chim vào.

cach tao mot giao dien web chuyen nghiep bang photoshop 75

Tạo một thông báo Twitter.

cach tao mot giao dien web chuyen nghiep bang photoshop 76

Tạo một nút More Tweets.

cach tao mot giao dien web chuyen nghiep bang photoshop 77

Áp dụng các style dưới đây:

cach tao mot giao dien web chuyen nghiep bang photoshop 78

cach tao mot giao dien web chuyen nghiep bang photoshop 79

Thêm text, cách chèn text hay chính là chèn chữ vào ảnh trong Photoshop được thông qua công cụ Type Tool, khi lựa chọn công cụ này cùng với việc chọn font chữ, kích thước (size), các bạn bắt đầu tiến hành thêm text hay chèn chữ vào ảnh trong Photoshop

cach tao mot giao dien web chuyen nghiep bang photoshop 80

Bước 14: Tạo Footer và hoàn tất quá trình

Tạo một khu vực cho footer và fill khu vực đó bằng màu xám.

cach tao mot giao dien web chuyen nghiep bang photoshop 81

Áp dụng Color Overlay.

cach tao mot giao dien web chuyen nghiep bang photoshop 82

Cuối cùng thêm link danh mục footer và thông tin bản quyền. Và như vậy là bạn đã hoàn tất quá trình tạo một giao diện web bằng Photoshop.

cach tao mot giao dien web chuyen nghiep bang photoshop 83

Kết quả cuối cùng sau khi thực hiện đầy đủ và chính xác các bước tạo một giao diện web chuyên nghiệp bằng Photoshop ở trên.

cach tao mot giao dien web chuyen nghiep bang photoshop 84

http://thuthuat.taimienphi.vn/cach-tao-mot-giao-dien-web-chuyen-nghiep-bang-photoshop-24074n.aspx
Trên Photoshop có rất nhiều tính năng giúp bạn chỉnh sửa hình ảnh độc đáo, với tính năng chỉnh sửa ảnh ngược sáng, bức ảnh của bạn bị chụp trong điều kiện ngược ánh sáng sẽ trông rất tối, khi đó hình ảnh sẽ được khôi phục lại một cách nhanh nhất, làm cho bức ảnh trở nên sáng hơn, tham khả cách chỉnh sửa ảnh ngược sáng mà Taimienphi đã hướng dẫn nhé.

Tác giả: Thuỳ Dương     (4.0★- 14 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Chỉnh sửa ảnh bằng Photoshop trên iPhone
Cách tạo ảnh động bằng Photoshop đơn giản nhất
Cách ghép, tạo ảnh Panorama bằng Photoshop
Hướng dẫn tạo viền quanh người bằng Photoshop
Cách tạo viền cho ảnh bằng Photoshop, khung trong ngoài, mờ
Từ khoá liên quan:

thiết kế web bằng photoshop

, tạo giao diện web bằng photoshop, thiết kế giao diện web bằng photoshop,

SOFT LIÊN QUAN
  • Photoshop PSD Repair

    Khôi phục các file PSD

    Photoshop PSD Repair là một ứng dụng tiên tiến được trang bị với công nghệ khôi phục Photoshop cao cấp cho phép bạn có thể biến file PSD và PDD thành file đọc được dễ dàng. Ứng dụng còn mang đến khả năng khôi phục tất cả các loại file PSD và PDD bị lỗi bằng các thuật toán mạnh mẽ nhất có thể trích xuất hiệu quả dữ liệu từ file Photoshop bị lỗi và có thể khôi phục các file theo các chế độ màu.

Tin Mới

  • Cách chuyển ảnh và video từ Google Drive sang Google Photos

    Hướng dẫn chuyển ảnh và video từ Google Drive sang Google Photos sẽ giúp bạn lưu giữ những kỷ niệm đẹp qua những bức ảnh, video lên Google Photos, dù Google chính thức chia tách Drive và Photos trong tháng 7 vừa rồi nhưng bạn vẫn có thể chuyển ảnh và video bằng tùy chọn "Upload from Drive" để tải ảnh và video từ tài khoản Google Drive sang Google Photos.

  • Top 10 phần mềm thiết kế Website được đánh giá cao nhất 2019

    Sự ra đời của các phần mềm thiết kế web không cần code hiện nay giúp cho tất cả mọi người đều có thể tự tạo một trang web bán hàng hoặc tin tức mà không cần thuê dịch vụ thiết kế website tốn tiền như trước nữa, các phần mềm rất đa dạng từ code ASP cho tới PHP ...

  • Cách đăng nhập Google trên máy tính

    Tiến hành đăng nhập Google để sử dụng hiện nay đã trở thành cơ bản và hầu như tất cả mọi người đều có thể thực hiện được. Đăng nhập tài khoản Google thành công, bạn có thể xem danh bạ, vào Gmail, dùng Drive, Google ảnh... rất đơn giản. Nếu bạn nào chưa rõ cách thức đăng nhập như thế nào, hãy xem ngay hướng dẫn trong bài viết này.

  • Tổng hợp những từ viết tắt thông dụng nhất trên Facebook

    Tổng hợp những từ viết tắt thông dụng nhất trên Facebook trong bài viết sau đây giúp các bạn đọc có thể áp dụng những từ này khi viết STT, chat hoặc các bạn chưa hiểu ý nghĩa của các từ viết tắt trên Facebook thì tham khảo bài viết này sẽ hiểu hơn về thuật ngữ viết tắt đó.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá