Пятница, 24.05.2019, 15:50

Фотомонтаж:рамки, календари,цифровые костюмы.

Приветствую Вас Гость | RSS

Фотомонтаж- исходники

Вы любите фомонтажа? То этот сайт для Вас. На нем вы найдёте всё для создания фотомонтажей.

добавить на Яндекс

Меню сайта
Регистрация/Вход
Логин:
Пароль:
.
Категории раздела
Мои статьи [7]
Биржа [29]
Это вкуснятина [11]
adskape
Друзья сайта
Топ НОВОСТЕЙ
Шаблон для фото -Римлянка
Рамка-шаблон для Photoshop - Дошкольникам
Рамки для Photoshop - Как Прекрасен Этот Мир
Рамочка для фотошопа - Dance & Music
Женский фотошаблон для Photoshop "Супермодель"
Главная » Статьи » Мои статьи

Навигация меню в Photoshop - сепараторы

Целью данной статьи является показать Вам, как можно просто создать более приятным и функциональным меню навигации, используя только Photoshop и его сестру продукт ImageReady

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

Другой программы значительно под-Оценка особенностей его прелесть в создании графической системы навигации. Целью данной статьи является показать Вам, как просто можно создать визуально приятным, функциональным меню навигации, используя только Photoshop и его оналог ImageReady.

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

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

В правой части экрана, должны быть несколько ящиков. Если вы используете стандартный набор вверх, нижняя будет слоев панели. Если по каким-либо причинам это не случится, не паникуйте, расширить окно меню в верхней части экрана и выберите "Слои". Ваша форма должна быть указана в качестве верхнего слоя. Щелкните правой кнопкой мыши и выберите "Rasterize Layer" в меню. Прямоугольник должен выглядеть немного острее.

Чтобы сделать ваш бар боллее выделяющимся из остальной части вашей страницы и дать ему смелый, поразительный внешний вид, границы Set It Off должен быть использован. Дважды щелкните на слое "форма 1", и диалоговое окно "Стиль слоя" появится. В нижней части панели "Стили" в левом краю окна есть клеточные "ход", выделите ее и нажмите кнопку ОК.

Теперь вы можете изменить цвет обводки, чтобы ваш контрастные второй выбор цвета, в моем случае, ярко-желтые. Написать в остальных параметров, как они есть, и мы будем иметь дело с разделителями.
Нажмите маленький треугольник в нижней части прямоугольника на панели инструментов и выберите строки. Представьте, что ваш сайт состоит из четырех основных страниц. Поэтому мы должны разделить панель навигации из четырех разделов. Убедитесь, что цвет, который вы выбрали, как инсульт цвет по-прежнему выбран в качестве основного цвета и что весе линии установлены в 2px (это установлено в панели инструментов свойства чуть ниже меню в верхней части окна программы). Примерно в четверти пути через прямоугольник нарисовать прямую, вертикальную линию, оставляя пространство в верхней и нижней. Вы заметите, что новая форма, перечисленных в панели "Слои" в левой части экрана; растеризации этой формы, а также. Чтобы действительно сделать разделитель выделиться, щелкните правой кнопкой мыши форму 2 слоя и выберите "Создать дубликат слоя" из меню. Затем откройте меню "Слой" в верхней части экрана и выберите "Merge Down '.

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

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

Когда вы довольны с позиционированием из линий, открытых слоев меню и выберите команду Merge Visible. Это позволит изменить имя слоя на форме 4, поэтому щелкните правой кнопкой мыши слоя в палитре слоев и выберите Свойства слоя. Меняем название на "NavBar. Это держит ваши слои панели, как аккуратно, как возможно, теперь для текста.

Текст

Примерно в середине вашей панели инструментов, есть T значок, нажмите, выберите "Horizontal Type Tool" и выберите приятные глазу шрифт. Большое дело по поводу использования изображений является то, что любой текст на них будет отображаться правильно и не зависит от посетителей на ваш сайт шрифтов, установленных на их системы. Щелкните в первом разделе строке вашего NAV и введите слово дома. Щелкните в следующем разделе и тип информации, то типа "Продукты и Партнеры" в остальных разделах. Используйте руководство, которое должно еще присутствовать, чтобы убедиться, текст строки вверх. Текст должен быть того же цвета, границы и сепараторов.
Это легкая часть сделали, теперь в ImageReady. Вы можете использовать меню "Файл" выберите "Изменить" в ImageReady, чтобы перейти программ. ImageReady, изложенных в очень похоже на Photoshop, поэтому многие вещи должны быть очень знакомы. Перейти к панели инструментов и выберите ломтик инструмент (значок с ножом в нем). Щелкните и перетащите прямоугольник вокруг первой из кнопок, до, но, не включая первый сепаратор или границы. Фрагмент из оставшихся трех кнопок в этом пути.

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

Легко и просто заказатьдешевое такси в аэропорт

Панель навигации

Чтобы дать вашей навигационной панели некоторых интерактивность, вам необходимо добавить некоторые опрокидывание государства нарезанный кнопки, щелкните правой кнопкой мыши домой ломтик в веб-панели данных, и выберите пункт. Добавить Rollover государства из контекстного меню. Государства в веб-панели данных, и с этим государством подчеркнул, дважды щелкните NavBar слоя в палитре Layers, чтобы открыть диалог Layer Style окна. Проверьте галочку Цвет Наложение окно, и переместить ползунок вниз до 50%.

Повторите этот процесс для остальных ломтиками, и если вы хотите, чтобы текстовые слои, хотя процесс текста несколько отличается. Начиная с домом ломтик, подчеркнул, щелкните правой кнопкой мыши слой домой текст, и выберите Layer Style, это откроет подменю стилей слоя. Я считаю, эффект свечения особенно хорошо работает в таких ситуациях, поэтому выберите Outer Glow и ОК диалогового окна. Теперь выберите следующего за состоянием в веб-панели данных и повторите. Когда вы добавили эффект на все ломтики, сохранить ее и нажмите кнопку Предварительный просмотр в браузере кнопку на панели инструментов, вы получите веб-страницы с навигационной панели в верхней, и исходный код под ним. Посмотрите, как много работы вы сохранили себя? Photoshop даже заботится о JavaScript для Вас!

Чтобы создать веб-страницу, вам нужно открыть меню "Файл" и выберите Save Optimized As, выбрать целевую папку, (который необходимо будет же каталоге, связанных страниц) и дать ему имя файла, желательно index.htm

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

<-! ImageReady поджатие Script (nav.psd) -> в верхней части раздела , к в нижней части раздел и скопировать и вставить этот в каждую из связанных страниц (с первым открыл их в блокноте, а). Очень интересная информация читайте- отзывы о Софтмаркете-интернет-магазин цифровой техники

 


Источник:
Категория: Мои статьи | Добавил: Kostt (08.01.2011) W
Просмотров: 2294 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Google
Посмотри
Облако тегов
сайты в тему
Фотошопчик
Фотошопинг
Photoshop-Уроки и всё для Фотошопа
art-kollag.ucoz.net
анекдоты читать,анекдоты про мужа и жену,анекдоты для детей, анекдоты самые смешные,анекдоты про вовочку, самые смешные,анекдоты короткие, всё для фотошопа
кредит наличными
Поиск по сайту
счётчик
PR-CY.ru
Copyright MyCorp © 2019