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





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

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


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

Подсказка

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

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

Этот урок покажет вам как создать удобное меню со значками.


Создаём меню web сайта


1. Создайте новый документ размером 770×700 px и разрешением 72 dpi. После этого инструментом Заливка (Paint Bucket Tool) залейте фон цветом #494949.



Создаём меню web сайта


2. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте тонкую чёрную полосу на нижней части фона.



Создаём меню web сайта


Создаём меню web сайта


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



Создаём меню web сайта


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



Создаём меню web сайта


В предыдущем рисунке указаны коды используемых цветов:



Создаём меню web сайта


5. Создайте новый слой (Create New Layer) и выберите инструмент Эллипс (Ellipse Tool) для создания первичного слоя значка кнопки. Но сделайте отступ с левой стороны:



Создаём меню web сайта


Создаём меню web сайта


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



Создаём меню web сайта


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



Создаём меню web сайта


Создаём меню web сайта


7. Используя предыдущий инструмент, создайте круг. Сначало выберите инструмент Эллипс (Ellipse Tool) и нарисуйте внешние края, затем, удерживая Alt, вырежьте отверстие в круге.



Создаём меню web сайта


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



Создаём меню web сайта


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



Создаём меню web сайта


Обводка:



Создаём меню web сайта


Создаём меню web сайта


9. Следующий слой следует создать тем же инструментом Эллипс (Ellipse Tool), цветом #757575.



Создаём меню web сайта


10. Удерживая Alt, кликните между слоями круга и последним слоем, чтобы слой располагался в пределах круга.



Создаём меню web сайта


Создаём меню web сайта


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



Создаём меню web сайта


12. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) сотрите ненужную часть элемента.



Создаём меню web сайта


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



Создаём меню web сайта


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



Создаём меню web сайта


Обводка:



Создаём меню web сайта


Создаём меню web сайта


14. Теперь нам необходимо создать блеск на поверхности значка, выбирая инструмент Эллипс (Ellipse Tool), и вырезать нижнюю часть инструментом Удалить точку привязки
(Delete Anchor Point Tool). Далее необходимо внести некоторые коррекции в форму элемента, используя инструмент Преобразовать точку привязки (Convert Point Tool).



Создаём меню web сайта


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



Создаём меню web сайта


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



Создаём меню web сайта


Создаём меню web сайта


Создаём меню web сайта


16. Далее, объедините в группу все слои, составляющие значок. Сделайте 4 копии группы и инструментом Свободное трансформирование (Free Transform) расположите их так, как показано в следующем рисунке. На каждой копии должен быть изменён значок, указаный ниже, при помощи инструмента Произвольная фигура (Custom Shape Tool).



Создаём меню web сайта


Создаём меню web сайта


Создаём меню web сайта


Создаём меню web сайта


Создаём меню web сайта


17. С помощью инструмента Прямоугольник (Rectangle Tool) создайте 2 линии цветом #F65606. Линии должны быть горизонтальной и вертикальной формы.



Создаём меню web сайта


18. Теперь нам необходимо написать названия кнопок, расположенных на меню сайта. Настройки для “company, services, solutions, sponsors, contact”:



Создаём меню web сайта


Создаём меню web сайта


Создаём меню web сайта






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

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

Ваше Имя

Ваш E-mail

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

Введите код: