Створення в фотошоп простого меню, що випадає. Як зробити красиве меню в групі вконтакте Горизонтальне меню в фотошопі

У цьому уроці будемо створювати оригінальну кнопку для сайту.

Крок 1.

Створіть новий документ, колір фону задайте показником: # f7f5f6. активізуйте інструмент Rounded reqtangle Tool (Прямокутник з округленими кутами) З радіусом заокруглення 10 пікселів. В якості кольору для переднього плану встановіть колір з показником: # 2f88bb. На новому шарі створіть невеликий округлений прямокутник.

Крок 2.

Тепер перейдіть в Layer Style (Стилі шару)і застосуєте для намальованого прямокутника Outer Glow (Зовнішнє світіння) і Inner Glow (Внутрішнє світіння) з наступними настройками:

Крок 3.

утримуючи клавішу , Клацніть мишкою на піктограмі шару з прямокутником, для того, щоб завантажити на нього виділення. Створіть новий шар, увійдіть в меню: Select- Modif- Contract (Виділення -Модифікація - Стиснути) і в параметрі «розмір стиснення» встановіть значення: 1 піксель.

активізуйте інструмент Elliptical marquee Tool(Овальна область виділення) І, утримуючи клавішу , Починайте віднімати виділення, як показано на малюнку. Після того, як залишиться необхідна частина виділення, заповніть це виділення білим прозорим градієнтом, Режим накладення градієнта встановіть перекриття, Непрозорість шару-48%, і зніміть виділення, натиснувши комбінацію клавіш .

Крок 4.

Створіть новий шар і, використовуючи інструмент Elliptical marquee Tool(Овальна область виділення), Створіть еліпс, як показано на малюнку. Тепер, використовуючи інструмент Gradient(Градієнт), Стиль - від основного до прозорого, і створіть градієнтну заливку по овальному виділенню. Цей градієнт буде виконувати функцію тіні.

Крок 5.

Далі, утримуючи клавішу , Клацніть мишкою на піктограмі шару з прямокутником, для того, щоб завантажити на нього виділення. Тепер, увійдіть в меню Select-Inverse (Виділення - Інверсія), І натисніть клавішу . Цією дією ми приберемо зайву тінь з кнопки.

Крок 6.

Встановіть непрозорість для шару з кнопкою до 32%. утримуючи клавішу , Клацніть мишкою на піктограмі першого шару, для того, щоб завантажити на нього виділення, а потім, утримуючи клавішу і використовуючи Rectangular marquee Tool(Прямокутну область виділення), Відніміть половину виділення.

Крок 7.

Залийте створене виділення білим кольором, і змініть непрозорість до 11%.

Крок 8.

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

Крок 9.

Мета творця групи в соц. мережі залучити більше відвідувачів. Важливо щоб гість захотів вступити, підписати, почитати інформацію, залишити коментар або замовити товар. Потреба в кінцевому результаті відрізняється від напрямку діяльності.

Перші секунди перебування формують подальші дії гостя. Саме тому інтерфейс грає велику роль.

Фактори залишають гостя:

• аватарка;
• опис;
• назва;
• красиве і практичне меню;
• барвистість;
• контент.

Створити практичне меню, що спонукає не тільки до дії легко. Але для початку слід розібратися, яким воно повинно бути.

Яким має бути меню

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

Три основні цілі груп:

1. продажу;
2. збільшення трафіку;
3. збільшення активних посестітелей.

Для продажу навігація в групі замінює вітрину в магазині.

Тут повинні бути найважливіші кнопки:

1. каталог;
2. вартість;
3. доставка;
4. акційні пропозиції;
5. відгуки.

Для збільшення відвідуваності акцент робиться на контент і родзинку сайту або блогу.

Приблизний варіант набору кнопок:

відео: меню для паблік

Працюємо з фотошопом

Перш ніж приступити, необхідно візуально уявити дизайн або загальний вигляд, а також його складові. Спеціальних знань не потрібно, достатньо просто виконувати кроки інструкції.

Алгоритм дій:

Робиться це за допомогою інструменту «Прямокутна область»:

Робота з графікою:

Приблизно повинно вийти ось так:

Збережіть прямокутник, розташований праворуч окремої картинкою, задавши розмір 200х500 пікс. Це готова аватарка, завантажується через кнопку «Завантажити фотографію» в групі вк.

