В предлагаемом уроке по Фотошопу мы познакомим вас с процессом создания несложного выпадающего меню.

Предпросмотр законченного изображения

Шаг 1
Откройте Фотошоп нажмите Ctrl+N, создав, таким образом, новый документ. Введите установки, приведенные ниже, и нажмите OK. Включите отображение сетки: Просмотр > Показать > Сетку (View > Show > Grid), а так же включите привязку к сетке: Просмотр > Привязка к…> Линиям сетки (View > Show > Grid). На данный момент нам будет достаточно линий через каждые 5 пикселей. Пройдите в меню Редактирование > Установки > Направляющие, Сетка и Фрагменты (Edit > Preferences > Guides, Grid & Slices) и обратите внимание на разделе Сетка (Grid). Введите значение 5 в поле “Линия через каждые…” (Gridline Every), и значение 1 в поле “Внутреннее деление на…” (Subdivision). Наконец, задайте цвет сетки: #a7a7a7, и нажмите OK.

Пусть вас не пугает появившаяся на холсте густая сетка. Она нужна, чтобы облегчить вашу работу. Кроме всего прочего, включим так же отображения инфо-панели: Окно > Инфо (Window > Info) чтобы в реальном масштабе времени отслеживать положение ваших элементов и фигур.

Шаг 2
Установите Основной цвет (Foreground): #3f8ecf, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и задайте радиус 20 пикс. Создайте векторный контур размером 160x40 и продублируйте его: Control + J. Выделите копию, и сделайте ее белой. Переключитесь на инструмент Прямоугольник (Rectangle Tool), нажмите на кнопку Пересечение с выделенной областью (Intersect) на верхней панели, и начертите векторный контур размером 40x40 пикселей, как показано на третьем изображении внизу. Обратимся к палитре слоев и дважды кликните по белому контуру, что бы открыть окно стилей слоя.

Примените Внутреннее свечение (Inner Glow) и Обводку (Stroke), затем введите параметры, показанные на следующих иллюстрациях.

Шаг 3
Снова выделите синий скругленный прямоугольник, созданный на предыдущем шаге, и продублируйте его: Control + J. Выделите копию, сделайте ее белой, и переключитесь на инструмент Прямоугольник (Rectangle Tool). Нажмите на кнопку Пересечение с выделенной областью (Intersect) на верхней панели, и начертите векторный контур размером 120x40 пикселей, как показано на втором изображении ниже.

Снова обращаемся к палитре слоев. Кликните ПКМ по белому контуру, созданному на предыдущем шаге, и выберите пункт “Копировать стиль слоя” (Copy Layer Style). Далее, клик ПКМ по белому контуру, созданному в начале данного шага, и пункт “Вставить стиль слоя” (Paste Layer Style).

Шаг 4
Выберите инструмент Текст (Type Tool) и наберите ваш текст, как показано на следующем изображении. Задайте цвет текста: #a1d8ff , затем, открыв окно стилей слоя, введите установки, показанные на изображениях ниже:

Шаг 5
Возвращаемся к синему скругленному прямоугольнику, созданному на втором шаге, открываем окно Стилей слоя и вводим приведенные ниже установки. Продублируйте эту фигуру: Control + J, выделите копию, снова откройте окно стилей слоя, и примените Тень (Drop Shadow) с приведенными ниже настройками. Выделите все фигуры, созданные на данный момент, и сгруппируйте их: Control + G. Это будет ваше закрытое выпадающее меню. На последнем шаге мы еще немного доработаем его.

Шаг 6
Вновь обратимся в палитре слоев. Кликните по группе, созданной на предыдущем шаге, ПКМ и выберите пункт “Дублировать группу” (Duplicate Group). Выделите вновь созданную группу, перетащите ее ниже и расположите так, как показано на изображении ниже.

Шаг 7
Продолжим работу с группой, созданной на предыдущем шаге. Прежде всего нужно проредактировать имеющийся здесь текст. Измените цвет на #b4b4b4, после чего кликните по ней ПКМ (на палитре слоев) и выберите пункт “Очистить стили слоя” (Clear Layer Style). Откройте окно стилей слоя и примените к серому тексту Тень (Drop Shadow) с приведенными ниже настройками.

Шаг 8
Установите Основной цвет (foreground color): #f5f5f5, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установите радиус: 20 пикселей. Создайте векторный контур размером 160x35 пикселей, расположив его, как показано на первом изображении ниже, после чего создайте его дубликат: Control + J. Выделите дубликат, и сделайте его белым. Переключитесь на инструмент Прямоугольник (Rectangle Tool), нажмите на кнопку Пересечение с выделенной областью (Intersect) на верхней панели, и начертите векторный контур размером 40x35 пикселей, как показано на втором изображении внизу.

Обратимся к палитре слоев. Уменьшите непрозрачность заливки (Fill) данного контура до 0%, после чего, открыв окно стилей слоя, примените приведенные на изображениях ниже настройки:

Шаг 9
Снова выделите скругленный прямоугольник, созданный в начале предыдущего шага, и продублируйте его (Control + J). Выделите копию, переместите ее на передний план: Shift + Control + ], уменьшите непрозрачность заливки (Fill) до 0%, откройте окно стилей слоя и введите следующие настройки:

Шаг 10
Снова выделите второй контур, созданный на шаге 8, и продублируйте его: Control + J. Выделите копию, переместите ее на передний план: Shift + Control + ]. Далее откройте окно стилей слоя и подкорректируйте параметры стиля слоя Тень так, как показано ниже.

Шаг 11
Займемся правой частью фигур, созданных в процессе выполнения последних шагов. Установите Основной цвет (foreground color) - #ebebeb, выберите инструмент Прямоугольник (Rectangle Tool), создайте векторный контур размером 10x15 пикселей и расположите его как показано на первом изображении ниже. Выделите этот маленький прямоугольник. Кликните по кнопке Добавить к выделенной области (Add) на верхней панели опций и нарисуйте еще один векторный контур размером 10x15, как показано на втором изображении ниже. Убедившись, что последний созданный контур по-прежнему активен, нажмите Control + T, поверните его на 45 градусов, и нажмите Enter.

Переходим к палитре слоев. Удерживая Ctrl, кликните по иконке слоя с векторным контуром, созданном на предыдущем шаге. В результате будет загружена его простоя выделенная область. Теперь выберите инструмент Выделения (Selection Tool) и убедитесь, что активен именно слой с векторным контуром – стрелкой.

Кликните по кнопке “Вертикальные центры” (Align vertical centers) и “Горизонтальные центры” (Align horizontal centers) на верхней панели опций, чтобы выровнять вашу стрелку как показано на пятом изображении внизу. Далее откройте окно стилей слоя и примените следующие стили с приведенными ниже настройками.

Шаг 12
Выберите инструмент Текст (Type Tool) и наберите простой текст как показано на изображении ниже. Задайте цвет #b4b4b4, после чего откройте окно стилей слоя и примените Тень с приведенными на изображении настройками. Выделите этот новый текст с элементами, созданными на последних четырех шагах, и сгруппируйте все это: Control + G.

Шаг 13
Создайте еще четыре копии последней созданной группы. Расположите новые группы так, как показано ниже и измените надписи.

Шаг 14
Обратите внимание на подпункт меню, обозначенный у меня как “ Tutorials ”, откройте окно стилей слоя применительно к фигуре-стрелке и введите следующие параметры:

Шаг 15
Выделите текст “Tutorials” и измените его цвет на #2c95dd. Так же выделите серый скругленный прямоугольник под текстом, откройте окно стилей слоя, примените Наложение Градиента (Gradient Overlay) с настройками приведенными ниже.

Шаг 16
Для выполнения завершающих шагов нам понадобится сетка с размером ячейки 1 пиксель. Поэтому пройдите в меню Редактирование > Установки > Направляющие, Сетка и Фрагменты (Edit > Preferences > Guides, Grid & Slices) и введите значение 1 в поле “Линия через каждые…” (Gridline Every). Установите Основной цвет - #a1d8ff, выберите инструмент Прямоугольник, создайте 6-пиксельный квадрат и расположите его так, как показано на первом изображении ниже. Далее выберите инструмент Выделение контура (Direct Selection Tool) и обратите внимание на нижнюю часть созданного векторного контура. Выделите правую опорную точку и сместите ее на 3 пикселя влево. Переключитесь на инструмент Удаления опорной точки (Delete Anchor Point Tool) и кликните по оставшейся нижней опорной точке, чтобы удалить ее. В результате ваш квадрат должен превратиться в треугольник!

Законченное изображение

Привет всем! На этот раз мы приготовили для вас урок о том, как создается готовый к печати буклет для воображаемого кофейного магазина под названием “Violet Coffee”. В этом уроке пойдет речь о подготовке фона и паре вспомогательных объектов, которые мы впоследствии импортируем в Adobe InDesign для завершения буклета. Готовы? Поехали!

Перед тем как начать

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

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

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

Давайте начнем. Для урока понадобится следующее:

• Чашка с кофе,
• Дым,

Разметка документа

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

На лицевом листе будет находиться макет обложки, а на обратном - непосредственно текст меню. Листовка будет складываться вдвое, как буклет. В качестве основных цветов будет использоваться фиолетовый и черный для фона и практически белый - для текста. Размеры холста могут варьироваться, но по моему мнению “double - letter” вполне подойдет. Так мы под каждую страницу будем иметь свой формат леттер (215,9 ? 279,4 мм). Вообще принято печатать меню на больших форматах, но в конечном итоге все зависит от ваших предпочтений. Что ж, определившись с целями и идеями, можно двигаться дальше.

1 Шаг

Создадим один документ для шаблона с фоном, на котором поместим название компании и нанесем чашку кофе.

Откройте Photoshop и выполните File > New. Для начала определитесь, какого формата бумагу вы хотите использовать (это может упираться также в бюджет клиента). Я предлагаю начать размышления с размера Letter 8,5 x 11 дюймов (215,9 ? 279,4 мм). Еще очень важно выставить разрешение на этом этапе (минимальное разрешение для полиграфической печати по моему опыту составляет 300 точек на дюйм (300ppi)). И на этом же этапе нам нужно задать цветовой режим CMYK.

Обложка буклета будет одной целой частью и получится вследствие сложения вдвое уже напечатанного листа меню. Поэтому для того чтобы фон получился плавным, без нежелательных врезок и переходов, мы будем создавать его как цельный документ, что подразумевает увеличение исходного размера шаблона в два раза (“Double Letter”).

Увеличьте ширину бумаги Letter до 17 дюймов. После проверки введенных параметров жмите Ok.

2 Шаг

Сейчас мы имеем нормально печатающийся холст, но все-таки, не мешало бы позаботиться о дополнительном пространстве по периметру для подстраховки при печати без полей. Активируйте линейки (Rulers, Ctrl + R) и вынесите на рабочую область четыре направляющих (кликаем по линейке и тащим на холст) по одной на каждую границу документа. Затем откройте Image > Canvas Size и увеличьте документ на 1/8 дюйма сверху, снизу и по бокам. Этого можно добиться, просто добавив по 0,25 дюйма к высоте и ширине, как показано у меня на иллюстрации ниже. Убедитесь в том, что точка фиксации (Anchor) находится по центру, и нажмите Ok.

Разработка фона

3 Шаг

Начнем с собственно графики. Для начала растянем слой с градиентом Gradient Fill Layer. Выполните Layer > New Fill Layer > Gradient и задайте цветам градиента следующие значения: Violet (C:80, M:100, Y:30, K:25) и Black (C:70, M:70, Y:70 и K:95), что есть обобщенное значение насыщенного черного (Rich Black в типографии) и работает очень выгодно. Не забудьте выставить Angle на 90 градусов.

4 Шаг

Сейчас применим к фону некоторые эффекты. Создайте новый слой поверх слоя с градиентом, выставьте основной цвет равным C:80 M:70 Y:60 K:80, фоновый задайте белым. Затем откройте Filter > Render > Clouds. Смените режим наложения этого слоя на Overlay. Затем выполните Filter > Blur > Motion Blur, задайте Angle равный 90 градусам, а Distance 999px. В итоге подкорректируйте уровни Levels (Ctrl + L) как показано на рисунке ниже, чтобы завершить работу над эффектом.

5 Шаг

При помощи Pen Tool (P) создайте фигуру, как показано на рисунке ниже. Залейте путь цветом C:10, M:15, Y:0, K:0. Для хранения слоев в надлежащем порядке используйте группы. Первым делом я создал группу с названием “Curves Right” и поместил в нее все кривые для правой части холста. После этого выполните Layer > Layer Mask > Hide All и залейте ее горизонтальным градиентом от белого к черному, делая видимой лишь левую часть фигуры. В конечном итоге спустите Opacity слоя до 25% и задайте ему режим наложения Color Dodge.

