Thiết kế trang fan hâm mộ từng bước một

Bài viết này đã được lên kế hoạch và chuẩn bị từ rất lâu. Ban đầu, nó định được phát hành như một phần tiếp theo trong chuỗi bài viết "Tạo fan-site" (một và hai). Vậy thì bài viết này đang làm gì trên blog Fable 3? Câu trả lời đơn giản: trong trường hợp thiết kế, không có một ví dụ cụ thể nào, thật khó để giải thích điều gì đó. Không có thiết kế hình cầu trong chân không. Vì vậy, khi một thời gian trước quyết định làm lại một trong những fan-site của chúng tôi, chuyên về series trò chơi Fable, tôi đã quyết định rằng đây là ví dụ mà tôi sẽ "chia sẻ những điều bí mật".

Trên thực tế, tôi không có ý định tiết lộ bí mật vĩ đại của vũ trụ hoặc dạy cách tạo ra một thiết kế độc đáo cho fan-site của bạn qua một bài viết duy nhất. Chủ đề thiết kế rất rộng lớn và đa dạng, không thể một nhà thiết kế có thể giải thích hoàn toàn chỉ bằng một ví dụ... Tôi cũng muốn nhắc lại ngay rằng, đây không phải là bài học về Photoshop. Có rất nhiều rồi mà không cần tới tôi, Google sẽ giúp bạn. Là một tác giả, tôi dự đoán rằng bạn đã quen thuộc với các nguyên tắc cơ bản của Photoshop, vì vậy đừng mong đợi các hướng dẫn từng bước "nhấn vào đây", "đi tới đó". Đây không phải là hướng dẫn về Photoshop, đây là một lớp học về thiết kế. Tôi sẽ nói về cách tôi làm việc, đưa ra một số mẹo và bí mật, những thứ không phải là bí mật nhưng tại sao mọi người thường quên. Hãy bắt đầu :)

Chuẩn bị giá vẽ và vải

Trong trường hợp của chúng ta, giá vẽ sẽ là, như bạn có thể đoán, Photoshop CS4, và vải là tệp mới, vẫn còn trống của chúng ta. Ngoài "photomanipulation", cũng có những chương trình khác, chẳng hạn như Gimp. Một số người có thể làm việc trong Corel Draw. Nhưng dù sao đi nữa, nhân loại vẫn chưa phát minh ra một chương trình tốt hơn Photoshop cho thiết kế web. Đây là công cụ chính của nhà thiết kế web. Corel Draw hay Adobe Illustrator có thể được sử dụng để tạo ra các yếu tố riêng lẻ cho thiết kế của bạn, nhưng "lắp ráp" mẫu thiết kế thì tiện lợi nhất trong Photoshop.

Chúng ta đã giải quyết "giá vẽ", giờ thì đến vải. Ở đây, cần nhớ về độ phân giải màn hình. Khoảng năm năm trước, độ phân giải 1024x768 thống trị khắp nơi, trong khi 1280x960 chỉ mới bắt đầu được mọi người biết đến. Vài năm trước, 1680x1050 và 1600x1200 được coi là độ phân giải cao. Nhưng nay, màn hình với độ phân giải Full HD mặc định ngày càng trở thành tiêu chuẩn, tức là chúng ta nên định hướng độ phân giải tối đa tại 1920x1080. Tuy nhiên, 1024x768 không vội vàng nghỉ hưu, vì vậy đó là mức độ tối thiểu của chúng ta. Thực tế thì chiều rộng là điều quan trọng hơn, vì chiều cao của trang web của chúng ta sẽ rất dài, giống như 90% tất cả các trang web trên mạng.

Trước đây, người ta thích tạo ra các trang "kéo dài". Nghĩa là, các yếu tố riêng lẻ của thiết kế được tạo thành từ các yếu tố lặp lại, khiến cho trang web kéo dài ra chiều rộng theo độ phân giải của người dùng. Nhưng với sự xuất hiện của Full HD, phương pháp điều chỉnh trang web theo độ phân giải của người dùng đã trở nên không thẩm mỹ. Mắt người được thiết kế để thông tin, nằm trong khoảng cách của một cánh tay, được tiếp nhận tốt ở chiều rộng khoảng bằng một trang A4. Mọi thứ rộng hơn - không còn trong tầm nhìn. Vì vậy, phần nội dung gần đây thường được làm hẹp lại, trong khi không gian bên trái và bên phải được lấp đầy bằng một số trang trí nền. Cả cừu đều no và sói đều an toàn :) Và do đó, phần nội dung của chúng ta sẽ là 1000 pixel *(đừng quên rằng trong trình duyệt bên phải có thanh cuộn,