Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1

Автор: myspears | Категория: Уроки Photoshop » Web | 25-01-2012, 23:08
Создание макета страницы с презентацией компании. Часть 1


Для работы понадобиться
Пустой шаблон HTML


Шаг 1 – Создание нового документа
Итак, давайте займемся дизайном. Я только отмечу, что за основу дизайна этой страницы, взят реально существующий проект. Нам предстоит проделать огромную работу, поэтому каждый шаг будет настолько коротким, насколько это возможно. Для обозначения границ дизайна нам понадобятся направляющие. Фактически, ширина композиции составит 980 пикселей, но ширина самого холста будет больше этой величины. Не утруждайте себя вычислениями, просто доверьтесь мне. Итак, создаем документ с направляющими самым быстрым известным мне способом. Я называю его 0/100. Дело в том, что изменяя размер холста, я расставляю одну направляющую на отметке 0%, а вторую – на отметке 100%. Вы когда-нибудь обращали внимание, что одни параметры в Photoshop задаются в абсолютных величинах, а другие – в процентах? Вот например как здесь:

Создание макета страницы с презентацией компании. Часть 1



И вот здесь:

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Сейчас вы поймете о чем идет речь. Например, нам нужен документ размером 1200x1845 пикселей. Теперь нам нужно расположить на холсте две направляющие, ограничивающие область шириной 980 пикселей по центру холста. Как это можно сделать? Создайте документ шириной 1200 пикселей. Теперь разделите эту величину пополам, получая результат – 600. Наш дизайн имеет ширину 980 пикселей, которую мы тоже делим на два и получаем 490. Теперь добавляем и вычитаем эту величину от отметки центра холста: 600-490 и 600+490. В результате получаем 110 и 1090 пикселей. Тем, кто не умеет быстро считать в уме эта процедура может показаться проблематичной. Тем более, что существует гораздо легкий способ, который лично я использую каждый день, и требующий минимум вычислений. Если нам нужен документ шириной 980 пикселей с отступом в 20 пикселей (на всякий случай), то задаем размер холста 940x1845 и расставляем направляющие на отметках 0% и 100%.

Создание макета страницы с презентацией компании. Часть 1



Далее проходим в меню Изображение > Размер холста (Image > Canvas Size) и вводим значение 40 в поле Ширина (Width) (обратите внимание на галочку у пункта Относительная (Relative)). Это и будет ширина двух полей по 20 пикселей.

Создание макета страницы с презентацией компании. Часть 1



И снова расставляем две направляющие на отметках 0% и 100%. После этого еще раз открываем меню Изображение > Размер холста (Image > Canvas Size), только теперь галочку на пункте Относительная нужно убрать, а в поле Ширина ввести 1200. Быстро, и с минимальной вероятностью ошибки. Наш пустой документ готов. Он имеет размер 1200x1845, как мы и хотели, и имеет ограниченную направляющими область в центре.

Шаг 2 – Зашумленный фон
С каждым шагом наша работа выглядит все симпатичнее. Зашумленные фоны в настоящее время очень популярны у дизайнеров, и вы сами, скорее всего, создали не один такой фон, но на всякий случай я еще раз покажу, как это делается. Зашумленные фоны придают композиции ощущение загрязненности, и идеально подходят для заполнения фигур монотонным цветом. На самом деле этот метод несколько заезжен. Вы можете увидеть зашумленный фон во многих современных дизайнерских работах. Тем не мене, будь они такими плохими, разве использовались бы так часто? Нанесение легкого шума – уловка довольно старая, которая стала заметным трендом в 2008 – 2009 годах. Она такая же старая как… Она просто очень старая! Каждый дизайнер, работающий с цифровыми изображениями, знает мощность текстурирования, частью которой и является шум. Текстурирование в веб-дизайне применяется тоже давно. Зашумление фона имеет большое значение, еще и из-за легкости его создания. Итак, давайте создадим некоторое количество пикселей зашумления. Для начала создайте новый слой и заполните все его содержимое (SHIFT+F5 / Редактирование > Выполнить заливку (Edit > Fill)) каким-либо светлым цветом типа #efefef. Затем пройдите в меню (сейчас вы удивитесь) Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и введите в поле Эффект, значение 2.5, или что-то ближе к этому, отметьте в разделе Распределение (Distribution) пункт Равномерная (Uniform), и поставьте галочку на пункте Монохромный (monochromatic). Затем, пройдите в меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur) и в открывшемся окне задайте радиус, равный 0.5. Вот и все!

Создание макета страницы с презентацией компании. Часть 1



Как альтернатива, вы могли бы воспользоваться меню Фильтр > Штрихи > Акцентировать на краях (Filter > Brush strokes > Accented edges), затем снова Фильтр > Шум > Добавить шум (Filter > noise > Add noise), настройки прежние. Таким образом вы получите более органичную текстуру. Но я, все же, выбрал первый вариант.

Создание макета страницы с презентацией компании. Часть 1


Шаг 3 – Фон шапки страницы
Начнем с горизонтальной направляющей. Расположите ее на высоте, которую хотели бы задать области заголовка страницы. Я поставил ее просто на глаз. В этой области будет расположен только логотип и окно поиска. Далее, создайте фигуру прямоугольной формы, растрируйте ее (ПКМ по слою на палитре слоев, затем – пункт Растрировать (Rasterize)) и добавьте немного шума так же и на эту фигуру (количество: 1.5-2.5 в процентах).

Создание макета страницы с презентацией компании. Часть 1



Теперь создайте вот такую выделенную область…

Создание макета страницы с презентацией компании. Часть 1



… и залейте ее каким-нибудь градиентом чуть светлее основного фона. В результате должно получиться что-то вроде этого:

Создание макета страницы с презентацией компании. Часть 1



После этого пройдите в мню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian blur) (задайие радиус – примерно 6-10 пикселей), получив таким образом более мягкие стыки.

Создание макета страницы с презентацией компании. Часть 1



При помощи Ластика (eraser tool) подотрите пограничные области, оставляя градиент только в центральной части. Для этой цели выберите мягкую кисть. Маленький совет: на первом этапе используйте кисть с непрозрачностью (opacity) 100%, чтобы сгладить грани. Затем, уменьшите непрозрачность до 30% и обработайте грани еще раз, делая переход еще более плавным.

Создание макета страницы с презентацией компании. Часть 1



Теперь создайте выделенную область в основании области заголовка (“шапки”), выберите какой-нибудь темно-серый цвет и наложите узкую полоску градиента. На рисунке ниже представлен градиент со 100% непрозрачностью. В последствии, я уменьшил непрозрачность до 33%, сделав его едва различимым.

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Кроме этого я наложил еще один, на этот раз – радиальный, градиент на фон шапки. Затем я частично удалил тень в верхней части заголовка (Ctrl+ЛКМ по иконке слоя на палитре слоев, Delete). И конечно же, все элементы должны создаваться на отдельных слоях. Как вы можете заметить, я придал гардиенту некоторую текстурность, но пусть это вас не смущает. Она будет практически незаметной. Это просто моя привычка – создавать градиенты без явных пиксельных переходов. Вместо этого вы можете вы можете воспользоваться меню Фильтр > Шум > Добавить шум (Filter > Noise > Add noise) и получить такой же разультат.

Создание макета страницы с презентацией компании. Часть 1



Теперь давайте изменим непрозрачность градиента до 55% и режим наложения (blending mode) на Перекрытие (Overlay).

Создание макета страницы с презентацией компании. Часть 1



Шапка готова. Добавляем на него логотип и окно поиска.



Шаг 4 – Элементы шапки
Для начала придумаем логотип какой-либо несуществующей компании. Вы можете использовать любой понравившийся вам логотип. Это не принципиально. Здесь я просто хочу показать как немного оживить вид простых фигур. Итак, приступим. Расположите логотип по направляющим. Не скрою, я подбирал свой логотип под основные цвета дизайна страницы. Известный факт, когда вы получаете готовый логотип от вашего клиента, очень важно гармонично вставить его в дизайн. Поэтому нужно учитывать дизайн логотипа (цвет, форму, положение) при разработке страницы, если только предоставленный вам логотип не выполнены в серых тонах, что заметно упростит вам задачу.

Создание макета страницы с презентацией компании. Часть 1



Я намерен наложить на логотип свет и тени, но, некоторые его области почти серые, и если я наложу здесь тени, навряд ли их можно будет разглядеть. Поэтому, я создал дубликат слоя и сместил его на 1 пиксель вниз. Затем, воспользовался меню Изображение > Коррекция > Яркость/Контраст (Adjustments > Brightness/Contrast) и сдвинул бегунок яркости (Brightness) на значение -100. Я так же наложил Размытие по Гауссу (Gaussian Blur) с очень маленьким радиусом, так, чтобы не образовывались резкие грани. Вот так легко мы получили тень под логотипом.

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1



С этого момента, все слои, создаваемые на этом шаге, должны создаваться в виде обтравочной маски (clipping mask). Я уже писал о выгоде применения обтравочных масок, поэтому не вижу смысла повторяться. Помните, что нужно создавать как можно больше отдельных слоев, с тем, чтобы, если возникнет необходимость, вы всегда могли внести какие-либо коррективы. Вот пример:

