Кто на сайте?

Сейчас на сайте:
Гостей - 2

Экспорт новостей




Rambler's Top100

Главная arrow Новости arrow Уроки Photoshop arrow Веб-дизайн. Урок Photoshop
Веб-дизайн. Урок Photoshop Версия для печати Отправить на e-mail
Написал Administrator   
Пятница, 29 Май 2009




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








Прежде чем мы начнем, сохраните на своем жестком диске эту текстуру "дерево", ее мы будем использовать в нашем уроке. Создайте новый документ 850 х 1060 пикселей, залейте фон цветом #e9e9e9. Откройте вашу картинку с текстурой дерева и перетащите ее на свой холст. Нажмите "Ctrl + T" для произвольного трансформирования изображения. Удерживая клавишу "Shift" на клавиатуре и потянув за угловой маркер, подгоните текстуру по ширине холста. Затем сдвиньте текстуру вверх, так, чтобы она занимала не более 180 пикселей от верхнего края холста.


Примените к слою стиль Color Overlay с настройками, как на картинке:


С левой стороны добавьте название и слоган Вашего сайта.


Возьмите инструмент Pen Tool или Polygonal Marquee Tool и создайте выделение, как на рисунке ниже. Создайте новый слой над слоем с текстурой, залейте выделенную область белым цветом, нажмите CTRL + D, чтобы снять выделение и пройдите в меню: Filter > Blur > Gaussian Blur. Поставьте ползунок радиуса размытия примерно на отметку в 13 пикселей. Установите для этого слоя режим смешивания (blending mode) на Overlay



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


Теперь возьмите инструмент Elliptical Marquee Tool и создайте выделение, как на рисунке ниже:


Создайте новый слой, залейте выделенную область белым цветом, снимите выделение и повторите операцию с размытием, только радиус размытия теперь сделайте 5 пикселей. Режим смешивания поставьте также Overlay, а непрозрачность 75%. Вот что должно получиться:


Создайте новый слой и выделите инструментом Rectangular Marquee Tool прямоугольную область под текстурой и залейте цветом #828282.  



Продублируйте слой и сдвиньте его вниз примерно на 4-5 пикселей.


Примените к этому слою стили, как указано на рисунках ниже:






В результате у Вас должно получиться примерно так:


Добавьте надписи для Вашего меню навигации. Сделайте небольшие разделители между пунктами меню. Один пункт меню сделаем активным. Для этого напишите его другим цветом и сделайте над ним треугольник вершиной вниз и залейте этот треугольник тем же цветом, которым заливали первый прямоугольник (#828282).


На новом слое создайте инструментом Rectangular Marquee Tool большой прямоугольник, примерно 300 пикселей высотой и залейте его цветом #d7d7d7



Добавьте для него 1-пиксельный контур цветом #c7c7c7:


Увеличьте холст инструментом Zoom и проведите 1-пиксельную белую линию под верхним контуром и то же самое сделайте под нижним.


Добавьте какую-нибудь свою картинку. Сделайте для нее толстую белую рамку и приятные мягкие тени (drop shadow). Поместите картинку примерно так, как показано на рисунке:


Продублируйте слой с картинкой, переместите его прямо под нашу первую картинку и опрокиньте его по вертикали: Edit > Transform > Flip Vertical


Отключите видимость всех слоев, кроме продублированного слоя, создайте новый пустой слой, пройдите в меню Layer > Merge Visible. Теперь включите все слои. Добавьте к этому слою маску (Add a layer mask). Залейте градиентом от черного к белому. Ниже показано откуда до куда нужно тянуть, но у Вас может быть и не так, поэкспериментируйте. Важно добиться эффекта, чтобы нижний край картинки как бы растворился в тумане.


Далее пройдите в меню Edit > Transfrom > Perspective, потяните нижний средний маркер влево. Нажмите Enter, чтобы принять изменения и выберите инструмент свободного трансформирования CTRL + T. Ухватитесь за тот же нижний средний маркер и потяните вверх, чтобы уменьшить высоту нашего отражения. Должно получиться примерно так:


Слева от Вашей картинки добавьте какой-нибудь текст. Также добавьте текст с заголовками ниже картинки.


Стили для кнопок "Next" и "Previous" задайте, как показано ниже. То есть нужно создать новый слой, на нем сделать прямоугольное выделение: сделайте сначала длинный прямоугольник, затем, удерживая клавишу ALT, разделите его на две равных части. Залейте слой любым цветом и снимите выделение. Далее применяйте стили.






 

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


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


Надеюсь, что урок Вам понравился. До встречи в следующих уроках.
Оригинал: hv-designs.co.uk  
Перевод: www.stilia.ru

Последнее обновление ( Пятница, 29 Май 2009 )
 
 


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

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