Меню сайта в фотошопе: Панели и меню в Photoshop


22.08.1976 Facebook Twitter LinkedIn Google+ Разное


Содержание

Как сделать меню для сайта в фотошопе — уроки по фотошопу Photoshop

Разберем, как сделать объемное горизонтальное меню для сайта. Для начала создаем документ шириной 1600 пикселей, диной 2000 пикселей.

Создаем новый слой.

На боковой панели инструментов выбираем «Прямоугольная область».

Теперь образуем рабочую область для будущего меню.

С помощью инструмента «Заливка» заполняем выделенную область цветом. Дабы упростить вашу работу — #0391ff, именно этот цвет я задействовала. Как изменить цвет, вы найдете здесь.


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

Теперь мы видим середину и можем пометить ее для себя. Знание ее местонахождения нам еще пригодится.

Установим вспомогательную линию на середине документа. Для этого нам придется переместить курсор к линейке расположенной у баковой панели инструментов и вытащить ее.

На боковой панели инструментов выбираем «Текст» и прописываем название будущих разделов.

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

  • Главная
  • Кухни
  • Спальни
  • Мягкая мебель
  • Прихожие
  • Стенки
  • О компании
  • Контакты

Пишем в строчку. Между каждым разделом оставляем расстояние при помощи пробелов.

Шрифт arial размер 18 пикселей. Данные параметры мы найдем на панели «Текст».

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

Теперь добавим нашему меню немного объема.

Разделим кнопки. Для этого нам необходимо выбрать инструмент «линия» на панели инструментов. Берем цвет чуть темнее поля нашего меню. Допустим #0179d6. Проводим горизонтальную линию, зажимая клавишу shift толщиной 1 пиксель. Стараемся провести ровно. От границы до границы синей области. Если с этим возникли сложности, вы можете изменить ее размер с помощью инструмента перемещение.

Затем растрируем получившуюся линию.

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

Кликаем по получившемуся слою и выбираем «Параметры наложения». Нам нужна вкладка «Наложение цвета». Берем цвет чуть светлее поля меню. Например, #6bbeff.

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

Вот что у нас получилось. Кнопка стала объемной. Мы создали имитацию света и тени. Теперь проделаем то же самое с остальными кнопками.

Дублируем слои, дабы сократить время работы.

Объем появился, но чего-то не хватает. Попробуем придать объема полосе меню.

Создадим горизонтальные линии тем же методом, задействовав цвета #0063af и #78c2fb.

Расположим их сверху. Вот что у нас получилось.

Простое объемное меню для сайта готово!

Красивое вертикальное меню для сайта в Photoshop

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

Материалы по теме:

Выберите инструмент «Rounded Rrectangle Tool» (U) — «Прямоугольник со скругленными углами» установите радиус в 20 px, цвет #1d97bc, а также другие настройки как показано ниже и нарисуйте прямоугольную фигуру.

 

Теперь выберите инструмент «Pen Tool» (P) — «Перо», затем зажмите клавишу CTRL и кликните на границе прямоугольника, в результате появится выделение. Далее зажмите клавишу Alt и при помощи скроллинга можете увеличить фигуру для более удобной работы с ней.

Не отпуская клавишу Alt, нажмите на точку 1, а затем 2, в левом верхнем углу прямоугольника, после этого отпустите Alt и нажмите на точку 3. Теперь нажмите на клавишу CTRL и кликните по точке 4, удерживая левую кнопку мыши отпустите клавишу CTRL, а нажмите клавишу SHIFT и перетащите стенку нашего прямоугольника чтобы получился прямой угол. Смотрите изображение ниже:

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

Примените следующие Blending Options — Параметры наложения. (Слой >> Стиль слоя >> Параметры наложения…)

Drop Shadow — Тень. Blend Mode: Multiply — Режим: Умножение.

Outer Glow — внешнее свечение. Blend Mode:Screen — Режим: Осветление; Technique: Softer — Метод:Мягкий

Stroke — Обводка. Position:Outside — Положение:Снаружи;

Добавьте название меню в самом верху. (Настройки смотрите на изображении ниже).

 

Далее выберите инструмент Pencil Tool (B) — Карандаш. Создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и проведите горизонтальные линии, одну верхнюю черного цвета, вторую белого цвета. Измените, прозрачность слоя до 18%.

Дублируйте этот слой нажатием сочетания клавиш CTRL + J и выбрав инструмент «Перемещение» (CTRL + V) переместите этот слой ниже на 27 px. Повторите дублирование и перемещение 5 раз.

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

Создайте новый слой и при помощи инструмента «Прямоугольная область» (M) сделайте между двумя линиями небольшое выделение и заполните его цветом #75c5de. Тоже самое сделайте и для других позиций меню.

Примечание переводчика: 
Заполнить выделение можно при помощи инструмента «Заливка» (G).

Теперь используя инструмент Horizontal Type Tool (T) — «Горизонтальный текст» напишите текст.

 

Теперь необходимо сделать ховер эффект. При помощи инструмента «Прямоугольная область» сделайте прямоугольное выделение верхнего пункта меню, затем создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и разместите его под слоем с текстом и используя Gradient Tool (G) — инструмент «Градиент» сделайте градиентную заливку.

Окончательный вариант:

Материал подготовлен проектом: webmastermix.ru
Источник

Рекомендуем ознакомиться:

Подробности

Опубликовано: 09 Март 2010

Обновлено: 20 Сентябрь 2013

Просмотров: 21326

Как сделать дизайн сайта в фотошопе с нуля – Блог opengs.

ru

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

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

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела “Photoshop“.

Создание и подготовка файла проекта

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

  1. Дать имя своему макету, у меня на примере “mysite
  2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
  3. Единицы измерения установи в “Пикселях“. Разрешение “72” Пиксели/дюйм.
  4. Жми “OK”. И сохраняй его как psd “Файл > Сохранить как…” в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент “Прямоугольник“,  установи в параметрах инструмента значение “Пиксели”  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным).

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения “Прямоугольная область“. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось “Файл -> Сохранить для Web -> PNG-24

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

  1. Правый клик на файле
  2. В контекстном меню “Открыть с помощью”
  3. Выбери браузер которым пользуетесь (у меня hrome).
  4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
  5. Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

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

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

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

  1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
  2. Выбрать инструмент “Перемещение” (это стрелочка напоминающая курсор)
  3. Открой вкладку с логотипом
  4. Наведи курсор на изображение логотипа
  5. Нажми и не отпускай левую кнопку мыши
  6. Тащи изображение на вкладку с макетом
  7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
  8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента “Текст” пишу “Горячая линия” и номер телефона организации “+7 (3435) 25-60-60”. Я разместил телефон в шапке по двум причинам. Первая это наличие телефона с правой стороны в шапке уже привычно пользователям, так сделано на большинстве сайтов компаний. Вторая, если это сайт компании, то многие посетители почитав, то что их интересуют наверняка захотят позвонить и им не придется открывать страницу контакты. Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

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

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

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

  1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
  2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
  3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
  4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana

Старайся использовать стандартные шрифты по максимуму. Так как при просмотре сайта пользователь используется шрифты своей системы.

Получилось вот такое меню:

Дизайн содержимого сайта

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

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

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

Получилось вот что:

Дизайн подвала сайта

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

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

Результат:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Как создать макет сайта в фотошопе?

Как создать полноценный макет  сайта в фотошоп

Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:

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

Перед тем, как создать сайт в Фотошопе, лучше сделать наброски основных контуров на бумаге:

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

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

Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:

Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте «Наложение градиента» (Gradient Overlay) с вертикальным переходом от серого цвета к белому:

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

Выделив область заголовка с маской, нажмите CTRL+SHIFT+C, чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум, чтобы создать простую текстуру, затем установите режим наложения «Умножение» и снизьте прозрачность до подходящего значения:

Далее продолжаем делать сайт в Фотошоп, вставив логотип компании и расположив его в сетке. Добавьте стиль «Наложение градиента» с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:

Используйте инструмент «Текст» для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:

Заголовок – это отличное место, чтобы представить сайт. С ярким фоном он привлекает основное внимание пользователя. Используйте это пространство, чтобы поместить привлекательный вступительный заголовок с индивидуальным шрифтом, который соответствует имиджу компании:

Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica, чтобы текст можно было поместить в html без замены изображений:

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

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

Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:

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

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

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

Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:

Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект). Ее элементы могут включать в себя небольшие снимки и отрывки текста:

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

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

Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:

Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T, чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:

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

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

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

Добавьте контактную информацию в нижний правый угол. Так эти данные будут всегда под рукой у пользователей. Выделите наиболее важные аспекты с помощью размера и большей толщины или цвета:

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

МЛМария Логутенкоавтор-переводчик статьи «Create a Clean Modern Website Design in Photoshop»

Как создать хорошее меню в фотошопе. Как сделать меню группы в Вконтакте? ribbon – декоративная полоска для текста

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #0c1b26.

Шаг 2.
На панели инструментов выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставляем «Радиус» (Radius) 50 пикселей и создаем фигуру как на рисунке ниже, цвет любой.

Шаг 3.

Шаг 4.
Далее стиль слоя «Внутренняя тень» (Inner Shadow).

Шаг 6.
Получили такой результат.

Шаг 7.
На новом слое создаем небольшой кружок, цвет любой.

Шаг 8.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.

Шаг 9.
Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.

Шаг 11.
Получили такой результат.

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

Шаг 13.
Выбираем и настраиваем шрифт, как на рисунке ниже, и пишем текст на кнопке. В данном случае «Практика для новичков».

Шаг 14.
Применим к тексту стиль слоя «Тень» (Shadow).

Шаг 15.
Получили такой результат.

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

P.S. Постовой. А вы знаете, что автор блога hronofag.ru Drive Alienn пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.

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

1. Создаем шапку листовки

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

На новом слое добавляем фон с фастфудом и размещаем его вверху документа.

Дважды кликаем по слою с изображением фастфуда и применяем к нему стиль слоя Inner Shadow (Внутренняя тень).

2. Добавляем текст на доске

Активируем инструмент Type Tool (T) (Текст) и пишем, например, Restaurant Menu. Используем шрифт Bakery Font. Из этого урока вы можете узнать, как быстро установить шрифт в Фотошоп. Для удобства работы с текстом мы будем использовать два текстовых слоя: один со словом restaurant, а второй — menu.

Жмем Ctrl+T, чтобы слегка изменить угол наклона текста.

Инструментом Pen Tool (P) (Перо) рисуем несколько волнистых линий по бокам слова menu.

3. Добавляем иконки с едой

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

Рядом с каждой иконкой добавляем название блюда и цену. Здесь используем шрифт Sketch Block, но вы можете подобрать другой. Цвет текста устанавливаем на темно-серый (#302e2f).

4. Создаем эффект бумаги

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

Выше текстуры добавляем корректирующий слой Layer — New Adjustment Layer — Levels (Слой — Новый корректирующий слой — Уровни). Затем преобразовываем корректирующий слой в обтравочную маску (Ctrl+Alt+G).

Добавляем корректирующий слой Hue /Saturation (Цветовой тон/Насыщенность), чтобы слегка обесцветить текстуру.

Вот так выглядит готовое меню для ресторана.

5. Добавляем текстуру дерева

В архиве с уроком в формате PSD вы найдете специальный psd-мокап в виде стопки бумаги на сером фоне. Открываем его в Фотошоп, дважды кликаем по слою «ADD BACKGROUND INSIDE» и в открывшемся смарт-объекте добавляем любую текстуру дерева . Сохраняемся (Ctrl+S) и смотрим результат.

Также в этом же файле вы можете заменить картинку с меню на свою. Для этого отредактируйте смарт-объект «DOUBLE CLICK TO OPEN THE FLYER» по такому же принципу, как фон.

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 (Стиль слоя). Применяем стили слоя.

Я написал статью про Photoshop .
Внимание! Я использую английскую версию Photoshop CS6 .
Сегодня мы нарисуем меню для игры с разрешением 800×600 (хотя по такой же технологии можно сделать и для 1024×768)
Вот как оно будет выглядеть:

А теперь начнём работать.
Создаем документ с Photoshop разрешением 800×600:


Переименовываем слой из Layer 1 в Background. Выделяем инструментом Rectangular Marquee Tool весь рисунок и закрашиваем его
тоном любого цвета, нам сейчас цвет не важен, или возьмите инструмент Paint Bucket Tool и закрасьте рисунок.
Загружаете вот этот рисунок:

Открываете его в Photoshop , переходите в Edit -> Define Pattern… и вводите имя вашей текстуры.
Выделяем слой background, нажимаем на кнопку эффектов и выбираем пункт «Pattern Overlay»:

Разверните палитру и выберите появившиюся текстуру из вашего изображения. Параметр Scale установите на 150%, а то слишком
мелко выглядит.
Итак, фон выглядит скучно и плоско:


Нужно его как-то «поднять», разнообразить.
Нажимаем на уже знакомую кнопку и находим пункт «Bevel & Emboss», залазим на подпункт под названием «Texture» и выбираем неровность:
разворачиваем текстуры, нажимаем на шестерёнку и выбираем понравившиюся текстуру:


Вот так лучше.
Теперь переходим к самому меню — к кнопкам, к тексту, и т.д.
Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):

Скопируйте изображение в наш рисунок и поставьте его вверху и сдвиньте немного влево:


Теперь рядом напишите текст «GameTool» (хотя вы можете написать туда что угодн0), используя шрифт Segoe UI с размером 72 pt.
Цвет дайте тексту #666666.
Текст стал сливаться с фоном, надо ему добавить обводку для чёткого разделения.
Слой с текстом стал называться так же, как и вы туда написали в этот слой. У меня он называется «GameTool».
Переходим на слой с текстом, нажимаем уже знакомую кнопку для вызова эффектов и выберем «Stroke».
Устанавливаем параметры: Size — 3px, Position — Outside, цвет — полностью чёрный (#000000), остальные параметры не трогаем.
Вот так хорошо стало:


Ну теперь к самой вкусной части этого урока — создание кнопок. Какое же меню без кнопок? А главное, вы научитесь делать такие аппетитные кнопочки.
И так, раскрываем меню инструмента Rectangle Tool и выбираем Rounded Rectangle Tool:

Теперь переходим к View и открываем пункт New Guide. Выбираем Hopizontal и вводим 4,87 cm.
Опять нажимаем на данную вкладку, опять выбираем Hopisontal и вводим 9,10 cm.
Еще раз нажимаем туда, оставляем Vertical и вводим 8,78 cm.
Ещё один раз нажимаем, оставляем Vertical и вводим 20,57 cm.
Для того, чтобы их случайно не сдвинуть, переходим в View -> Lock Guides. Теперь можно в получившиимся центре сделать кнопку с помощью инструмента
Rounded Rectangle Tool. Инструмент уже выбран, так что просто выделяем его и проводим от левого верхнего угла получившися окошка до правого нижнего края:


Слой с фигурой стал называться Shape 1. Переименовываем его в cnopka1. Нажимаем на кнопку эффектов и выбираем эффект Gradient Overlay.
Градента, который нужен, нет в списке, поэтому мы его сами создадим. Нажимаем два раза на градиент (не на кнопку открытия градиентов!), и открывается Gradient Editor.
Выставляем цвета:

И применяем этот градиент.
Кнопка выглядит плоско, надо её поднять. Поэтому нажимаем на кнопку эффектов и выбираем пункт «Bevel & Emboss».
Выставляем настройки:


Вот и готова кнопка.
Теперь переходим во View и снимаем галочку с Lock Guides.
Затем опять переходим во View и нажимаем пункт Clear Guides.
Перейдите на слой cnopka1 и дублируем его через Layer -> Dublicate Layer, или нажимаем правой кнопкой мыши на слое и выбираем Duplicate Layer.
Дайте имена нашим новым слоям: cnopka2 и cnopka3. Визуально ничего не изменилось, но если мы инструментом Move Tool подвинем наши новые слои, то они сместятся.
Перейдите на слой cnopka2 и зажимая клавишу Shift, перемещаем его вниз. Таким же образом переместите слой cnopka3. (Примечание — зажимать кнопку Shift надо было, чтобы
слой перемещался строго по горизонтали или вертикали.
(Ещё одно примечание: если вы используете Photoshop CS6, то можете видеть, насколько перемещается слой, в этом случае переместите его на ~1,5 cm)
Ну вот, остался только текст:


Напишите текст тем же шрифтом Segoe UI, 48 pt, цвет опять #666666. Напишите тексты — New Game, Help, Exit.
Ура, готово!

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

В этом уроке вы узнаете, как с помощью 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

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

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

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

1. Создаем шапку листовки

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

На новом слое добавляем фон с фастфудом и размещаем его вверху документа.

Дважды кликаем по слою с изображением фастфуда и применяем к нему стиль слоя Inner Shadow (Внутренняя тень).

2. Добавляем текст на доске

Активируем инструмент Type Tool (T) (Текст) и пишем, например, Restaurant Menu. Используем шрифт Bakery Font. Из этого урока вы можете узнать, как быстро установить шрифт в Фотошоп. Для удобства работы с текстом мы будем использовать два текстовых слоя: один со словом restaurant, а второй — menu.

Жмем Ctrl+T, чтобы слегка изменить угол наклона текста.

Инструментом Pen Tool (P) (Перо) рисуем несколько волнистых линий по бокам слова menu.

3. Добавляем иконки с едой

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

Рядом с каждой иконкой добавляем название блюда и цену. Здесь используем шрифт Sketch Block, но вы можете подобрать другой. Цвет текста устанавливаем на темно-серый (#302e2f).

4. Создаем эффект бумаги

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

Выше текстуры добавляем корректирующий слой Layer — New Adjustment Layer — Levels (Слой — Новый корректирующий слой — Уровни). Затем преобразовываем корректирующий слой в обтравочную маску (Ctrl+Alt+G).

Добавляем корректирующий слой Hue /Saturation (Цветовой тон/Насыщенность), чтобы слегка обесцветить текстуру.

Вот так выглядит готовое меню для ресторана.

5. Добавляем текстуру дерева

В архиве с уроком в формате PSD вы найдете специальный psd-мокап в виде стопки бумаги на сером фоне. Открываем его в Фотошоп, дважды кликаем по слою «ADD BACKGROUND INSIDE» и в открывшемся смарт-объекте добавляем любую текстуру дерева . Сохраняемся (Ctrl+S) и смотрим результат.

Также в этом же файле вы можете заменить картинку с меню на свою. Для этого отредактируйте смарт-объект «DOUBLE CLICK TO OPEN THE FLYER» по такому же принципу, как фон.

Я написал статью про Photoshop .
Внимание! Я использую английскую версию Photoshop CS6 .
Сегодня мы нарисуем меню для игры с разрешением 800×600 (хотя по такой же технологии можно сделать и для 1024×768)
Вот как оно будет выглядеть:

А теперь начнём работать.
Создаем документ с Photoshop разрешением 800×600:


Переименовываем слой из Layer 1 в Background. Выделяем инструментом Rectangular Marquee Tool весь рисунок и закрашиваем его
тоном любого цвета, нам сейчас цвет не важен, или возьмите инструмент Paint Bucket Tool и закрасьте рисунок.
Загружаете вот этот рисунок:

Открываете его в Photoshop , переходите в Edit -> Define Pattern… и вводите имя вашей текстуры.
Выделяем слой background, нажимаем на кнопку эффектов и выбираем пункт «Pattern Overlay»:

Разверните палитру и выберите появившиюся текстуру из вашего изображения. Параметр Scale установите на 150%, а то слишком
мелко выглядит.
Итак, фон выглядит скучно и плоско:


Нужно его как-то «поднять», разнообразить.
Нажимаем на уже знакомую кнопку и находим пункт «Bevel & Emboss», залазим на подпункт под названием «Texture» и выбираем неровность:
разворачиваем текстуры, нажимаем на шестерёнку и выбираем понравившиюся текстуру:


Вот так лучше.
Теперь переходим к самому меню — к кнопкам, к тексту, и т.д.
Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):

Скопируйте изображение в наш рисунок и поставьте его вверху и сдвиньте немного влево:


Теперь рядом напишите текст «GameTool» (хотя вы можете написать туда что угодн0), используя шрифт Segoe UI с размером 72 pt.
Цвет дайте тексту #666666.
Текст стал сливаться с фоном, надо ему добавить обводку для чёткого разделения.
Слой с текстом стал называться так же, как и вы туда написали в этот слой. У меня он называется «GameTool».
Переходим на слой с текстом, нажимаем уже знакомую кнопку для вызова эффектов и выберем «Stroke».
Устанавливаем параметры: Size — 3px, Position — Outside, цвет — полностью чёрный (#000000), остальные параметры не трогаем.
Вот так хорошо стало:


Ну теперь к самой вкусной части этого урока — создание кнопок. Какое же меню без кнопок? А главное, вы научитесь делать такие аппетитные кнопочки.
И так, раскрываем меню инструмента Rectangle Tool и выбираем Rounded Rectangle Tool:

Теперь переходим к View и открываем пункт New Guide. Выбираем Hopizontal и вводим 4,87 cm.
Опять нажимаем на данную вкладку, опять выбираем Hopisontal и вводим 9,10 cm.
Еще раз нажимаем туда, оставляем Vertical и вводим 8,78 cm.
Ещё один раз нажимаем, оставляем Vertical и вводим 20,57 cm.
Для того, чтобы их случайно не сдвинуть, переходим в View -> Lock Guides. Теперь можно в получившиимся центре сделать кнопку с помощью инструмента
Rounded Rectangle Tool. Инструмент уже выбран, так что просто выделяем его и проводим от левого верхнего угла получившися окошка до правого нижнего края:


Слой с фигурой стал называться Shape 1. Переименовываем его в cnopka1. Нажимаем на кнопку эффектов и выбираем эффект Gradient Overlay.
Градента, который нужен, нет в списке, поэтому мы его сами создадим. Нажимаем два раза на градиент (не на кнопку открытия градиентов!), и открывается Gradient Editor.
Выставляем цвета:

И применяем этот градиент.
Кнопка выглядит плоско, надо её поднять. Поэтому нажимаем на кнопку эффектов и выбираем пункт «Bevel & Emboss».
Выставляем настройки:


Вот и готова кнопка.
Теперь переходим во View и снимаем галочку с Lock Guides.
Затем опять переходим во View и нажимаем пункт Clear Guides.
Перейдите на слой cnopka1 и дублируем его через Layer -> Dublicate Layer, или нажимаем правой кнопкой мыши на слое и выбираем Duplicate Layer.
Дайте имена нашим новым слоям: cnopka2 и cnopka3. Визуально ничего не изменилось, но если мы инструментом Move Tool подвинем наши новые слои, то они сместятся.
Перейдите на слой cnopka2 и зажимая клавишу Shift, перемещаем его вниз. Таким же образом переместите слой cnopka3. (Примечание — зажимать кнопку Shift надо было, чтобы
слой перемещался строго по горизонтали или вертикали.
(Ещё одно примечание: если вы используете Photoshop CS6, то можете видеть, насколько перемещается слой, в этом случае переместите его на ~1,5 cm)
Ну вот, остался только текст:


Напишите текст тем же шрифтом Segoe UI, 48 pt, цвет опять #666666. Напишите тексты — New Game, Help, Exit.
Ура, готово!

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

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #0c1b26.

Шаг 2.
На панели инструментов выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставляем «Радиус» (Radius) 50 пикселей и создаем фигуру как на рисунке ниже, цвет любой.

Шаг 3.

Шаг 4.
Далее стиль слоя «Внутренняя тень» (Inner Shadow).

Шаг 6.
Получили такой результат.

Шаг 7.
На новом слое создаем небольшой кружок, цвет любой.

Шаг 8.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.

Шаг 9.
Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.

Шаг 11.
Получили такой результат.

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

Шаг 13.
Выбираем и настраиваем шрифт, как на рисунке ниже, и пишем текст на кнопке. В данном случае «Практика для новичков».

Шаг 14.
Применим к тексту стиль слоя «Тень» (Shadow).

Шаг 15.
Получили такой результат.

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

P.S. Постовой. А вы знаете, что автор блога hronofag.ru Drive Alienn пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.

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

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

Финальный результат

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

Создайте документ с размерами → 500 x200 (File > New (Файл > Новый / Сочетание клавиш «Ctrl+N»)) и залейте его серым цветом (Paint Bucket Tool (Инструмент Заливка / Клавиша «G»)).


Далее используйте Rectangular Marquee Tool (Прямоугольная область выделения / Клавиша «M») и создайте примерно такое выделение (извините за разные цвета фонов в этом и предыдущем изображении, просто не обращайте внимание на это): ↓

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

Drop Shadow (Тень).


Stroke (Обводка). ↓


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


Выделите свое меню, зажав Ctrl Select > Modify > Contract (Выделение > Модификация > Сжать), 2 пикселя.


Создайте новый слой (New Layer (Новый слой / Сочетание клавиш «Ctrl+Shift+N»)) и залейте выделение белым цветом (Paint Bucket Tool (Инструмент Заливка / Клавиша «G»)), теперь с помощью трансформации (Ctrl+T ), сделайте чтобы этот слой покрывал половину нашего меню.


Измените opacity (непрозрачность) на 25% .


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

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


Drop Shadow (Тень), Gradient Overlay (Наложение градиента).

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


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


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


Теперь измените opacity (непрозрачность) так, чтобы вы могли едва обратить внимание на белый слой. Я ставил 6% .

Привет всем! На этот раз мы приготовили для вас урок о том, как создается готовый к печати буклет для воображаемого кофейного магазина под названием “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, включая информацию, предоставленную заказчиком.

Как сделать дизайн сайта в фотошопе?

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

  1. Создать новый документ.
  2. Добавить фон.
  3. Добавить картинки.
  4. Настроить стандартные кнопки.
  5. Наполнить блоки текстовым контентом.
  6. Оценить результат.

Шаг 1

Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.

Шаг 2

Теперь вы должны добавить подходящий узор на свой фон.

Layer Style->Blending options->Pattern Overlay.

Шаг 3

Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.

Шаг 4

Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow. Используйте настройки, которые вы можете увидеть на скриншотах:

Blending options->Inner Shadow

Для меню выбран цвет #6bafff.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool. Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller [bold]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.

Добавляем внутреннюю тень:Blending Options->Inner Shadow.

Создайте один прямоугольник с размерами 41px и 32px.

Blending Options->Drop Shadow

Blending Options->Inner Shadow

Blending Options->Color Overlay (цвет — #6bafff)

Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.

И вот результат:

Шаг 8

Связь с социальными сетями очень полезна и важна для любого сайта. Попробуем создать простую кнопку Facebook.С помощью инструмента Rounded Rectangle (радиус — 3px) создаем кнопку.

Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.

Выберите инструмент Pen Tool  и отрежьте половину этого квадрата.

Нажмите Edit->Transform->Rotate, чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).

Blending Options->Inner Shadow:

Blending Options->Color Overlay (#c1cac5 )

Теперь добавьте текст Перейти или т.п. на кнопку Facebook.

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F, и выделить ее синим цветом (# 5a90e5).

Результат:

Шаг 9

Создайте новую форму: ширина 940px, высота 372px.

Как всегда, добавьте тень:

И границу: Blending Options->Stroke (20px, цвет # 6bafff).

Шаг 10

Добавьте в свой дизайн стандартные иконки. Не забудьте использовать сетку, расстояние — 180px.

Шаг 11

Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.

Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:

Шаг 12

Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.

Шаг 13

Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Step 14

Добавьте текст Читать далее или что-то подобное на кнопку.

Шаг 15

Теперь необходимо отделить основную часть созданного сайта от нижней. Создайте линию в 1px, используя стили кнопки Читать далее.

Шаг 16

Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.

Перейдите в Blending options ->Stroke, чтоб ввести настройки: размер-20px, цвет # 919392.

Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.

Шаг 17

Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.

Добавьте градиент, например # 3a8df1 — # 6bafff.

Шаг 18

Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regular для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:

Используйте шрифт Arial Regular для текста в разделах (12px).

Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter.

Ну, собственно и все! Результат:

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

23+ Полезное меню навигации Photoshop Tutorials -DesignBump

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

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

1. Классическое меню навигации по фотошопу
2. Дизайн и программирование текстурированного меню навигации
3. Дизайн идеального меню с точностью до пикселя
4.Чистое меню навигации
5. ДИЗАЙН СТИЛЬНОГО НАВИГАЦИОННОГО МЕНЮ В PHOTOSHOP
6. Как создать потрясающее меню в стиле Vista
7. Дизайн и код скользящего выделенного меню
8. Дизайн и анимация необычных кнопок меню в Photoshop и Flash
9. Создать меню веб-сайта с иконками
10. Контент-коробка с оранжевым баннером под заголовком
11. Учебное пособие: Дизайн глянцевого серого меню навигации
12. Как создать высокодетализированную высокотехнологичную кнопку питания
13. Кнопки в стиле Web 2.0
14. Навигация Slick Blue
15. Дизайн вкусной кнопки «Свяжитесь со мной» в Photoshop
16. Photoshop для начинающих: создание кнопок для веб-части 1
17. Photoshop для начинающих: создание кнопок для веб-части 2
18. Создайте глянцевую кнопку
19. Дизайн пользовательской кнопки Facebook в Photoshop
20. Меню CSS со значками
21. Дизайн меню с эффектом акварели
22. СОЗДАЙТЕ КРАСИВУЮ СТИЛЬНУЮ ГЛЯНЦЕВУЮ КНОПКУ В PHOTOSHOP
23. Детализированная пластиковая панель навигации
24. Как создать гладкую и чистую кнопку в Photoshop

25 Креативные меню и руководства по навигации в Photoshop

Реклама

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

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

Если вам понравилась эта статья, возможно, вас заинтересуют другие наши статьи о лучших учебниках Photoshop 2011 года, Photoshop Effects, бесплатных PSD-файлах и Photoshop Text Effects Tutorials.

25 Креативные меню и руководства по навигации Photoshop

Панель навигации синего цвета на черном

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

Красочная панель навигации

Этот дизайн подходит для всех типов веб-сайтов. Но веб-сайты и блоги, связанные со специальным дизайном, идеально подходят для этой многоцветной схемы.

Профессиональная панель навигации

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

Стильное меню навигации

Дизайн для традиционного веб-дизайна и веб-дизайна.

Потрясающее меню, вдохновленное Vista

Если вы вдохновлены Vista, то этот дизайн лучше всего подходит для вас.

Контент-коробка с оранжевым баннером. Заголовок

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

Детализированная пластиковая панель навигации

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

Модернистский навигационный модуль

С помощью этого красивого дизайна вашему веб-сайту можно придать новый и современный вид.

Крутой 3D-эффект для веб-дизайна

Создание 3D-эффектов для веб-сайта или блога — это действительно круто. Это поможет вам завладеть вашими посетителями и произвести на них лучшее впечатление.

Сферы интерфейса

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

Навигация Slick Blue

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

Стеклянная панель навигации

(Удалено разработчиком)
Прозрачная стеклянная панель навигации придает вид музыкальному проигрывателю или программному интерфейсу вашего веб-сайта. Это действительно повлияет на ваших читателей.

Металлический дизайн заголовка в Photoshop

Придайте своему веб-сайту технический металлический вид с помощью этого красивого металлического дизайна меню навигации.

Чисто-белая навигация

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

Гладкая и чистая кнопка в Photoshop

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

Меню с эффектом акварели

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

Меню CSS со значками

Это меню можно разработать в Photoshop и позже реализовать с помощью CSS (каскадной таблицы стилей). Это действительно здорово использовать это с вашим сайтом.

 Скользящее выделенное меню

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

Стильная черная панель навигации

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

 

Глянцевая панель навигации

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

Красивая стильная глянцевая кнопка в Photoshop

Еще одна профессиональная и элегантная кнопка в Photoshop.

 Стильный темный навигационный блок

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

Гладкие кнопки

Если ваш веб-сайт или блог имеет белый или светло-серый фон с голубоватым оттенком, то эти кнопки навигации, разработанные в Photoshop, лучше всего подходят для вас.

Уникальная синяя кнопка Навигация

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

Кнопка «Профессиональное меню»

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

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

Дизайн веб-сайта в Photoshop

стр. РЕЗЮМЕ

Как создать визуализацию веб-сайта в Adobe Photoshop от начала до конца.

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

Начните с документа RGB Photoshop размером не более 990 пикселей

Приступая к графическому дизайну веб-сайта, я обычно создаю новый документ Photoshop шириной 990 пикселей. Это связано с тем, что 990 пикселей — это почти самое широкое значение, которое вы можете использовать на веб-странице без неприятной горизонтальной полосы прокрутки, появляющейся в браузере Microsoft Windows, в рамках ограничений дисплея 1024 x 768 пикселей (наиболее популярное разрешение экрана на момент написания).

Любой, кто использует Apple Mac, знает, что ширина окна браузера гораздо более изменчива, но, поскольку пользователи Mac составляют меньшинство, разработчик веб-сайта должен работать (в первую очередь) с учетом пользователей ПК — если только известно, что аудитория на базе Mac.

Итак, мой документ обычно начинается с размера 990 x 900 пикселей (рисунок 1) .

Рисунок 1. Создание файла Photoshop 990 x 900 пикселей

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

Как видно из скриншотов ( рисунок 2 ), даже если мы увеличим разрешение экрана до 1280 x 800 пикселей, даже если мы получим намного больше ширины, доступная высота останется практически неизменной. И чем больше панелей инструментов и функций добавляется в верхнюю часть окна браузера, тем меньше вертикальной площади веб-сайта мы получаем.

Рисунок 2a. Windows XP с Internet Explorer 8 и разрешением 1024 x 768

Рис. 2b. Windows XP с Internet Explorer 8 и разрешением 1280 x 800

Решите, что вы увидите по прибытии, а что будет спрятано на сгибе

Это означает, что существует опасность того, что ключевые сообщения будут непреднамеренно скрыты «ниже сгиба» (что означает, что вам нужно прокрутить вниз, чтобы увидеть их).Но даже в этом случае мы не хотим создавать веб-сайт высотой всего 560 пикселей… нам нужно найти золотую середину.

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

Включайте только то, что относится к делу

При работе над новым дизайном сайта вы можете сходить с ума — вы сможете интегрировать в дизайн практически все, что угодно (в пределах разумного), но просто помните, что вы будете нарезать его и использовать таблицы стилей, чтобы снова собрать все воедино. Не усложняйте эту часть работы, если вы все еще учитесь.

Что касается этого сайта, я хотел, чтобы он был простым, понятным и несложным, чтобы пользователь (вы) мог сосредоточиться на содержании (этом).

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

Итак, давайте начнем с основ

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

Вместо того, чтобы писать учебник, объясняющий, как создавать все возможные типы дизайна, я собираюсь сосредоточиться на одном дизайне — дизайне, созданном для использования на сайте-dreamweaver.com. Как только вы освоите основы, вы можете варьировать, экспериментировать и улучшать, как душе угодно.

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

Итак, для начала создайте новый документ Photoshop, используя настройки, показанные на рис. 1 . Добавьте в документ четыре направляющих, отстоящих от каждого края на 10 пикселей.Самый быстрый способ сделать это — выбрать:

ПОСМОТРЕТЬ/НОВОЕ РУКОВОДСТВО…

…и затем выберите:

По горизонтали, позиция 10 пикселей

Повторить по горизонтали, положение 890 пикселей

Повторить по вертикали, положение 10 пикселей

Повторить по вертикали, положение 980 пикселей

Задать цвет фона

Фоновый цвет (или рисунок) веб-сайта — это область, которая заполняет каждый угол окна браузера, не используемый самим сайтом, поэтому важно не делать его слишком отвлекающим или ярким. Я собираюсь выбрать темно-серый, чтобы улучшить сам сайт. Для этого щелкните квадрат выбора цвета переднего плана в нижней части палитры инструментов и либо выберите свой собственный цвет из набора цветов, либо введите следующее значение в поле внизу в центре диалогового окна с помощью символа #: 666666 . Нажмите «ОК».

В верхнем меню выберите:

РЕДАКТИРОВАТЬ/ЗАПОЛНИТЬ…

…и под Contents выберите Foreground Color . У вас должен получиться холст, который выглядит как рисунок 3 .Это фон, о котором позаботились.

Рисунок 3

Создание каркаса веб-сайта

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

Выберите инструмент Rounded Rectangle Tool на палитре инструментов. В палитре «Параметры» убедитесь, что выбрана кнопка « Shape Layers », а не « Paths » или « Pixels ». Это гарантирует, что будет создан красивый, редактируемый заполненный путь, а не пустой путь или пиксельная форма. После этого в палитре «Параметры» в поле « Радиус » введите 20 пикселей. Если вы не видите поле «Радиус», возможно, это связано с тем, что инструмент «Прямоугольник со скругленными углами» не выбран в палитре «Инструменты». Перед созданием фигуры выберите новый цвет переднего плана в палитре инструментов.Я использовал # 99cc33 .

Убедившись, что в меню VIEW выбрано « Snap to Guides », щелкните в левом верхнем углу холста, где направляющие пересекаются, и перетащите вниз к нижнему правому пересечению направляющих, а затем отпустите. Это создаст большой прямоугольник с закругленными углами ( рисунок 4 ). Это будет фон сайта.

Рисунок 4

Кадр 2:


Следующая панель будет светло-зеленой с тенью

дизайнTIP

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

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

ПОСМОТРЕТЬ/НОВОЕ РУКОВОДСТВО…

…и затем выберите:

По горизонтали, позиция 100 пикселей

По горизонтали, позиция 850 пикселей

По вертикали, положение 30 пикселей

По вертикали, положение 960 пикселей

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

релевантнаяССЫЛКА

Если вы хотите сделать что-то более сложное в Photoshop, это довольно просто — если вы знаете, какие кнопки нажимать.

Посетите этот учебник по Glass Photoshop, чтобы получить один из множества подробных руководств.

Создание тени

В палитре слоев (со светло-зеленым прямоугольником со скругленными углами) нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ).Выберите Drop Shadow и введите следующие значения:

  • Непрозрачность = 75%
  • Расстояние = 0 пикселей
  • Разброс = 0%
  • Размер = 10 пикселей
  • Шум = 0%

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

Рамка 3:


Последняя панель будет белого цвета

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

По горизонтали, позиция 140 пикселей

По вертикали, положение 40 пикселей

По вертикали, положение 950 пикселей

В результате получится документ, похожий на рисунок 5 . Теперь мы переходим к таким деталям, как содержимое заголовка и навигация. Не забывайте регулярно сохранять документ!

Рисунок 5. Наложение фоновой панели завершено

Создать верхний и нижний колонтитулы

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

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

Рисунок 6. Верхний и нижний колонтитулы и хлебные крошки на месте

Добавление текста в Photoshop

Чтобы добавить текст в Photoshop, просто выберите инструмент «Текст» ( Horizontal Type Tool ) на палитре «Инструменты», щелкните где-нибудь на холсте и начните печатать. Новый слой будет создаваться автоматически для каждого блока текста, который вы создаете. Вы можете либо щелкнуть один раз и ввести текст, чтобы создать неограниченный блок текста, либо щелкнуть и перетащить, чтобы создать текстовое поле, которое будет ограничивать текст внутри заданной вами области.

Панировочные сухари

На визуальном этапе «хлебные крошки» (ссылки вверху справа) служат лишь ориентиром — когда придет время нарезать визуальный элемент на пригодные для использования изображения для веб-сайта, они будут проигнорированы и позже воссозданы в Dreamweaver.

Нижний колонтитул

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

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

Основная навигация

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

релевантнаяССЫЛКА

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

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

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

Кнопки создания вкладок

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

Рисунок 7. Вкладки навигации со скругленными углами

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

.

По горизонтали, позиция 110 пикселей

По вертикали, положение 230 пикселей

Я собираюсь сохранить вкладки в том же темно-зеленом цвете фоновой панели, за исключением активной вкладки. Если пользователь окажется на любой странице категории «Дизайн», вкладка останется белой. Любая дополнительная локальная навигация или пояснительные примечания появятся на панели слева.

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

Вторичная навигация

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

.

По горизонтали, позиция 160 пикселей

По вертикали, положение 60 пикселей

Я добавил к этой панели эффект слоя, чтобы придать ей зеленую обводку толщиной 1 пиксель.Для этого выберите слой, содержащий панель. Нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ). Выберите штрих и введите следующие значения:

  • Размер: 1 пиксель
  • Положение: Внутри
  • Режим наложения: нормальный
  • Непрозрачность: 100%
  • Тип заливки: Цвет
  • Цвет: #ccff99 (щелкните прямоугольник цвета и введите «ccff99» в поле #)

Тип веб-сайта Лица

Шрифт, который я выбрал для текста на сайте — Georgia.Я выбрал это по трем основным причинам:

  1. Мне нравится. Хотя мне нравится чистый вид шрифта без засечек (например, тот, который используется в заголовке), я чувствую, что простота структуры сайта действительно подчеркнет приятный, интересный шрифт с засечками, такой как Georgia.
  2. Это шрифт, разработанный Microsoft для Интернета, поэтому он хорошо работает как в больших, так и в маленьких размерах.
  3. На большинстве компьютеров установлена ​​программа Georgia. Это решающий фактор, который резко ограничивает количество шрифтов, обычно используемых в дизайне веб-сайтов.Существует множество обходных путей, таких как текст Flash, изображения как текст и методы замены текста PHP, но для простоты эти альтернативы, как правило, в меньшинстве в Интернете. Короче говоря, если на компьютере не установлен шрифт, используемый веб-сайтом, браузер отобразит альтернативу — иногда с нежелательными результатами.

Так это Грузия. Я добавил имена для вкладок, выбрав инструмент «Текст», щелкнув одну из вкладок или рядом с ней и введя название категории.Затем используйте инструмент «Перемещение», чтобы расположить его. Опять же, мой план состоит в том, чтобы воссоздать этот текст в CSS — это хорошо для поисковых систем и более эффективно для времени загрузки страницы.

Выберите стиль текста

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

Хотя стиль текста на этом начальном этапе дизайна может быть изменен (как и все остальное!), он помогает получить общее представление о том, как выглядят разные шрифты, размеры и цвета. Для этого достаточно создать текстовое поле с помощью перетаскивания в документе Photoshop (используя инструмент Horizontal Type Tool ) и заполнить его текстом-заполнителем. Обычно я экспериментирую со стилями для двух заголовков ( h2 и h3 ), текста абзаца (P), маркеров и ссылок ( рисунок 8 ).

дизайнTIP

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

Наиболее широко используемый текст-заполнитель известен как Lorum Ipsum, впервые использованный в 1500-х годах, когда печатник взял гранку шрифта и смешал ее, чтобы сделать книгу образцов шрифта.

Образцы абзацев Lorum Ipsum можно создать на удобном веб-сайте Lipsum .

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

Создание иллюстраций для информационных панелей

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

Рисунок 8. Стилизация текста и панелей

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

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

Щелкните на сером фоне и перетащите рамку вокруг верхней части панели, убедившись, что выбраны все опорные точки, составляющие верхнюю часть слоя формы. Затем нажмите SHIFT+<СТРЕЛКА ВНИЗ> . Это сдвинет всю верхнюю часть панели вниз на 10 пикселей. Используйте стрелки ВВЕРХ и ВНИЗ без клавишу SHIFT , чтобы подтолкнуть опорные точки, пока вы не будете довольны.

Наконец, используйте Text Tool , чтобы щелкнуть в верхней части информационной панели, чтобы добавить заголовок. Вы можете решить либо сохранить это как изображение, либо стилизовать его в CSS позже — я использовал текст, а не изображение. Для этих заголовков я добавил интереса, используя комбинацию строчных курсивных и заглавных прямых букв и удалив пробелы между словами (см. панель footNOTE справа) — очень простой способ сделать заголовок более забавным.

Готов к работе

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

Дизайн веб-сайта в Photoshop — конец статьи

Перейти к предыдущей статье | Перейти на главную страницу | Перейти к следующей статье

Требуется обратная связь!

Пожалуйста, присылайте любые вопросы или отзывы по адресу: [email protected] или оставить на нашей странице в Facebook.

Создание вертикального навигационного меню в Photoshop

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

Автор: An1ken Creative
Инструменты: Photoshop
Необходимое время: 45 минут

Окончательный предварительный просмотр

Шаг 1

Во-первых, пришло время открыть Photoshop и создать новый холст размером 1000×600 с разрешением 72 dpi. Теперь залейте фон серым цветом #e3e3e3, а затем перейдите в Фильтр>Шум>Добавить шум и установите количество на 1% — Распределение по Гауссу и убедитесь, что установлен флажок Монохроматический, а затем нажмите ОК. У вас должно получиться что-то вроде этого ниже.

Шаг 2

Теперь, когда у нас есть фон для работы, перейдите в «Просмотр»> «Новая направляющая»… убедитесь, что ориентация является вертикальной, и установите положение на 50% (не 50 пикселей) и нажмите «ОК». Это в основном устанавливает направляющую, чтобы показать вам вертикальный центр холста.Если вы ничего не видите (сочетание клавиш: CTRL + H), это активирует ваши дополнительные функции, но если вы по-прежнему ничего не видите, перейдите в «Просмотр»> «Показать»> «Направляющие», убедитесь, что вкладка «Направляющие» активна.
Теперь мы создадим еще несколько направляющих. В основном вы будете использовать именно те шаги, которые указаны выше, но вы будете использовать свойства, перечисленные ниже.

  • Ориентация: Горизонтальная | Позиция: 125px
  • Ориентация: Горизонтальная | Позиция: 475px
  • Ориентация: Вертикальная | Позиция: 350px
  • Ориентация: Вертикальная | Позиция: 650px

Ниже должно получиться что-то вроде этого.

Шаг 3

Теперь у нас есть некоторые настройки для меню. Пришло время начать с собственно меню. Мое меню имеет закругленные углы, но этим вы не ограничены. Перейдите к инструменту «Прямоугольник со скругленными углами» или нажмите (сочетание клавиш: Shift + U), пока инструмент не будет выбран. Убедитесь, что радиус углов установлен на 10 пикселей, и теперь пришло время создать фигуру. Нарисуйте фигуру в соответствии с указаниями, чтобы убедиться, что она расположена по центру и подходит для урока. После создания путей должно получиться что-то подобное.

Теперь перейдите к инструменту «Перо» или нажмите (сочетание клавиш: P), чтобы выбрать инструмент. Теперь перейдите в Layer> New> Layer, чтобы создать новый слой для заливки фигур. Теперь с выбранным инструментом «Перо» щелкните правой кнопкой мыши на холсте и выберите «Заполнить контур». Установите любой цвет на свой вкус, я использовал #333333. Как только форма заполнена, щелкните правой кнопкой мыши на холсте и выберите (Удалить путь). Вы не будете использовать цвет фона, так как мы будем менять цвета вкладок с помощью параметров наложения. Теперь ваш холст должен выглядеть так.

Шаг 4

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

  • Ориентация: Горизонтальная | Позиция: 175px
  • Ориентация: Горизонтальная | Позиция: 225px
  • Ориентация: Горизонтальная | Позиция: 275px
  • Ориентация: Горизонтальная | Позиция: 325px
  • Ориентация: Горизонтальная | Позиция: 375px
  • Ориентация: Горизонтальная | Позиция: 425px

Ниже должно получиться что-то вроде этого.

Теперь мы будем создавать отдельные вкладки, используя инструмент заливки и маски слоя. Вот как мы будем создавать отдельные вкладки. Возьмите инструмент Rectangular Marquee Tool (сочетание клавиш: M) и выберите верхнюю вкладку в направляющих. Должно выглядеть так.

Теперь создайте новый слой – Layer>New>Layer и залейте выделение цветом #AAAAAA, скоро мы изменим цвета. Теперь вам должно быть интересно, почему верхняя часть меню вдруг имеет квадратные углы? Здесь на помощь приходят слои-маски.Выберите фоновый слой меню и перейдите в «Выделение»> «Загрузить выделение» и нажмите «ОК», это должно выбрать фон меню (сочетание клавиш: CTRL + щелчок в окне «Слой»). Должно выглядеть так.

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

Теперь с помощью шагов, описанных выше, вам нужно создать новые вкладки для всех разделов меню. Единственный раз, когда вам действительно нужно использовать маску слоя, это для верхней и нижней вкладок со скругленными углами. Остальные вкладки — простое выделение и заливка нового слоя. После того, как вы создали вкладки для каждого раздела, вы можете скрыть фоновый слой меню (мы будем использовать его позже). Теперь ваш холст должен выглядеть так. На данный момент меню в основном просто будет другого цвета.

Шаг 5

Теперь пришло время добавить градиенты на вкладки. Сначала щелкните правой кнопкой мыши на верхней вкладке слоя и выберите «Параметры наложения». Теперь уменьшите непрозрачность заливки до 90%, а затем выберите Bevel and Emboss и Color Overlay — Orange #ff3300. Используйте настройки ниже.

Теперь ваша верхняя вкладка должна выглядеть примерно так.

Шаг 6

Теперь пришло время разобраться с остальными вкладками. Щелкните правой кнопкой мыши слой 2nd Tab и выберите Параметры наложения.Теперь выберите Gradient Overlay и используйте настройки ниже. Используемые цвета: от #dbdbdb до #f8f8f8.

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

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

Шаг 7

Теперь давайте создадим разделители для меню. Все штрихи имеют размер 1 пиксель, и их довольно легко создать. Давайте выберем фоновый слой меню, который вы скрыли на шаге 4, он создаст выделение вокруг всего меню. Теперь убедитесь, что вы создали новый слой поверх всех остальных слоев, а затем перейдите в Edit>Stroke. Теперь ваш Width: 1px, Color: #CACACA и Location: Outside.Теперь нажмите «ОК». Вы должны увидеть красивую обводку вокруг всего меню.

Теперь выберите инструмент «Прямоугольная область» и на верхней панели инструментов щелкните раскрывающееся меню «Стиль:» и выберите «Фиксированный размер». Установите ширину: 300 пикселей и высоту: 1 пиксель, теперь создайте новый слой и установите цвет переднего плана #CACACA. Теперь щелкните на своем холсте, и вы увидите, что появилось тонкое полосатое выделение, поместите его в направляющие и между вкладками.

Когда у вас есть право на размещение, выберите инструмент заливки (сочетание клавиш: G) и заполните его #CACACA во вновь созданном слое, перейдите в «Выделение»> «Отменить выбор» (сочетание клавиш: CTRL+D).Теперь все, что вам нужно сделать, это продублировать слои и правильно разместить их между вкладками. Чтобы дублировать, щелкните правой кнопкой мыши только что заполненный слой и выберите «Дублировать слой» (сочетание клавиш: CTRL+J). Теперь просто поместите только что продублированный слой между следующими двумя вкладками и продолжайте процесс, пока не получите его ниже.

Шаг 8

Время маркировать меню. В моей оригинальной Freebie я использовал Helvetica-Condensed для обозначения меню, но это не бесплатный шрифт, поэтому я буду использовать Arial Bold для урока.

Начнем с навигационной метки. Размер шрифта: 21pt | Цвет: #FFFFFF теперь создайте метку заглавными буквами и поместите ее по центру верхней вкладки. Вы также можете добавить небольшую тень, если вам действительно нужна глубина текста. Ваша этикетка должна выглядеть так.

Теперь о других ярлыках. Размер шрифта: 19pt | Цвет: #5a5a5a. После того, как вы пометите другие вкладки, они должны выглядеть так.

Теперь метка Hovered. Размер шрифта: 19pt | Цвет: #FFFFFF поместите его на вкладку с наведением, и вы также можете добавить тонкую тень, если хотите. Это был ваш последний шаг для меню, и все готово. Я добавил тень под меню только для предварительного просмотра.

Окончательный предварительный просмотр


Надеюсь, вам понравился урок. В скором времени в Creativeoverflow появится еще много руководств, будьте начеку. Подпишитесь на учебные занятия по дампам C4090-455, чтобы гарантировать сдачу экзамена 117-202. Также получите бесплатную ссылку для скачивания следующего экзамена 642-447. После успешной сдачи экзаменов 642-889 и C4090-455 вы сможете найти замечательную работу.

Учебные пособия по меню файлов Photoshop


НОВИНКА


Этот параметр используется для разработки нового файла Photoshop или файла с расширением PSD. Всякий раз, когда выбран этот параметр, открывается главное окно или диалоговое окно с именем «Новый». В этом диалоговом окне или окне обнаруживается множество параметров, с помощью которых можно указать размер, разрешение, цветовой режим и содержимое для нового документа.


  • Ящик с именем : НАВЕРХУ ДИАЛОГОВОГО ОКНА С НАЗВАНИЕМ НОВОЕ МОЖНО ВИДЕТЬ ЯЩИК С НАЗВАНИЕМ.ПОТОМУ ЧТО ВЫ МОЖЕТЕ НАПИСАТЬ НАЗВАНИЕ PSD-ФАЙЛА, КОТОРЫЙ БУДЕТ СОЗДАН.
  • Размер: Прямо под полем Имя можно увидеть раскрывающееся меню с названием Предустановленные размеры. Если вы не хотите указывать размер, а также высоту документа самостоятельно, вы можете выбрать любой предустановленный размер в соответствии с вашими потребностями из различных опций, представленных в осеннем меню под названием Предустановленные размеры. Однако, если вы хотите указать размер (ширину и высоту) файла самостоятельно, вы можете пропустить меню падения под названием «Предустановленные размеры».Если вы введете какие-либо значения в поля «Ширина» и «Высота» в диалоговом окне «Создать», вы наверняка обнаружите, что параметр «Пользовательский» будет выбран сам по себе из параметров, указанных в осеннем меню «Предустановленные размеры». Дополнительную систему измерения размера изображения можно указать в пикселях (если вы собираетесь разрабатывать какой-либо проект для Интернета), дюймах, сантиметрах и миллиметрах (если вы собираетесь создавать задания любого типа для печати), столбцах (если вы собираетесь создавать любое изображение, которое, как ожидается, будет в форме внутри столбца любого типа, заданного на странице любого типа).Что касается Points и Picas, то эти две единицы в основном используются для размера строк вводимого сообщения. Обычно считается, что один Пика равен 12 очкам, а 6 Пика составляют один дюйм.
  • Разрешение : Прямо под полями Ширина и Высота можно увидеть еще одно поле под названием Разрешение. Это поле используется для определения разрешения изображения (файл PSD, который будет разработан). Как я уже объяснял на предыдущей странице, Photoshop — это редактор растровой графики, а растровая графика основана на пикселях.Пиксели — это маленькие яркие точки, а также разрешение изображения зависит от того, насколько они меньше и качественнее эти точки. Обычно считается, что разрешение, равное 72 пикселям на дюйм, подходит для изображений, созданных для использования на сайтах и ​​в презентациях. Если вы собираетесь распечатать изображение для любого типа экспертной функции, идеальное разрешение не может быть меньше 300 пикселей на дюйм, но для публикации изображения для обычной функции разрешение, равное 240 пикселей на дюйм, может быть проверено безупречно.
  • Режим: Прямо под полем под заголовком или Разрешение можно увидеть раскрывающееся меню под названием Режим. В этом раскрывающемся меню обычно используются пять параметров, касающихся параметра «Настройка цвета» для документа. Эти варианты: —
    • RGB , скорее всего, является одним из наиболее широко используемых цветовых режимов. Поскольку этот параметр цвета включает в себя три основных цвета (красный, зеленый и синий) с различными пропорциями для получения большого количества цветов, его также называют аддитивным цветовым режимом. Каждый цвет в этом режиме, будь то красный, зеленый или синий, может воспроизводить 256 тонов, а общее разнообразие цветов, которое эта настройка может создать путем объединения всех этих тонов, составляет примерно 16 777 162. Этот цветовой режим используется в электронных инструментах, например. Телевизоры, компьютерные дисплеи, а также мобильные телефоны и т. д., поэтому этот цветовой режим подходит для всех проектов, в которых создаются сайты, а также диалоги. Этот цветовой режим зависит от инструментов определения гаджета, чтобы показать, что цвета могут влиять на цвета изображений, созданных с помощью настройки цвета RGB.
    • Цветовой режим CMYK используется при печати, поэтому, если вы собираетесь скомпоновать изображение в Photoshop для публикации, вам следует выбрать этот цветовой режим.
    • Цветовой режим оттенков серого показывает только черный белый, а также 254 цвета серого. Поскольку изображения в градациях серого значительно (на две трети) меньше по размеру, чем фотографии RGB, эта настройка цвета должна понравиться, если меньший размер изображения более важен по сравнению с его цветами.
    • Цветовой режим оттенков серого показывает только черный белый, а также 254 цвета серого. Поскольку изображения в градациях серого значительно (на две трети) меньше по размеру, чем фотографии RGB, эта настройка цвета должна понравиться, если меньший размер изображения более важен по сравнению с его цветами.
    • Режим Bitmap Color показывает только два цвета: черный и белый. Этот цветовой режим считается важным из-за того, что изображения, сделанные с использованием этой настройки цвета, действительно меньше по размеру, а также занимают мало места.
  • Содержимое: Подобно различным цветовым режимам, Photoshop предоставляет различные стили содержимого для документа. Выбрав «Содержимое» для документа, мы могли решить, как именно должна выглядеть бумага Photoshop, прежде чем ее можно будет использовать. Adobe Photoshop предлагает 3 варианта содержимого файла.
    • Содержимое с именем White дает чистый белый файл Photoshop для работы.
    • Содержимое под названием «Цвет фона» предоставляет документ Photoshop того же цвета, который был выбран в качестве «Цвет фона» в окне «Инструменты».
    • Контент под названием «Прозрачный» предоставляет для обслуживания абсолютно чистый или анемичный файл Photoshop.

ОТКРЫТЫЙ


Вторая команда в меню «Файл» называется «Открыть». Эта команда используется для открытия запрашиваемого файла изображения в Photoshop. Всякий раз, когда выбрана эта опция, появляется окно под названием «Открыть».

В верхней части этого окна можно увидеть выпадающее меню под названием Look in.Это раскрывающееся меню используется для выбора существующей области необходимого файла образа на жестком диске компьютерной системы или на внешнем диске любого типа (CD, DVD или USB и т. д.). Всякий раз, когда в этом нижнем меню выбирается какой-либо тип места, все папки и файлы, находящиеся там, отображаются сразу в том же главном окне прямо под меню «Искать». Но в главном окне «Открыть» это падение Меню -down — не единственный ресурс для поиска файла. В верхней части окна можно увидеть пару символов (Недавние места, Рабочий стол, Библиотеки, Компьютер, Сеть и т. д.), с помощью которых мы можем удобно перемещаться по всему жесткому диску.Прямо под областью выбора файлов можно увидеть еще два раскрывающихся меню, называемых «Имя файла» и «Тип файла». Имя файла используется для выбора любого файла, сохраненного в выбранном месте по имени, в то время как меню под названием Тип файла используется для выбора стиля вызываемого файла.


ПРОСМОТРЕТЬ МОСТ


Обзор — это третья опция в меню «Файл». Это опция для просмотра и открытия файлов изображений в Photoshop.Всякий раз, когда выбран этот параметр, в верхней части основного окна Photoshop появляется домашнее окно с именем File Brower.

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


ОТКРЫТО ПОСЛЕДНЕЕ


Эта опция помогает искать недавно настроенные файлы для дополнительной настройки. Всякий раз, когда вы наводили указатель мыши на «Открыть недавние» в меню «Файл», открывается боковое меню, в котором отображаются 10 самых последних файлов Shiftd, из тех, которые вы можете выбрать, а также открыть нужный файл, щелкнув его.


ЗАКРЫТЬ (CTRL + W)


Этот параметр используется для закрытия открытого документа в Photoshop. Эта опция действительно редко используется пользователями Photoshop.


ЗАКРЫТЬ все (CTRL+ALT+W)


Закрывает все документы, открытые в Photoshop.


ЗАКРЫТЬ И ПЕРЕЙТИ К МОСТУ


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


СОХРАНИТЬ (CTRL + S)


Этот параметр используется для сохранения любого типа документа, созданного или измененного в Photoshop, в любом типе необходимого стиля.При выборе этой опции появляется окно с именем Сохранить как.

В верхней части этого окна можно увидеть раскрывающееся меню с именем Сохранить в. С помощью этого меню вы можете выбрать место на жестком диске, где вы хотите сохранить только что созданный файл изображения или файл изображения Shiftd. Кроме того, вы можете выбрать место для своего файла, щелкнув любой символ, указанный в левой части этого главного окна. Справа под полем выбора изображения. В главном окне можно увидеть поле с именем «Имя файла».В этом поле вы можете указать новое имя для вашего файла, введя его в поле или щелкнув стрелку, указанную в правой части этого поля, вы можете открыть раскрывающееся меню и из вариантов, указанных в этом раскрывающемся списке. вниз, вы можете выбрать любой тип существующего файла, чтобы заменить его совершенно новым. Прямо под полем «Вызов файла» можно увидеть раскрывающееся меню «Стиль». В этом раскрывающемся меню вы можете выбрать любой тип стиля для вашего файла изображения. Указав имя файла и макет, просто нажмите переключатель «Сохранить», который можно увидеть рядом с пакетом с именем «Имя файла», и ваш файл будет сохранен в выбранной области с указанным вами именем и макетом.


СОХРАНИТЬ КАК (CTRL + SHIFT + S)


Если вы хотите сохранить файл изображения 2 или более раз с 2 или более разными именами или стилями, вы можете использовать параметр «Сохранить как».


СОХРАНИТЬ ДЛЯ ИНТЕРНЕТА (ALT + SHIFT + CTRL + S)


Эта опция используется для сохранения любого типа файла изображения для использования в Интернете.


РЕГИСТРАЦИЯ


Предыдущие версии программы включали небольшое приложение под названием Version Cue, которое было полезно, если вы работали и обменивались файлами с другими людьми, используя Adobe Creative Suite.Он отслеживал изменения, внесенные каждым человеком в каждый файл (технически это называется управлением активами), и действовал как библиотекарь, позволяя вам извлекать файлы, когда вам нужно было с ними поработать. Он также систематизировал документы и записал другую важную информацию об используемых вами файлах. Однако Adobe закрыла приложение в начале 2010 года, поэтому этот пункт меню недоступен в Photoshop CS5.


ОБРАТНЫЙ


Этот параметр используется для удаления всех корректировок, сделанных в любом изображении с помощью Photoshop.


МЕСТО


Этот параметр используется для размещения любого типа изображения в формате EPS (Encapsulated Postscript) на любой открытой в данный момент бумаге Photoshop без дублирования и вставки или перетаскивания.


ИМПОРТ


В боковом меню Импорта есть 3 опции.


ЭКСПОРТ


В боковом меню опции «Экспорт» можно увидеть 5 опций:

  • ПУТЬ К ИЛЛЮСТРАТОРУ: Любое привлечение, сделанное с помощью Pen Tool, на языке компьютерной графики называется путем.Опция Paths To Illustrator используется для экспорта курсов (иллюстраций, сделанных с помощью Pen Tool), созданных в файле Photoshop в стиле Adobe Illustrator.
  • МАСШТАБИРОВАНИЕ: Этот параметр используется для экспорта фотографий в стиле масштабирования. Zoom View — это макет, позволяющий размещать изображения высокого разрешения в Интернете. Всякий раз, когда файл любого типа экспортируется с помощью этой опции, Photoshop обрабатывает четыре вещи:
    • Файлы с макетом MTX (Molecular Dynamics Hessian Matrix), содержащие изображение, которое будет представлено в Интернете.
    • HTML-файл, необходимый для установки медиаплеера Viewpoint (без установки медиаплеера Perspective Media Player невозможно отобразить изображение макета MTX).
    • Папка, содержащая файлы JavaScript и VBS.
    • Дополнительная папка, включающая напольные плитки, которые используются для отображения изображения.

АВТОМАТ


В боковом меню опции «Автоматизация» можно увидеть восемь опций: —

  • Пакет: Эта опция позволяет нам применять одно действие к нескольким изображениям, что позволяет нам сэкономить много времени, которое может быть потрачено на независимое редактирование и улучшение разных изображений.
  • Create Droplet: С помощью этой опции мы можем создавать капли. Капли сохраняются с помощью символов со стрелками, и с помощью этих капель мы можем использовать одиночное действие после нескольких файлов с перетаскиванием, а также уменьшать, не открывая эти файлы изображений в Photoshop.
  • Call Sheet II: С помощью этой опции мы можем перенести все фотографии из любой папки с деталями в один документ Photoshop без копирования, вставки или перетаскивания, а также перехода вниз или даже открытия папки, содержащей эти фотографии.
  • Подгонка изображения: Этот параметр используется для преобразования размера изображения с идеальной точностью. Например, у вас есть пейзажное или портретное изображение, и вы хотите увеличить или уменьшить его размер с идеальной точностью. Все, что вам нужно сделать, это определить одинаковое значение в полях Ширина и Высота в диалоговом окне Подгонка изображения.
    Это диалоговое окно появляется всякий раз, когда вы выбираете параметр «По размеру изображения», заданный в боковом меню «Автоматизация».Точно такие же ширина и высота не создают квадратное изображение в этом случае. Он в первую очередь ограничивает пропорции вашего пейзажного или портретного изображения, чтобы убедиться, что самая длинная сторона будет иметь точно такое же значение, а самый быстрый край соответствующим образом подстроится.

ИНФОРМАЦИЯ О ФАЙЛЕ


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


ПЕЧАТЬ (ALT + CTRL + P)


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


ПЕЧАТЬ ОДНОЙ КОПИИ (ALT + SHIFT + CTRL + P)


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


ВЫХОД (CTRL+Q)


Эта команда используется для закрытия открытого окна Photoshop.

Создание выпадающего меню в Photoshop « Интересно, как

Как

Comments