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





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

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


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

Подсказка

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

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

Узнайте, как создать эффективный и современный веб-сайт для вашей дизайн-студии.


Дизайн веб-сайта


1. Создайте новый документ размером 800×600 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон рисунка:



Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


3. Создайте новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте узор цветом #59AAC8.



Дизайн веб-сайта


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор.



Дизайн веб-сайта


4. Создайте новый документ размером 4×4 px и разрешением 72 dpi. Тем же инструментом Карандаш (Pencil Tool) нарисуйте ещё один узор. Цвет фона - #002848, а цвет узора такой же, как и в предыдущем.



Дизайн веб-сайта


5. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Создайте новый слой (Create New Layer) и при помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой для разделов сайта цветом #4F95B3.



Дизайн веб-сайта


6. Примените для слоя стиль Наложение узора (Layer Style - Pattern Overlay).



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


7. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию и измените цвет на #004D7B.



Дизайн веб-сайта


8. Примените для копии стиль Внутреннее свечение (Layer Style - Inner Glow).



Дизайн веб-сайта


Дизайн веб-сайта


9. Создайте ещё один документ размером 4×4 px и разрешением 72 dpi. Инструментом Карандаш (Pencil Tool) нарисуйте следующий узор. Цвет фона - #104668, цвет узора - #588EB0.



Дизайн веб-сайта


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор.



Дизайн веб-сайта


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



Дизайн веб-сайта


11. Примените для слоя стиль Тиснение (Layer Style - Bevel and Emboss).



Дизайн веб-сайта


Текстура (Тиснение). (Rock Patterns Set):



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


12. Скопируйте новый слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию, как показано ниже:



Дизайн веб-сайта


13. Установите Заливку (Fill) слоя - 0% и примените для копии стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


14. Объедините в группу все слои, содержащие левый раздел. Скопируйте эту группу и инструментом Свободное трансформирование (Free Transform) горизонтально сузьте копию и расположите её, как на рисунке ниже:



Дизайн веб-сайта


15. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте слой на заголовке сайта цветом #003250.



Дизайн веб-сайта


16. Теперь нарисуйте тонкую полосу цветом #002848 и расположите её ниже нового слоя. Используйте для этой операции инструмент Прямоугольник (Rectangle Tool).



Дизайн веб-сайта


17. Установите Непрозрачность (Opacity) слоя - 50% и примените для слоя стиль Наложение узора (Layer Style - Pattern Overlay).



Дизайн веб-сайта


Дизайн веб-сайта


18. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool), создайте первичный слой для кнопок меню на заголовке сайта, цветом #065E91.



Дизайн веб-сайта


19. Снова выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) и нарисуйте кнопку на панеле меню цветом #0473AC.



Дизайн веб-сайта


20. Примените для слоя стиль Тиснение (Layer Style - Bevel and Emboss).



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


21. Сделайте 4 копии последнего слоя и в режиме Свободного трансформирования
(Free Transform) измените размер копий, как показано на рисунке:



Дизайн веб-сайта


22. Используя инструмент Эллипс (Ellipse Tool), нарисуйте первичный слой логотипа сайта цветом #003F6E.



Дизайн веб-сайта


23. Примените для слоя стиль Внутренняя тень (Layer Style - Inner Shadow).



Дизайн веб-сайта


Дизайн веб-сайта


24. Скопируйте созданный слой и инструментом Свободное трансформирование (Free Transform) уменьшите копию:



Дизайн веб-сайта


25. Примените для копии стиль Внутреннее свечение (Layer Style - Inner Glow).



Дизайн веб-сайта


Тиснение:



Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


26. Напишите на логотипе заглавные буквы, составляющие название сайта, соблюдая нижеуказанные настройки:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


28. Напишите само название сайта. Настройки для “Design”:



Дизайн веб-сайта


Настройки для “Studio”:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


31. Теперь необходимо вставить текст в соответствующий раздел. Настройки для оранжевого текста:



Дизайн веб-сайта


Настройки для основного текста разделов:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта







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

написал : лена

здравствуйте! В пункте номер 7. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию и измените цвет на #004D7B.
Как ее так уменьшить ведь это квадрат а не рамка?

---------------


написал : positive11

лена, Здравствуйте!
Активируйте режим Свободное трансформирование (Ctrl + T), зажмите клавиши Shift + Alt и потяните одну из угловых точек к центру. Убедитесь, что при этом у Вас выбрана именно копия слоя, а не оригинал

---------------


написал : Лена

Спасибо, теперь поняла как это делается smile

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: