С Интернетом, становящимся все более популярным каждую минуту, хорошо выглядящий вэбсайт является чем-то самим собой разумеющимся, чем-то таким, что должно быть. Очевидно, вы могли бы заплатить дизайнеру Web-страниц, чтобы он спроектировал одну и для вас, но не будет ли действительно круче спроектировать и запрограммировать это самому для себя? Вы можете сказать "трудновато…", но фактически, не такой уж это и тяжкий труд, если только знать, как это сделать!

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

Шаг один - Что мы будем делать

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

Причины, по которым этот дизайн предлагается вашему вниманию, следующие:

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

Шаг два - Структура

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

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

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

• - как я уже сказал, структура контентно центрирована, т.е. основное содержание в центре;
• - это web-сайт профессионала; это не должно напоминать блог;
• - такую структуру в самом деле не сложно запрограммировать!

Шаг три - начало

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

Ну, всё сказано, давайте начинать! Начнём мы с пустого документа размером 1600 на 1200 пикселов, с прозрачным фоном, с разрешающей способностью 72 ppi и 8-ми битным цветовым пространством RGB, чтобы имеет удовлетворительный результат.

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

• - это даст вам пространство для работы, и, следовательно, дизайн не будет выглядеть загромождённым;
• - это позволит вам действительно позаботятся о широкоэкранных разрешающих способностях при проектировании, чего многие дизайнеры Web-страниц не делают.

Шаг четыре - Установка нашего рабочего пространства

Вы поймете при чтении этого обучающего курса, что я слегка помешан на различных идеях и методах, которые будут некоторым образом направлять мою деятельность. К примеру, я просто люблю иметь линейки, которые будут вести меня в моем дизайнерском процессе. Поэтому вы должны запустить отображение линеек. Используйте для этого в меню Вид->Линейки (View->Rulers, если у вас англоязычный интерфейс), или просто клавишную комбинацию Ctrl/Cmd+R. Удостоверьтесь, что в качестве единиц измерения выбраны пикселы, щелкая правой кнопкой мыши на линейке и выбирая "пикселы" из списка.

Затем мы установим вертикальные направляющие. Активизируйте привязку (Вид-> Привязка, или View->Snap, или Shift + Ctrl/Cmd +), и стартуйте, поместив направляющую линию на 800 пикселах. Это то место, где привязка начнёт действовать, как бы усиливая внимание к центру документа. Нам будут также нужны направляющие на 400px и 1200px. Почему? Просто потому, что 1200 - 400 равняется 800, и мы хотим, чтобы наш дизайн отобразился должным образом также и на экранах размером 800*600.

Последнее, что мы должны сделать, это установить горизонтальные направляющие на 600px для середины, и на 300 и 900px для верхней и нижней частей. Я обычно также устанавливаю направляющие на краях моего документа, чтобы чётче обозначить углы.

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

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

Шаг пять - Строка состояния

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

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

Форма

Перед тем, как двигаться дальше, мы, очевидно, должны завершить подготовку нашего фона. Мы хотим, чтобы Status Bar заполнил всю ширину и имел высоту 50px. Именно поэтому мы собираемся разместить новую горизонтальную направляющую на 50px.

Затем инструментом Прямоугольник (Rectangle Tool или U) в группе слоёв, названной Box, создайте новый прямоугольник. Цвет этого прямоугольника должен быть #f8f8f8, который является очень светлым серым, и не столь ярок и утомителен для глаза, как белый.

Следующий шаг касается границы. Мы хотим отделить Status Bar от остальной части сайта, так что граница является здесь уместной. Создайте новый слой по имени Border (граница), и инструментом Выделение строки пикселов (Single Row Marquee Tool), из группы инструментов Выделение прямоугольной области (Rectangle Marquee Tool или M), выделите линию непосредственно под формой, которую мы только что создали.

Залейте выделение цветом #959595 используя Alt + Backspace. Далее, используйте Выделение-> Преобразование выделения (Select->Transform Selection) и нажмите клавишу "вниз", чтобы сдвинуть выделение вниз на один пиксел. Теперь залейте это белым (#FFFFFF). Получается довольно хорошая скошенная граница.

Заключительный шаг должен добавить немного тени, чтобы создать некоторый объем. Создайте новый слой по имени "Тень" (Shadow), и добавьте ограничивающую маску между этим слоем и фоновым, щёлкнув мышью при нажатых клавишах Ctrl + Alt между этеми двумя слоями. Возьмите инструмент Градиент (G) с линейным переходом от черного к прозрачному, и создайте градиентный переход, начинающийся у основания поля, высотой 15px. Установите непрозрачность слоя на 15 %.

Приветственное сообщение

Теперь, когда наше поле создано, мы можем заполнить его некоторым текстом и другими полезными вещами. Мы начнём с создания приветственного сообщения. В группе слоёв Status Bar, создайте новый слой по имени "Добро пожаловать".

Теперь, инструментом Текст (T), отступив 400px от левой границы, мы напишем наше приветственное сообщение. Можно сделать это по-русски. Напишите то, что подсказывает вам ваше воображение. Убедитесь, что в пределах поля вы центрировали текст в вертикальном направлении.

Шрифт, который я использую:

• Arial нормальный, 12 px
• Сглаживание: нет
• Цвет: # 515151

Это будет нашим заданным шрифтом параграфа по умолчанию.

Действия

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

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

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

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

Поле поиска

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

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

Затем, используя инструмент Пользовательские Формы (Custom Shape Tool U), выберите форму "Лупа" от Web.csh (который является заданной по умолчанию формой, но Вам, возможно, придется её загрузить), сделайте маленькую иконку в поле, чтобы показать, чем поле является.

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

Вот так! Мы закончили со Status Bar'ом, можно закрыть все группы слоёв, чтобы сделать палитру слоёв почище.

Шаг шесть - Заголовок

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

Для этого дизайна в заголовочной части (хедере) я решил использовать готовое изображение, потому что это просто и быстро, а выглядит это просто потрясающе. Я нашел это большое изображение по адресу stock.xchng (http://www.sxc.hu/photo/603001), но вы свободны в выборе, и можете использовать ваше собственное изображение. Большим преимуществом при использовании фонового изображения в заголовочной части является то, что вы можете полностью изменить ощущения посетителей вашего сайта только заменяя изображение. Вы можете даже иметь различные фоновые изображения на каждой странице!

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

Создадим новую группу слоёв по имени "Заголовок" (Header). В той группе, используя инструмент Прямоугольник (Rectangle Tool или U) и направляющие линии, которые мы расставили ранее, создайте форму между 50 и 300 px по высоте. Это быть пространством нашего хедера. Затем импортируйте ваше изображение в документ, используя технологию "drag & drop". Подгоните его размеры, и создайте маску отсечения между изображением и формой.

Вы обратили внимание, что мы уже имеем действительно "крутой" вид нашего дизайна?

Лого

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

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

Настройки этого шрифта:

• • Myriad Pro
• • размер 48px
• • цвет #4d4d4d
• • сглаживание: гладкий

Я написал вымышленное название компании: "Обочина" (Roadside). Слой с текстом расположен на вертикальной направляющей 400 px.

Подзаголовок "Studio" должен быть написан под названием. Я вновь использую Myriad Pro, но на сей раз со следующими параметрами настройки:

• • размер 12px
• • цвет #6ebacd
• • все буквы заглавные
• • полужирный
• • пространство между буквами (спэйсинг): 2300

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

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

Шаг семь – Блок с контентом, обертка (репер), и табуляции

Чтобы создать блок с контентом, мы должны решить, какой высоты должен быть подвал нашего сайта, футер. Я думаю, 100px будет вполне приемлемо: не слишком высокий, и не низкий. У нас нет не-обходимости записывать здесь много текста, так что 50px для текстового поля достаточно. Мы также хотим вставить здесь фоновое изображение, чтобы сделать подвал менее скучным. Мы отведём ему также 50px.

Поэтому мы должны поместить новую горизонтальную направляющую на 1100px. Чтобы это всё было аккуратно, создайте новую группу слоёв по имени "Содержание" (Content). Я объясню позже, почему очень важно иметь ясную структуру при сохранении документа в формате PSD, но в настоящий момент вы будете должны просто поверить мне.

Пространство

Создайте новую группу слоёв по имени "Пространство (Box)", и инструментом Прямоугольник (Rec-tangle Tool) нарисуйте прямоугольник, идущий от 300px до 1100px по высоте, использую всю ширину горизонтального пространства. Залейте его тем же самым светлым серым, который мы использовали для строки состояния (#f8f8f8).

Затем, мы должны создать границы. Мы будем использовать те же самые границы между контентом и изображением, которое мы использовали для разделения строки состояния и изображения. Вместо того, чтобы создавать весь этот набор вновь, продублируйте его дважды используя Ctrl / Cmd + J, и назовите эти два слоя "нижняя граница" (Border Bottom) и "верхняя граница" (Border top). Затем переместите их в группу слоёв "пространство" (Box). Оставьте слой "нижняя граница" (Border Bottom) таким, как он есть и только переместите его на 1200px по высоте; однако, вы будете должны зеркально отразить слой "верхняя граница" (Border top) в вертикальном направлении, чтобы иметь непротиворечивую границу вокруг изображения. Выберите инструмент Сободное трансформирование (Free Trans-form или Ctrl / Cmd + T), щелкните на поле правой кнопкой мыши, и выберите Отразить вертикально (Flip Vertical). Переместите границу на 300px по высоте.

Финальным шагом является добавление теней к вершине и основанию пространства. Мы собираемся проделать ту же самую процедуру, которую мы сделали прежде для тени; создайте два слоя по вашей форме, "верхняя тень" и "нижняя тень", и добавьте маску отсечения между ними. Тогда выберите инструмент Градиент (G) с переходом от черного к прозрачному, и сделайте градиент 15px высотой на каждом слое. Слои должны иметь непрозрачность 15 %.

Обертка страницы

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

Мы хотим иметь расстояние в 50px между заголовком и позициями табуляции, дать дизайну дыхание. Позиции табуляции будут высотой 35px. Следовательно, мы должны установить некоторые направляющие (да, вновь!) на 350 и 385px. Чтобы всё выровнять, обертка страницы должна быть высотой в 365px, так что мы помещаем ещё одну горизонтальную направляющую на 650px.

Затем, создайте новую группу слоёв, "Обертка" (Wrapper), в нашей группе "пространство" (Content). Это то место, куда мы собираемся поместить наши слои. Вам необходимы здесь три группы слоёв: контейнер, слайдер и сообщение.

Вертикальные направляющие здесь будут вполне уместны. Выберите инструмент Прямоугольник (Rec-tangle Tool), и нарисуйте белый (#ffffff) прямоугольник в определенном только что поле. Затем примените к этому следующие стили слоя:

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

Слайдер

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

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

Это должно выглядеть так:

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

Теперь мы действительно готовы начать конструировать слайдер. Создайте черный прямоугольник, охватывающий всё поле Image (см. иллюстрацию), затем добавьте внутри обводку шириной 1px цветом #a7a7a7. Затем создайте новый слой по имени "Изображение" по вашему прямоугольнику, и добавьте маску отсечения между ними. Вы можете теперь импортировать изображение, которое вы хотите здесь видеть, изменяйте его размеры, и заставляете это выглядеть привлекательно. Я использовал один из моих проектов, который Вы можете найти здесь: http://fixxxxx.deviantart.com/art/6-Flex-Engine-Web-design-119934962, если хотите использовать это для обучения. На сайте, который вы разместите в сети, вы должны, очевидно, использовать ваши собственные.

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

Вслед за этим, используя инструмент Многоугольник (Polygon Tool) с тремя сторонами, нарисуйте два треугольника, которые действовали бы как команды "предыдущее" и "следующее", и белым шрифтом Arial 12px напишите заголовок вашего изображения.

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

Сообщение

Прежде, чем мы сделаем что-то ещё, мы непременно должны добавить разделитель между нашими двумя блоками. Как я сказал ранее, середина документа делит контейнер на две равные части, но мы хотим еще и подчеркнуть это, используя разделитель шириной 1px. Создайте новый слой по имени "разделитель" (Separator), и затем используйте инструмент Выделение столбца пикселов (Single Column Marquee Tool) чтобы нарисовать линию на ширине 900px. Залейте её черным цветом, и используйте инструмент Выделение прямоугольной области (Rectangle Marquee Tool), чтобы очистить части линии, выступающие из заданной области. Установите непрозрачность слоя равной 30 %.

Хорошо, теперь, когда мы это сделали, мы должны найти броский заголовок для нашего приветственного текста. Заголовок здесь будет, очевидно, зависеть от того, какой сайт вы создаёте. Я выбрал для дизайна стиль, пригодный для агентства, занимающегося дизайном сайтов, так что я помещу заголовок "Мы создаём великолепные сайты! ”. Да, я знаю, что в действительности это звучит несколько самонадеянно, но идея состоит в том, чтобы подтолкнуть читателя к дальнейшему просмотру сайта.

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

• • Myriad Pro нормальный
• • 24px
• • сглаженный
• • цвет #6eb9cc

Это будет шрифтом заголовков по умолчанию.

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

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

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

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

Воспользуйтесь инструментом Текст (Type Tool), чтобы создать текстовое поле, и затем заполните его каким угодно случайным текстом. Я использую в качестве шрифта параграфа Arial:

• • Arial нормальный
• • размер 12px
• • межстроковое расстояние 20px
• • цвет #4d4d4d

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

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

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

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

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

Бар навигации

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

Мы будем должны создать новую группу слоёв под группой слоёв "пространство" (Box) прежде, чем двинемся дальше. Назовём её "табуляция" (Tabs). Чтобы сделать всё более опрятными, я только соз-дам новые слои для каждой позиции табуляции, соответственно "предыдущая (Previous)", "домашняя (Home)", "портфолио (Portfolio)", "о нас (About)", "контакты (Contact)", и "следующая (Next)". Мы не будем вводить прямо сейчас никакого текста. Мы создадим только структуру. Я даю вам идею, и вот как это будет выглядеть, когда мы закончим:

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

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

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

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

Последняя часть структуры - форма кнопки "предыдущая". Вы должны будете использовать для этого инструмент Перо (Pen Tool) , так что вперёд! и узнавайте, как его использовать, если вы ещё не сделали этого ранее. Это не напрасная трата времени: перо, вероятно, самый мощный инструмент в Photoshop.

Если вы знаете, как использовать инструмент Перо (U), нарисуйте форму подобную этой:

Затем поместите её в предыдущую группу слоёв, на левой стороне текущих форм.

Для ссылок я вновь использую шрифт Myriad Pro, на сей раз устанавливаю размер 14, и цвет #f6f6f6. Поскольку "Домашняя" - наша текущая страница, мы собираемся устанавливать тип шрифта полужирный, чтобы подчеркнуть это. Я обычно использую в меню эффект смены цвета при наведении курсора (эффект "нависание"), так что это объясняет, почему мы должны сделать ссылку "Портфолио" синей (цвет #6eb9cc). Ссылки, естественно, центрируются, чтобы это выглядело хорошо.

Теперь, используя ту же самую методику, которую мы использовали, создавая стрелки для команды демонстрации слайдов, мы должны создать две стрелки, одну, направленную влево, и одну - вправо, чтобы символизировать "предыдущая" и "следующая". Сделайте ваш инструмент Многоугольник (Polygon Tool) горячим!

Замечательно! Однако синяя ссылка в полном одиночестве выглядит несколько неетественно. Чтобы обозначить тот факт, что это является результатом использования ховер-эффекта ("при нависании"), мы должны добавить изображение курсора на ссылке. Вы можете вставить такое изображение:  .

А это – результат наших трудов по созданию табулированного навигационного меню:

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

Шаг восемь - модуль блога

Мы должны будем установить здесь несколько направляющих, как и прежде. Чтобы сохранять постоянство в нашем дизайне, нам необходимо иметь пространство в 50px между оберткой и модулями. Это заставляет нас поместить направляющую на 700px по высоте. Нам необходима также новая группа слоёв внутри группы слоёв "контент" по имени "модуль 1 – блог" (Blog).

Я - огромный энтузиаст иконок в дизайне сети. Это добавляет нечто такое, что придает дизайну ощущение полноты. Однако, иконки, которые мы используем, должны иметь подходящий для содержания смысл, и должны соответствовать остальной части дизайна. Для этого обучающего курса, я выбрал Crystal Project на сайте Everaldo, который является огромным набором иконок согласно лицензии LGPL, которая позволяет нам использовать их везде, где мы хотим, без необходимости платить. И лучшая похвала им то, что они просто великолепны! Вы можете увидеть их здесь http://everaldo.com/crystal/crystal_project.tar.gz.

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

Полоса заголовка

Выбрали иконку? Теперь импортируйте её в ваш документ, используя технологию "drag & dropping". Впрочем, можно использовать любую другую технологию копирования. Скорректируйте немного размеры иконки, если вы сочтёте это необходимым. Я не нахожу эти размеры слишком большими, так что я оставил всё как есть. Выровняйте иконку по точке пересечения направляющих 700px по высоте и 400px по ширине.

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

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

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

• • Arial нормальный
• • размер 12px
• • сглаживание: нет
• • цвет #f6f6f6

И запишем наш текст. Убедитесь, что он отстоит на некотором расстоянии от иконки, чтобы отделить одно от другого. Я решил также поместить эти слои в новую группу по имени "заголовок" (Header Bar).

Публикации

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

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

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

Для заголовка публикации, я буду использовать наш шрифт заголовка, однако с меньшим размером:

• • Myriad Pro нормальный
• • размер 18px
• • сглаженный
• • цвет #6eb9cc

Мы не собираемся смещать эту публикацию к нашей недавно добавленной направляющей на 445px. Мы начнём ввод текста на 430px, и сместим содержание публикации на 445px. Поместите это на 15px ниже области заголовка.

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

• • Arial нормальный
• • размер 10px
• • сглаживание: нет
• • цвет #707070

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

Что касается содержания публикации, то мы поместим здесь только несколько первых строк, чтобы этот небольшой текст занимал на экране возможно меньше места. Этот текст должен быть смещен на 445px. Используя инструмент Текст (Type Tool) мы можем сделать блок параграфа, чтобы всё было проще для нас. Шрифт, который я использую:

• • Arial нормальный
• • размер 12px
• • сглаживание: нет
• • цвет #525252

Как вы, возможно, заметили, я поместил эти три слоя, "заголовок (Title)", "мета (Meta)", и "содержание (Content)" в группу слоёв, названную "Публикация 1 (Entry 1)". Так для нас будет проще, поскольку далее мы просто сдублируем эту группу дважды, перетаскивая их по кнопке "новый слой (New Layer)". Переименуйте эти группы и назовите "Публикация 2" и " Публикация 3", соответственно, и поместите их друг под другом. Вы должны, очевидно, оставить некоторое пространство между статьями, только не слишком уж большое, чтобы это не выглядело сверхъестественным. То, что должно получиться, должно выглядеть примерно так:

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

Кнопка "читать далее"

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

Создайте новый документ с прозрачным фоном размером 210 на 25px. Создайте скругленный прямоугольник (Rounded Rectangle) с радиусом 10px. Цвет не имеет значения. Убедитесь, что высота созданной формы 20px, и что боковые стороны сходятся в полукруг. Оставьте некоторое пространство в основании и справа для тени.

Теперь кнопку необходимо приукрасить, добавляя несколько стилей слоя: подающая тень (drop shadow), оверлей градиента (gradient overlay), и обводка (stroke).

Это придаст кнопке симпатичный трехмерный эффект:

Теперь мы должны добавить текст. Я использую Myriad Pro размером 12 и цветом #393939. Не забудьте центрировать текст!

В заключение добавим скос (bevel) тексту:

Теперь мы должны импортировать это в наш документ, допустим техникой drag & drop, и всё готово! Я решил выровнять кнопку по правой стороне, но это будет выглядеть так же хорошо и в центре, или слева, так что выбор за вами. Я также поместил эти два слоя в группу "Читать далее (Read More)", что-бы не нарушать общего правила.

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

Шаг девять - модуль твиттера

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

Полоса заголовка

Чтобы начать, продублируйте полосу заголовка модуля блога, поместите копию на другую сторону документа, и создайте новую группу слоёв, названную "Модуль 2 – Твиттер (Module 2 – Twitter)". Замените текст чем-нибудь подобным, "Следуйте за командой "На обочине" на твиттер". Сделайте это сообщение действительно персональным. Действительно, твиттер – это что-то такое, что должно быть дружественным и личным, потому что это позволяет вашим читателям стать ближе к вам.

Я решил использовать иконку твиттера в этом обучающем курсе, так как это только для образовательной цели. Однако, если вы намереваетесь разместить свой сайт в сети, мы должны будете использо-вать другую иконку в соответствии с соглашением об авторском праве. Но в данном случае я подумал, что это выглядит превосходно, и решил использовать её здесь. Вы можете взять это из Википедии, например, разыскивая Twitterific http://en.wikipedia.org/wiki/File:Twitterrific.png.

Включите иконку в ваш документ, измените её размеры нажав Ctrl / Cmd + T, и поместите её вместо газеты. Я решил сделать эту иконку немного большей, чем газета, просто потому что иначе это не смотрелось хорошо.

Твиты

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

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

Создайте новую группу слоёв, названную "твит 1", которую мы впоследствии продублируем, чтобы создать наш другой твит.

Начнём с картинок. Вы можете найти изображения на stock.xchng в категории портретов.

Прежде, чем мы добавить изображение, мы будем должны создать форму, чтобы сделать маску отсечения. Используйте инструмент Прямоугольник (Rectangle Tool) и создайте квадрат размером 35*35px, и добавьте 1px на обводку цветом #202020.

Как только вы нашли на stock.xchng изображение, которое вам понравилось, вы можете добавить это к нашему дизайну. Просто перетащите его на дизайн, и создайте маску отсечения между недавно созданным слоем формы и изображением. При необходимости измените размеры изображения нажатием Ctrl / Cmd + T.

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

• • Myriad Pro нормальный
• • размер 18px
• • сглаженный
• • цвет #6eb9cc

Убедитесь, что вы оставили зазор 15px между изображением и именем, добавляя новую направляющую.

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

• • Arial нормальный
• • размер 12px
• • сглаживание: нет
• • цвет #525252

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

А теперь, когда мы твит сделали, мы можем просто продублировать группу слоёв " твит 1 ", чтобы создать другие твиты. Переименуйте ваши группы слоёв, чтобы получить твиты 2, 3 и 4, соответст-венно. Оставьте пространство в 15px между каждым.

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

Теперь единственным объектом, отсутствующим по сравнению с модулем блога, будет кнопка "читать далее". Так что мы сдублируем группу слоёв "читать далее" в модуле блога и поместим её копию в группу "модуль твиттера", и переименуем её, например, так "Получить больше твитов!". Мы не будем оставлять ту же самую фразу "Читать далее", чтобы сделать просмотр более личным, и показывать, что мы действительно потратили некоторое время, делая эти кнопки.

Единственное, что нужно изменить, это текстовый слой, чтобы отображался текст "Получить больше твитов!". Знак восклицания соответствует неофициальному духу твиттера. Горизонтально поставьте эту кнопку на тот же уровень, что и кнопку "Читать далее", а по вертикали задайте выравнивание по правой стороне.

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

Мы действительно создали кое что, не так ли?

Шаг десять - футер

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

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

Мы должны создать новую группу слоёв по имени "футер (Footer)", в которой будут две вложенные группы, "изображение (Image)" и "бар (Bar)".

Изображение

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

Теперь перетащите наш фоновый рисунок заголовка в наш документ снова, и создайте маску отсечения между изображением и слоем формы. Используйте Ctrl / Cmd + T, чтобы поместить изображение правильно.

Полоса футера

Так, мы сделали фоновое изображение футера. Будем создавать область футера. Создайте новую группу в группе "бар (Bar)", названную "полоса (box)", и инструментом Прямоугольник (Rectangle Tool) заполните остающуюся прозрачную часть дизайна цветом #f8f8f8

Теперь создайте новый слой по имени "Тень (Shadow)", создайте маску отсечения между тенью и формой, и инструментом Градиент (Gradient Tool) сделайте черную тень примерно 15px высотой. Установите непрозрачность слоя на 15 %.

Наконец, чтобы закончить это поле, продублируйте слой "верхняя граница" блока с контентом, используя Ctrl / Cmd + J, перетащите этот слой в группу "полоса (box)" футера и переименуйте его.

Создайте новый текстовый слой со шрифтом параграфа:

• • Arial нормальный
• • размер 11px
• • сглаживание: нет
• • цвет #525252
• • выравнивание текста: по центру

Запишите некую лицензию по защите авторского права, или ещё что - нибудь, что Вы хотите вставить в футер. Я решил поместить авторское право, название компании, и "Все права защищены". Чтобы раномернее заполнить пространство, я поместил это в две строки. Выровняйте этот текстовый слой по направляющей на 800px по ширине.

Шаг одиннадцать – Наслаждаемся результатом!

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

Шаг двенадцать - Заключительные мысли

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

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

Буду рад видеть вас завтра в части II!

Комментарии