Урок расчитан как на новичков, так и на людяй умеющих рисовать, но не имеющих представления о вёрстке сайтов.
 
В этом большом уроке я покажу процесс создания сайта-визитки для фрилансера от дизайна до вёрстки.
Это пригодится тем, кто рисует и верстает самостоятельно.
 
На что сделан упор при создании макета:
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 пикселей, градиентом, внутренней, внешней тенью и обводкой.
 

Добавим иконки и укажем контактные данные.
 
Самостоятельно вы сможете вставить логотип и оформить меню.
 
Во второй части мы сверстаем сайт и добавим динамических эффектов