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





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

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


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

Подсказка

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

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

Этот урок научит вас создавать современный профессиональный сайт хостинговой компании в Photoshop.



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


5. Сделайте 2 копии созданного слоя и измените настройки каждой копии:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


8. При помощи инструмента Перо (Pen Tool) создайте тень цветом #CCCCCC, как в следующем рисунке:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


Установите для слоя Режим наложения – Умножение (Blending Mode – Multiply).



Web дизайн для хостинговой компании


9. Сделайте 2 копии недавно созданного слоя и расположите их, как показано ниже:



Web дизайн для хостинговой компании


10. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте вертикальную полосу цветом #CCCCCC.



Web дизайн для хостинговой компании


Установите для слоя Режим наложения – Умножение (Blending Mode – Multiply).



Web дизайн для хостинговой компании


11. Сделайте 2 копии нового слоя и расположите копии, как в следующем рисунке:



Web дизайн для хостинговой компании


12. Теперь добавьте рекламный текст. Настройки для “Full, Business, Start”:



Web дизайн для хостинговой компании


Настройки для “Lorem ipsum dolor, Amet, consectuer”:



Web дизайн для хостинговой компании


Настройки для “$25.99, $35.99, $55.99”:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


13. Выберите жёсткую кисть маленького размера и белый цвет и нарисуйте несколько маленьких пятен на нашем рисунке.



Web дизайн для хостинговой компании


14. Выберите соответствующее фото и разместите его, как показано ниже:



Web дизайн для хостинговой компании


15. Сделайте 2 копии слоя фото и расположите их, как в следующем рисунке:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


18. Теперь вставьте ещё одно фото на центральную панель заголовка сайта:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Цвет элемента - #69CB10.



Web дизайн для хостинговой компании


20. Примените для элемента стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


23. Теперь вставьте другое фото на панель заголовка сайта:



Web дизайн для хостинговой компании


24. Затем добавьте текст на панель заголовка сайта. Настройки для “Everything you need”:



Web дизайн для хостинговой компании


Настройки для “for internet activity”:



Web дизайн для хостинговой компании


Настройки для “Precise and inpartial approach, 24 x 7 support online chat”:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


25. Теперь необходимо создать круг цветом #EB3D07 на панеле заголовка, используя инструмент Эллипс (Ellipse Tool).



Web дизайн для хостинговой компании


26. Примените для круга стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн для хостинговой компании


27. С помощью того же инструмента Эллипс (Ellipse Tool) создайте блеск цветом #FAD1C4.



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


28. Инструмент Произвольная фигура (Custom Shape Tool) поможет выбрать элемент, обведённый красным цветом:



Web дизайн для хостинговой компании


Цвет элемента - белый.



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


29. Выберите инструмент Карандаш (Pencil Tool) и нарисуйте 2 треугольника белого цвета:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Тиснение:



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


32. На поисковой панеле нам следует вставить названия кнопки и окна. Настройки для “DOMAIN SEARCH”:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


33. После этого, инструментом Эллипс (Ellipse Tool) вставьте отверстие белого цвета в панель, предназначенную для кнопок меню.



Web дизайн для хостинговой компании


34. Примените для отверстия стиль Обводка (Layer Style - Stroke).



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


35. Сделайте 4 копии созданного слоя:



Web дизайн для хостинговой компании


36. Теперь напишите названия кнопок, расположенных на меню сайта. Настройки указаны ниже:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании


37. Примените для надписей стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн для хостинговой компании


38. Снова выберите инструмент Эллипс (Ellipse Tool) и нарисуйте несколько маленьких кругов внутри отверстий на панеле, предназначенной для кнопок меню.



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Обводка:



Web дизайн для хостинговой компании


44. Блеск для всех кругов должен быть одинаковым (путём копирования) и его возможно создать инструментом Эллипс (Ellipse Tool).



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


46. Теперь напишите название нашего сайта. Настройки для “Hosting”:



Web дизайн для хостинговой компании


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



Web дизайн для хостинговой компании


Настройки для “BEST PLACE ON THE WEB FOR YOU”:



Web дизайн для хостинговой компании


Web дизайн для хостинговой компании






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

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

Ваше Имя

Ваш E-mail

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

Введите код: