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





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

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


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

Подсказка

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

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

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


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


7. Снова выберите инструмент Прямоугольник (Rectangle Tool) и разделите фон на 2 половины:



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Тиснение:



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


13. Создайте новый слой (Create New Layer) и выберите инструмент Кисть (Brush Tool) для создания тени под капсулой.



Он-лайн аптека


Он-лайн аптека


14. Далее выберите 2 инструмента для затемнения нижней части капсулы. Для начала выберите инструмент Прямоугольник (Rectangle Tool) и создайте чёрный прямоугольник над поверхностью капсулы, затем, удерживая Alt, инструментом Эллипс (Ellipse Tool) вырежьте отверстие на капсуле. Форму отверстия подкорректируйте инструментом Преобразовать точку привязки (Convert Point Tool).



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


16. Сделайте другую копию капсулы и расположите её над всеми слоями. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) вырежьте копию в середине.



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


19. Для вашего удобства, объедините в группу все слои, составляющие капсулу и её отражение, тень и затемнение. Перейдите к созданию кнопок, расположенных на меню заголовка сайта. Следует разместить кнопки ниже упомянутой группы. При помощи инструмента Прямоугольник (Rectangle Tool) создайте кнопку.



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


24. С помощью инструмента Прямоугольник (Rectangle Tool) нарисуйте тонкую полосу на нижней части рисунка, цветом #E3E3E3.



Он-лайн аптека


Он-лайн аптека


25. Создайте новый слой (Create New Layer) и при помощи инструмента Карандаш (Pencil Tool) нарисуйте указательную линию цветом #C6C6C6 и расположите её выше последней созданной полосы.



Он-лайн аптека


Он-лайн аптека


26. Кликните на начало линии, затем нажмите на клавишу Shift и кликните на конец линии.



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


28. Создайте новый слой (Create New Layer), выберите инструмент Карандаш (Pencil Tool) разных размеров и нарисуйте окно поисковой системы - 4 рх для контура и большой размер для внутренней зоны.



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


Он-лайн аптека


31. А также напишите логотип сайта. Настройки для “Online”:



Он-лайн аптека


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



Он-лайн аптека


Настройки для “all you need for your health”:



Он-лайн аптека


Он-лайн аптека


32. Добавьте названия кнопок меню, расположенных на заголовке сайта. Настройки для “Home”:



Он-лайн аптека


Настройки для “About Us, Price List, Contact Us”:



Он-лайн аптека


Он-лайн аптека


33. Теперь необходимо вставить соответствующие надписи в систему поиска. Настройки для “Search”:



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


34. Вставьте названия разделов сайта. Настройки для “Welcome, Special”:



Он-лайн аптека


Настройки для “to our store, offers”:



Он-лайн аптека


Он-лайн аптека


35. Заполните раздел сайта соответствующим текстом. Настройки для выделенного текста:



Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


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



Он-лайн аптека


Он-лайн аптека


Он-лайн аптека






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

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

Ваше Имя

Ваш E-mail

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

Введите код: