По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте:-)

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.

Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

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

Иконки социальных закладок

Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это , но можно поставить и обычные скачанные иконки. Скачать можете вот .

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот, что нужно сделать:

Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

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

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

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

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).

Сразу же нужно создать 2 отдельных группы:

• Метки — в эту группу мы будем добавлять текст с размером наших колонок.
• Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

В той же группе добавьте метку с помощью текста как у меня на рисунке выше.

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Теперь добавляем текст и смотрим, что у нас получилось:

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит:) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта.

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

Вот и всё, друзья, у нс готовый макет, который уже можно верстать:)

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.

До скорых встреч.

Шаг 1: Подготовка Рабочей области
Создайте новый документ. Ширина документа должна быть 950 пикселей.

Добавьте направляющие по левой и правой границе документа.

Разметка должна быть 950 пикселей. Но нам необходимо дополнительное пространство для комфортной работы. Так что увеличьте ширину документа используя диалоговое окно «Размер Холста». Нажмите Ctrl+Alt+C (Изображение->Размер Холста (Image->Canvas Size)) чтобы открыть окно и ввести значение.

Шаг 2: Создание и Организация Групп Слоев
Очень часто мы сталкиваемся с несколькими сотнями слоев разбросанных по всей палитре и трудно определить отдельно расположенный предмет, особенно когда занимаешься разметкой. Так что планируйте заранее и сохраняйте последовательность. Я классифицировал разметку в несколько групп которые содержат соответствующие элементы. Щелкните на кнопке «Создать новую группу» (Create a New Group), чтобы создать группу. Сделайте двойной щелчок, чтобы переименовать группу.

Шаг 3: Создаем Шапку (Header)
Давайте начнем с Заголовка. Мы собираемся использовать Бумажную текстуру для создания заголовка. Отгройте «Бумажную текстуру 1». Нам нужно изолировать бумагу от фона. Щелкните на черном фоне используя Инструмент «Волшебная палочка» (Magic Wand Tool). Выберется фон, инвертируйте выделение, чтобы выбрать бумагу. Нажмите Ctrl+Shift+I (Выделение>Инверсия (Select>Inverse).

Подгоните выделение используя команду «Уточнить маску», чтобы увеличить контрастность и резкость. Нажмите Ctrl+Alt+R (Выделение>Уточнить маску (Select>Refine Edge)). Отрегулируйте параметры, чтобы детализировать выделение.

Нажмите Ctrl+J (Слои>Новый>Скопировать на новые слои (Layer>New>Layer via Copy)) чтобы отделить выделение.

Перетащите текстуру на наш документ. Поместите ее в группу «Заголовок». Выделите слой и пройдите Редактирование>Трансформирование>90 градусов по часовой стрелке (Edit>Transform>90 degree CCW). Затем используя тоже меню выберите «Отразить по горизонтали» (Flip Horizontal). Поместите ее на место заголовка. Я немного изменил размер (примерно 75%). Выполните все трансформации за один раз.

Нажмите Ctrl+U чтобы загрузить окно «Цветовой фон/Насыщенность» (Hue/Saturation). Уменьшите Яркость до -100. Мы получили приятные очертания текстуры со всеми ее краями.

Добавьте логотип. Используйте шрифт «VTKS Caveirada». Вы можете его скачать бесплатно.

Шаг 4: Текстурирование Фона
Давайте создадим текстуру фона. Перетащите «Бумажную текстуру 3» на ваш файл. Как следует разместите ее. Разместите ее ниже всех слоев на палитре.

Десатурируйте текстуру нажатием комбинации Ctrl+Shift+U. Нажмите Ctrl+M и отрегулируйте яркость и контрастность регулированием кривой.

Шаг 5: Определение области для Основного Контента
Разметим две колонки. Для начала мы определимся с областью для основного контента. Щелкните на группе «Контент» и выберите область использую инструмент «Прямоугольная область» (Marquee Tool). Убедитесь что ширина 600 пикселей. Вы можете использовать окно с информацией, чтобы видеть размеры. Залейте цветом #ffffff.

Установите тонкую обводку в 1 пиксель для области контента.

Теперь установим другую текстуру на область контента. Откройте «Бумажную текстуру 2», выделите и скопируйте среднюю ее чать.

Поместите поверх области контента. Измените размер текстуры.

Нажмите Ctrl+Shift+U, чтобы десатурировать текстуру и отрегулировать яркость используя кривые.

Теперь нажмите Ctrl+левый щелчек мыши на окне контента чтобы выбрать. Затем сожмем выделенную область 3мя пикселями.

В заключении инвертируйте выделение и нажмите клавишу «Delete». Это придаст приятный контраст по краю.

Добавьте Маску слоя (Layer Mask) на слой текстуры. Выберите градиент «черный и белый» и установите на маску, чтобы смешать нижний край текстуры с фоном.

Шаг 6: Добавление Основной Навигации
Выберите группу «Навигация». Создайте Основную навигацию поверх контента. Используя инструмент «Прямоугольная область» (Marquee Tool) создайте кнопку. Используйте заливку для кнопок цветом #000000.

Давайте добавим сложенный край для навигации. Возьмите последнюю кнопку в ряду. Сделайте выделение на краю и выберите Выделение>Свободное трансформирование (Select>Transform Selection). Прокрутите выделенную область на 45 градусов удерживая клавишу Shift. Затем нажмите Enter, чтобы подтвердить Трансформацию.

Нажмите Ctrl+Shift+J (Слои>Новый слой>Скопировать на новый слой (Layer>New>Layer via Copy)). Этим мы отделим кусочек от края. Нажмите Ctrl+T затем правый щелчок мыши и выберите повернуть на 180 градусов.

Осветлите кусочек используя окно «Цветовой фон/Насыщенность».

Шаг 7: Добавляем Контент
Для начала добавьте свободного места для окна контента, это придаст немного свободного места. Удерживая Ctrl кликните на самом нижнем окне контента чтобы его выбрать. Откройте Выделение>Свободное трансформирование. Я хочу добавить 20 пикселей свободного пространства с каждой стороны, в общем 40 пикселей. Вычтем их из ширины окна контента и введем данные в опциональную панель (660-40=620 пикселей).

Продолжение следует...

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

Для того, чтобы нам начать создавать направляющие в фотошопе , необходимо включить линейку . Заходим в пункт меню "Просмотр -> Линейки" или нажимаем сочетание клавиш "Ctrl+R".

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

Теперь давайте рассмотрим как создавать направляющие линии . Они бывают двух видов: вертикальные и горизонтальные. Для того, чтобы создать направляющую достаточно просто, при включенном инструменте "Перемещение", потянуть линейку левой клавишей мыши вниз или вправо. Направляющие можно создавать без ограничения.

Также, направляющие можно создавать через меню "Просмотр -> Новая направляющая".

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

Также, направляющей можно поменять ориентацию с горизонтальной на вертикальную и наоборот. Для этого достаточно просто щелкнуть по ней с зажатой клавишей Alt на клавиатуре.

Теперь давайте рассмотрим как убирать направляющие. Убрать их можно или на время или полностью. Чтобы временно отключить их показ или обратно включить нажимаем сочетание клавиш "Ctrl+;". Чтобы убрать их полностью заходим в пункт меню "Просмотр -> Удалить направляющие".

Рассмотрим еще два момента, которые могут нам понадобиться. Первый - "Просмотр -> Закрепить направляющие" или сочетание клавиш "Alt+Ctrl+;". Этот пункт позволяет запретить перемещение линий. Второй - "Привязка". Чтобы ее включить нужно зайти в меню "Просмотр -> Привязка". Данный пункт отвечает за прилипание изображения к направляющим или направляющих к изображению. К примеру, вы ведете слой к направляющей и как только он приблизится к ней максимально близко, произойдет прилипание края изображения. Точно также, когда вы ведете направляющую, она прилипнет к краю снимка как только приблизится максимально близко.

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

Идем дальше и на очереди у нас быстрые направляющие - это временные линии, которые служат для выравнивания объектов. Они помогаю разместить объект относительно уже существующих объектов или всего холста. Включить их можно через пункт меню "Просмотр -> Показать -> Быстрые направляющие".

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

Дальше давайте рассмотрим инструмент "Сетка". Включить его можно в меню "Просмотр -> Показать -> Сетка" или сочетание клавиш " Ctrl+" ". Настроить ее можно также в разделе "Редактирование -> Установки -> Направляющие, сетка и фрагменты". Можно настроить промежуток, через который будут идти основные линии, а также как будут делиться эти промежутки.

Этот инструмент позволяет нам выровнять объекты относительно друг друга и особенно актуален когда их много.

Если у вас остались вопросы, то ниже вы можете посмотреть видеоурок на эту тему.

Видеоурок:

Очередной урок, посвященный веб-дизайну. Здесь мы покажем, как создаются макеты для сайтов с использованием системы направляющих 960 Grid System. Вы увидите, как при помощи таких приемов макетирования процесс правильного позиционирования становится четким и прозрачным. К тому же по окончанию данного урока у вас получится стильный, аккуратный скин для вашего сайта.

1 Шаг

Начните с создания нового документа в фотошоп шириной 1680px и высотой 1100px, затем залейте фон слабым серым цветом #F9F9F9 .

2 Шаг

В Сети доступно большое количество макетировочных сеток, а также уроков по их созданию. Задачей этого урока будет введение вас в курс дела, если вы никогда не сталкивались с такими сетками ранее. С их помощью процесс макетирования может существенно ускориться и привести к качественным прототипам шаблонов страниц. Скачайте разметку 960 Grid System . Скачав ее по ссылке, распакуйте файл и откройте эту папку. Загрузите сетку “960 12 column grid” в фотошоп.

Теперь нам нужно перенести сетку в наш документ. Выберите группу “12 col Grid”, слейте ее в один слой, а затем перенесите его в главный документ. Сетка по высоте будет немного меньше документа, поэтому вам предстоит ее растянуть по вертикали, чтобы ее концы касались верхнего и нижнего края документа.

Теперь нам нужно еще создать строчную базу. Эта сетка поможет нам правильно расставлять отступы между элементами по вертикали и контролировать интерлиньяж в тексте, между абзацами и логическими блоками. Сначала создайте еще один файл в Photoshop размерами 24?24px, удалите в нем фон и проведите единственную линию в 1px по самой последней линейке рабочей области. Нам необходимо его сохранить, как шаблон (Edit > Define Pattern) и дать ему какое-нибудь выделяющееся имя.

Осталось разметить рабочую область тремя направляющими. Создайте новую вертикальную направляющую: View > New Guide, выберите пункт Vertical и задайте ей позиционирование на отметке 360px. Точно так же создайте еще две направляющих на отметках 840px и 1320px. Так мы выделили область размерами 960px между отметками 360px и 1320px и провели одну направляющую ровно посередине документа.

Если же вы работаете прямо из файла с 960 Grid System, в нем уже настроены удобные направляющие. Просто откройте View > Show > Guides.

3 Шаг

Теперь, когда у нас готов шаблон разметки, можно браться за проектирование структуры сайта. Дизайн страницы будет разделен на 5 блоков: Шапка (Header), Выноска (Callout), Левый блок (Content - Left), Правый блок (Content - Right), Подвал (Footer).

4 Шаг

Первым делом займемся шапкой, так как будем двигаться сверху вниз. Возьмите Rectangular Marquee Tool и выделите им область по всей ширине документа в самом верху высотой 120px (включив видимость своей горизонтальной разметки, высоту в 120px рассчитать более чем легко - это всего 5 строк по 24px каждая). Залейте шапку темно-серым (#2C2C2C ). Шапка будет содержать лого сайта и навигационное меню.

5 Шаг

Теперь в верхний левый угол страницы поместите ваш логотип, выровняв его по второй колонке (что есть отступ в 40px). В качестве логотипа я использовал обыкновенную надпись, состоящую из двух частей шрифтом Century Gothic и кеглем в 50pt. Первая часть надписи имеет светло-голубой оттенок (#ADC7D9 ), вторая - жирное начертание (bold) и белый цвет (#FFFFFF ). Далее я добавил к лого внутреннюю тень (стиль Inner Shadow); понизил непрозрачность (Opacity) стиля до 25% и задал такие параметры: Distance - 2px, Choke - 0%, Size - 5px.

6 Шаг

Здесь оформим навигационное меню. Чтобы сохранить чистоту и порядок на странице, мы будем использовать текстовые ссылки в меню. Выберите шрифт Arial размером 18pt и создайте надписи для ссылок. Закрасьте активную кнопку белым цветом (#FFFFFF ), а остальные - светло-серым (#BBBBBB ). Выровняйте их по вертикали и поместите в средней полосе шапки.

7 Шаг

Этот блок я назвал выноской потому, что все для чего он нужен - донести до пользователя информацию о странице. Повторите тот же процесс, что и с шапкой (выделение инструментом Rectangle Marquee), но на этот раз имейте в виду высоту блока в 240px, залейте выделение тем же светло-голубым (#ADC7D9 ), что и часть логотипа. Нам нужно добавить легкий градиент этому слою, поэтому выполните двойной щелчок по нему, чтобы вызвать панель стилей слоя и выберите стиль Gradient Overlay. Выберите градиент, переходящий к прозрачному цвету, смените режим наложения стиля на Overlay и понизьте его непрозрачность (Opacity) до 30%.

8 Шаг

Поскольку мы назвали свою компанию “Blue grid” - покажем в фоне выноски едва заметные ячейки. Для этого используем ту же технику, которую применяли для создания горизонтальных линий. Сначала создайте новый документ размером 25px на 25px. После этого удалите его фон, чтобы сделать его прозрачным и закрасьте одну нижнюю линейку пикселей толщиной в 1px, и такую же - по одной из сторон. Сохраните этот файл, как шаблон (Edit > Define Pattern).

9 Шаг

Создайте новый слой поверх слоя с выноской и залейте его только что созданным шаблоном (Edit > Fill).

Поверните этот слой на 15 градусов, задайте ему стиль Color Overlay белого цвета и поместите над панелью выноски.

Задайте слою режим наложения Soft Light. Далее выделите панель выноски либо инструментом Rectangular Marquee Tool, либо нажатием Ctrl + Click по слою с ней. После этого, находясь в режиме Rectangular Marquee Tool, кликаем по выделенной области правой клавишей мыши, выбираем пункт Inverse, затем жмем Delete. Сейчас мы удалили ненужную часть сетки, которая выходит за пределы панели выноски.

Следующим шагом будет создание видимости сетки лишь по ширине рабочей области в 960px. Включите направляющие, если они у вас спрятаны (View > Show > Guides), затем добавьте маску к слою с сеткой.

Перейдите в режим маски нажатием соответствующей кнопки в нижней части палитры Layers, затем выберите инструмент Gradient Tool (G) и определите градиент от прозрачного к черному. С помощью градиента и маски мы уберем части сетки, выходящие за рамки центральной области 960px.

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

10 Шаг

Поместим текст на нашу выноску. Возьмите Arial шрифт, кегль 45pt (#2C2C2C ) и напишите какой-нибудь слоган, выделяя значимые слова жирным начертанием. Под ним поместите текстовое введение меньшим по размеру кеглем (17pt) и сдвиньте все это в левую часть панели выноски.

11 Шаг

Сейчас будем готовить область для слайдшоу. Выберите инструмент Rectangular Marquee Tool и нанесите выделение между крайней правой и центральной направляющими. По высоте выделенная область должна составить 8 линеек по горизонтали, оставьте по одной пустой линейке сверху и снизу. Залейте этот прямоугольник темным серым цветом (#2C2C2C ).

Добавьте тень к вашему фону для слайдшоу: выполните двойной щелчок, чтобы вызвать панель стилей слоя, выберите Drop Shadow, смените цвет на #2C2C2C , задайте Distance 1px и Size 10px.

Далее, в качестве слайда, на фон нужно поместить скриншот какого-нибудь сайта - не важно. Я сделал снимок экрана первого попавшегося блога, изменил его размеры ровно по размерам нашего темно-серого фона, а затем сделал отступы шириной в 10px (Select > Modify > Contract 10px, затем инвертировал выделение и удалил его содержимое нажатием Delete).

12 Шаг

Чтобы начать работать с основным разделом, нужно на фон еще добавить легкий градиент. При помощи Rectangular Marquee Tool выделите всю область, находящуюся под выноской, затем выберите Gradient Tool (G) от цвета #F0F0F0 к прозрачному и протяните градиент по направлению вниз. Не заходите чересчур далеко - фон должен переходить в #F9F9F9 к низу страницы.

13 Шаг

Добавьте вводный абзац в левую часть основного блока. Шрифт - Arial, кегль - 18 pt, цвет >#9C9C9C а цвет ссылки сделайте #A3BBCC и задайте ему подчеркивание.

14 Шаг

Добавим список услуг. Для начала оформите заголовок: Arial, 25pt, Bold, цвет #262626 . Список элементов сделайте размером 18pt , шрифтом Arial #9C9C9C . Пункты списка оформите либо с помощью Elliptical Marquee Tool, либо используя альт коды (Alt + 7) с светло-голубым цветом шрифта (#A4BCCD ) и выравниванием по сетке.

Добавьте любую необходимую информацию таким же путем.

15 Шаг

Правый блок основного раздела будет выводить последние новости. Сначала добавьте заголовок в том же стиле, что и предыдущий (Arial, 25pt, Bold, цвет #262626 ) и выровняйте его по секции предоставляемых услуг. Теперь создайте заголовок для одной из новостей шрифтом Arial, 18pt, #A4BDCD , а само содержимое пишите размером 16pt и цветом #9C9C9C . Напишите таким образом 3 новости, а затем поместите под ними ссылку на ленту новостей шрифтом Arial с подчеркиванием, кеглем 16pt и цветом #A4BDCD .

16 Шаг

Нашим последним блоком будет подвал, в котором будет находиться форма для ввода логина и пароля, контакты и несколько ссылок. Выделите нижнюю часть документа c помощью Rectangular Marquee Tool и залейте ее темно-серым (#262626 ).

Сейчас нам нужно добавить форму для ввода логина и пароля. Сначала шрифтом Arial Bold, 20pt, белого цвета сделайте соответствующую надпись в левой части подвала. Затем с помощью Rectangular Marquee Tool создайте два прямоугольника, которые будут служить полями для ввода. Назовите поля, сделав в них надписи шрифтом Arial 16pt, цвета #9C9C9C .

Повторите то же самое для кнопки отправки, только на этот раз используйте Rounded Rectangle Tool (U). Далее добавьте к этим элементам Inner Shadow, понизьте Opacity этого эффекта до 30%, выставьте Spread равным 0 и Distance - 10px. Добавьте ссылку для восстановления потерянного пароля (Arial, 13pt, подчеркнутый стиль, цвет #A4BDCD ).

17 Шаг

Завершим макет добавлением блока контактов в подвале: озаглавьте его шрифтом Arial 20pt, Bold белого цвета (#FFFFFF ) и выровняйте по заголовку формы для авторизации. Затем добавьте информацию для контактов простым Arial 16pt также белого цвета.

18 Шаг

Проверьте баланс и выравнивание. С помощью ваших направляющих и разлинейки проверьте: все ли находится на своих местах, все ли сбалансировано. Если нет - поправьте.

19 Шаг

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

Поделитесь уроком

Правовая информация

Переведено с сайта www.tutorial9.net , автор перевода указан в начале урока.

Если вы решили связать свою жизнь с веб – дизайном, вам следует понимать, что эта область требует кропотливости и повышенного внимания к деталям. Следовательно, вам требуется развить в себе такое качество как аккуратность. Действительно качественный и дорогой дизайн должен быть выполнен максимально аккуратно. За это вам впоследствии скажет «спасибо» не только заказчик, но и верстальщик. Потому, очень важно знать инструменты, которые вам непременно пригодятся в выполнении работы. Одним из таких является сетка. Так давайте же научимся ее вызывать.

Как включить сетку в фотошопе? Довольно просто. На верхней панели ищем команду «просмотр», в выпадающем меню выбираем «показать» - «сетка». Ну, либо экономим время и вызываем сетку комбинацией клавиш ctrl+’.

Выглядит это примерно так:

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

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

Зато вы можете изменить размер сетки. Для этого вам следует зайти в «редактирование». В выпадающем списке отыскать «установки» - «направляющие, сетка и фрагменты».

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

Убрать сетку очень просто. Выполняем тот же порядок действий. «Просмотр» - «показать» - «сетка». И в этот раз мы попросту убираем галочку.

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