Hướng dẫn: Cách bố trí một trang web với Adobe Photoshop

Có rất nhiều công cụ để thiết kế các trang web và hoạt động một cách hoàn toàn đơn giản và đầy đủ chức năng mà không cần nhập hoặc chạm vào mã. Chúng có vô số, được đề xuất bởi các ứng dụng (Adobe Dreamweaver là một ví dụ) hoặc trực tiếp bởi các nền tảng trực tuyến như Wix. Tuy nhiên, đối với một nhà thiết kế web, biết các quy trình thủ công là điều cần thiết. HTML5 và CSS là các trụ cột cơ bản cho bố cục của trang web và trang đích.

Tuy nhiên, thường xuyên hơn bạn có thể mong đợi, bạn sẽ phải chuyển sang các ứng dụng như Indesign hoặc Adobe Photoshop để bổ sung cho công việc bố trí của bạn và tạo cho chúng một kết thúc hoàn hảo. Hôm nay chúng ta sẽ xem trong hướng dẫn mở rộng này, cách chúng ta có thể bố trí một trang web bằng Adobe Photoshop. Trong phần đầu tiên này, chúng ta sẽ tiếp tục nghiên cứu công việc được phát triển từ Photoshop, mặc dù trong các phần sau, chúng ta sẽ xem cách chúng ta có thể áp dụng công việc này trực tiếp trong mã HTML để làm cho nó hoạt động.

Bắt đầu với thiết kế khung dây của chúng tôi

Để bắt đầu với bố cục và thiết kế của một trang web, điều cực kỳ quan trọng là chúng ta phải bắt đầu bằng cách xác định các yếu tố cơ bản sẽ là gì, đây là khung. Cấu trúc này sẽ đóng vai trò như một giá đỡ để chứa tất cả nội dung (dù là văn bản hay đa phương tiện). Bằng cách xác định từng phần tạo nên trang của chúng tôi, chúng tôi sẽ có thể làm việc trên chúng với độ chính xác hoàn toàn và cung cấp thiết kế trực quan chính xác nhất có thể.

Điều rất quan trọng là chúng tôi phải tính đến các kích thước mà trang web của chúng tôi sẽ có, nếu nó sẽ có đóng hộp hoặc toàn chiều rộng. Một trang web được đóng hộp sẽ nằm trong một vùng chứa nhỏ và do đó một khoảng trống sẽ xuất hiện xung quanh nó. Ngược lại, một trang web đầy đủ sẽ chiếm toàn bộ màn hình của thiết bị tái tạo trang. Lựa chọn giữa một phương thức này hay một phương thức khác trả lời cho các câu hỏi đơn thuần theo phong cách và cũng sẽ phụ thuộc vào nhu cầu của dự án mà chúng tôi đang làm việc. Chúng tôi sẽ làm việc trong ví dụ này với chế độ đóng hộp, vì vậy nó sẽ không chiếm tất cả không gian được cung cấp bởi trình duyệt.

Để tạo khung dây của chúng tôi, điều đầu tiên chúng tôi phải làm là nhập ứng dụng Adobe Photoshop và bao gồm các kích thước mà chúng tôi muốn trang của mình có. Trong ví dụ này, trang của chúng tôi sẽ rộng 1280 pixel. Tuy nhiên, vấn đề kích thước có thể khác nhau tùy thuộc vào điểm đến cuối cùng hoặc thiết bị mà chúng tôi muốn tái tạo trang của mình. Không nghi ngờ gì nữa, để một thiết kế web hoạt động hiệu quả, nó phải đáp ứng và nó phải thích ứng với tất cả các thiết bị trên thị trường. Tuy nhiên, trong trường hợp này, chúng tôi sẽ làm việc để tạo ra một nguyên mẫu mà chúng tôi sẽ tái tạo trên máy tính để bàn. Mặc dù vậy, vấn đề đáp ứng sẽ được thảo luận sau, hiện tại, đây là một hệ thống phân cấp kích thước màn hình để làm việc trong ví dụ này. Hãy nhớ rằng trong trường hợp này, chúng tôi sẽ tạo bố cục của trang đích trong Adobe Photoshop và sau đó di chuyển nó sang HTML5 VÀ CSS3. Mục tiêu của thực hành nhỏ này là chuyển đổi một thiết kế được tạo trong Photoshop thành một thiết kế web có thể sử dụng và tương tác, đáp ứng các chuyển động của người dùng.

