Создание страницы-визитки: от дизайна до функционала. Часть I

Урок рассчитан как на новичков, так и на людей умеющих рисовать, но не имеющих представления о вёрстке сайтов.



В этом большом уроке я покажу процесс создания сайта-визитки для фрилансера от дизайна до вёрстки.

Это пригодится тем, кто рисует и верстает самостоятельно.



На что сделан упор при создании макета:

UI/UX

работа с сеткой

создание своих паттернов

использование «быстрых» клавиш



На что сделан упор при вёрстке страницы:

работа с CSS-фреймоворком 960gs

базовая работа с jQuery

валидная вёрстка XHTML



Давайте в первую очередь ограничим себя базовым техническим заданием.



Нам нужен сайт, состоящий из одной страницы, на которой представлены:

информация о фрилансере

услуги

портфолио

контакты.

Требуется плавный скроллинг блоков и возврат к меню.

Остальное по ходу работ.



Используемый язык Photoshop CS5 — английский.

ОС — Windows



Используемые шрифты:

Open Sans, Ubuntu (можно найти в Google font directory), Impact, Trebuchet MS

Примечание:

используется как латиница, так и кириллица, чтобы показать используемый шрифт



Советы:

Если хотите скрыть сетку и направляющие, нажмите ctrl+H, чтобы их вернуть, повторите нажатие комбинации клавиш.

Новый документ: ctrl+N

Новый слой: ctrl+shift+N

Выделить слой: ctrl + клик на слое

Снять выделение: ctrl+D

Переместить слой вверх: ctrl+[

Переместить слой в самый вверх: ctrl+[

Переместить слой вверх: ctrl+shift+]

Переместить слой в самый вверх: ctrl+shift+]

Еопировать слой: ctrl+J

Сброс цветов: D



Ссылки по теме:

CSS-фреймворк 960 http://960.gs/

Google Web Font http://code.google.com/p/googlefontdirectory/





Пожалуй начнём.

Скачаем по ссылке архив с CSS-фреймворком (http://960.gs/). Распакуем, перейдём в папку templates/photoshop и откроем файл 960_grid_12_col.psd в Photoshop. 
Как вы видите, у нас есть размеченная заготовка. 

Изменим размеры документа по высоте: Image - Canvas Size 2400px. Теперь разблокируем все слои в группе 12 Col Grid и вытянем их по высоте. 

В документе не хватает горизонтальной сетки, добавим. 

Создадим файл с такими размерами: 1x20 пикселей
Зальём цветом #ff0000, выставим Opacity 20%
Проведём горизонтальную линию с помощью карандаша #9a4444, выставим Opacity 60%.

Откроем Edit, выберем Define pattern. У нас есть первый паттерн. Зальём документ этим паттерном, предврительно создав новый слой. После заливки, переместите слой в группу 12 Col Grid и заблокируйте её от редактирования.

Важно: советую сохранить этот файл, он может не раз вам пригодиться в дальнейшем!

Теперь у нас есть рабочее поле.


Сбросим используемые цвета (D)

Сделаем с помощью Rectange tool (U) блок в вверхней части нашего документа с высотой 80px.

Сделаем его копию (ctrl+J), передвинем вниз до отметки 460px и изменим высоту до 760px. Это будет блок «Портфолио»

Сделаем ещё одну копию слоя и передвинем его в самый низ, сократив высоту до 400px — это будет блок «Контакты».

Теперь будем накладывать паттерны на фон и наши блоки.

Создадим новый документ с размерами 12x12 пикселей, фон белый.
Выберем цвет #f2f2f2 и проведём две линии с помощью карандаша (B) на новом слое.

Откроем Edit, выберем Define pattern, сохраним как Light.

Изменим фоновый слой с белого на тёмно-серый #2a2a2a, а слой с диагональными линиями — #1d1d1d

Откроем Edit, выберем Define pattern, сохраним как Dark.

Зальём получившимся паттернами наш документ с будущим сайтом:
паттерн Light для основного фона, паттерн Dark для блоков (выберем в панели слоёв Add a layer style, Pattern overlay)

Важно: Дайте слоям имена, это важно: учитывая количество слоёв, которые будут появляться, мы можем легко запутаться с навигацией по слоям, так что мы будем давать имена слоям, объединять их в группы.

Слой с фоном: background_bg
Верхний блок — header_bg
Средний блок (Портфолио) — middle_bg
Верхний блок (Контакты) — footer_bg

Теперь подошла очередь для декорирования наших блоков. Мы сделаем их зубчатыми. Для этого создаём новый документ с размерами 47x27 пикселей.
Рисуем прямоугольник Rectangle tool (U) в половину документа
Выбираем Poligon tool (U), Sides ставим 3 и рисуем треугольник. 
Нам нужно продублировать треугольник и поместить рядом. Обратите внимание, что первый треугольник нам надо сместить на 1 пиксель влево (см. изображение).

Проведём карандашом горизонтальную линию на засветлённом месте, растеризуем шейпы, всё склеим, обрежем лишнее с помощью Crop tool (C) 

Откроем Edit, выберем Define pattern, сохраним как noun.

Создадим новый документ с размерами 1020x27 пискселей, добавим новый слой и зальём паттерном noun, получившийся слой перетянем на наш документ с макетом и поставим под header_bg, middle_bg, над middle_bg и footer_bg. 

Продублируем его (ctrl+J), перейдём в Edit, Transform - Flip Vertical.

К каждому слою noun применим Pattern overlay, выберем паттерн Dark

Теперь настало время объединить слои в группы: header, middle, footer.

Пришло время забить макет контентом. Я предварительно сделал скриншоты трёх сайтов и воспользовался сервисом Browser Cover и сделал с помощью него три картинки, которые мы и будем использовать в качестве промо-блока.
Картинка в центре по ширине 550 пикселей, боковые — по 450 пикселей.

Важно: Когда будете делать скриншоты экрана, делайте их на одинаковом разрешении!

Добавим вступительный текст с заголовком:

Займёмся блоком «Услуги». 

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

Разобьём информацию на три колонки, добавим иконок, чтобы не было так скучно и уныло.

Скопируем группу block_title, пеместим вниз, но сделаем горизонтальные линии более светлыми (Add a layer style, Color ovelay, #c1c1c1).

Добавим мини-меню, которое будет переключать блоки со скриншотами сайтов и логотипами (соответственно, на свёрстанной странице).

Блок «Работы». Сделаем скриншоты на одинаковом разрешении и выставим их в ряд (ширина скриншота 300 пикселей), добавим тень. 

Для этого рисуем прямоугольник, затем, Edit - Transform path - Perspective и делаем из прямоугольника трапецию. Выделяем прямоугольник (ctral+click) на слое, добавляем размытие Filter - Blur — Gaussian blur 6px (Photoshop предложит растеризовать слой, соглашаемся)/

Убираем выделение со слоя (ctrl+D) и добавляем ещё раз Gaussian blur, но с параметрами 4px. Перемещаем тень под скриншот. Копируем слой с тенью и помещаем под остальные скриншоты. 

Добавим кнопку, при нажатии на которую будет показан срктый блок с другими работами. По сути это прямоугольник с закруглёнными краями (8 пискелей) и текстом. 

Цвет кнопки: #a4ba08, Цвет текста #ffffff

У нас осталось много места до блока «Контакты», так что передвинем группу footer выше, вытянем слой footer_bg до самого низа. Лучше у нас на данном этапе будет много пустого места внизу, чем мы будем его добавлять. В финальной стадии мы обрежем ненужное.

Скопируем группу middle_block_title и поместим её в группу footer.

Сделаем формы для отправки почты. По сути, инпуты формы, это Rounded rectangle tool с углами 8 пикселей, градиентом, внутренней, внешней тенью и обводкой.

Добавим иконки и укажем контактные данные.

Самостоятельно вы сможете вставить логотип и оформить меню.

Во второй части мы сверстаем сайт и добавим динамических эффектов
http://techdesigner.ru/blogs/post-7824/