Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Design
Webdesign

Thiết kế một bộ trang web

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Đối với hầu hết các thiết kế web, nó không thực sự là về kỹ thuật Photoshop, vì vậy nó luôn khó khăn khi viết một hướng dẫn Photoshop về chủ đề này. Tuy nhiên hôm nay tôi sẽ đưa bạn qua một thiết kế mà gần đây tôi đã chuẩn bị được. Chúng ta sẽ đi qua một số bước Photoshop, và tôi cũng sẽ cố gắng để giải thích cho bạn một số lý do đằng sau các hành động của tôi.

Bạn có thể tìm thấy các tập tin PSD của Photoshop trong một thư mục có nhãn "PSDs" có trong tập tin ZIP mà bạn đã tải xuống. Bạn có thể sẽ muốn xem qua chúng một chút trước khi chúng ta bắt đầu.


Đầu tiên, các thiết kế cuối cùng

Đầu tiên hãy xem các thiết kế. Tôi đang viết một cuốn sách về tạo giao diện WordPress có tên là How to Be a Rockstar WordPress Designer (Làm thế nào để trở thành một nhà thiết kế WordPress xuất sắc). Cuốn sách yêu cầu phải tuân theo theme ví dụ, vì vậy tôi đã thiết kế theme này, mà tôi sẽ gọi là "Creatif" - bởi vì nó nghe như tiếng Pháp và thấy kiểu như rất ngầu. Về cơ bản nó là một tập hợp các thiết kế mà chúng ta sẽ xây dựng thành hai theme WordPress - một là một blog thông thường, và một là theme cho phép bạn sử dụng WordPress để tạo một portfolio.

Những gì bạn thấy bên dưới là bốn màn hình thiết kế chính mà tôi đã sử dụng để xây dựng theme đó. Nói chung tôi tạo hai màn hình cho hầu hết các trang web - một trang chủ và một trang nội dung. Nếu có một trang web phức tạp hơn, thì tôi sẽ tạo một màn hình trên mỗi trang quan trọng. Ở một mức độ nào đó, bạn có thể thiết kế một số trang khi bạn đang ở giai đoạn xây dựng HTML, nhưng thật tốt khi lập bản đồ cho bất kỳ các trang chính nào, vì vậy bạn có thể chắc chắn rằng mọi thứ đều trông ổn và cảm thấy phù hợp.

Các màn hình dưới đây là:

  1. Trang chủ cho theme Creatif Portfolio
  2. Trang chủ cho theme Blog của Creatif
  3. Trang nội dung chung cho cả hai theme
  4. Một bảng phối màu thay thế mà chúng ta sẽ xây dựng thành một bản định kiểu có thể hoán đổi cho nhau - vì vậy bạn có thể chuyển đổi chúng qua lại và có được một phiên bản tối hoặc sáng của một trong hai theme.









Bảng màu

Một trong những quyết định đầu tiên của tôi khi thiết kế một trang web mới là chọn một bảng màu. Có một số trang web tốt bên ngoài để giúp bạn chọn một bộ màu tốt nhưng thường tôi chỉ chọn màu của riêng tôi bằng cách thử nghiệm. Một công thức đơn giản mà đôi khi tôi hay sử dụng là chọn một bộ màu trung tính và một màu bắt sáng duy nhất để nâng bảng màu đó lên. Trong trường hợp này, tôi đã chọn bảng màu xám be với màu xanh nhạt làm màu bắt sáng của tôi.



Bước 1

Chúng ta bắt đầu bài hướng dẫn này với một logo nhỏ. Trong khi thiết kế logo nói chung là một quá trình phức tạp, thì trong trường hợp này tôi chỉ muốn một hình ảnh nhỏ để đặt lên trang của tôi. Vì vậy, tôi bỏ qua tất cả các bước thông thường và chỉ cần tạo một chữ nhỏ / hộp logo đẹp mắt. Nếu bạn quan tâm đến thiết kế logo, một blog tuyệt vời về chủ đề này là Logo Design Love của David Airey, và một bộ sưu tập các logo đẹp có thể được tìm thấy tại Faveup.

Nhưng dù sao tôi cũng chọn font chữ News Gothic Condensed Bold. Tôi nghĩ rằng đây là phông chữ mặc định của Mac, nhưng tôi không chắc chắn vì tôi cài phông chữ bazillion ở khắp mọi nơi tôi sử dụng. Tôi đã sử dụng một Layer Style đơn giản (mà bạn có thể thấy các thiết lập trong bước tiếp theo) làm cho kiểu này trông giống web2 và hợp thời trang. Nó sử dụng một gradient mờ, đổ bóng tinh tế và khung day 1px để nâng tầng phong cách của trang.



Bước 2

Dưới đây là các cài đặt cho Layer Style:



Bước 3

Tiếp theo tôi thêm một hình chữ nhật tròn phía sau chữ. Bạn có thể tạo nó bằng công cụ Rounded Rectangle Tool (U). Như bạn có thể thấy trong hình bên dưới, tôi cũng thêm một gradient mờ vào hộp. Bạn có thể làm điều này bằng cách nhấn CTRL-nhấp chuột vào layer hộp để chọn các điểm ảnh của nó, chọn Select > Modify > Contract và chọn 1px và sau đó trong một layer mới vẽ một Radial Gradient từ một phiên bản màu sáng hơn của màu tối đó và mờ dần để trong suốt.

Như tôi đã đề cập trước đó, thiết kế này có một chút cảm giác về web2 - nó sáng sủa và đơn giản, có một số độ dốc và khá gọn gàng. Một số nhà thiết kế kiên quyết tránh xa các xu hướng, cá nhân tôi không ngại sử dụng chúng miễn là chúng phù hợp với mục đích của tôi. Trong trường hợp này tôi muốn có một cái nhìn sáng sủa mà không ảnh hưởng đến nội dung, nhưng vẫn cung cấp được một màu bọc đẹp. Dù sao đi nữa, tất cả đều hơi mang tính chủ quan một chút.



Bước 4

Bây giờ khung hình tôi đang sử dụng ở đây rộng khoảng 1100px x 1400px. Trong thực tế, tất cả nội dung nằm trong phạm vi 1000px để có thể xem được trên màn hình 1024 x 768. Tôi thích có một khung hình rộng hơn để tôi có thể lập kế hoạch cho những gì xuất hiện khi người xem có độ phân giải lớn hơn.

Trong bước này, tôi đã thêm những thứ cơ bản về tiêu đề của tôi, cụ thể là một thanh màu tối dọc chạy ngang ở trên cùng, một màu tối hơn màu nền làm thanh trình đơn của tôi, một dòng 1px để chặn thanh trình đơn và một số văn bản phụ dưới logo của tôi (trong News Gothic Condensed một lần nữa).

Có hai điều cần lưu ý:

  1. Nó luôn luôn ổn để sử dụng các sắc thái của bảng màu của bạn. Ở đây tôi có một màu nền, thanh trình đơn, các mục menu và chữ phụ của logo là tất cả các sắc thái khác nhau, tối hơn của màu đó. Điều này mang đến một cảm giác đẹp, mịn màng, không xung đột. Tất nhiên nếu bạn chỉ sử dụng các sắc thái thì nó khá nhàm chán, đó là lý do tại sao chúng ta sẽ sử dụng màu sắc bắt sáng của chúng ta một chút sau đó. Phong cách thiết kế khác nhau sẽ gợi ra những sự thay đổi nhiều hơn về màu sắc, nhưng trong trường hợp của chúng ta, chúng ta muốn các sắc thái và màu sắc chủ yếu phù hợp với một sự bắt sáng mạnh mẽ.
  2. Ngoài ra nó là ổn để phản ánh màu sắc của bạn trên thiết kế của bạn. Vì vậy, ở đây chúng ta có một màu nền màu be và sau đó là màu tối hơn của chúng ta xuất hiện trong ba nơi - logo, thanh trên cùng và liên kết menu được tô sáng. Điều này tạo ra một sự cân bằng thị giác và đồng chỉnh giữa ba yếu tố. Sự cân bằng rất quan trọng.


Bước 5

Ở đây chúng ta thêm một chút của màu sắc bắt sáng của chúng ta trước tiên. Đó là một đường thằng 1px rất tinh tế dọc theo đường trên cùng. Sau đó khi chúng ta thêm các yếu tố, màu sắc bắt sáng sẽ xuất hiện lại ở các vị trí khác nhau và sẽ kéo các yếu tố đó lại với nhau để hợp nhất chúng lại thành một thiết kế đơn sắc, bóng bẩy. Bởi vì không có gì nhiều cho thiết kế này ngoại trừ các yếu tố và màu sắc được đặt phù hợp, do đó nó rất quan trọng để sử dụng màu sắc phù hợp.



Bước 6

Bây giờ trang đang tìm kiếm trông hơi phẳng, vì vậy ở đây tôi đã thêm một layer ngay phía trên layer nền. Sau đó, tôi vẽ Radial Gradient đi từ màu be / xám đen đến trong suốt và thiết lập layer đó thành Color Dodge để làm sáng nền. Bởi vì thanh menu trên thực tế được vẽ với độ trong suốt tạo hiệu ứng làm sáng, cũng hiển thị xuyên qua thanh trình đơn.

Điều quan trọng cần nhớ là bạn cần phải xây dựng thiết kế này thành HTML sau đó. Vì lý do đó bạn sẽ nhận thấy rằng khi bạn đến các cạnh của vùng có thể xem 1000px, chúng ta sẽ trở lại với các màu đơn sắc. Điều này có nghĩa là sau này tôi sẽ có thể tạo một lát cắt hình ảnh đơn và sử dụng nó làm hình nền CSS. Sau đó, tôi sẽ có một hình ảnh nền khác với vùng bắt sáng lớn và đây sẽ là một hình nền trong nội dung chính.

Điều quan trọng là phải biết về xây dựng các trang web để bạn có thể thiết kế chúng theo cách để tránh các phiền phức sau này khi đang thực hiện. Tôi nghĩ rằng điều này chủ yếu đến từ kinh nghiệm và học hỏi những quyết định về thiết kế nào có thể làm cho cuộc sống rắc rối sau này. Ở đây nó làm cho cuộc sống dễ dàng hơn nhiều để có một nền lặp lại dễ dàng bên ngoài phạm vi có thể xem 1000px.



Bước 7

Tiếp theo là lúc bắt đầu thêm vùng màu trắng trước tiên của tôi, chính là khối nội dung. Ở đây tôi sử dụng một nét viền 1px của phiên bản tối hơn của màu nền, sau đó là một khung bên trong 1px và cuối cùng là một màu be nhạt dần xuống dưới. Kiểu này phù hợp với logo trước đó của tôi. Ngoài ra, bằng cách có đường viền tối hơn, tiếp theo là đường viền bên trong nhẹ hơn, chúng ta có giao diện rất sắc nét với trang này. Độ sắc nét xuất phát từ độ tương phản - tức là tối với sáng.

Cá nhân tôi nghĩ rằng độ sắc nét hoặc sự rõ ràng thực sự quan trọng trong thiết kế web. Không có gì làm phiền tôi nhiều hơn là thiếu sự chú ý đến chi tiết trong việc làm cho mọi thứ rõ ràng và sắc nét.



Bước 8

Bây giờ tôi thêm một số nội dung giả trong đây. Bởi vì chữ này phải là chữ HTML, rất quan trọng là để chọn phông chữ của bạn một cách cẩn thận. Không có gì đáng buồn hơn việc chọn một số phông chữ đẹp và sau đó nhớ lại rằng chúng không phải là phông chữ mặc định và do đó thiết kế của bạn sẽ trông hoàn toàn khác với cách bạn tưởng tượng. Tôi đã sử dụng Helvetica cho dòng tiêu đề đậm và Arial cho văn bản.

Trong Photoshop, bạn nên đặt Anti-Aliasing thành "Sharp" để bắt chước văn bản sẽ thể hiện trong trình duyệt. Trước đây, tôi đã từng sử dụng "None", nhưng những ngày này hầu hết các PC và tất cả các máy Mac đều sử dụng những thứ như ClearType tiện lợi để làm cho phông chữ trông mượt mà.

Một lần nữa lưu ý rằng các liên kết phụ ngữ sử dụng màu xanh lam bắt sáng của chúng ta, kéo lên trên dòng tiêu đề 1px mà chúng ta đã thêm vào trước đó.



Bước 9

Tiếp theo tôi thêm một yếu tố thiết kế nhỏ ở dạng dải tin nhắn dọc theo góc phải trên cùng của hộp của tôi. Trong một thiết kế đơn giản như thế này (nơi mà hầu hết là các dòng và hộp đơn giản), thật tuyệt khi có một hoặc hai yếu tố thực sự nhảy nổi bật. Trong trường hợp này chúng ta sẽ sử dụng màu sắc bắt sáng của chúng ta kết hợp với một góc 45 "để làm cho một yếu tố mát mẻ trông thật tuyệt vời.

Vì vậy, chúng ta vẽ một hình chữ nhật và thêm một số chữ trên đầu trang. Sau đó, tôi sử dụng Dodge Tool (O) để làm sáng phần giữa, và thêm một Layer Style để cung cấp cho chữ một chút bóng tối. Sau đó chọn cả hai layer với nhau, tôi nhấn CTRL-T để chuyển đổi và xoay 45 độ.



Bước 10

Sau khi đặt nó trên hộp của tôi, tôi cắt bỏ các cạnh như được hiển thị. Bây giờ bạn sẽ nhận thấy chúng ta có thể đặt nó sao cho nó được xếp thẳng hàng với chiếc hộp, nhưng tôi nghĩ sẽ rất tuyệt khi làm cho nó trông giống như dải này quấn quanh hộp, vậy nên kéo ra ngoài chiếc hộpkhoảng 4px.



Bước 11

Tiếp theo, tôi đã chọn các pixel trong pattern theo cách thủ công mà bạn nhìn thấy bên dưới, tạo một layer bên dưới layer dải tin nhắn và vẽ với màu xanh đậm hơn. Nó tối hơn nên nó trông giống như mặt sau của dải tin nhắn, và bạn sẽ nhận thấy rằng tôi đã làm như vậy để nó tối hơn về phía bên phải, nơi nó nằm trong một cái bóng giả.



Bước 12

Sau đó tôi nhân đôi gói bọc của mình và xoay nó 90 "và đặt nó ở phía bên phải của hộp, như được hiển thị. Và thế yếu tố thiết kế của chúng ta đã xong!



Bước 13

Tiếp theo tôi tạo ra một số yếu tố khác. Không có nhiều điều mới mẻ ở đây. Về cơ bản tôi đã tái sử dụng các yếu tố thiết kế giống nhau - cùng một kiểu chữ, cùng một dải tin nhắn, các hộp giống nhau - và vẽ chúng ở nơi tôi muốn có nội dung của mình.



Bước 14

Tiếp theo, tôi đã thêm một khu vực chân trang. Nó không phải là một chân trang rất thú vị, nhưng nó sử dụng các màu sắc tương tự như thanh trên cùng để phản ánh chúng một lần nữa và trong trường hợp này là để chặn lại thiết kế.



Bước 15

Bây giờ bởi vì tôi đang tạo một theme WordPress, tôi cũng quyết định sẽ tạo một phiên bản logo của mình có thể được tạo bằng plain text. Bạn có thể thấy nó bên dưới và trong thành phần HTML của hướng dẫn này, chúng ta sẽ tạo hộp "logo".



Bước 16

Tại thời điểm này tôi nghĩ tôi sẽ cho bạn thấy bảng layer của tôi. Tôi không giỏi về việc đặt tên các layer (vì tôi lười) nhưng tôi tin vào việc nhóm các layer thành các bộ. Ở đây, thiết kế cho logo so với logo chữ, blog so với portfolio và trang nội bộ đều nằm trong cùng một tập tin PSD, chỉ trong các bộ layer khác nhau. Vì vậy, tôi có thể bật và tắt chúng và có các sắp xếp khác nhau. Điều này rất hữu ích bởi vì nếu tôi đột nhiên quyết định di chuyển logo sang bên trái 2px, tôi sẽ không phải mở ba tập tin và di chuyển 2px trong mỗi tập tin hoặc có rủi ro có sự khác biệt. Ngoài ra nó gọn gàng, có tổ chức và làm cho tôi cảm thấy rất rõ ràng khi nhìn vào chi tiết.



Bước 17

Bây giờ tôi sẽ chỉ ra rằng trong thực tế tôi đã không hoàn toàn thiết kế thiết kế này theo cách tôi đã đặt ra trong hướng dẫn. Trong thực tế, mockup gần nhất của tôi trông giống như hình được hiển thị bên dưới.

Tôi sau đó đã tắt layer màu nâu sẫm và nghĩ rằng nó trông khá tuyệt chỉ với màu sáng hơn. Điều này được gọi là một tai nạn hạnh phúc. Tôi ước tôi có thể nói rằng tôi đủ thông minh để tất cả sự độc đáo trong bản công việc của tôi là do tôi tạo nên, nhưng thực sự là một nửa số đó là do may mắn.

Trong mọi trường hợp khi tôi kết thúc thiết kế của mình, tôi nhìn lại mockup đầu tiên và nghĩ rằng thiết kế trông rất đẹp với màu nền tối. Vậy thì, tại sao không tạo ra một phiên bản tối, sau đó tôi có thể tạo ra một tùy chọn để chuyển đổi các bảng định kiểu, như vậy nó sẽ thật gọn gàng!



Bước 18

Vì vậy, tôi đã tạo một bản sao mới của tập tin thiết kế của mình và thay đổi nền thành màu nâu đậm. Thật may mắn, không có nhiều thứ cần phải thay đổi, tôi làm tối logo thành màu đen để nó nổi bật, tôi cũng điều chỉnh một vài màu khác để làm cho thiết kế có ý nghĩa. Nó không đẹp như bản gốc, nhưng là một sự bổ sung ổn cho bộ này .



Kết luận

Như tôi đã đề cập ở phần đầu của hướng dẫn này, bài này không có quá nhiều về kỹ thuật Photoshop. Thực tế là thiết kế web thường chỉ sử dụng các kỹ thuật rất cơ bản để lấp đầy các khối màu. Thiết kế này thiên về việc lựa chọn màu sắc và sắc thái, phông chữ, và sau đó quyết định cách bố trí chúng. Tôi hy vọng bạn đã học hỏi thêm được điều gì đó trong quy này.


Xây dựng thành HTML

Tất nhiên thiết kế một trang web trong Photoshop chỉ là một phần của một công việc thiết kế web. Bước tiếp theo là đưa thiết kế vào HTML.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.