Вступление

Этот урок больше расчитан на веб-дизайнеров
(я не говорю, что обычным пользовтелям он не нужен, ради собственного
разивития можете попробовать его сделать, кто знает, вдруг после этого
вы поймёте, что вы прирожденный веб-дизайнер?)))
С ролловерными
кнопками все мы часто сталкиваемся, но всё-таки, если вы и понятия не
имеете, что это такое, я поясню: помните сайты, на которых при
наведению на кнопку она меняла свой цвет (становилась вдавленной,
выпуклой - нужное подчеркнуть), а когда вы убирали с неё курсор, она
становилась такой же, как и до наведения? Это и есть ролловерные кнопки.
Ролловерные
кнопки, как правило, делают в программе по верстке сайтов Дримивер, но
в Фотошопе, точнее Image Ready, как мне кажется, возможностей большей
для их создания. И так... приступим!

Шаг 1

Сначала откройте Image Ready.
Для создания ролловерной кнопки вам понадобятся д ... Читать дальше »

Personal Portfolio Layout

Привет всем! Тут народ жаловался, что маловато переводов по дизайну сайтов . По многочисленным просьбам выкладываю перевод по дизайну сайта-портфолио, а вдруг идея кому-то понравится и пригодится .
Итак, начнем:

В результате у нас должно будет получится вот это:


Создаем новый документ размером 760x770 пикселей. Цвет фона : #333333
Берем инструмент Rounded Rectangle Tool ( радиус = 10 пикселей ). Затем создаем прямоугольник.
... Читать дальше »

Часть 1.

Результат:



1. Создайте новый файл размера 800x720 px 72 dpi.

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



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






2. Используя Rounded Rectangle Tool (U), создайте на новом слое основную панель сайта, как показано на рисунке:



Установите следующие параметры слоя:

Blending Options>Gradient Overlay:
... Читать дальше »

Синее Металлическое Меню

ну, может не совсем и металлическое, но явно синее




1. создайте новый холст в размере 535 x 123 , цвет холста #154a77.
Двойной щелчок по иконке слоя в палитре слоев и нажмите OK, что
позволит вам работать с этим слоем.


2. Теперь выберите Blending Options - Gradient Overlay , параметры настройки


3. У вас должно получиться так
... Читать дальше »

Cars & Transportation layout

Результат:





Создайте новый документ размером 760 x 770 px, цвет фона: #343e48.

Затем выберите Rectangle Tool и в новом слое нарисуйте прямоугольник цветом #a00000.

Разместите это прямоугольник как показано на рисунке ниже:




Затем добавьте стиль к слою с прямоугольником:




Теперь добавьте картинку с машиной:




Дублируйте слой с машиной (выберите слой с машиной и наж ... Читать дальше »

Дизайн сайта в стиле Windows Vista .

Всем приветик!!!

ШАГ 1.
Создайте новый документ 900x800 , залейте фон цветом #cccccc , создайте новый слой под названием "заголовок". Далее рисуем сверху прямоугольник со скруглёнными краями (U ):



После того, как Вы закончили рисовать прямоугольник, нажмите на него правой кнопкой мышки и выберите «Образовать выделенную область …». С помощью Прямоугольного выделения (М ), зажав ALT , избавьтесь от нижних скруглённых углов:



Ваша
форма должна иметь квадратные углы внизу и закругленные углы ... Читать дальше »

Результат:




Создайте новый документ.
Размер документа: 760x770 px.
Фон: белый.

Используя Rectangle Tool, нарисуйте 2 прямоугольника, как показано на рисунке:



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







Затем растеризуйте слой ( Layer > Rasterize > shape )

Выберите line Tool (установите weight 1 px).
Установите цвет переднего плана (foreground color) #282828 и нарисуйте линию в середине верхнего прямоугольника.
Установите стиль слоя с линией, как показано ниже:

... Читать дальше »

Часть 1:

Привет народ! Сегодня мы будем творить сайт
посвященный тому о чем мечтали ваши родители, а может и кое кто из вас.
Их любили миллионы и ненавидела
советская власть. Ради них любой
советский подросток был готов на все. Да это они - джинсы. Это сейчас
джинсами уже никого не удивишь, но вот в совковое время... Хорошие
джинсы были на ряду с магнитофонами и видеокамерами. Ну что отдадим
дань культовой одежде? Тогда запускаем фотошопу, если еще не запущена и
приступаем. Для начала создаем новый документ размером 766 х 700. Потом
можно будет перегнать с небольшим усилием в 1024 х 768, но мне
привычней работать так. Тем более, что максимальное разрешение, которое
поддерживает моя видюха это 1024 х 768:( Ну да ладно черт с ней. Берем
нашу основу это кусок равномерной джинсовой материи:

Делаем из ... Читать дальше »

Military layout

Привет!

Сегодня я покажу вам как создать макет военного сайта.

Вот то, чем мы сегодня займемся:



Открываем новый документ в Фотошопе.
Размер: 760 x 770
Цвет фона: 3b3b3b
Затем
выбираем Rounded Rectangle Tool (Прямоугольник со скругленными углами),
установливаем радиус 10 пикселей и создаем 2 разные фигуры, как на
картинке:



Теперь мы создадим новый узор.
Открываем новый документ размером 8х8 пикселей с прозрачным фоном.

Увеличиваем документ до 1600 % и с помощью Pencil tool (Карандаша) ( размер ки ... Читать дальше »

Industrial Buttons
Делаем стильные кнопки для сайта

1.
Сначала создай новый документ для твоей кнопки.
Я использовал документ размером 400x300 пикселей и
установил цвет фона (background) на # 5c5947.

2.
Создай новый слой.
Layer> New> Layer
Теперь измени основной (foreground) цвет на # 4a4839,
затем инструментом Rounded Rectangle Tool :

Создай прямоугольник с округленными углами примерно так :


3.
Щелкни правой кнопкой мыши на кнопке слоя и выбери
Blending Options.
Нажми и применяй следующие стили слоя :
... Читать дальше »