Другу картинку потрібно ще розділити за кількістю пунктів. Це робиться для того, щоб кожній кнопці привласнити посилання.

Для початку слід зробити розмітку:

Створюємо фрагменти:

Збереження зображень:

Технічна частина

Готові зображення необхідно перенести в групу. Виконуючи зазначені нижче кроки з цим завданням можна легко впоратися.

Важливо! Заливка меню відрізняється від зазвичай завантаження фото або картинок.

Все по порядку:

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

1. знайдіть необхідний запис;
2. клікніть по ній лівою кнопкою миші;
3. скопіюйте URL в адресному рядку.

• зайдіть на джерело, куди потрібно переправляти відвідувача;
• скопіюйте потрібну адресу.

Збережіть зміни відповідної кнопкою внизу вікна.

Увага! Зміни можуть не відразу відобразитися. Рекомендується вийти на свій основний профіль, а потім знову зайти в групу.

Як створити меню в групі Вконтакте вікі розмітка

Вікі-розмітка - це спеціальна мова, що використовується для оформлення веб-сторінок в групах соціальної мережі.

Даний інструмент дозволяє створювати:

• ефекти;
• незвичайні меню;
• таблички;
• елементи навігації;
• форматувати текст.

Словом, дана розмітка дозволяє створити міні сайт ВКонтакте. Це дуже зручно, особливо для продажів і набору передплатників.

Таке оформлення інтуїтивно змушує відвідувача залишитися, клікнути на кнопку. Тобто затримує і стимулює до дії - а це якраз те, що і потрібно.

Візуально така система дуже схожа з HTML-версткою. Але вона не вимагає тривалого навчання і спеціального складу розуму.

Відео: меню з пошуком по рубриках

нюанси створення

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

Тим не менш, важливо знати окремі теги, що допомагають зробити ще більше функцій і краси. Наприклад, при нашій заливці окремих частин зображення між ними можуть утворюватися білі смуги. Прибрати їх можна, просто додавши тег noborder.

Ось так: []

Основні теги представлені в таблиці нижче:

Фото: теги використовуються для розмітки

Робота з картинками

Де options замінюється на:

• noborder - зняття рамки навколо зображення;
• nopadding - зняття прогалин між зображенням;
• plain - вставка посилання на картинку. Оформляється в вигляді тексту, без графіки;
• nolink - зняття посилання на картинку;
• box - відкриття зображення у вікні;
• NNNxYYYpx або NNNpx - задає розмір фото в пікселях.

створення таблиці

Незалежно від того, яке меню (текстове або графічне) ви створюєте, без вставки таблиці ви навряд чи обійдетеся. Інакше можна просто вставити текст в поле новини і не форматувати його, витративши так багато часу.

Таблицю створюють, використовуючи спеціальний набір символів, де кожен з них відповідає за певну частину таблиці:

• {| символ початку таблиці, без нього таблиці бути не може. Використовується завжди;
• |+ відповідає за розташування назви таблиці по центру. Ставлять після символів початку таблиці. Використовується за бажанням;
• | позначає початок нового рядка і осередки;
• | символ, який робить осередок прозорою;
• ! робить осередок темним кольором. При його відсутності обов'язково потрібно застосовувати попередній знак;
• |} означає кінець таблиці. Необов'язковий символ, однак, використовується, щоб запобігти виникненню помилки.

При заповненні таблиці, зміст кожного осередку необхідно ставити після знака |, а при поділі осередків, потрібно продублювати типи рядки ось так: || або !!.

особливості розмітки

Існує багато неписаних правил, це і приносить багато клопоту початківцям програмістам. Як правило, все пізнається в практиці. Кожен знаходить для себе свої лазівки, кожен стикається зі своїми труднощами.

З метою уникнення основних помилок слід ознайомитися з основними з них:

1. необхідно бути уважними, при зміні розміру картинки - якщо вона менше 131 пікселя, її якість значно погіршиться;
2. ширина картинки не повинна перевищувати 610px;
3. на одній wiki-сторінці заборонено розміщувати більше 17 незакритих тегів;
4. при зміні ширини картинки, її висота змінюється автоматично і пропорційно;
5. список всередині таблиці слід створювати за допомогою тега
   ;
6. в одному рядку розмітки повинно бути не більше 8 елементів списку.

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

Важливо! Перевіряйте закриття всіх тегів. Зберігайте послідовність.

Основний помічник в цій справі це уважність та чітке дотримання інструкції. На допомогу завжди може прийти офіційна сторінка вк, яка так і називається вікірозмітка.

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

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

фінальний результат

Приступаємо до уроку Фотошопа

Створіть документ з розмірами → 500 x 200 (File\u003e New (Файл\u003e Новий / Поєднання клавіш "Ctrl + N")) і залийте його сірим кольором ( Paint Bucket Tool (Інструмент Заливка / Кнопка "G")).

далі використовуйте Rectangular Marquee Tool (Прямокутна область виділення / Кнопка "M") і створіть приблизно таке виділення (вибачте за різні кольори фонів в цьому і попередньому зображенні, просто не звертайте увагу на це): ↓

Параметри градієнта: ↓

Drop Shadow (Тінь). ↓

Stroke (Обведення). ↓

Inner Shadow (Внутрішня тінь). ↓

Виділіть своє меню, затиснувши Ctrl Select\u003e Modify\u003e Contract (Виділення\u003e Модифікація\u003e Стиснути), 2 пікселя.

Створіть новий шар ( New Layer (Новий шар / Поєднання клавіш "Ctrl + Shift + N")) і залийте виділення білим кольором ( Paint Bucket Tool (Інструмент Заливка / Кнопка "G")), тепер за допомогою трансформації ( Ctrl + T), Зробіть щоб цей шар покривав половину нашого меню.

змініть opacity (Непрозорість) на 25% .

Давайте попрацюємо над кнопочками на меню.

Створіть приблизно таке виділення, як на малюнку нижче, залийте його будь-яким кольором. ↓

Drop Shadow (Тінь), Gradient Overlay (Накладення градієнта).

Параметри градієнта: ↓

Виділіть свою кнопку, затиснувши Ctrl натискаючи лівою кнопкою миші на зображення на панелі шарів. далі йдемо Select\u003e Modify\u003e Contract (Виділення\u003e Модифікація\u003e Стиснути), 2 пікселя.

Створіть новий шар і залийте виділення білим кольором, і за допомогою трансформації ( Ctrl + T), Зробіть щоб цей шар покривав половину нашої кнопки.

тепер змініть opacity (Непрозорість) так, щоб ви могли ледве звернути увагу на білий шар. Я ставив 6% .

Привіт всім! На цей раз ми приготували для вас урок про те, як створюється готовий до друку буклет для уявного кавового магазину під назвою "Violet Coffee". У цьому уроці піде мова про підготовку фону і парі допоміжних об'єктів, які ми згодом імпортуємо в Adobe InDesign для завершення буклету. Чи готові? Поїхали!

Перед тим як почати

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

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

Робота буде проходити в рамках уявної легенди, за якою клієнт "ікс" забезпечив нас парою картинок і Word документом з текстом для буклету. Ну а ваше завдання, як дизайнера, буде полягати в тому, щоб зібрати з усього цього красивий макет, який буде не соромно надрукувати і показати клієнту.

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

• Чашка з кавою,
• дим,

розмітка документа

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

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

1 Крок

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

Відкрийте Photoshop і виконайте File\u003e New. Для початку визначтеся, якого формату папір ви хочете використовувати (це може упиратися також в бюджет клієнта). Я пропоную почати роздуми з розміру Letter 8,5 x 11 дюймів (215,9? 279,4 мм). Ще дуже важливо виставити дозвіл на цьому етапі (мінімальний дозвіл для поліграфічного друку з мого досвіду становить 300 точок на дюйм (300ppi)). І на цьому ж етапі нам потрібно задати колірний режим CMYK.

Обкладинка буклету буде однією цілою частиною і вийде внаслідок складання вдвічі вже надрукованого листа меню. Тому для того щоб фон вийшов плавним, без небажаних врізок і переходів, ми будемо створювати його як цілісний документ, що має на увазі збільшення вихідного розміру шаблона в два рази ( "Double Letter").

Збільште ширину паперу Letter до 17 дюймів. Після перевірки введених параметрів тисніть Ok.

2 Крок

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

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

3 Крок

Почнемо з власне графіки. Для початку растянем шар з градієнтом Gradient Fill Layer. Виконайте Layer\u003e New Fill Layer\u003e 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\u003e Render\u003e Clouds. Змініть режим накладення цього шару на Overlay. Потім виконайте Filter\u003e Blur\u003e Motion Blur, задайте Angle рівний 90 градусам, а Distance 999px. В результаті подкорректируйте рівні Levels (Ctrl + L) як показано на малюнку нижче, щоб завершити роботу над ефектом.

5 Крок

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

6 Крок

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

Потім виділіть групу "Curves Right" і перетягніть її на праву частину полотна. Після чого дублюйте її (цього також можна домогтися утримуванням Alt і перетягуванням) і виконайте Edit\u003e Transform\u003e Flip Horizontal для відображення дубля по горизонталі. Потім перейменуйте дубль в "Curves Left" і перетягніть його на ліву сторону полотна.

7 Крок

Створіть новий шар поверх "Curves". За допомогою Ellipse Tool (U) намалюйте рожевий гурток (C: 5 M: 55 Y: 0 K: 0). Щоб коло вийшов правильної форми, утримуйте Shift при його розтягуванні. Потім відкрийте Filter\u003e Blur\u003e 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\u003e Transform\u003e Flip Vertical. Помістіть копію відразу під написом. Для завершення ідеї нам залишилося звести нанівець шар з відображенням, і зробити це можна за допомогою додавання маски до шару: Layer\u003e Layer Mask\u003e 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\u003e Layer Comps). Переконайтеся в тому, що у вас включена видимість папки "Logo" і на палітрі Layer Comps клікніть по кнопці New для створення нового композиційного шару. Перейменуйте його в "Cover". Після цього сховайте папку "Logo" (відключіть видимість) і створіть новий композиційний шар з назвою "Inner". Можете попереключать видимість одержані верств, щоб остаточно переконатися в тому, що все було зроблено правильно.

14 Крок

Тепер відкрийте File\u003e Scripts\u003e Layer Comps to Files. У діалоговому вікні виберіть тип файлу PSD, відкрийте папку, в якій ви хочете зберегти свої файли, задайте для їх назви якої-небудь відмітний префікс типу "Violet", а інші настройки залиште за умовчанням. Після натискання Run Photoshop автоматично створить файл для кожного композиційного шару, при цьому назви файлів будуть містити назви цих шарів.

Додаємо графічні елементи. Горнятко кави

15 Крок

Відкрийте в фотошоп картинку з чашкою кави, виконайте подвійне клацання по шару "Background" на палітрі Layers, щоб зробити його редагується. Потім за допомогою Pen Tool (P) в режимі Paths обведіть чашку по контуру. Після цього натисніть кнопку Exclude Overlapping Path Areas на панелі Options інструмента в верхній частині екрану і обведіть внутрішню окружність ручки. Потім, як ви закінчите з шляхами, виконайте Layer\u003e Vector Mask\u003e Current Path для перетворення шляху в векторну маску і вичленування чашки з фону.

16 Крок

Тепер ви можете перенести чашку на свій робочий документ. За бажанням цей шар можна растеризувати (клік правою кнопкою миші по шару на палітрі Layers і вибір пункту Rasterize Layer). Назвіть шар з чашкою "coffee cup".

Потім, використовуючи техніку, викладену на кроці 10, додайте до чашки відображення, але на цей раз за допомогою великої і м'якої чорної кисті (Brush Tool, B) в режимі маски сховайте незграбні краю відображення, як показано на малюнку нижче.

17 Крок

Як невелика деталі ми додамо до чашки тінь. За допомогою Ellipse Tool розтягніть насичений чорний еліпс між чашкою і її відображенням. Потім відкрийте Filter\u003e Blur\u003e 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\u003e Channels) дублюйте канал Red, натисніть Ctrl + A, Ctrl + C для збереження копії в буфер обміну, потім видаліть дубльований шар, перейдіть назад на канал RGB, щоб повернути зображення свій колишній колір.

На палітрі Layers виберіть шар з димком і виконайте Layer\u003e Layer Mask\u003e Hide All, після чого клацніть на цій масці, натиснувши клавішу Alt, щоб зробити її видимою. Потім вставте на маску зображення, яке ви скопіювали в буфер до цього. Після того, як ви перейдете на свою оригінальну мініатюру з шаром, ви побачите, як спрацював даний прийом.

20 Крок

Перетягніть шар з димом на наш основний документ. Потім растрируются його і назвіть "Smoke". Помістіть його просто над чашкою кави. Додайте до цього шару маску і залийте її градієнтом від білого до чорного, щоб заховати верхню частину цівки кавового аромату.

В результаті дублюйте шар "Smoke", помістіть копію поверх оригінального шару і виконайте Filter\u003e Blur\u003e 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, включаючи інформацію, надану замовником.

У цій частині спробуємо розібратися, як робити меню дляEncore. Для цього скористаємося ПО -PhotoshopCS. Зокрема потрібно перевірити, щоб працювала командаEdit\u003eEditinPhotoshop, потрібно щоб при подвійному натисканні на файліpsd, відкривавсяPhotoshopCS, а не інше програмне забезпечення (типуACDSee та інші вюверів). Для цього - беремо файл з розширеннямpsd.

Робимо на ньому правий клік миші і вибираємо з контекстного меню останній рядок Властивості. І в вікні, навпаки Додаток, якщо там не варто PhotoshopCS тиснемо кнопку Змінити.

І в списку вибираємоPhotoshopCS, далі ОК.

Все застовпили розширення.

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

запускаємоEncore.

Для того щоб подивитися з чого складається наше меню, відкриємо проектTest.ncor.

Виділимо вікно Редагування меню. виконуємо команду Edit\u003e Edit in Photoshop (Shift + Ctrl + M).Або натиснемо кнопку на палітрі інструментів.

І наше меню відкриється вPhotoshopCS.

У правому нижньому кутку в палітріLayers ми побачимо всю структуру нашого меню.

Меню складається з шаруBackground (фонове зображення), в деяких меню є папочкаBackgrounddetails з різними елементами фону, які можна відключати \\ переміщати (наприклад - букет квітів і т.д.)

Тепер давайте подивимося, що приховують в собі татка (+)ribbon &ribbonvideo, як не складно здогадатися вміст наших кнопок. Відкриємо татка і побачимо наступну картину. Давайте розбиратися.

(+) ribbon - це звичайна кнопка.

(+) ribbonvideo - це відео кнопка.

Основні елементи тут (\u003d 1)highlight,T - текстовий шар з назвою кнопки і (%)video,border &ribbon - це елементи прикраси. (\u003d 1)highlight - цеSubpicture, цим елементом ми виділяємо активну кнопку при виборі її з ПДУDVD - плеєра, або при наведенні на неї курсора миші.Subpicture служить для навігації по меню, при відкритті / створення кнопки повинен бути в вимкненому стані.

Т як уже говорилося це текстовий шар, який ми можемо змінювати.

border - це декоративна рамка.

(%) video - це безпосередньо відео кнопка, то місце де ми будемо бачити перший кадр нашого фільму.

ribbon - декоративна смужка для тексту.

Прийшов час спробувати створити свою кнопку, для цього нам потрібні наступні файли - качаємо

запускаємоEncore.

натискаємоCtrl +N,Ctrl +I і імпортуємо три файли 1.mpg, 2.mpg, 3.mpg.

Імпортуємо наше менюFile\u003eImportasMenu (Shift +Ctrl +I) файлGold _Menu.psd.

І бачимо що наш фон (%)video змінився з чорного на сірий. При виконанні командиFile\u003eImportasMenu - будь-які відеоthumbnail мають сірий колір. І поки ми не зв'яжемо нашу відео кнопку з відео матеріалом, ми будемо бачити сірийplaceholder.

Щоб було видно все вікно повністю, змінюємо масштаб в лівому нижньому кутку на 50%.

Давайте перетягнемо наш файл 1.mpg з закладкиProject на нашу першу кнопку, другий файл на другу кнопку, третій на третю кнопку в вікні

Виділяємо мишкою наше меню і перемикається на закладкуLayers. Відкриємо (+)gold 1 і бачимо, що там не вистачає шару (\u003d \u200b\u200b1)highlight т.зв.Subpicture. Відключаємо (%)video, прибираючи очей.

Включеним залишаємо тільки шарframe і виділяємо папкуSet\u003e (+)gold 1. Виконуємо командуObject\u003eCreateSubpicture.

Ту ж операцію проробляємо з папками (+)gold 2, (+)gold 3. Тепер потрібно зробити попередній нашого меню -File\u003ePreview.

І якщо ми при ініціалізації отримали наступний діалог.

Натискаємо - Скасування. Ми з Вами забули встановити, що у нас програється першим. Виправимо цю помилку - виділяємо в закладці Project наше меню.

Потім правий клацання миші і з контекстного меню вибираємо пунктSetasFirstPlay.

повторюємо процедуруFile\u003ePreview.

Або можна скористатися кнопкою на панелі інструментів, обведеної червоним квадратом.

відкриється вікноProjectPreview.

На зображенні спостерігаємо обрану середню кнопку. якщо колірSubpicture нас не влаштовує, закриваємо вікноPreview. Виділяємо наше меню іEdit\u003eEditinPhotoshop.

В Фотошопі вибираємо по черзі наші шари, тимчасово відключивши шар (%)video іframe. І навпаки включивши шар (\u003d 1).

Результат контролюємо по малюнку.

натискаємоCtrl +L і у вікніLevels.

Виробляємо наступна дія - зміщуємо повзунки, як показано нижче.

Якщо нас все влаштовує, тиснемоCtrl +S,Ctrl +Q (File\u003eExit). робимо вEncore -Preview і спостерігаємо наше новеSubpicture.

закриваємо вікноPreview. Залишилося нам додати в меню до наших кнопок текст. Звичайно, це можна було зробити і в Фотошопі, але давайте розглянемо, як це зробити вEncore. Перемикаємося на закладкуCharacters.

У ній вибираємо шрифт -GaramondBookCTT, накреслення -BoldItalic, кегль (розмір) - 36 і колір. Після зроблених налаштувань вибираємо на панелі інструментів - Т.

І починаємо вводити наш текст під кнопками.

Переключившись, на закладкуLayers бачимо, що у нас з'явилося три нових шари з текстом.

Тепер виділивши в закладціLayers верхній шар Кінець, переходимо в закладкуStyles, включаємо пресети для тексту - Т, кнопка обведені червоним квадратом. вибираємо установкуSet\u003eNovelty і в списку вибираємо стильYellowGoldBevelIndent (text).psd.

І ті ж дії проробляємо з шарами Фільм, Альбом. робимоFile\u003ePreview.

І розглядаємо наш результат.

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

У навздогін ще одна порада:

Може виникнути ситуація, коли у Вас в меню три кнопки, відповідно три сюжети, але всі вони починаються з одного заставки. І у Вас вийдуть три однакові кнопки. Або у Вас один з сюжетів, починається з чорного кадру ( Fade), соотв. і відео кнопка буде з чорної картинкою. Можна ситуацію поправити, я пропоную такий варіант -ідем в ту директорію, куди зберігали наш проект, наприклад - З: \\ Мої документи \\Test \\Sources \\Menus. І відкривши цю папочку, бачимо файли.psd, але нас цікавить найпершийMenu _Bpgc _Dsf _1933415418, інші тимчасові файли з закінченням _temp.psd # 1A (2A, 1B ....) Нам не потрібні. Подвійне клацання на цьому файлі, відкриваємо його в Фотошопі, міняємо у потрібній кнопки шар (%)video на потрібну нам картинку. ІCtrl +S - зберігаємо.

Ctrl +Q - виходимо з Фотошопа.

Усе. Можна мати заздалегідь приготоване таке ж меню, але з іншими відео шарами і скопіювавши назву, замінити файл Menu _Bpgc _Dsf _1933415418.

Виникає закономірне питання, але можна ж зEncore, командоюEdit\u003eEditinPhotoshop відправити наше меню вPhotoshop і зробити нашу заміну. Якщо ми збережемо змінене меню якCtrl +S, тоді ми будемо впливати на ті самі _temp.psd # 1A (2A, 1B ....) І змінений шар (%)

Де нас запитують - чи хочемо ми замінити вже існуючий файл з аналогічною назвою. Тиснемо ОК. закриваємоPhotoshop -Ctrl +Q. ІEncore нас зустрічає теж діалогом.

можна скористатисяSetPosterFrame, розглянемо його дію на першому маркере, який автоматично встановлюється, при додаванні фільму на таймлайн. Переміщаємо індикатор на те місце, куди нам необхідно. Контролюємо потрібний кадр по вікну монітора.

Клацаємо правою кнопкою мишки по маркеру, він стане червоним, і зі списку вибираємо