Создание макета страницы с презентацией компании. Часть 1



Наложите прозрачный градиент цвета немного темнее логотипа по направлению снизу вверх. Это подчеркнет тень.

Создание макета страницы с презентацией компании. Часть 1



Если потребуется, можете задать режим наложения (blending mode) этого слоя – Умножение (multiply). Здесь вы можете заметить, что градиент можно накладывать без всякого предварительного выделения, и он не выйдет за границы фигуры. Теперь наложи свет. Я использовал два радиальных градиента, один наложил на серую область логотипа, другой – очень большой, белый радиальный градиент – на весь логотип, задав режим наложения – Перекрытие (Overlay).

Создание макета страницы с презентацией компании. Часть 1



Для того, чтобы выделить логотип, можно применить к нему тиснение. Это делается очень легко и быстро. Выделите содержимое слоя с логотипом (Ctrl+ЛКМ по иконке слоя на палитре слоев) и залейте его белым цветом.

Создание макета страницы с презентацией компании. Часть 1



Не снимайте выделения. Выберите какой-нибудь инструмент выделения (стрелка), с помощью которого можно было бы перемещать выделенную область вокруг изображения. Теперь нажмите одни раз кнопку с левой стрелкой на клавиатуре, сметив, таким образом, выделение на один пиксель влево. Затем нажмите Delete. Еще можно уменьшить непрозрачность этого слоя примерно до 75%.

Создание макета страницы с презентацией компании. Часть 1



Шаг 5 – Окно поиска
Мы создадим окно поиска без кнопки “Поиск”. Это действие будет осуществляться по нажатию на специальной пиктограмме поиска, которая визуально будет находиться внутри окна ввода. Обычно, содержание формы отправляется на сервер при нажатии Enter, но так же неплохо было бы предусмотреть соответствующий кликаемый элемент. Итак, при помощи Прямоугольника со скругленными углами (Rounded Rectangle Tool) создаем прямоугольник белого цвета, как показано на примере ниже, и выравниваем его по направляющим.

Создание макета страницы с презентацией компании. Часть 1



Создайте дубликат слоя и измените его цвет на какой-нибудь светло-серый (например, #9b9b9b). Для этого просто кликните на пиктограмме цвета, расположенной рядом с названием слоя.

Создание макета страницы с презентацией компании. Часть 1



Теперь оба эти слоя можно растрировать (rasterize). Давайте немного систематизируем названия слоев, для большей ясности. Слой белым прямоугольником назовем Основным слоем, а с серым – “Теневым слоем”. Далее займемся режимом наложения Основного слоя. Задайте следующие установки:

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1



Затем, при помощи меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian blur), и задав Радиус не больше 0.5-1 пикс, немного размоем Теневой слой. Вот что вы должны получить в результате:

Создание макета страницы с презентацией компании. Часть 1



Создайте обтравочную маску (clipping mask) для Основного слоя и наложите легкий серый радиальный градиент.

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1




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

Создание макета страницы с презентацией компании. Часть 1



Затем, пройдите в меню Редактирование > Трансформация > Масштаб (Edit > Transform > Scale) и уменьшите копию. Я изменил цвет копии, чтобы вам было виднее, но на само деле ее цвет не имеет значения. Далее, растрируйте оба слоя.

Создание макета страницы с презентацией компании. Часть 1



Удерживая Ctrl, кликните ЛКМ по иконке слоя-копии (красный) на палитре слоев, выберите оригинальный слой, и нажмите Delete. Затем скройте/удалите слой-копию, и получите вот такую фигуру:

Создание макета страницы с презентацией компании. Часть 1



Далее, нарисуйте скругленный прямоугольник где-нибудь ниже круга. Выберите инструмент Перемещение (V).

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



При обоих выделенных слоях, пройдите в меню Редактирование > Трансформирование > Повернуть (Edit > Transform > Rotate), и поверните фигуру примерно на 35-45 градусов. Вот так:

Создание макета страницы с презентацией компании. Часть 1



Объедините слои и перетащите получившуюся фигуру на наш основной холст. Уменьшите ее масштаб, примените стиль слоя (blending option) Тень (shadow), задав белый цвет, и добившись, таким образом, эффекта вдавленности.

Создание макета страницы с презентацией компании. Часть 1



Шаг 6 – Основное меню
Наше основное меню будет очень-очень простым. Оно должно выглядит довольно ярко на общем сером фоне, чтобы сразу притягивать к себе внимание. Но сначала давайте создадим кнопку обратной связи. Я постараюсь сделать ее ширину такой же, как ширина окна поиска. Создав фигуру цвета #e55a21, я растрировал ее.

Создание макета страницы с презентацией компании. Часть 1



Создайте дубликат слоя и переместите его на 1 пиксель вниз (при помощи стрелки вниз на клавиатуре). Затем, пройдите в меню Изображение > Коррекция > Яркость/ Контраст (Image > Adjustment > Brightness/Contrast) и задайте следующие параметры, получив в результате простую тень под кнопкой. Далее, примените Гауссовское размытие (Filter > Blur > Gaussian blur), задав радиус 0.5 пикселя.

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1



Теперь давайте создадим несколько обтравочных масок, для того, чтобы немного оживить кнопку. Начнем с наложения градиента цвета #ce4614 в направлении снизу вверх. Измените непрозрачность до 10-30% и режим наложения на Умножение.

Создание макета страницы с презентацией компании. Часть 1



Сейчас он выглядит чересчур ярко, но далее, мы применим к нему определенную цветовую коррекцию. Наложите радиальный градиент цвета #f9b242 посередине верхней части фигуры.

Создание макета страницы с презентацией компании. Часть 1



Выделите кнопку, кликнув при нажатой клавише Ctrl по иконке ее слоя, и залейте ее цветом #ffd47b. Затем пройдите в меню Выделение > Модификация > Сжать (Select > Modify > Contract) и выполните сжатие на 1 пиксель. Теперь нажмите Delete, и вы получите 1-пиксельную внутреннюю кромку кнопки.

Создание макета страницы с презентацией компании. Часть 1



Немного уменьшите непрозрачность (примерно до 80%) и измените режим наложения слоя на Перекрытие (Overlay). Эта маленькая деталь заметно усилит контраст.

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Теперь создадим смешивающий слой. Вы можете создать его в виде обтравочной маски, либо как слой-маску. Главное, чтобы он был применен только к самой кнопке, а не ко всему содержимому слоя. Кликните по указанной ниже иконке, и в открывшемся меню выберите пункт Вибрация (Vibrance). Затем, сдвиньте бегунок величины вибрации в положительную область, чтобы получить насыщенный, живой цвет.

Создание макета страницы с презентацией компании. Часть 1

Создание макета страницы с презентацией компании. Часть 1



Нанесите на кнопку текст (я использовал шрифт Arial для букв и Georgia для цифр) и при помощи стилей слоя (blending options) наложите простенькие тени.

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Растрируйте получившуюся фигуру. Далее, создайте выделенную область вокруг нее (Ctrl+ЛКМ по иконке слоя), пройдите в меню Выделение > Модификация > Сжать (Select > Modify > Contract) и сожмите выделенную область на 1 пиксель. Выберите любой инструмент создания выделенной области (просто нажмите M) и клавишей со стрелкой вниз переместите выделение на 30 пикселей (удерживайте Shift, тогда область будет смещаться сразу на 10 пикселей за одно нажатие клавиши).

Создание макета страницы с презентацией компании. Часть 1



Затем нажмите Delete, и вот что получите в результате:

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Шаг 7- Эффекты для пунктов главного меню
Меню создано, но нам еще предстоит придать ему некоторое ощущение динамики за счет активных пунктов. Мы проделаем кое-какую коррекцию в Photoshop, после чего, в последующих шагах, опишем ее в CSS. Эффект активного пункта будет создан для панели авторизации. Создайте для этого пункта фон, таким же способом, который мы использовали при работе с кнопкой. На этот раз не нужно накладывать тени. А границу пункта обозначим только вдоль верхней и нижней граней. Весь остальной процесс повторяется полностью.

Создание макета страницы с презентацией компании. Часть 1



Временно отключите видимость этого слоя. Пока нам достаточно просто знать о его существовании. Теперь выберите темный цвет, например, #2c2c2c, и нарисуйте вот такую фигуру вдоль направляющей. Я использую ее для выделения пункта “О компании”, но лучше выбрать пункт подлиннее, если такой имеется. Так же измените цвет шрифта на светло серый: #ededed

Создание макета страницы с презентацией компании. Часть 1



Наложите тени:

Создание макета страницы с презентацией компании. Часть 1



Свет:

Создание макета страницы с презентацией компании. Часть 1



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

Создание макета страницы с презентацией компании. Часть 1



Небольшой совет: для шрифта малого размера я применяю анти-сглаживание (anti-aliasing). Если размер шрифта более 20 пикселей, я применяю параметры Сильный (Strong) или Резкий (Crisp). Впрочем, параметры текста позже могут быть изменены непосредственно в HTML.


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

Ключевые теги: урок фотошоп создание шаболано html web

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

Другие новости по теме:


Просмотров: 5330 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


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

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

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