![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/ramka33.jpg)
В этом уроке я покажу вам, как создать стильный макет сайта дизайн-студии. Уроки по интерфейсам помогут Вам создать свой собственный, оригинальный дизайн сайта.
Сложность: средняя
Время: более 1 часа
Навыки для "прокачки":
- создание структуры сайта
- создание шапки сайта
- создание элементов интерфейса
Создайте новый документ 850 900 пикселей, выберите цвет переднего плана # 3e3640 и # 201f20 в качестве фона. Выберите инструмент Gradient tool = Градиент и проведите линейный градиент на холсте. Применим фильтр шума, перейдя в Filter > Noise Add Noise = Добавить шум, введите настройки, как на картинке ниже.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0012.gif)
Выберите инструмент Rounded Rectangle tool = Прямоугольник со скругленными углами и создайте прямоугольник, почти во всю ширину документа. Сделайте выделение в нижней части прямоугольника около 50 пикселей в высоту, его нужно вырезать и вставить на новый слой. Скройте пока Ваш слой с этой деталью прямоугольника, она пригодится нам позже. У Вас должно получиться что-что вроде этого.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0022.gif)
Добавьте эти стили слоя к вашему прямоугольнику
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0032.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0042.gif)
Переместите прямоугольник в верхнюю часть документа, скрывая его округлые края.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0052.gif)
Сделайте скрытый слой видимым, и переместите деталь в нижнюю часть прямоугольника.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0062.gif)
Добавьте эти стили слоя к вашей нижней части прямоугольника.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0073.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0081.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0092.gif)
Вот что должно получиться.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0102.gif)
Теперь вы можете добавить название и логотип, затем с помощью инструмента Rectangular Marquee
Tool=Прямоугольная область сделайте выделение как на картинке иже, заполните выделение белым
цветом и измените Opacity=Непрозрачность до 2%
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0112.gif)
Сделайте то же самое с нижней частью.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0122.gif)
Добавьте вашей навигации текст и одну кнопку на новом слое.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0132.gif)
Далее добавим стили слоя нашей кнопке.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0142.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0152.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0161.gif)
Так же мы добавим немного блеска, как мы делали в предыдущих шагах. С помощью двух линий 1
пикс, добавьте разделитель, между каждым пунктом навигации. Добавить маску слоя к деталям, и
перетащите Gradient=Градиент в верхней и нижней половинках деталей.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0171.gif)
Создайте новый слой, инструментом Rounded Rectangle tool=Прямоугольник со скругленными углами, создайте прямоугольник как на картинке ниже.
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0181.gif)
Добавьте следующие стили слоя:
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0191.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0152.gif)
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0202.gif)
Вот что у Вас должно получиться
![Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/05/image0211.gif)
Теперь с теми же стилями слоя, создайте еще один, большой прямоугольник под слоем с предыдущим.
![Сайт своей дизайн студии - уроки фотошоп](/uploads/2011/0</div>
<p>Сайт: <a href=)
Stadion-Kuban.ru
Виджет на Яндексе: yandex.ru/?add=111794
Мы ВКонтакте: vk.com/Stadion-Kuban
И в Твиттере: twitter.com/Stadion-Kuban