6 Шаг

Дублируйте свою фигуру несколько раз (удерживая Alt и перетаскивая слой) и при помощи Transform Tool измените каждый из дублей так, чтобы получить нечто похожее на содержимое приведенной ниже иллюстрации. Вы можете привнести столько кривых, сколько захотите. Пробуйте играть со значениями Opacity каждой из фигур, чтобы получить как можно более интересный эффект.

Затем выделите группу “Curves Right” и перетащите ее на правую часть холста. После чего дублируйте ее (этого также можно добиться удерживанием Alt и перетаскиванием) и выполните Edit > Transform > Flip Horizontal для отображения дубля по горизонтали. Затем переименуйте дубль в “Curves Left” и перетащите его на левую сторону холста.

7 Шаг

Создайте новый слой поверх “Curves”. При помощи Ellipse Tool (U) нарисуйте розовый кружок (C:5 M:55 Y:0 K:0). Чтобы круг получился правильной формы, удерживайте Shift при его растягивании. Затем откройте Filter > Blur > Gaussian Blur (вас попросят растеризировать слой - выполните это), задайте радиус размывки 50px и нажмите Ok. Далее смените режим наложения слоя на Color Dodge, установите 50% значение Opacity и поместите это пятнышко куда-нибудь поверх любой из ваших кривых.

Дублируйте этот слой столько раз, сколько посчитаете нужным, смените Opacity, поиграйте с размерами каждого дубля, ну и попробуйте получить нечто похожее на приведенную ниже иллюстрацию. После того, как вы закончите с кружками, перенесите их все в отдельную папку с названием что-то вроде “Light Spheres”.

8 Шаг

На этом шаге вам потребуется открыть набор кистей со звездочками . Создайте новый слой и нанесите на нем несколько белых звездочек в различных местах. Далее добавьте к слою стиль Outer Glow с режимом наложения Screen и размером 70px, цветом C:15, M:55, Y:0, K:0. В конечном итоге задайте слою уровень Opacity порядка 70%.

Добавляем название

9 Шаг

Следующим шагом будет добавление логотипа. Конечно, его нельзя будет назвать логотипом в настоящем смысле этого слова, так как логотип - это более сложный элемент дизайна, поэтому назовем его просто “название компании”. Теперь разделите правую половину документа на две колонки при помощи вертикальной направляющей и вынесите еще три горизонтальных, чтобы поделить страницу на четыре одинаковых по высоте строки. Затем при помощи Type Tool (T) нанесите слово “VIOLET” белыми заглавными буквами на правую часть документа во вторую строку. Я использовал коммерческую гарнитуру Avant Garde, но вы можете воспользоваться любым из доступных аналогов (Futura, Century Gothic и так далее). Параметры текста приведены на иллюстрации ниже. После этого выделите одну букву “O” и смените ей цвет на C:10, M:85, Y:0 и K:0. Завершающим штрихом послужит применение к тексту стиля Gradient Overlay цветами от серого к белому с режимом наложения Linear Burn, Opacity 75% и углом в 90 градусов. Смотрим иллюстрацию:

10 Шаг

Теперь добавим слой с отражением к текстовому слою. Для этого дублируйте свою надпись, растрируйте ее (быстрый способ сделать это: создать пустой слой под слоем с текстом, выделить слой с текстом и только что созданный пустой слой и нажать Ctrl + E чтобы слить их в один) и выполните Edit > Transform > Flip Vertical. Поместите копию сразу под надписью. Для завершения идеи нам осталось свести на нет слой с отражением, и сделать это можно при помощи добавления маски к слою: Layer > Layer Mask > Hide All, которую затем нужно залить градиентом от черного к белому при помощи Gradient Tool (G).

11 Шаг

Финальным аккордом будет нанесение на текст пары ярких белых звездочек из набора кистей Stars Brush. Повторите приведенный ниже рисунок, не забыв уменьшить Opacity слоя до 85%.

12 Шаг

Теперь давайте нанесем слово “coffee” чуть правее и ниже “Violet”. Для этого можно использовать любую гарнитуру Script (к примеру, я взял Edwardian Script). Затем добавим стиль Gradient Overlay цветами от C:10, M:85, Y:0, K:0 к C:15, M:55, Y:5, K:0. После этого все слои, относящиеся к так называемому лого компании, стоит поместить в отдельную папку с названием “Logo”.

Композиционные слои

13 Шаг

Давайте настроим Layer Comps, чтобы иметь возможность хранить две разных версии дизайна в двух отдельных файлах при помощи Automated Script.

Для начала включите палитру Layer Comps (Windows > Layer Comps). Убедитесь в том, что у вас включена видимость папки “Logo” и на палитре Layer Comps кликните по кнопке New для создания нового композиционного слоя. Переименуйте его в “Cover”. После этого спрячьте папку “Logo” (отключите видимость) и создайте новый композиционный слой с названием “Inner”. Можете попереключать видимость получившихся слоев, чтобы окончательно увериться в том, что все было сделано правильно.

14 Шаг

Теперь откройте File > Scripts > Layer Comps to Files. В диалоговом окне выберите тип файла PSD, откройте папку, в которой вы хотите сохранить свои файлы, задайте для их названия какой-нибудь отличительный префикс типа “Violet”, а остальные настройки оставьте по умолчанию. После нажатия Run Photoshop автоматически создаст файл для каждого композиционного слоя, при этом названия файлов будут содержать названия этих слоев.

Добавляем графические элементы. Чашка кофе

15 Шаг

Откройте в фотошоп картинку с чашкой кофе, выполните двойной щелчок по слою “Background” на палитре Layers, чтобы сделать его редактируемым. Затем при помощи Pen Tool (P) в режиме Paths обведите чашку по контуру. После этого нажмите кнопку Exclude Overlapping Path Areas на панели Options инструмента в верхней части экрана и обведите внутреннюю окружность ручки. Затем, как вы закончите с путями, выполните Layer > Vector Mask > Current Path для преобразования пути в векторную маску и вычленения чашки из фона.

16 Шаг

Теперь вы можете перенести чашку на свой рабочий документ. По желанию этот слой можно растрировать (клик правой кнопкой мыши по слою на палитре Layers и выбор пункта Rasterize Layer). Назовите слой с чашкой “coffee cup”.

Затем, используя технику, изложенную на шаге 10, добавьте к чашке отражение, но на этот раз при помощи большой и мягкой черной кисти (Brush Tool, B) в режиме маски спрячьте угловатые края отражения, как показано на рисунке ниже.

17 Шаг

В качестве небольшой детали мы добавим к чашке тень. При помощи Ellipse Tool растяните насыщенный черный эллипс между чашкой и ее отражением. Затем откройте Filter > Blur > Gaussian Blur, в появившемся окне задайте радиус размывки равным 35 px и нажмите Ok.

18 Шаг

Для сохранения фиолетового настроения используем корректирующий слой Photo Filter Adjustment Layer поверх чашки (кнопка New Fill Or Adjustment Layer в нижней части палитры Layers). Убедитесь в том, что он добавился в режиме Clipping Mask (обтравочной маски) и измените его оттенок на C:40, M:80, Y:0, K:0, Density задайте на уровне 25%. После этого перенесите все слои с чашкой в отдельную группу с названием “Coffee cup”.

19 Шаг

Теперь давайте визуализируем небольшую струйку аромата, идущего от нашей чашки с кофе. Откройте фото с дымом и выполните двойной щелчок по слою “Background” для перевода его в режим редактирования. Затем нажмите Ctrl + I для инвертирования цветов изображения. В окне настроек Hue / Saturation (Ctrl + U) установите значение Hue в -92 для придания дымку фиолетового оттенка.

Теперь давайте извлечем дым с фотографии. На палитре Channels (Window > Channels) дублируйте канал Red, нажмите Ctrl + A, Ctrl + C для сохранения копии в буфер обмена, затем удалите дублированный слой, перейдите обратно на канал RGB, чтобы вернуть изображению свой прежний цвет.

На палитре Layers выберите слой с дымком и выполните Layer > Layer Mask > Hide All, после чего кликните по этой маске с нажатой клавишей Alt, чтобы сделать ее видимой. Затем вставьте на маску изображение, которое вы скопировали в буфер до этого. После того, как вы перейдете на свою оригинальную миниатюру со слоем, вы увидите, как сработал данный прием.

20 Шаг

Перетащите слой с дымом на наш основной документ. Затем растрируйте его и назовите “Smoke”. Поместите его просто над чашкой кофе. Добавьте к этому слою маску и залейте ее градиентом от белого к черному, чтобы спрятать верхнюю часть струйки кофейного аромата.

В итоге дублируйте слой “Smoke”, поместите копию поверх оригинального слоя и выполните Filter > Blur > Gaussian Blur с радиусом размывки порядка 35%. Так мы создадим приятную светящуюся ауру для слоя с дымом.

21 Шаг

Сейчас, чтобы сделать чашку еще более завораживающей, добавьте немного световых пятен и звездочек, как мы это уже делали для фона на шагах 7 и 8. После этого поместите все слои, связанные с чашкой, включая дым, звезды и блики в отдельную папку с названием “Coffee”.

Экспортируем графические элементы

22 Шаг

На данный момент мы имеем две важных группы со слоями: “Coffee” и “Logo”. Обе группы представляют собой добавочные графические элементы, которые мы впоследствии должны будем импортировать в InDesign. Поэтому сейчас нам нужно подготовить их и экспортировать в отдельные файлы. Начнем с группы “Logo”. Дублируйте ее (перетащите группу на кнопку New палитры Layers), перейдите на этот дубль и нажмите Ctrl + E, чтобы растрировать его. То же самое проделайте с группой “Coffee”.

23 Шаг

Выберите слой “Logo Copy”, затем кликните по нему правой кнопкой мыши и выберите пункт Duplicate Layer. В открывшемся диалоговом окне задайте ему новое имя и в поле Destination Document выберите пункт New. Это создаст копию слоя в новом документе с такими же размерами, как и у оригинала. При помощи Crop Tool удалите пустые участки копии и сохраните документ, дав ему какое-нибудь информативное название типа “Logo.psd”. Повторите этот же самый процесс со слоем “Coffee copy”.

Файлы на выходе

24 Шаг

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

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

Andrei Marius; Переводчик: Daewon

Создаём дизайн для меню в Фотошоп

В этом уроке вы узнаете, как с помощью Photoshop создать простое и стильное выпадающее меню.

Шаг 1

Открываем Photoshop и жмем Ctrl+N, чтобы создать новый документ с параметрами, показанными ниже на скриншоте. Активируем сетку View - Show - Grid (Вид - Показать - Сетка) и привязку к сетке View - Snap to - Grid (Вид - Прикрепить к - Сетка). На данный момент нам нужна сетка с ячейками 5 px.

Переходим Edit - Preferences - Guides, Grid and Slices (Редактирование - Установки - Направляющие, сетка и фрагменты) и находим параметры Grid (Сетка). Для Gridline Every (Линии через каждые) вводим 5, а для Subdivision (Внутреннее деление на) - 1. Также устанавливаем цвет сетки на #a7a7a7. Закончив, жмем OK.

Сетка очень помогает в работе, советую ею не пренебрегать. Также открываем панель информации Window - Info (Окно - Информация).

Шаг 2

Устанавливаем цвет переднего плана на #3f8ecf, берем Rounded Rectangle Tool (Закругленный прямоугольник) (U) и назначаем его радиус на 20 px. Создаем прямоугольник размером 160 х 40 px и дублируем его (Ctrl+J). Выбираем дубликат и меняем его цвет на белый. Активируем Rectangle Tool (Прямоугольник) (U), жмем кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем квадрат размером 40 х 40 px, как показано на третьем скриншоте. Перемещаемся на панель слоев и дважды кликаем по слою с белым прямоугольником, чтобы открыть окно Layer Style (Стиль слоя).

Применяем Inner Glow (Внутреннее свечение), Gradient Overlay (Наложение градиента) и Stroke (Обводка) с настройками, как на скриншоте ниже.

Шаг 3

Выделяем синий прямоугольник и еще раз дублируем его (Ctrl+J). Выделяем дубликат, меняем его цвет на белый и активируем Rectangle Tool (Прямоугольник) (U). Жмем кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем прямоугольник размером 120 х 40 px, как показано ниже.

Переходим на панель слоев, кликаем правой кнопкой по слою с белым прямоугольником, созданном в предыдущем шаге, и выбираем Copy Layer Style (Копировать стиль слоя). Переходим к белому прямоугольнику, который мы создали в этом шаге, жмем по нему правой кнопкой и выбираем Paste Layer Style (Вклеить стиль слоя).

Шаг 4

Берем Type Tool (Текст) (Т) и пишем текст на кнопке (цвет #a1d8ff). Затем открываем окно Layer Style (Стиль слоя) и применяем к тексту стили слоя, как показано ниже.

Шаг 5

Возвращаемся к синему прямоугольнику, который мы создали во втором шаге. Открываем окно Layer Style Drop Shadow (Тень). Дублируем этот прямоугольник (Ctrl+J), выделяем копию, открываем окно Layer Style (Стиль слоя) и редактируем стиль слоя, как показано ниже. Затем выделяем все созданные на данный момент прямоугольники и группируем их (Ctrl+G). Так кнопка будет выглядеть, когда выпадающее меню скрыто. Последние штрихи мы добавим в финальном шаге.

Шаг 6

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

Шаг 7

Теперь сосредоточимся на дубликате группы. Сначала подкорректируем текст. Меняем его цвет на #b4b4b4, затем жмем правой кнопкой по слою и выбираем Clear Layer Style (Очистить стиль слоя). Открываем окно Layer Style (Стиль слоя) и добавляем к тексту стиль слоя Drop Shadow (Тень).

Шаг 8

Устанавливаем цвет переднего плана на #f5f5f5, берем Rounded Rectangle Tool (Закругленный прямоугольник) (U) и назначаем его радиус на 20 px. Создаем прямоугольник размером 160 х 35 px и размещаем его под кнопкой, как показано на рисунке 1. Затем дублируем его (Ctrl+J) и меняем цвет копии на белый. Активируем Rectangle Tool (Прямоугольник) (U), жмем на кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем прямоугольник размером 40 х 35 px, как показано на рисунке 2.

Переходим на панель слоев и уменьшаем Fill (Заливка) этого слоя до 0%. Затем открываем окно Layer Style (Стиль слоя) и применяем стиль слоя Inner Shadow (Внутренняя тень).

Шаг 9

Активируем закругленный прямоугольник, который мы создали в начале предыдущего шага, и дублируем его (Ctrl+J). Активируем копию и на панели слоев перемещаем ее выше (Shift+Ctrl+]). Уменьшаем Fill (Заливка) до 0%, открываем окно Layer Style (Стиль слоя) и применяем стили слоя.

Шаг 10

Активируем второй прямоугольник, созданный в восьмом шаге, и дублируем его (Ctrl+J). Перемещаем копию выше (Shift+Ctrl+]), затем копируем стили слоя из предыдущего шага и вставляем их на этот прямоугольник.

Шаг 11

Теперь сосредоточимся на правой части кнопки, созданной в предыдущем шаге. Устанавливаем цвет переднего плана на #ebebeb, берем Rectangle Tool (Прямоугольник) (U) и создаем прямоугольник размером 10 х 5 px, как показано ниже.

Далее жмем кнопку Add to shape area (Добавить к области фигуры) и сразу над предыдущим рисуем новый прямоугольник размером 5 х 10 px, как показано на рисунке 2. Убеждаемся, что созданный слой активен, и жмем Ctrl+T. Поворачиваем стрелку на -45 градусов и жмем Enter.

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

Перемещаемся на верхнюю панель и жмем кнопки Align vertical centers (Выравнивание центров по вертикали) и Align horizontal centres (Выравнивание центров по вертикали), как показано на пятом рисунке. Открываем Layer Style (Стиль слоя) и применяем стили слоя для стрелки.

Шаг 12

Берем Type Tool (Текст) (Т) и пишем любое слово на кнопке, как показано ниже (цвет #b4b4b4). Затем применяем к тексту стиль слоя Drop Shadow (Тень). Выделяем слой с текстом и все слои, созданные в последних четырех шагах, и группируем их (Ctrl+G).

Шаг 13

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

Шаг 14

Теперь доработаем подменю Tutorials. Активируем слой со стрелкой в группе с кнопкой Tutorials и открываем окно Layer Style (Стиль слоя). Применяем стили слоя.

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

Данный урок является продолжением предыдущего видео урока «Оформление группы В Контакте» который вы сможете посмотреть . Также для создание меню нам потребуется программа Adobe Photoshop. О том как установить и работать с данной программой вы сможете узнать из раздела .

Также можете скачать шаблоны которые применяются в данном видео уроке https://yadi.sk/d/EFuM8IjjO3zVUA .

1. Создание меню в фотошопе

В программе фотошоп перейдем в вкладу файл, нажимаем создать или клавишу Ctrl+N. Создадим документ новый документ шириной 600 пикселей, высота 420 пикселей, разрешение 100 пикселей на дюйм. Далее нажимаем файл открыть и выбираем любое понравившиеся изображение с компьютера.

Выбирайте инструмент прямоугольная область или клавиша M на клавиатуре, выделяем картинку. Далее нажимаем в меню на вкладку редактирование и выбираем копировать или сочетание клавиш Ctrl+C. Переходим в наш созданный документ и выбираем редактирование в меню вставить или сочетание кнопок Ctrl+V.

Выбираем инструмент перемещение или клавиша V. В меню редактирование выбираем свободное трансформирование или клавиши Ctrl+T. Потянув один из углов удерживая клавишу Shift для равномерного изменения размера, удерживаем нашу картинку.

1.1. Создаем кнопки

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

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

Выбираем инструмент горизонтальный текст или клавишу T. Далее нажимаем левой кнопки мыши обязательно за пределами будущих кнопок. Пиши нужный нам текст, переносим текст примерно по центру кнопки или Ctrl+V. После задаем название другим кнопокам.

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

2. Редактирование меню В Контакте

Переходим в нашу группу В Контакте. После автарки сообщества переходим в группу статистики. В адресной строке браузера имеются цифр сообщества, они как раз и нужны для дальнейшего редактирование группы. Для редактирование группы нам потребуется следующая ссылка которую вам нужно будет скопировать https://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

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

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

Убираем проблемы между кнопками. Для этого переходим в меню редактирование и визуальном редакторе прописываем в конце каждой записи;nopadding. Копируем данный текст и вставляем в остальные картинки. Нажимаем сохранить страницу и смотрим что у нас получилось нажимая кнопку предпросмотр. Теперь наши кнопки стали одним целым.

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

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

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

Существует на сегодня несколько видов создаваемого меню:

• Открытое с активными пунктами;
• Закрытое в виде закрепленной записи;
• С отдельными картинками или общей смежной картинкой баннера и меню.

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

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

Закрытое меню группы ВК

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

Вид меню, будет следующим:

Открытое меню группы (закрепленный материал)

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

Как сделать красивое меню для группы ВКонтакте: пошаговая инструкция

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

• Для аватарки 200х332 пикселя;
• Для основного баннера меню 395х282 пикселей.

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

Чтобы было понятно если высота главной аватарки группы 332, то от нее мы отнимаем 50 и получаем высоту основного меню равную 282. Если же размеры не имеют значения, то высоту можно будет выставлять произвольную.

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

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

Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.

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

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

Должно получиться следующее:

А теперь просто выбираем ластик и функцией «волшебный ластик» жмем на каждый серый блок и получим трафарет с вырезами. Следующим шагом мы выбираем наше основное изображение и подкладываем под фон и получим готовые картинки на который можно будет написать текст с названием меню ли прочие рекламные элементы.

Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.

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

Итак, переходим снова в фотошоп и создаем новый холст с размерами 400х300 пикселей. После чего выбираем в разделе: файл-поместить и выбираем картинку для фона меню.

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

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

Обратите внимание что у вас должно быть:

• Открыты материалы в режиме «ограниченные»;
• Включены обсуждения;
• Папка с фотографиями открыта для всех.

Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».

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

Работая в текстовом редакторе если после загрузки картинок, мы нажмем на иконку в виде скобок в правом верхнем углу то должны увидеть вот такой код:

Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.

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

[]
где xxxxx - id вашей картинки
yyyyy - ширина в пикселях (не более 388)

Должно в итоге получиться вот так:

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

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

https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

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

Переходим на главную страницу и делаем следующее:

Шаг №1.

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

Шаг №2.

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

Шаг №3.

Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».

Отлично!!! На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:

• Придумываем структуру и заказываем дизайн изображений меню;
• Делаем подгонку размеров и нарезку всех изображений;
• Вставляем в альбомы картинки;
• Редактируем в редакторе все нарезки и публикуем на главные страницы группы.

В итоге работы мы получим вот такое меню.

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

ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых .

Скачать шаблон меню группы ВК + все исходники урока

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

Прикладываю видеоролик для закрепления прочитанного -))).