Các phép đo cho điện thoại di động

iPhone 4 và 4S: 320 x 480

iPhone 5 và 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Các phép đo trên máy tính bảng

iPad tất cả các kiểu máy cũng như iPad Mini: 1024 x 768

Galaxy Tab 2 và 3 (7.0 inch): 600 x 1024

Galaxy Tab 2 và 3 (10.1 inch): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Các phép đo cho máy tính để bàn

Màn hình nhỏ (ví dụ được sử dụng trong netbook): 1024 x 600

Màn hình trung bình: 1280 x 720/1280 x 800

Màn hình lớn: chiều rộng lớn hơn 1400 pixel, ví dụ 1400 x 900 hoặc 1600 x 1200.

Để bắt đầu phân phối các phần tử và chỉ định các phần trong mô hình web của chúng tôi, điều rất quan trọng là chúng tôi phải tính đến các tỷ lệ để đảm bảo một kết thúc dễ đọc và có giai điệu. Điều cần thiết là bạn phải sử dụng các tùy chọn quy tắc và hướng dẫn mà bạn có thể tìm thấy trong Chế độ xem menu trên cùng. Để làm việc theo tỷ lệ và chính xác, tốt nhất chúng ta nên làm việc từ phần trăm. Chúng tôi sẽ nhấp vào menu xem và sau đó vào tùy chọn «Hướng dẫn mới» để chọn phương thức phân chia. Trong trường hợp này, chúng tôi sẽ thực hiện bốn phần chia theo chiều dọc ở mức 25% và chúng tôi sẽ lấy chúng làm tham chiếu để đặt hình ảnh của chúng tôi ở chân trang và hình ảnh biểu trưng của chúng tôi trong đầu trang.

Có một mã để chỉ định từng khu vực sẽ chiếm mô hình và chức năng mà mỗi người trong số họ sẽ có. Ví dụ, để chỉ ra khu vực mà một hình ảnh sẽ chiếm, chúng ta sẽ tạo ra các hình chữ nhật với một loại chữ thập. Để cho biết rằng chúng tôi muốn đưa video vào một khu vực nhất định, chúng tôi sẽ đưa biểu tượng phát vào vùng chứa của mình. Trong ví dụ đầu tiên này, chúng tôi sẽ chỉ làm việc với hình ảnh, trong ảnh chụp phía trên, bạn có thể thấy khu vực mà Logo từ trang web của chúng tôi.

Đây sẽ là kết quả cuối cùng của wireframe. Như chúng ta có thể thấy, nó được chia thành một tiêu đề bao gồm hình ảnh trong đó logo sẽ được tìm thấy và sẽ đóng vai trò như một liên kết đến trang chủ kèm theo hai tab, một công cụ tìm kiếm và bốn nút trên hộp tìm kiếm. Ngoài ra, đã có trong phần nội dung, chúng tôi đã bao gồm một thanh bên bao gồm thanh phân chia và một loạt các danh mục phân loại loại nội dung sẽ có trên trang web của chúng tôi. Một phần khác có đánh số bao gồm các mục nhập sẽ tồn tại trên trang web của chúng tôi và cuối cùng là danh sách với các thẻ hoặc nhãn meta tiêu biểu nhất trên trang web của chúng tôi.

Trong khu vực nội dung, sẽ được xác định bởi một phần sẽ bao gồm nội dung tự quản lý, chúng tôi sẽ tìm thấy nội dung của các bài viết của chúng tôi. Trong trường hợp này, breadcrumbs hoặc breadcrumb (cho biết cấu trúc tự nhiên của trang web của chúng tôi, tiêu đề của bài viết, siêu dữ liệu, một đoạn văn dưới dạng nội dung văn bản, trong đó có hình ảnh.

Dưới dạng chân trang, chúng tôi đã bao gồm bốn hình ảnh sẽ đóng vai trò như một liên kết đến các khu vực khác trên trang của chúng tôi. Ở đây chúng tôi có thể bao gồm biểu trưng hoặc các phần thú vị khác. Mặc dù trên thực tế, khu vực này sẽ hoạt động giống như phần đầu trang, vì bản thân footer sẽ đi sâu hơn một chút với chính sách sử dụng, thông báo pháp lý và bản quyền.

Khi chúng ta đã xác định cấu trúc hoặc khung cơ bản của trang, chúng ta sẽ phải chuyển sang cấp độ tiếp theo. Điều này sẽ bao gồm thiết kế phù hợp của từng khu vực trên trang web của chúng tôi. Nói cách khác, chúng tôi sẽ bắt đầu "điền" vào từng khu vực này với nội dung cuối cùng sẽ được chèn vào trang web của chúng tôi. Chúng tôi khuyến nghị không nên thiết kế các phần tử này trước khi làm việc trên wireframe vì rất có thể nếu chúng tôi làm theo thứ tự này, chúng tôi sẽ cần phải sửa đổi tỷ lệ của chúng sau này. Chúng ta có nguy cơ bóp méo hình ảnh của mình và phải làm lại thiết kế của từng yếu tố, điều này sẽ trở nên lãng phí thời gian hoặc kết quả chất lượng thấp hơn.

Trong trường hợp này, thiết kế trang web của chúng tôi sẽ cực kỳ đơn giản. Chúng tôi sẽ sử dụng vật liệu thiết kế giới luật, vì chúng tôi sẽ sử dụng biểu trưng của Google để minh họa cho thực tiễn này. Tôi phải làm rõ rằng mục đích của hướng dẫn này là để minh họa kiến ​​thức kỹ thuật, vì vậy kết quả thẩm mỹ trong trường hợp này là không liên quan. Như bạn có thể thấy, từng chút một, chúng tôi đã lấp đầy không gian với tất cả các khu vực mà chúng tôi đã xác định trước đó trong sơ đồ của mình. Tuy nhiên, chúng tôi đã thực hiện một sửa đổi nhỏ vào phút cuối. Như bạn có thể nhận thấy, chúng tôi đã giảm đáng kể kích thước biểu trưng của mình và chúng tôi đã bao gồm một đường phân chia trong khu vực tiêu đề phía dưới kết nối hoàn hảo với menu phía trên. Trong trường hợp này, chúng tôi đã sử dụng các nút và vật liệu từ một ngân hàng tài nguyên. Là nhà thiết kế, chúng tôi có thể tự thiết kế chúng, (đặc biệt tùy chọn này được khuyến khích nếu chúng tôi muốn nó thể hiện một chất bổ sung rất giống với tùy chọn được trình bày bởi hình ảnh thương hiệu hoặc logo).

Điều quan trọng là chúng ta cần ghi nhớ rằng để đưa ra ví dụ này, chúng ta sẽ làm việc ở hai cấp độ khác nhau. Một mặt, chúng tôi sẽ làm việc trên các đối tượng và mặt khác là sự xuất hiện của trang web. Đó là, một mặt trong khung của trang web của chúng tôi và mặt khác trong tất cả các yếu tố nổi mà khung xương này sẽ hỗ trợ. Bạn sẽ nhận thấy rằng có những khu vực sẽ không nổi chút nào, chẳng hạn như khu vực mà thanh bên của chúng ta sẽ chiếm, phần trước hoặc thanh phân chia phân chia tiêu đề khỏi phần nội dung.

Cấu trúc 1, 2, 3 và 4 sẽ là một phần của lý lịch của trang web của chúng tôi, vì vậy trong thực tế, chúng tôi sẽ không cần thiết phải xuất như vậy từ Adobe Photoshop, mặc dù chúng tôi có thể làm điều đó nhưng không cần thiết. Khi nó đến Màu phẳng (Một trong những tính năng thiết yếu của thiết kế phẳng và thiết kế material design, chúng có thể được áp dụng một cách hoàn hảo thông qua mã sử dụng CSS stylesheet). Tuy nhiên, phần còn lại của các phần tử phải được lưu để chèn sau này vào mã HTML của chúng tôi. Trong sơ đồ nhỏ này, chúng tôi cũng đã tái tạo các khu vực thuộc nền của trang để chúng tôi có ý tưởng rõ ràng về diện mạo cuối cùng của trang web của chúng tôi.

Như bạn có thể nhận ra, ý nghĩa của việc tạo lược đồ này trong Adobe Photoshop là để có được kích thước thực của mỗi phần tử và làm rõ cách sắp xếp và cấu trúc của mỗi phần tử. Tất nhiên, nội dung văn bản không có vị trí trong giai đoạn này của quá trình vì nó phải được cung cấp từ trình soạn thảo mã của chúng tôi. Chúng ta cũng phải chỉ ra rằng trong thực tế này, chúng ta sẽ làm việc với các nút và phần tử tĩnh, mặc dù nói chung chúng thường được áp dụng từ các khung công tác như Bootstrap hoặc trực tiếp từ Jquery.

Khi chúng ta đã tạo từng phần tử sẽ tạo nên trang web của mình, đã đến lúc bắt đầu xuất chúng và lưu chúng trong thư mục hình ảnh nằm bên trong thư mục dự án HTML. Điều quan trọng là bạn phải quen với việc xuất từ ​​wireframe của mình, vì rất có thể bạn sẽ cần sửa đổi một số phần tử ban đầu dựa trên cấu hình khung. (Ví dụ trong trường hợp này, chúng tôi đã thay đổi kích thước của các nút ban đầu, biểu trưng và hầu hết các yếu tố là một phần của bố cục, bao gồm cả các hình ảnh ở khu vực phía dưới).

Điều quan trọng là chúng ta học cách lưu trữ bất kỳ mục nào một cách độc lập để lưu chúng với kích thước chúng có và một cách chính xác. Bất kỳ lỗi nào, dù rất nhỏ, có thể ảnh hưởng đến tất cả các yếu tố là một phần của trang web của bạn. Hãy nhớ rằng chúng sẽ liên quan đến nhau và phải có kích thước hoàn hảo để có thể nhập chúng từ HTML trong web cuối cùng. Trong trường hợp này, chúng ta sẽ cần phải cắt và lưu các phần tử sau một cách độc lập:

• Biểu tượng của chúng tôi.
• Tất cả các nút (là một phần của menu chính và phần còn lại).
• Tất cả các hình ảnh.

Chúng tôi có thể làm điều đó bằng nhiều cách và có lẽ bạn sẽ tìm thấy một giải pháp thay thế hiệu quả hơn cho mình. Nhưng nếu đây là lần đầu tiên bạn định làm kiểu bố cục này, tôi khuyên bạn nên làm theo các mẹo sau.

• Đầu tiên, bạn phải vào thư mục chứa tệp PSD chứa wireframe của chúng tôi và sao chép nó nhiều lần như các phần tử bạn sẽ xuất. Trong trường hợp này, chúng tôi đã tạo 12 bản sao từ bản gốc và đã lưu chúng trong cùng một thư mục. Tiếp theo, bạn sẽ đổi tên từng bản sao và gán cho mỗi bản sao tên của phần tử mà nó chứa. 12 bản sao của chúng tôi sẽ được đổi tên: Logo, nút menu 1, nút menu 2, thanh tìm kiếm, nút trên 1, nút trên 2, nút trên 3 và nút trên 4. Bốn bản còn lại sẽ được đổi tên thành: Hình ảnh 1, Hình ảnh 2, Hình 3 và Hình 4.
• Sau khi hoàn tất việc này, chúng tôi sẽ mở tệp có tên logo.
• Chúng tôi sẽ đi đến bảng màu của chúng tôi và xác định vị trí lớp có chứa logo của chúng tôi. Sau đó, chúng tôi sẽ nhấn Ctrl / Cmd trong khi chúng tôi nhấp vào hình thu nhỏ của lớp đã nói. Bằng cách này, logo sẽ được chọn tự động.
• Bước tiếp theo sẽ nói với Photoshop rằng chúng ta muốn nó cắt bỏ logo đó một cách chính xác. Đối với điều này, chúng tôi sẽ chỉ phải thực hiện cuộc gọi đến công cụ cắt từ phím hoặc lệnh C.
• Khi chúng tôi đã hoàn thành việc này, chúng tôi sẽ nhấp vào nút Enter để xác nhận việc cắt.
• Bây giờ chúng ta sẽ chuyển đến menu Tệp trên cùng để nhấp vào lưu cách làm. Chúng tôi sẽ chọn tên, trong trường hợp này sẽ là «Biểu trưng» và chúng tôi sẽ chỉ định một định dạng PNG, vì là tệp cung cấp chất lượng cao nhất trên web.
• Chúng tôi sẽ lặp lại quy trình với tất cả các bản sao và các phần tử. Khi bạn đã cắt, hãy đảm bảo rằng phần còn lại của các lớp trong bảng màu của chúng tôi là vô hình hoặc bị loại bỏ. Bằng cách này, chúng ta có thể lưu từng phần tử với nền trong suốt.

Trong trường hợp này, chúng tôi đang chọn nút menu 2 từ bảng các lớp. Bạn có thể thấy trong ảnh chụp màn hình cách các giới hạn của nút của chúng tôi đã được tự động chọn.

Khi chúng tôi chọn công cụ cắt từ phím C, canvas của chúng tôi chỉ được thu nhỏ lại bằng kích thước của nút của chúng tôi.

Bây giờ là lúc để lưu từng phần tử một trong trang web của chúng tôi và đưa chúng vào thư mục hình ảnh và chúng tôi sẽ sử dụng sau này. Chúng tôi sẽ thực hiện các cuộc gọi từ mã của mình và chúng tôi sẽ tiếp tục với bố cục của mình nhưng từ bây giờ trở đi từ trình chỉnh sửa mã của chúng tôi.

Mặc dù có nhiều công cụ và lựa chọn thay thế để bố trí một trang web làm cho quá trình hoàn toàn trực quan, nhưng điều rất quan trọng là chúng ta phải học cách thực hiện nhãn hiệu. Bằng cách này, chúng ta sẽ tìm hiểu các nguyên tắc cơ bản đằng sau việc thiết kế một trang web là gì.

tóm lại:

1. Thiết kế cấu trúc của trang web, đặc biệt chú ý đến nội dung bạn muốn truyền tải và các phần mà bạn phải tạo trên trang web của mình.
2. Làm việc trên bộ xương của bạn hoặc wireframe từ Adobe Photoshop cho biết nội dung sẽ xuất hiện ở khu vực nào và định dạng của chúng.
3. Dựa vào các biện pháp và thương hiệu mà bạn đã phát triển trước đó, hãy bắt đầu thiết kế bề mặt của web. Bao gồm tất cả các phần tử (cả nổi và cố định). Đừng quên bao gồm các nút, logo và hình ảnh tương ứng.
4. Cắt bỏ tất cả các yếu tố là một phần của dự án từng cái một. Đảm bảo rằng họ có các biện pháp phù hợp và chúng sẽ không gây ra vấn đề cho bạn sau này.
5. Lưu tất cả các phần tử ở định dạng PNG trong thư mục hình ảnh bên trong thư mục dự án HTML.
6. Hãy nhớ rằng dự án này sẽ có một đầu ra cho cửa sổ web, vì vậy điều rất quan trọng là bạn phải tính đến chế độ màu và áp dụng RGB.
7. Lấy cảm hứng từ các trang web khác mà bạn ngưỡng mộ trước khi bắt đầu làm việc và đừng quên thảo luận điều này với các thành viên trong nhóm của bạn. Trong trường hợp đó là một dự án dành cho khách hàng, hãy cố gắng bám vào cuộc họp càng xa càng tốt.