Классный дизайн и верстка сайта с нуля. Часть I

Доброго времени суток. На связи Рог Виктор.

Пока наш Андрей Бернацкий безумно занят своими Новогодними приготовлениями. Да, да Вы не ошиблись именно новогодними, я для Вас перевел первую часть одной великолепной статьи, которая покажет нам создание дизайна проекта в Photoshop. Это первая часть. А во второй части, которая пока на доработке, мы Вам покажем непосредственно верстку сайта.

Кстати говоря, и первую и вторую часть мне помогает переводить, помощник нашего журнала – Дмитрий Есин.
Хочется сказать пару слов о нем и поблагодарить его за труд, который он делает для нашего журнала.

Дмитрий Есин – фрилансер. (Можете посмотреть его аккаунт по ссылке //www.free-lance.ru/users/Skipirich). Замечательный талантливый человек. Именно он создал справочник по HTML&CSS, с которым я Вас уже знакомил, но Вы без проблем можете прочитать описание справичника по ссылке: //webformyself.com/html-spravochnik-dlya-novichka/

Дмитрий очень активный участник нашего проекта.

Если Вы хотите проявить себя как Дмитрий и принять непосредственное участие в проекте webformyself.com, то ознакомьтесь с разделом «Политика Сайта». Там Вы сможете поближе познакомиться с теми тезисами, которые могут быть Вам весьма и весьма интересными!

Что ж теперь переходим непосредственно к первой части нашей статьи.

Хочется сказать, что статья рассчитана не на новичка. Хоть в статье и показано все «шаг за шагом», Вам необходимы минимальные знания в Photoshop – это для первой части статьи. А во второй части Вам будут нужны знания по HTML&CSS. Вообщем, если Вы действительно хотите выполнять такие проекты с рисованием, а потом с непосредственно версткой сайта с нуля, то Вам просто необходимо пройти наш курс.

Напомню, что над статьей работали: Рог Виктор, Дмитрий Есин и Бернацкий Андрей.

Интернет с каждой минутой становится все более популярным, поэтому любой сайт должен иметь привлекательный дизайн. Конечно, можно обратиться к профессиональным веб-дизайнерам, но ведь можно и самостоятельно нарисовать и сверстать сайт! «Это же сложно!», – скажете Вы, но поверьте, Вам это покажется гораздо проще, когда Вы узнаете, как это делается.

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

Также Вы можете скачать исходники данного проекта:

Скачать исходник в .PSD формате.

А по данной ссылке Вы можете посмотреть результат трудов:

Посмотреть результат.

Шаг 1 – Что мы будем делать

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

Этот дизайн привлекателен для посетителей благодаря таким преимуществам, как:

Шаг 2 – Структура

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

Для нашего дизайна я выбрал следующую структуру:

Выбор структуры связан с несколькими причинами:

Шаг 3 – Начинаем

При составлении этого урока я использовал Photoshop CS3 на Windows Vista, но Вы можете спокойно пользоваться другой версией Photoshop, поскольку все действия достаточно просты и стандартны. Также я буду обращать внимание на различия между Windows и Mac, если они будут возникать.

Теперь приступаем! Для начала создадим пустой документ размером 1600 на 1200 px с прозрачным фоном. Нас вполне устроит разрешение 72ppi и Цветовой режим (Colour Mode) RGB 8 бит.

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

Шаг 4 – Готовим рабочее пространство

Читая это руководство, Вы заметите, что я просто помешан на всяких направляющих. Мне просто нравится использовать линейки в качестве направляющих во время работы. Поэтому Вам стоит тоже включить линейки – через меню «Просмотр» (View) > «Линейки» (Rulers) или с помощью сочетания клавиш Ctrl/Cmd + R. Убедитесь, что шкала линеек отображается в пикселях, нажав правой кнопкой мыши на линейке и выбрав в списке «Pixels».

Далее создадим несколько вертикальных направляющих. Создайте привязку: «Просмотр» (View) > «Привязка» (Snap) или с помощью клавиш Shift + Ctrl/Cmd + ;, и добавьте новую направляющую (Guide) на ширине 800px. Именно здесь привязка будет полезной, так как направляющая находится на центральной оси документа. Еще нам будут нужны направляющие на 400px и 1200px . Почему? Просто 1200-400=800, а нам необходимо, чтобы дизайн прекрасно отображался и на экранах с разрешением 800х600px.

Осталось создать горизонтальные направляющие на 450px посередине страницы и на 300px и 900px вверху и внизу. Как правило, я устанавливаю направляющие и по краям документа, чтобы было легче работать с углами.

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

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

Шаг 5 – Строка статуса

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

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

Фигура

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

Затем в папке слоев Box создайте новый прямоугольник с помощью инструмента «Прямоугольник» (Rectangle Tool, или горячая клавиша U). Сделайте заливку цветом #F8F8F8 – это очень легкий оттенок серого, в отличие от белого он не такой яркий и меньше утомляет глаза.

На следующем этапе займемся границей. Нам нужно отделить верхнюю панель от остального дизайна, поэтому прорисуем для нее нижнюю границу. Создайте новый слой Border, и при помощи инструмента «Однострочная область» (Single Row Marquee Tool) выделите линию прямо под фигурой, которую мы недавно создали. Залейте выделенную область цветом #959595 удерживая Alt + Backspace. Выберите команду Select->Transform Selection (Выделить > Трансформировать выделение), и нажмите на нижнюю стрелку, чтобы выделенная область сместилась вниз на один пиксель. Теперь залейте область белым (#FFFFFF). У нас получилась красивая граница:

И последнее – нужно добавить тень, чтобы наш дизайн смотрелся объёмно. Создайте новый слой «Shadow» и добавьте слой-маску между ним и фоновым слоем, нажав Ctrl + Alt + Click. Нажмите на кнопку «Градиент» (Gradient Tool) и выберите линейный градиент от чёрного к прозрачному, и из нижней части прямоугольника протяните его на 15px. Непрозрачность слоя поставьте на 15%.

Приветствие

Теперь поместим на нашу панель текст и другие полезные штуки. Начнём с приветствия. В группе слоев «Status Bar» создайте новый слой под названием «Welcome».

Теперь с помощью инструмента «Текст» (Type Tool) или кнопки (T), начиная с точки 400px от левой границы, напишем наше сообщение. Расположите текст точно по центру.

Я использую следующий шрифт:

Этот шрифт и будет нашим основным.

Действия

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

Создайте новую группу слоев под названием «Action bar», где мы нарисуем Скругленный прямоугольник (Rounded Rectangle или клавиша U). Его высота должна быть 30px, чтобы осталось 10px на нижний и верхний отступ, и он также должен быть достаточно широкий, чтобы в него вошла надпись. Поставьте значение непрозрачности (Opacity) на 55% и выровняйте правую границу по центральной направляющей.

Затем создайте ссылки, подходящие для Вашего сайта. Для своего я выбрал ссылки «Вход» (Login), «Карта сайта» (Site Map) и «Лицензия» (Licence).

Обратите внимание, что я использую все тот же шрифт Arial белого цвета.

Строка поиска

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

Используя инструмент «Скругленный Прямоугольник» (Rounded Rectangle Tool или горячая клавиша U) с радиусом в 10px, создайте фигуру высотой в 20 px так, чтобы края выглядели более закругленными. Назовите этот слой «Field» и поместите его в новую группу слоев под названием «Search Box», выровняйте по вертикальной направляющей на 1200px и добавьте несколько стилей слоя:

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

Ну и теперь напечатайте слово «Search» шрифтом Arial темно-серого цвета, который мы использовали для приветствия.

Шаг 6 – Шапка сайта

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

Для этого дизайна в качестве шапки я решил использовать картинку, т.к., несмотря на простоту работы, с ней она будет выглядеть шикарно. Вот эту, например, я нашел на stock.xchng, но Вы вольны выбрать то, что Вам по душе. Вся прелесть в том, что, поменяв картинку, Вы можете кардинальным образом изменить атмосферу сайта. У Вас даже могут быть разные картинки на каждой странице!

Добавление изображения

Для начала нам следует создать группу слоев «Header». В этой группе, пользуясь инструментом «Прямоугольник» (Rectangle Tool) и нарисованными ранее направляющими, нарисуйте фигуру между 50 и 300px. Затем перетащите изображение в рабочую область. Измените его размер, и создайте слой-маску между картинкой и фигурой.

А теперь взгляните – наш проект уже выглядит довольно неплохо, не правда ли?

Логотип

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

Я собираюсь использовать шрифт Myriad Pro, который должен установиться на Ваш компьютер вместе с Photoshop CS. Если же его нет, можете воспользоваться другим хорошим шрифтом на Ваш вкус.

Выберем этот шрифт:

Я вписываю название вымышленной компании: «Roadside.» Затем этот слой выравниваем по вертикальной направляющей на 400px.

Прямо под ним пишем подзаголовок «Studio». Я все так же использую шрифт Pro, но теперь с немного другими настройками:

Таким образом, по ширине подзаголовок будет совпадать с названием компании, не слишком отвлекая на себя внимание посетителя. Чтобы не запутаться, я перемещу его в группу слоев «Logo».

Вот мы и сделали заголовок, давайте приступим к самой увесистой части нашего урока!

Шаг 7 – Блок контента, Оболочка и вкладки

Чтобы приступить к оформлению блока контента, нужно сначала определиться с высотой футера. Я думаю, 100px будет достаточно. Нам не обязательно вставлять весь объем текста, поэтому 50px будет в самый раз. Для украшения футера нам потребуется какая-нибудь картинка, поэтому на нее мы тоже оставим 50px.

Для этого добавим новую горизонтальную направляющую на 1100px. Для удобства создайте новую группу слоев и назовите ее Content. Позже я объясню, зачем нам очень важен такой порядок в PSD, а сейчас просто поверьте мне на слово.

Блок контента

Создайте новую группу слоев, назовите ее «Box». Далее, применив инструмент «Прямоугольник» (Rectangle Tool) с тем же оттенком серого, который мы использовали для Строки Статуса(#F8F8F8), нарисуйте прямоугольник высотой от 300px до 1100px так, чтобы он занимал все пространство по горизонтали.

Теперь нам нужно разобраться с границами. Между блоком контента и изображением мы сделаем те же границы, что и между картинкой и строкой статуса. Чтобы не заниматься снова выделением областей, найдите слой «Border» в группе «Status Bar» или «Box» , создайте две его копии, нажав Ctrl (или Cmd + J), а затем назовите эти два слоя «Border top»(верхняя часть границы) и «Border Bottom» (нижняя часть границы). После этого переместите их в группу слоев Content > Box layer. Можете оставить слой «Border Bottom» как есть, и просто переместить его на высоту 1200px; вам нужно будет перевернуть слой «Border Top» по вертикали, чтобы вокруг изображения была постоянная граница. Далее выбираем «Режим Свободной Трансформации» (Free Transform Mode) с помощью клавиш Ctrl / Cmd + T, кликните правой кнопкой мыши на блок, и выберите «Повернуть по вертикали» ( Flip Vertical). Поместите границу на отметку 300px.

И напоследок добавим тени снизу и сверху. Для этого проделаем те же шаги что и раньше; поверх слоев «Shape», «Shadow Top» и «Bottom» создайте ещё два и добавьте между ними маску слоя. Затем кликните на инструменте «Градиент» (Gradient Tool), выберите градиент от чёрного к прозрачному и протяните его на 15px на каждом слое. Значение непрозрачности поставьте на 15%.

Контейнер для основного блока

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

Нам нужен промежуток в 50px между шапкой и вкладками, чтобы элементы располагались более свободно. Высота вкладок будет 35px. Для этого нам нужны новые направляющие (куда же мы без них!) на уровне 350рх и 385px. Высота обертки будет 365px, поэтому последнюю направляющую мы добавляем на уровне 650px.

Затем в группе «Content» создайте новую группу слоев под названием «Wrapper», а в ней ещё три группы: «Box», «Slideshow», и «Message». Здесь будут располагаться наши слои.

Сейчас нам пригодятся вертикальные направляющие. При помощи соответствующего инструмента (Rectangle Tool) нарисуйте белый (#ffffff) прямоугольник в нашей новой размеченной области. Затем добавьте следующие стили слоя:

Вот как всё должно выглядеть:

Слайд-шоу

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

Но перед тем как мы перейдем непосредственно к содержанию, сделайте вокруг области отступ в 15px (да, здесь пригодятся направляющие). Также нам необходимо разделить блок на две части; на одной будет располагаться слайдер, на другой – блок текста. К счастью, за нас это сделают наши направляющие. Однако нам не нужно, чтобы текст и слайды располагались впритык, мы сделаем отступ в 15px на каждой стороне блока.

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

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

Теперь можно заняться самим слайдшоу. Нарисуйте черный прямоугольник, полностью покрывающий блок для картинок(см. иллюстрацию), с внутренней стороны добавьте к нему рамочку в 1px цвета #a7a7a7. Затем поверх прямоугольника создайте новый слой «Image» добавьте между ними слой-маску. Теперь можно поместить сюда картинки и подогнать их по размеру. Для этого урока можете воспользоваться картинками с моего вебсайта, но для собственного действующего сайта Вы, понятное дело, вставите свои.

Теперь нужно создать свою панель команд. Воспользовавшись «Скругленным Прямоугольником» ( Rounded Rectangle Tool) черного цвета радиусом в 5px, нарисуйте прямоугольник шириной на 30px меньше чем Ваше изображение. Не забудьте спрятать верхние скругленные углы. Значение непрозрачности должно быть на отметке 55%. Т.к. я повернут на группах слоев, я создал еще одну и назвал ее «Commands» (команды), которую расположил за слоем нашего изображения.

Теперь используйте инструмент «Многоугольник» (Polygon Tool) с тремя сторонами, нарисуйте два треугольника, которые будут обозначать команды «вперед» и «назад». Затем шрифтом Arial 12px белого цвета напишите название Вашей картинки.

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

Сообщение

Нам нужно добавить разделитель между нашими двумя блоками. Как я упоминал ранее, направляющие разделают рабочую область на два сектора, но мы хотим обозначить границу в 1px. Добавьте новый слой «Separator», и затем с помощью инструмента «Одиночный Столбец» ( Single Column Marquee Tool) проведите линию на ширине 900px. Залейте ее черным, и затем используйте инструмент «прямоугольная область» (Rectangle Marquee Tool) чтобы убрать ненужные отрезки линии. Непрозрачность слоя поставьте на значении 30%.

Теперь нам нужно придумать броский заголовок для приветственного сообщения. Разумеется, все будет зависеть от того, какого плана сайт Вы собираетесь сделать. Я выбрал сайт для дизайнерского агентства, поэтому я просто напишу “У нас лучшие вебсайты!”. Я понимаю, звучит несколько самоуверенно, но это вызывает у посетителя желание зайти на вашу страничку.

На этот заголовок посетители сайта обратят внимание сразу после лого, так что нам нужно как-то его выделить. Для заголовков я также использую шрифт Myriad Pro:

Это будет наш основной шрифт для заголовков.

Посмотрите, совпадает ли цвет с цветом подзаголовка на логотипе?

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

Не будем сильно ломать голову над текстом, т.к. наше внимание сейчас обращено не на контент, а на дизайн.

Несколько слов о текстовых вставках в веб-дизайне: помните – текст выглядит некрасиво. Он загромождает страницу, делая её трудночитаемой. Чтобы избежать этого эффекта, нам нужно сделать текст привлекательным для глаз. Хитрости следующие:Чем меньше текста, тем лучше, параграфы небольшие по размеру, 1,5 (полуторный) междустрочный интервал. Так текст будет выглядеть намного приятнее и читабельнее, чем с одиночным интервалом.

Используя инструмент «Текст» (Type Tool), выделите на документе область для будущего текста. Затем напечатайте там что-нибудь. Здесь я выбрал шрифт Arial:

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

Чтобы лучше обозначить нужную информацию, мы воспользуемся двумя основными фигурами Photoshop: телефоном и письмом, которые находятся в файле objects.csh.

Начнем с номера телефона. С помощью инструмента «Произвольная фигура» (Custom Shape Tool) и цвета #7d7d7d создайте фигуру в форме телефона по направляющей в 600px. Введите свой номер телефона, используя шрифт Arial. Чтобы все было на своем месте, я как всегда решил создать новую группу слоев «Contact Info».

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

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

Панель навигации

Вкладки мне нравятся тем, что, на мой взгляд, это удобный способ просматривать страницы. Мы пользуемся вкладками в повседневной жизни, так что это вполне привычно. Также я решил добавить команды «previous» (предыдущий) и «next» (следующий). Возможно, для Вашего сайта это не подойдет, но в данной случае, после прочтения приветствия посетитель может захотеть посмотреть портфолио, затем информацию о компании, и, наконец, связаться с нами в случае, если мы его заинтересовали. Вот здесь-то и пригодятся наши команды, чтобы облегчить посетителю поиск.

Перед тем как приступить, нам нужно теперь под группой слоев “Box” создать новую группу. Назовем ее «Tabs» (вкладки). Чтобы был полный порядок, я создал для каждой вкладки отдельную группу: «Previous»(предыдущая), «Home»(Главная страница), «Portfolio»(Портфолио), «About»(О нас), «Contact»(Контакты), и «Next»(Следующая) соответственно. Сейчас не будем ничего печатать, просто наметим структуру. Вот примерно как все должно выглядеть:

Начнем с правой стороны. Воспользовавшись «Скругленным Прямоугольником» ( Rounded Rectangle Tool) черного цвета радиусом в 5px нарисуйте прямоугольник в правом верхнем углу блока контента. Не забудьте спрятать нижние скругленные уголки. Помните также, что расстояние между верхушкой кнопки и изображением шапки должно быть 50px. Чтобы следить за этим, пользуйтесь направляющими.

Но это ещё не всё. Нам нужно избавиться от закругленного угла слева. Для этого воспользуйтесь инструментом «Преобразовать опорную точку» (Convert Point Tool), находящейся под «Пером» (Pen Tool). Кликните на Путь (path), чтобы появились узловые точки, затем с помощью инструмента «Удалить узловую точку» (Delete Anchor Point Tool), удалите две точки слева. Получилась причудливая форма. Просто снова кликните «Преобразовать опорную точку», а затем на две оставшиеся узловые точки слева. Чтобы было понятней, посмотрите анимацию:

Отлично, теперь остается только установить значение непрозрачности на 55%. Следующим шагом будет добавление прямоугольников на каждую страницу. Не забудьте разместить их в нужной группе слоев. Последовательность действий та же самая ( инструмент «Прямоугольник» черного цвета, непрозрачность 55%). Оставляйте небольшой промежуток между прямоугольниками, чтобы они не сливались. Вот что сейчас должно получиться:

Заключительным шагом будет создание фигуры предыдущей кнопки. Вам понадобится «Перо» (Pen Tool) поэтому потренируйтесь им пользоваться, если еще не умеете. И это далеко не пустая трата времени, ведь «Перо» — это один из самых полезных инструментов в Photoshop.

Если вы умеете пользоваться «Пером» (Pen Tool), то нарисуйте что-то вроде этого:

А затем отправьте слой в группу «Previous» и поместите в левом верхнем углу, к последнему прямоугольнику.

Для ссылок я снова использую шрифт Myriad Pro, на этот раз 14 размер и цвет #f6f6f6. Раз уж мы остановились на странице «Home», то выделим ее название жирным шрифтом. В меню я также использую эффект наведения на блок (Hover effect), поэтому ссылка «Portfolio» должна быть голубая #6eb9cc. Все ссылки, разумеется, располагаются по центру кнопки.

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

Выглядит потрясающе! Но просто голубая ссылка как-то не смотрится. Чтобы усилить ховер-эффект, сверху мы добавим курсор. Вот этот например:

Вот как должно теперь выглядеть Ваше меню:

Очень мило смотрится, как думаете? Трудно поверить, но мы закончили с этим большим разделом. А сейчас нам предстоит очень интересная часть, — модуль блогов и Твиттер.

Шаг 8 – Модуль Блога

Здесь нам понадобятся новые направляющие. Чтобы наш дизайн смотрелся гармонично, сделаем отступ в 50px между оберткой и модулями. Для этого добавим еще одну направляющую на уровне 700px. В группе слоев «Content» создаем новую группу и назовем ее «Module 1 – Blog».

Я обожаю иконки в веб-дизайне. У каждой из них есть своя изюминка, которая создает приятное общее впечатление о странице. Но как бы там ни было, иконки, которые мы используем, должны сочетаться с содержимым страницы, а также гармонировать с остальными элементами дизайна. Для своего урока я выбрал «Crystal Project», созданный Эверальдом (Everald). Это огромный набор иконок, которые могут пригодиться в самых разных проектах. Ну и самое главное – они просто превосходные! Можете найти их здесь и убедиться в этом сами.

Как только иконки загружены, нам нужно выбрать наиболее подходящие для нашего дизайна. Нам нужно что-нибудь связанное с новостями и обновлениями. Думаю, иконка news.png нам весьма подходит. Я выбрал размер 64*64px.

Панель заголовка

Отлично, а теперь перетащите ее на рабочее поле. Если нужно, измените размер иконки. Мне она не кажется большой, поэтому я ничего не менял. Выровняйте ее по направляющим 700px по высоте и 400px по ширине.

Теперь надо подумать над заголовком. Вместо шрифта Myriad Pro здесь я использую Arial. Почему? Ну, на мой взгляд, так смотрится лучше. Но чтобы он выглядел как заголовок, позади текста мы добавим черный скругленный прямоугольник.

Воспользовавшись «Скругленным Прямоугольником» ( Rounded Rectangle Tool) черного цвета радиусом в 5px нарисуйте прямоугольник высотой примерно 30px. Расстояние между нижней стороной и серединой документа должно быть 15px. У нас здесь уже есть направляющая, поэтому создавать новую не нужно. Спрячьте левые уголки за иконкой чтобы показать ее слитность со всем блоком. Значение непрозрачности установите на 55%.

Теперь нам нужно просто добавить текст. Вместо официального «Latest News», (последние новости) мы напишем что-нибудь более приятное и располагающее, например: «Latest entries from our blog» (последние обновления нашего блога). Для этого используйте следующий шрифт:

Затем напишите наш текст не слишком близко к иконке, чтобы обозначить расстояние между ними. Я решил разместить эти слои в группе «Header Bar».

Записи в блоге

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

Создайте новую направляющую на отметке 445px. Это добавит дополнительный отступ в 15px, по которому будет видно, что заголовок содержит все записи, а не просто ссылку.

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

Для названия я возьму шрифт, использовавшийся нами ранее, но поменьше размером:

Затем мы начнем печатать на уровне 430px, и сместим содержание записи к 445px. Расположим ее на 15px ниже панели заголовка.

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

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

Выровняйте текст по правому краю.

Что касается содержания записей, мы добавим только первые строки, чтобы текста на странице было как можно меньше. Запись нужно сдвинуть к направляющей 445px. Используйте инструмент «Текст» для облегчения задачи. Я пользуюсь следующим шрифтом:

Как вы уже заметили, слои «Title», «Meta» и «Content» у меня находятся в группе «Entry 1». Так нам будет проще работать дальше. Скопируйте группу два раза, переименуйте новые группы слоев в «Entry 2» и «Entry 3», соответственно, и расположите одну под другой. Разумеется, между ними нужно сделать отступ, только не слишком большой. Все должно выглядеть так:

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

Кнопка «Read More» («Читать дальше»)

Вы можете спросить – «а что, если у читателя возникнет желание почитать блог?». Начнем с того, что названия при верстке станут ссылками. Однако если мы оставим все так , то у посетителя не получится вернуться на главную страницу блога. Мы могли бы добавить ссылку к заголовку, но намного выигрышнее будет создать кнопку «Read More».

В новом окне создайте прозрачный слой размером в 210*25px. Соответствующим инструментом нарисуйте Скругленный Прямоугольник с радиусом 10px не важно какого цвета. Высота должна быть 20px, чтобы края образовывали полукруг. Внизу и справа оставьте немного места для тени.

А сейчас мы немного оживим кнопку, добавив несколько стилей слоя: тень (drop shadow), наложение градиента (gradient overlay) и рамку (stroke).

Это придаст кнопке красивый 3D эффект:

Теперь нужно добавить надпись. Наш шрифт Myriad Pro, 12 размера и цветa #393939. Не забудьте выровнять текст по центру!

И, наконец, делаем скос (bevel) на нашей кнопке:

Теперь перетаскиваем кнопку в нашу рабочую область, и готово! Я решил поместить ее справа, но по центру и слева она тоже выглядит отлично, так что решайте сами. Также, чтобы было проще ориентироваться, я поместил те два слоя в группу «Read More».

Выглядит просто шикарно, не так ли? Ну вот, мы разобрались с блогом, теперь прейдем к Твиттеру!

Шаг 9 — Твиттер

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

Панель заголовка

Для начала просто скопируйте панель заголовка из модуля блога и поместите с другой стороны от середины документа, затем создайте новую группц слоев под названием «Module 2 – Twitter». Замените текст на что-нибудь вроде “Follow the Roadside Team on Twitter” (следите за новостями команды Roadside на Твиттере). Надпись будет выглядеть менее официальной и дружелюбной. В самом деле, Твиттер и должен представлять собой нечто личное, позволяющее пользователям узнать Вас лучше.

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

Перетащите иконку в вашу рабочую область, измените ее размер с помощью Ctrl / Cmd + T и поставьте на место газеты. Я немного увеличил размер нашей иконки, чтобы она смотрелась лучше.

Твиты

Займемся контентом. Добавьте первую вертикальную направляющую на уровне 830px и вторую на 845px, чтобы обозначить необходимое нам пространство. Для отступа в 15px нам также понадобится еще одна направляющая на 770px.

Что же будет здесь располагаться? У каждого участника будет своя строка с последними обновлениями (твитами), которая будет состоять из картинки (аватара) пользователя, его имени и предложения. Создайте новую группу слоев под названием «Tweet 1», которую мы потом будем копировать для других твитов.

Начнем с картинки. Можете выбрать любую понравившуюся в stock.xchng.

Но перед тем как добавить картинку, нам нужно создать новую фигуру для слой-маски. Нарисуйте прямоугольник размером 35*35px, и добавьте внутреннюю рамку (stroke) в 1px цвета #202020.

Выберите какую-нибудь картинку в stock.xchng и перетащите в рабочую область. Затем добавьте между ней и недавно созданным слоем «Shape» новую слой-маску. При необходимости измените размер изображения, нажав Ctrl или Cmd + T.

Сейчас давайте напишем имя члена нашей команды. Здесь я, как обычно, использую шрифт Myriad Prо:

Не забудьте оставить отступ в 15px между картинкой и названием. Для этого добавьте новую направляющую.

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

Ну вот, теперь, когда мы закончили, копируем группу слоев»Tweet 1″, для наших новых твитов. Переименуйте новые группы в «Tweet 2», 3 и 4 соответственно. И между каждой оставьте отступ в 15px.

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

Так, теперь не хватает только кнопки «Read More» («Читать дальше»). Мы просто скопируем группу слоев «Read More» из модуля блога в группу модуля Твиттера. Назовем ее “Get More Tweets” («Посмотреть все записи»), чтобы показать, что мы не просто ее скопировали и чтобы страница выглядела менее официально.

Осталось только поменять текст слоя на “Get More Tweets!”. Восклицательный знак добавит неформальности и непринуждённости . Выровняйте эту кнопку по горизонтали с кнопкой Read More и справа по вертикали.

Поздравляю! Мы закончили дизайн контента! Нелёгкая это была задача, но дальше всё будет намного проще. Осталось только сделать футер. А пока давайте немного полюбуемся своим творением, над которым мы сидели несколько часов:

Мы ведь уже неплохо продвинулись, как думаете?

Шаг 10 – Нижний колонтитул (Футер)

Мы могли бы разместить футер прямо под контентом. Честно говоря, когда я готовил этот урок, я так и делал. Но мне показалось, что чего-то не хватало; в дизайне не было баланса. Изображение в футере как бы обрамляет контент, поэтому я и решил расширить этот раздел урока.

Но слишком большое изображение нам не нужно; 50px будет вполне достаточно. Добавляем новую горизонтальную направляющую на 1150px чтобы нам было удобнее рисовать.

Теперь нам нужно создать новую группу слоев под названием Footer, в которой у нас будут размещаться группы «Image» и «Bar».

Картинка

Соответствующим инструментом (Rectangle Tool) нарисуйте прямоугольник на всю ширину высотой в 50px. Этот слой должен быть в группе Image.

Теперь снова перетащите картинку для футера в рабочую область, нажав Ctrl / Cmd + T и добавьте слой-маску между картинкой и слоем Shape.

Футер

С картинкой футера мы закончили. Теперь нужно заняться самим блоком. Создайте в группе «Bar» новую группу, назовите её «Вox», и потом используя инструмент Прямоугольник (Rectangle Tool или горячая клавиша U), заполните оставшуюся прозрачную область цветом #f8f8f8.

Создайте новый слой «Shadow», а между ним и слоем «Shape» добавьте слой-маску. Воспользуйтесь инструментом Градиент (Gradient Tool или горячая клавиша G), и нарисуйте чёрную тень высотой в 15px. Непрозрачность слоя отрегулируйте на 15%.

Чтобы закончить с этим блоком, скопируйте слой «Border Top» из «Content box», нажав Ctrl / Cmd + J, перетащите копию в группу слоев Footer Bar Box и переименуйте в Border Top.

Ну и наконец создайте новый слой с текстом, и с помощью нашего шрифта:

Можете поместить на футере все, что посчитаете нужным. У меня, например, там будет копирайт, название компании, и крохотное “все права защищены”. Чтобы растянуть надписи, я расположил их на двух строках. Выровняйте текст по направляющей на ширине 800px.

Шаг 11 — Любуйтесь!

Вот и всё, мы закончили! Мы много трудились, но результат ведь того стоил, не правда ли?

Шаг 12 — Напоследок

Мы создали дизайн для сайта с помощью Photoshop. Во второй части урока вы узнаете, как сделать из этого PSD соответствующую веб-стандартам страницу при помощи xHTML 1.0, CSS 2.0 и JavaScript.

Искренне надеюсь, что вам понравился мой урок, что вы узнали для себя что-то новое и будете теперь создавать свои собственные оригинальные проекты!

До встречи во 2 части!

Перевод и редакция: Дмитрий Есин, Рог Виктор и Андрей Бернацкий. Команда webformyself.

Автор: Феликс Бойо.

Источник: //net.tutsplus.com

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Комментарии Вконтакте:

Комментарии (16)