Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Данный урок научит вас создавать приятный сайт.


Дизайн сайта звуковой студии


1. Создайте новый документ размером 800×800 px. На первом слое создайте фон сайта. После этого выберите инструмент Прямоугольник (Rectangle Tool) и используйте его по всей странице. Настройки градиента:



Дизайн сайта звуковой студии


Получим следующий результат:



Дизайн сайта звуковой студии


2. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте элемент, показанный ниже, и расположите его в середине рисунка.



Дизайн сайта звуковой студии


3. Установите Заливку (Fill) слоя - 0%.



Дизайн сайта звуковой студии


4. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Результат:



Дизайн сайта звуковой студии


5. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите соответствующий элемент:



Дизайн сайта звуковой студии


6. Создайте круг цветом #0066СC. После этого, в режиме Свободного трансформирования
(Free Transform) измените форму круга, как на рисунке ниже:



Дизайн сайта звуковой студии


7. Новые элементы следует расположить под слоем градиента, но лучше объедините их в группу.



Дизайн сайта звуковой студии


8. Разместите элементы в произвольном порядке, как в следующем изображении:



Дизайн сайта звуковой студии


9. Более важные части элемента, выходящие за слой градиента, обрисуйте инструментом Кисть (Brush Tool) и цветом #3399СС.



Дизайн сайта звуковой студии


10. Обрисуйте их на новом слое (Create New Layer), расположив между слоем градиента и группой фигур:



Дизайн сайта звуковой студии


11. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте ещё одну фигуру над всеми слоями. Радиус тот же.



Дизайн сайта звуковой студии


12. Примените для фигуры стиль Внешнее свечение (Layer Style - Outer Glow). Цвет фигуры - #006699.



Дизайн сайта звуковой студии


Наложение градиента:



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Результат:



Дизайн сайта звуковой студии


Этот слой следует разместить в группе для облегчения последующей работы.



Дизайн сайта звуковой студии


13. Теперь перейдите к созданию нескольких фигур на левой стороне экрана. Для этой операции потребуется инструмент Произвольная фигура (Custom Shape Tool) и элемент под названием “Circle Frame”. Цвет фигуры - #003333.



Дизайн сайта звуковой студии


14. Обработайте круги также в произвольной форме:



Дизайн сайта звуковой студии


15. Новые слои следует превратить в маску для того, чтобы фигуры не выходили за края градиента фигуры. Удерживая Alt, кликните между слоями.



Дизайн сайта звуковой студии


16. Теперь перейдите к работе с правой стороной рисунка. Сначало нарисуйте 2 круга, используя инструмент Произвольная фигура (Custom Shape Tool) и элемент “Thin Frame”, и инструмент Эллипс (Ellipse Tool) внутри кругов. Измените цвет кругов на #003333. Получите следующий результат:



Дизайн сайта звуковой студии


17. Для трёх фигур установите Заливку (Fill) - 70%:



Дизайн сайта звуковой студии


18. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите элемент под названием “5 point star frame”. Цвет элемента - #3399CC.



Дизайн сайта звуковой студии


Дизайн сайта звуковой студии


19. Расположите звёзды в случайном порядке и установите Заливку (Fill) - 20%. Также, как и для остальных фигур из группы, трансформируйте новые элементы в маску:



Дизайн сайта звуковой студии


Продолжайте создавать логотип сайта:



Дизайн сайта звуковой студии


20. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите тот же элемент “5 point star frame”.



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


21. Напишите текст логотипа, соблюдая настройки ниже:



Дизайн сайта звуковой студии


22. Теперь напишите на правой стороне экрана навигацию сайта:



Дизайн сайта звуковой студии


Настройки для текста:



Дизайн сайта звуковой студии


23. Также напишите названия вкладок главного меню:



Дизайн сайта звуковой студии


Используйте нижеуказанные настройки для текста:



Дизайн сайта звуковой студии


24. Выберите инструмент Карандаш (Pencil Tool) и нарисуйте 2 разделительные полосы. Для этого создайте новый слой (Create New Layer). Код светло-синей полосы - #267EAE, а тёмно-синей - #004F80.



Дизайн сайта звуковой студии


Получим следующее изображение:



Дизайн сайта звуковой студии


25. Теперь перейдём к созданию информационных блоков нашего сайта:



Дизайн сайта звуковой студии


26. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 10 рх), нарисуйте окно:



Дизайн сайта звуковой студии


27. Примените для окна стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Обводка:



Дизайн сайта звуковой студии


28. Заполните блок соответствующим текстом. Настройки указаны ниже:



Дизайн сайта звуковой студии


Дизайн сайта звуковой студии


29. При помощи того же инструмента Прямоугольник с закругленными краями
(Rounded Rectangle Tool) (радиусом 10 рх) создайте баннер:



Дизайн сайта звуковой студии


30. Выберите фото для баннера и расположите его над баннером. Затем скройте его, превратив в маску. Удерживая Alt, кликните между слоями. Слой верхнего фото будет изменён, имея указатель, направленный на основание.



Дизайн сайта звуковой студии


Добейтесь следующего результата:



Дизайн сайта звуковой студии


31. Создайте ещё один так называемый прямоугольник с помощью инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) и удалите точки с его правой стороны инструментом Удалить точку привязки (Delete Anchor Point Tool). Воспользуйтесь инструментом Добавить точку привязки (Add Anchor Point Tool) для получения острых углов:



Дизайн сайта звуковой студии


32. Примените для элемента стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Результат:



Дизайн сайта звуковой студии


33. Создайте ещё одну плоскость под последним слоем:



Дизайн сайта звуковой студии


34. Примените для плоскости стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Обводка:



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Результат:



Дизайн сайта звуковой студии


35. Теперь выберите инструмент Кисть (Brush Tool) и цвет - #0099CC.



Дизайн сайта звуковой студии


И нарисуйте элемент на новом слое (Create New Layer). Превратите слой в маску. Затем изобразите блеск, как в следующем рисунке:



Дизайн сайта звуковой студии


36. Расположите текст, как показано на рисунке ниже. Фотография должна быть размещена в тексте.



Дизайн сайта звуковой студии


37. Размер текста такой же, как в первом блоке. Вставьте возле даты элемент звезды. Для этого используйте инструмент Произвольная фигура (Custom Shape Tool), элемент “5 point star frame”. Цвет элемента - #0099CC.



Дизайн сайта звуковой студии


38. Примените для элемента стиль Внешнее свечение (Layer Style - Outer Glow):



Дизайн сайта звуковой студии


Дизайн сайта звуковой студии


39. Следующий шаг включает создание и копирование ещё одного блока:



Дизайн сайта звуковой студии


40. Создайте ещё несколько информационных блоков на правой стороне рисунка. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте 2 плоскости.



Дизайн сайта звуковой студии


41. Для начала нарисуйте вертикальную плоскость:



Дизайн сайта звуковой студии


42. Примените для плоскости стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


43. Теперь нарисуйте вторую плоскость:



Дизайн сайта звуковой студии


44. Примените для второй плоскости стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


45. Теперь разместите фото и текст:



Дизайн сайта звуковой студии


46. Скопируйте полученный результат и измените фотографию:



Дизайн сайта звуковой студии


47. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте несколько маленьких полос:



Дизайн сайта звуковой студии


48. Начните затемнять первую полосу:



Дизайн сайта звуковой студии


49. Примените для полосы стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Светлая полоса:



Дизайн сайта звуковой студии


50. Примените для полосы следующие параметры наложения:



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


51. Теперь сделайте несколько копий созданных полос, поочередно располагая их на рисунке, и вставьте соответствующий текст:



Дизайн сайта звуковой студии


52. При помощи инструмента Прямоугольник (Rectangle Tool) создайте основание сайта, как показано ниже:



Дизайн сайта звуковой студии


53. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта звуковой студии


Настройки градиента:



Дизайн сайта звуковой студии


Результат:



Дизайн сайта звуковой студии


54. Создайте новый слой (Create New Layer) и выберите инструмент Кисть (Brush Tool) и цвет - #0099CC для создания следующего элемента, который следует после этого скрыть в маске.



Дизайн сайта звуковой студии


55. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите элемент “Thin Frame circles” и проделайте с ним ту же работы, что и в начале. Цвет элемента - #0066СС. Расположите их под градиентом, как на рисунке ниже:



Дизайн сайта звуковой студии


Дизайн сайта звуковой студии






Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

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

Введите код: