Привет всем! На этот раз мы приготовили для вас урок о том, как создается готовый к печати буклет для воображаемого кофейного магазина под названием “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, включая информацию, предоставленную заказчиком.
В предлагаемом уроке по Фотошопу мы познакомим вас с процессом создания несложного выпадающего меню.
Предпросмотр законченного изображения
Шаг 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) и кликните по оставшейся нижней опорной точке, чтобы удалить ее. В результате ваш квадрат должен превратиться в треугольник!
Законченное изображение
5 голосовДоброго времени суток, уважаемые читатели моего блога. Этой статьей я открываю серию публикаций на тему красивого оформления групп Вконтакте. Сейчас мы поработаем над созданием меню, затем перейдем к созданию стильного единого изображения, ну и в конце научимся делать картинки кликабельными.
В конечном итоге у вас получится примерно такое сообщество. При нажатии на кнопку перехода действительно открывается дополнительная стильная страничка.
Работа предстоит не такая уж трудная, я детально объясню как действовать. Работа займет не больше пары часов. Давайте обо всем по порядку.
1. Подготовка к работе. Инструменты, без которых не обойтись
Итак, прежде чем я перейду к основному вопросу, и мы начнем разбирать как делать меню в группе Вконтакте, поговорим о том, что вам понадобится.
1.1. Фотошоп
Конечно можно обойтись и без фотошопа, посмотрите вот это видео, в котором все подробно рассказано. Если хотите. Однако, если вы не владеете навыками , то я настоятельно рекомендую заморочиться и пройти все три мои публикации.
Если вы хотите нормальную группу, то у вас нет другого выбора, кроме как изучать фотошоп. Без качественных картинок никуда не уедешь. Могу порекомендовать вам курс Зинаиды Лукьяновой . Быстро и не скучно вы освоитесь в новой профессии и сможете даже зарабатывать, используя навыки дизайнера. Знаний хватит!
Итак, ну давайте продолжим. Все необходимое имеется? Тогда вы готовы действовать дальше.
2. Работа в фотошопе или меню своими руками
Ну вот, теперь можно приступать к пошаговой инструкции непосредственно для создания меню. Открываем фотошоп, затем иллюстрацию с меню. Надеюсь, что проблем не возникнет. В правом верхнем углу выбираем «Файл» и затем «Открыть». Находим документ на компьютере. Что дальше?
Картинку нужно раскроить. Выбираем инструмент «Раскройка». Как вы видите, он кроется под «Рамкой». Просто нажмите на него и удерживайте левую кнопку мыши несколько секунд, пока не появится дополнительное меню.
Теперь на самой картинке щелкаете правой клавишей мыши и находите «Разделить фрагмент».
В конкретном случае изображение я поделю на 4 части. Почему именно так? Любая кнопка в интернете – это рисунок, которому присвоен определенный код. Вы наводите стрелкой на нужный фрагмент иллюстрации и ваш браузер передает информацию компьютеру: «Парень, тут есть дополнительные возможности».
Иногда все изображение меняется. Например, утопающие кнопки при нажатии – это всего лишь второе изображение, там нет никакой анимации.
В моем случае одну картинку нужно поделить на несколько частей и каждой из них присвоить свое действие. Где-то ссылка на список товаров, где- то переход на сайт. Также есть часть картинки, которая помечена как «Меню». При наведении мышью не должно ничего происходить.
По-хорошему, я должен был выделить 5 частей, чтобы ровнее отделить кнопки, но я оправдываю себя тем, что если человек промахнется, он все равно сделает то, что хотел, а если нажмет верно, то ни о чем и не узнает.
Не проблема сделать больше категорий или расположить их в два столбца. Если поймете основную информацию, справитесь и со всем остальным.
Я подвинул линии, чтобы было ровнее. Это не сложно, делается при помощи курсора.
Смотрите, чтобы изображения сохранялись как jpeg (самая верхняя категория справа). Далее нажимаем «Сохранить».
Ну вот и все.
С этим закончили, теперь можно переходить к самой группе и работе с кодом.
3. Верстка в Вк для чайников
Раньше я думал, что вики-разметка применима только к сообществам. Не знаю изменилось ли что-то или так всегда было, но сейчас абсолютно не важно создаете ли вы группу или паблик. Странички можно сделать и там, и там.
Ну что ж, осталось дело за малым, верстка. Открываете «Список вики-страниц».
И добавляете новую.
Даете ей название. В нашем случае – меню.
И переходите к редактированию.
Первым делом нужно добавить все части нашей картинки.
Загружаем.
Делайте это из папки снизу-вверх по списку. От самого последнего (нижнего, в моем случае «Написать админу») к верхнему («Меню»), тогда все встанет верно, хотя не так уж трудно перетащить фрагменты при помощи мыши. Кому как удобнее.
Теперь нужно убрать отступы и сделать разные фрагменты ссылками, а кое-где и совсем убрать возможность щелкать. Переходим в кодовый режим.
Теги «center» указывают на то, что фотка и ее фрагменты расположены по центру. Я их уберу, чтобы вам было легче воспринимать информацию.
Если хотите, можете сделать тоже самое, но учтите, что иллюстрация съедет вправо.
Снова возвращаемся в код, чтобы убрать отступы между фрагментами рисунка.
Чтобы изображение вновь стало единым после размера поставьте точку с запятой и напишите тег nopadding (;nopadding).
Выглядеть это будет так.
Естественно, что отступов не должно быть после каждого фрагмента, а потому теги нужно продублировать.
Теперь иллюстрация выглядит единой. Если не получилось проверьте верно ли вы написали слово и поставили ли точку с запятой, уберите пробелы где нужно, чтобы было как в моем примере. Для результата важна каждая мелочь.
Сейчас при нажатии на разные части изображения, они открываются в новом окне.
Чтобы этого не происходило, понадобится еще один тег. Nolink. Не забывайте про точку с запятой.
Перехода не будет только на первой картинке, а вот к остальным можно подставить свои url.
Вы можете перенаправлять читателей на другие вики-страницы, к постам, в блоги и остальные социальные сети. Теперь сделать это не трудно, вы все умеете. Осталось лишь сохранить.
Вот так выглядит наше с вами меню.
А вот и желанная ссылочка.
4. Завершающий этап оформления
Наконец-то пришло время определиться публичная страница у вас или группа. От этого зависит дальнейшая стратегия.
Если вы не знаете что у вас, то переходите в раздел управление из категории «Мои группы».
Если вы хотите сделать как у меня и поставить на меню, то переходите ко второй части и мы продолжим красиво оформлять паблик. В результате получится что-то на подобие вот этого.
Я не сторонник делать меню просто картинкой в статусе, но некоторые хотят именно этого. Я не в праве никого критиковать и, если у вас группа, то вы можете воплотить свою задачу.
5. Видео инструкция
Посмотрите видео, всю основную работу мы с вами уже сделали, осталось дело за малым.
6. Альтернативный способ для Чайников за 100 руб.
Если возникли трудности при самостоятельном создании меню, смело идите на этот сервис — VkMenu.ru , где за скромную цену в 100 руб. (сегодня такая), сможете сделать менюшку через онлайн конструктор.
По-моему отличная альтернатива ручной работе, и проклинанию всех и вся, если ничего не выходит с вики-разметкой.
На этом я прощаюсь, но ненадолго. Отдохните немного и перейдем к следующей части.
Подписывайтесь на мою группу Вконтакте . Приятной работы и до скорой встречи!
В этой части попробуем разобраться, как делать меню для Encore . Для этого воспользуемся ПО - Photoshop CS . В частности нужно проверить, чтобы работала команда Edit > Edit in Photoshop , нужно чтобы при двойном клике на файле psd , открывался Photoshop CS , а не другое ПО (типа ACDSee и другие вьюверы). Для этого – берем файл с расширением psd .
Делаем на нем правый клик мыши и выбираем из контекстного меню последнюю строчку Свойства. И в появившемся окне, напротив Приложение, если там не стоит Photoshop CS жмем кнопку Изменить.
И в появившемся списке выбираем Photoshop CS , далее ОК.
Все застолбили расширение.
Теперь давайте посмотрим, из чего состоит меню Encore и почему нельзя напрямую использовать пресеты от других программ, например - Ulead .
Запускаем Encore.
Для того чтобы посмотреть из чего состоит наше меню, откроем проект Test . ncor .
Выделим окно Редактирования меню. Выполняем команду Edit>Edit in Photoshop (Shift+Ctrl+M). Или нажмем кнопку на палитре инструментов.
И наше меню откроется в Photoshop CS .
В правом нижнем углу в палитре Layers мы увидим всю структуру нашего меню.
Меню состоит из слоя Background (фоновое изображение), в некоторых меню есть папочка Background details с различными элементами фона, которые можно отключать \ перемещать (например – букет цветов и т.д.)
Теперь давайте посмотрим, что скрывают в себе папочки (+) ribbon & ribbon video , как не сложно догадаться содержимое наших кнопок. Откроем папочки и увидим следующую картину. Давайте разбираться.
(+) ribbon - это обычная кнопка.
(+) ribbon video - это видео кнопка.
Основные элементы здесь (=1) highlight , T – текстовый слой с названием кнопки и (%) video , border & ribbon – это элементы украшения. (=1) highlight – это Subpicture , этим элементом мы выделяем активную кнопку при выборе ее с ПДУ DVD – плеера, или при наведении на нее курсора мыши. Subpicture служит для навигации по меню, при открытии/создании кнопки должен быть в выключенном состоянии.
Т как уже говорилось это текстовый слой, который мы можем изменять.
border – это декоративная рамка.
(%) video – это непосредственно видео кнопка, то место где мы будем видеть первый кадр нашего фильма.
ribbon – декоративная полоска для текста.
Пришло время попробовать создать свою кнопку, для этого нам потребуются следующие файлы – качаем
Запускаем Encore .
Нажимаем Ctrl + N , Ctrl + I и импортируем три файла 1. mpg , 2. mpg , 3. mpg .
Импортируем наше меню File > Import as Menu (Shift + Ctrl + I ) файл Gold _ Menu . psd .
И видим что наш фон (%) video поменялся с черного на серый. При выполнении команды File > Import as Menu – любые видео thumbnail имеют серый цвет. И пока мы не свяжем нашу видео кнопку с видео материалом, мы будем видеть серый placeholder .
Чтобы было видно все окно полностью, изменяем масштаб в левом нижнем углу на 50%.
Давайте перетянем наш файл 1. mpg из закладки Project на нашу первую кнопку, второй файл на вторую кнопку, третий на третью кнопку в окне
Выделяем мышкой наше меню и переключаемся на закладку Layers . Откроем (+) gold 1 и видим, что там не хватает слоя (=1) highlight т.н. Subpicture . Отключаем (%) video , убирая глаз.
Включенным оставляем только слой frame и выделяем папку Set >(+) gold 1. Выполняем команду Object > Create Subpicture .
Ту же операцию проделываем с папками (+) gold 2, (+) gold 3. Теперь нужно сделать предпросмотр нашего меню – File > Preview .
И если мы при инициализации получили следующий диалог.
Нажимаем – Отмена. Мы с Вами забыли установить, что у нас проигрывается первым. Исправим эту оплошность – выделяем в закладке Project наше меню.
Потом правый щелчок мыши и из контекстного меню выбираем пункт Set as First Play .
Повторяем процедуру File > Preview .
Или можно воспользоваться кнопкой на панели инструментов, обведенной красным квадратом.
Откроется окно Project Preview .
На картинке наблюдаем выбранную среднюю кнопку. Если цвет Subpicture нас не устраивает, закрываем окно Preview . Выделяем наше меню и Edit > Edit in Photoshop .
В Фотошопе выбираем по очереди наши слои, временно отключив слой (%) video и frame . И наоборот включив слой (=1).
Результат контролируем по рисунку.
Нажимаем Ctrl + L и в появившемся окне Levels .
Производим следующее действие - смещаем ползунки, как показано ниже.
Если нас все устраивает, жмем Ctrl + S , Ctrl + Q (File > Exit ). Делаем в Encore – Preview и наблюдаем наше новое Subpicture .
Закрываем окно Preview . Осталось нам добавить в меню к нашим кнопкам текст. Конечно, это можно было сделать и в Фотошопе, но давайте рассмотрим, как это сделать в Encore . Переключаемся на закладку Characters.
В ней выбираем шрифт - GaramondBookCTT , начертание - BoldItalic , кегль (размер) – 36 и цвет. После сделанных настроек выбираем на панели инструментов – Т.
И начинаем вводить наш текст под кнопками.
Переключившись, на закладку Layers видим, что у нас появилось три новых слоя с текстом.
Теперь выделив в закладке Layers верхний слой Конец, переходим в закладку Styles , включаем пресеты для текста – Т, кнопка обведенна красным квадратом. Выбираем установку Set > Novelty и в списке выбираем стиль Yellow Gold Bevel Indent (text ). psd .
И те же действия проделываем со слоями Фильм, Альбом. Делаем File > Preview .
И рассматриваем наш результат.
Цель данного урока не создание красивого и необычного меню, а возможность посмотреть из чего состоит простейшее меню и как его сделать самому.
В вдогонку еще один совет:
Может возникнуть ситуация, когда у Вас в меню три кнопки, соответственно три сюжета, но все они начинаются с одной заставки. И у Вас получатся три одинаковые кнопки. Или у Вас один из сюжетов, начинается с черного кадра (Fade ), соотв. и видео кнопка будет с черной картинкой. Можно ситуацию поправить, я предлагаю такой вариант –идем в ту директорию, куда сохраняли наш проект, например – С:\Мои документы\ Test \ Sources \ Menus . И открыв эту папочку, видим файлы. psd , но нас интересует самый первый Menu _ Bpgc _ Dsf _1933415418, остальные временные файлы с окончанием _ temp . psd #1 A (2 A ,1 B ….) нам не нужны. Двойной щелчок на этом файле, открываем его в Фотошопе, меняем у нужной кнопки слой (%) video на нужную нам картинку. И Ctrl + S – сохраняем.
Ctrl + Q – выходим из Фотошопа.
Все. Можно иметь заранее приготовленное такое же меню, но с другими видео слоями и скопировав название, заменить файл Menu _ Bpgc _ Dsf _1933415418.
Возникает закономерный вопрос, но можно же из Encore , командой Edit > Edit in Photoshop отправить наше меню в Photoshop и сделать нашу замену. Если мы сохраним измененное меню как Ctrl + S , тогда мы будем влиять на те самые _ temp . psd #1 A (2 A ,1 B ….) и измененный слой (%)
Где нас спрашивают – хотим ли мы заменить уже имеющийся файл с аналогичным названием. Жмем ОК. Закрываем Photoshop – Ctrl + Q . И Encore нас встречает тоже диалогом.
Можно воспользоваться Set Poster Frame , рассмотрим его действие на первом маркере, который автоматически устанавливается, при добавлении фильма на таймлайн. Перемещаем индикатор на то место, куда нам необходимо. Контролируем нужный кадр по окну монитора.
Щелкаем правой кнопкой мышки по маркеру, он станет красным, и из выпадающего списка выбираем
В этой статье мы рассмотрим структуру команд верхней строки меню программы Photoshop CS5. Строка меню (1) расположена в верхней части программы и содержит меню (2) и вложенные подменю (3) .
Некоторые подменю неактивны. Почему неактивны? Потому что для этого нужно создать определенные условия или выполнить определенные действия — это является хорошей подсказкой. Чтобы раскрыть меню (2) , нужно щелкнуть по соответствующему названию и переходить уже можно будет без щелчка. Также если допустим, у вас нет мыши, можно воспользоваться следующим способом: нажимаем клавишу Alt и у вас появятся вот такие подчеркивания (4) около названий пунктов меню.
И для того, чтобы открыть любое название, просто нужно нажать соответствующую букву на клавиатуре. Например, для меню «Файл» — это буква ф. Нажимаю букву ф, открывается меню «Файл». Переходить по нему можно с помощью стрелок на клавиатуре. Чтобы переходить по меню или к другому пункту меню, нужно нажать стрелку в соответствующую сторону. Клавиша Esc отменяет меню. Повторное нажатие клавиши Alt выводит нас из режима работы с клавиатурой. После ее нажатия, подчеркивание в командах исчезнет. Это на случай того, если у вас нет мыши.
В меню (2) и подменю (3) находятся команды, которые обеспечивают доступ практически ко всем регулировкам и командам программы Photoshop. Многим часто используемым, а также труднодоступным командам назначены соответствующие комбинации клавиш, указанные справа от команд. Это так называемые горячие клавиши.
Их использование очень облегчает и ускоряет работу. Поэтому с самого начала лучше запоминать и пользоваться горячими клавишами. Чтобы воспользоваться комбинацией клавиш, нужно нажать первую клавишу и, не отпуская ее, нажать затем следующие клавиши. То есть одновременно в конце должно быть нажато несколько клавиш. Тогда команда сработает.
Некоторые пункты меню не похожи на команды, а напоминают флажки (5) , устанавливаемые щелчком мыши. Например, показать «Вспомогательные элементы» или «Линейки». Такие команды, как правило, предназначены для отображения или скрытия каких-либо элементов интерфейса или установки работы программы в каком-либо специальном режиме. На рисунке видно, что у меня включены вспомогательные элементы, линейки и привязка.
Основные команды Photoshop
Все команды Photoshop сгруппированы по сходным признакам и отделяются друг от друга горизонтальной чертой. Теперь давайте рассмотрим основные и наиболее частые команды.
1) Меню «Файл» — это команды создания нового документа и его открытие, а также команды закрытия и сохранения документа в различных вариациях (простое сохранение, сохранение как с возможностью выбора формата и сохранение для Web и устройств, которые оптимизируют файл для корректного его отображения в Интернете либо на каком-либо устройстве ). Это основные команды, которые нам нужны. Дальнейшие команды используются не так часто, и мы их рассмотрим немного позднее.
2) Меню «Редактирование» — понадобиться, если мы производим какое-либо действие. Например, я использую «Карандаш». В меню «Редактирование» можно отменить данный шаг, сделать шаг назад либо если мне нужно снова перейти к данному действию, можно сделать шаг вперед. Можно также отменить состояние и вернуться назад. Также в меню «Редактирование» представлены стандартные для большинства программ операции — это вырезание в буфер обмена, копирование, копирование совмещенных данных и различные вставки.
Еще здесь очень часто используются команды выполнить заливку, обводку. Чуть ниже расположены команды изменения масштаба и трансформация, а также работа со слоями. С помощью этого меню также определяется кисть, узор, который мы сами создаем. Ниже производится настройка программы, настройка цветов и основные установки меню (мы их также рассмотрим немного позднее ).
3) Команда «Изображение» — это наиболее развитая команда. Здесь у нас находятся все команды корректировки изображения и инструменты, такие как уровни, кривые и другие инструменты для работы с изображением. С помощью нее можно также изменять размер изображения, работать с размерами холста, поворачивать изображение на разный угол и также работать с каналами изображения.
4) Меню «Слои» говорит само за себя. Оно предназначено для различных операций со слоями. Первое, что нам может понадобиться — это создание нового слоя, дублирования слоя, создание новых корректирующих слоев, а также смарт-объектов. Все это можно создать и другим способом через палитру «Слои» (рассмотрим чуть позже ).
5) Команда «Выделение» предназначена для работы с выделенными областями. С помощью нее также можно создавать выделенные области на основе какого-либо диапазона цветов или в режиме быстрой маски.
6) В меню «Фильтр» находятся все фильтры программы Photoshop. Как встроенные фильтры (6) , так и внешние фильтры (7) сторонних производителей, которые называются «плагины». Плагины устанавливаются в определенные папки (рассмотрим чуть позже ) и с ними можно работать, как и с фильтрами. С помощью фильтров (6) можно изменять изображение различным образом. Например, сделать размытие изображения, добавить шум на него, усилить резкость и так далее.
7) Меню «Анализ» предназначен для специальных работ — это меню нам практически не понадобиться. Здесь можно подсчитать определенное количество объектов, измерить какую-либо длину, задать шкалу измерений.
8) Меню «3D» предназначено для работы с 3D файлами и 3D объектами.
9) В меню «Просмотр» можно настраивать режимы экрана, просматривать изображение в различных размерах (масштабирование изображения ), включать и отключать линейки, выводить направляющие в определенных местах изображения и также выполнять различные специальные операции.
10) Меню «Окно» предназначено для управления рабочими средами и вызова различных палитр.
