Просмотрев множество различных современных веб-сайтов, разбросанных по Сети, постепенно собираешь вдохновение и приступаешь к разработке своего — аккуратного и стильного. Ключевыми моментами нашего сайта будут: горизонтальные панели для разделения содержимого по определенным областям, пестрая шапка, представляющая сайт, дружественное приветственное сообщение с примерами работ, двухколоночная главная область и информативный подвал.

Хорошим началом в любой работе над дизайном будет набросок ваших идей карандашом на бумаге. Свобода действий этим инструментом позволяет с легкостью изобразить любую вашу задумку в грубом приближении.

Планирование схемы, или структуры документа также помогает подобрать наилучшие места для всех элементов дизайна и разобраться с их иерархией.

Создайте новый документ в фотошоп. Я обычно выбираю размеры пошире, чтобы иметь возможность оценить в дальнейшем общий вид макета на современных широкоформатных мониторах.

Поместите посередине документа направляющие на расстоянии 960px друг от друга и сделайте между ними простейшую сетку.

Начнем с создания панели для шапки. Создайте выделение через весь документ и залейте его белым цветом. Выполните двойной щелчок по слою, чтобы вызвать меню стилей слоя и добавьте вертикальный градиент (Gradient Overlay) от серого к белому.

Теперь создадим основную область шапки, которая будет содержать полезную информацию. На новом слое создайте выделение, заполнив его каким-нибудь цветом, и добавьте слою заливку градиентом (стиль Gradient Overlay) двух насыщенных оттенков. Также необходимо добавить легкую тень (Inner Shadow), чтобы придать глубины изображению.

Тонкий налет текстурированности может ощутимо оживить дизайн. Выделите маской область шапки, нажатием клавиш Ctrl + Shift + C скопируйте слитые слои и вставьте все это на новый слой. Откройте Filter > Noise > Add Noise, чтобы воспроизвести простую текстуру, установите режим наложения слоя в Multiply и задайте приемлемый уровень Opacity.

После этого вставьте лого компании, разместив его в соответствии с вашей сеткой, после этого поработайте немного со стилями слоя. Добавьте Gradient Overlay в соответствии с цветами шапки, затем — очень легкую тень Inner Shadow.

Используя Type Tool, создайте надписи для ссылок основной навигации, задайте им средний серый цвет, при этом активную ссылку сделайте заметно темнее остальных.

Шапка — отличное место для представления вашего сайта. С насыщенным фоном он притягивает взгляд пользователя, поэтому не использовать его для небольшого заголовка с фирменной типографикой и текста, представляющего ваш бренд — было бы нелогично.

Продолжаем заполнять приветствие, на этот раз используем шрифты Arial, или Helvetica из базового шрифтового набора любой современной ОС.

Поместите на предусмотренное для иллюстраций место изображение лэптопа — такой ход сильно разбавляет композицию и даже позволяет использовать его в практических целях (например, прокручивать на его экране элементы вашего портфолио).

Подчеркните эту область подсветкой в виде радиального градиента, растянутого за лэптопом. Это добавит выразительности картинке и немного приподнимет ее над страницей.

Под основной шапкой растяните еще одно выделение и залейте его бело-серым градиентом.

Разделите среднюю часть страницы на две колонки, с направляющими, выровненными по вашей сетке. В левой части будет находиться основной текст, в то время как правая колонка будет содержать меньшую по ширине линейку. Напишите какую-нибудь текстовую болванку в главный раздел, четко выверив размеры шрифта и тщательно отстроив интерлиньяж в абзацах для комфортного чтения текста.

Нижнюю часть главной текстовой зоны можно приспособить для отображения последних записей блога. Разделите колонку еще на две и покажите пример выделения новости. Ссылки заголовков должны восприниматься как нечто кликабельное, поэтому выделите их цветом, чтобы они визуально различались среди своего окружения.

В правом сайдбаре нарисуйте с помощью Rounded Rectangle Tool небольшую панель. Первоначальный цвет в данном случае не играет особой роли, так как мы все равно ее будем декорировать в дальнейшем.

Выполните двойной клик по этому слою и задайте ему набор стилей, включая бело-серый градиент, тонкий серый контур и мягкую тень Inner Shadow.

Пусть на этой панели крутятся ваши, к примеру, самые лучшие проекты. Озаглавьте ее “Featured Project”, поместите туда небольшой скриншот какого-нибудь веб-сайта и добавьте небольшое описание.

Нарисуйте еще один прямоугольник с закругленными углами для использования его в качестве кнопки. Добавьте туда пару стилей (градиент, контур) в соответствии с общей картиной композиции.

Придумайте короткое, информативное название для кнопки, приглашающее пользователя просмотреть остальные работы студии.

Обозначьте окончание документа областью подвала внизу экрана. Залейте эту часть светло-серым цветом, отличным от цвета фона главной области.

Нарисуйте круглую фигуру и залейте ее градиентом от черного к прозрачному. Затем нажмите Ctrl + T для трансформации, сожмите и растяните ее так, чтобы получилось подобие мягкой вытянутой тени.

Поместите тень по центру экрана, затем удалите лишнюю часть, выступающую за пределы подвала. Подкорректировав значение Opacity, вы получите замечательную легкую тень, отбрасываемую страницей и приподымающую ее над экраном.

Подвал — хорошее место для содержания дополнительных элементов страницы. К примеру, это может быть форма для ввода клиентских данных. Наполните подвал текстом, поместите пару полей для ввода и украсьте их стилем Inner Shadow.

Середину подвала используйте для представления информации о своей компании. Выбирайте уже использовавшиеся вами шрифты и размеры кегля из шапки и основного раздела для сохранения выдержанности и постоянства.

Осталось добавить контакты в нижнем правом углу страницы.

Вот, что у нас должно получиться в конечном счете:

Удачи!