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





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

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


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

Подсказка

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

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

Создайте качественную веб-страничку компании для вашего сайта.



Web дизайн для VoIP провайдера


1. Создайте новый документ размером 956×818 px и разрешением 72 dpi. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте нижний слой для инициализации пользователей. Цвет слоя - #F2ECD5.



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


4. После этого вставьте фото на заголовок сайта, предварительно вырезав его и обработав размеры.



Web дизайн для VoIP провайдера


5. На слой инициализации пользователя следует вставить кнопку, используя инструмент Прямоугольник (Rectangle Tool).



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


Обводка:



Web дизайн для VoIP провайдера


7. Заполните меню инициализации пользователя текстом. Настройки для “Password: Login:”:



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


8. Теперь вставьте 2 одинаковых окна, предназначенных для написания текста. Выберите для этой операции инструмент Прямоугольник (Rectangle Tool).



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


10. Далее выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) и создайте нижний слой, разработанный для кнопок меню. Инструментом Преобразовать точку привязки (Convert Point Tool) немного приподнимите верхние углы элемента, как показано в рисунке ниже:



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


14. При помощи инструмента Эллипс (Ellipse Tool) нарисуйте кольцо:



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


15. Установите Заливку (Fill) слоя - 0% и примените для кольца стиль Обводка
(Layer Style - Stroke).



Web дизайн для VoIP провайдера


16. Используя предыдущий инструмент Эллипс (Ellipse Tool), вставьте внутрь созданного кольца так называемый шарик.



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


18. Теперь объедините в группу все слои, составляющие кольцо с шариком. Сделайте 4 копии созданной группы и расположите их так, как показано в рисунке ниже:



Web дизайн для VoIP провайдера


19. С помощью инструмента Перо (Pen Tool) создайте нижний слой, предназначенный для рекламы.



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


20. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Отбрасывание тени
(Layer Style - Drop Shadow).



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


21. После этого напишите текст рекламы. Настройки для “$”:



Web дизайн для VoIP провайдера


Настройки для “49,39,29,19”:



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


Настройки для “Premium Unlimited, Small Business, Basic 500”:



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


24. Теперь инструментом Прямоугольник (Rectangle Tool) нарисуйте чёрные полосы на левой и правой сторонах страницы:



Web дизайн для VoIP провайдера


25. Далее вставьте название сайта. Настройки для “we develop the future”:



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера


Web дизайн для VoIP провайдера


26. Последний шаг включает в себя создание логотипа сайта. С помощью инструмента Произвольная фигура (Custom Shape Tool) выберите соответствующий элемент, как в рисунке ниже:



Web дизайн для VoIP провайдера


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



Web дизайн для VoIP провайдера







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

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

Ваше Имя

Ваш E-mail

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

Введите код: