Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

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

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

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

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

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

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

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

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

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

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

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

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

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

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

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

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

Шаг 1. Сначала создаем новый документ в Photoshop. Я задаю размер документу 760*633 пикселей. Затем заполняю фон цветом  # f2f3ed.

Шаг 2. Создайте новый слой в вашем документе и создайте область для вашей навигации. Размер моей панели меню составляет 720*80 пикселей. Далее можете залить вашу область навигации любым цветом, я использовала # 000000 черный цвет.


Далее к меню применяются следующие стили слоя:

Если вы все сделали верно у вас должно получится вот так:

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

Шрифт который используется Tahoma, размер 12 пт, цвет # 5a5d59.

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

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

Вот что должно получится:

И наконец надо изменить режим наложения слоя на Мягкий свет и уменьшить непрозрачность  до 30-60%.

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

Теперь добавляем текст для кнопок:

Шрифт в приведенном изображении используется Helvetica Neue в начертании курсивом и размером 14пт. К тексту применяем следующие стили слоя:

Теперь ваше меню будет выглядеть так:

Аккуратно не правда ли?

Шаг 3. Следующее что мы будем делать - это создавать  логотип для сайта с описанием. Создаем новый слой, затем создаем на нем выделение на верхней панели навигации, размеры моего выделения 200*120 пикселей.

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

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

Добавим немного глянца в левый верхний угол прямоугольника.

Вы можете создать этот эффект используя несколько простых шагов:
Создайте новый слой, над прямоугольником. Затем стоя на слое с прямоугольником нажмите клавишу Ctr+щелкните левой кнопкой мыши по иконке слоя в палитре слоев, тем самым вызвав выделение слоя.Перейдите на новый слой, не снимая выделения и уменьшите размер выделения в1-2 пикселей пройдя по команде Выделение - Модификация - Сжать, затем используйте наложение градиента от белого к прозрачному.
Используя инструмент перо в режиме контуров, сделайте рельефный скос левого угла, создайте, закройте контур и удалите содержимое
Чтобы добиться мягкости градиента необходимо изменить режим наложения слоя на Мягкий свет либо просто уменьшить непрозрачность слоя.

Далее добавляем текст на наш логотип.

Для текста применяем следующие параметры:

Выглядит хорошо, не так ли?

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

Моя область размером в 720*140 пикселов, заполните его любым цветом, у меня использован # 000000. Далее я добавляю такое изображение, только делаю ему оттенок зеленого цвета.

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

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

Затем я добавила туда несколько интересных надписей.

Я использовала шрифт Tahoma, 12 пт, # 000000 и # FFFFFF. И в заключении этого раздела напишите несколько ссылок текста справа от заголовка.

Я использовала шрифт Helvetica Neue и далее применила к тексту следующие параметры:

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

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

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

Добавим текст в эти области, я использовала эту область под блок "Комментарии"

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

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

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

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

Надеюсь урок вам понравился, и будет вам очень полезен.

Источник.

 

 

AddThis Social Bookmark Button
 

Добавить комментарий


Защитный код
Обновить

поиск
RSS
В чем сила блогов? Или для чего нужны онлайн-дневники.

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

кол-во просмотров9260
Подробнее...

Комментарии. Как избавиться от спама.

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

кол-во просмотров50165
Подробнее...

Новые возможности Adobe Photoshop CS5

Вокруг все то и дело говорят о скором выходе в свет  Adobe Photoshop CS5. Новые возможности по настоящему удивляют многих...

кол-во просмотров8797
Подробнее...

Преимущества работы с модульными сетками в дизайне.

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

кол-во просмотров11426
Подробнее...

Стили сайтов. Американский бизнес стиль.

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

кол-во просмотров13185
Подробнее...