Рейтинг: 0.0/0

Метки

photoshop, фотошоп, шаблон сайта, дизайн сайтов, создание шаблона

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » Статьи » Дизайн сайтов » Дизайн макета сайта для мобильных устройств в Photoshop

Конечный результат



1. Создайте новый документ с параметрами как ниже:



2. Установите цвет фона #f7f7f7. Создайте новый слой, залейте его белым и установите режим наложения на Multiply, это сделает его невидимым.
Перейдите в Filter> Noise> Add Noise и установите значение Amount на 2,45%, чтобы добавить немного текстуры.



3. Используя Rectangle Tool, нарисуйте верхнюю панель веб-сайта. Дважды кликните на слое, чтобы перейти в Blending Options, и выставьте значения как ниже:



4. Используя Line Tool (1px), нарисуйте 2 линии, одну на верхней части панели и одну на нижней, удерживая нажатой клавишу Shift (чтобы удерживать прямую линию). Это добавит хороший 3D-эффект.



5. Далее, удерживая кнопку CTRL, кликните на иконке слоя верхней панели (в кружке ниже), чтобы выделить форму.



6. Создайте новый слой и заполните выделенную форму белым, установите режим наложения на Multiply, это сделает её невидимой.
Дальше идите в Filter> Noise> Add Noise и установите значение Amount на 4,80%.



7. Выделите форму снова, выберите инструмент Rectangular Marquee Tool и выберите половину формы, удерживая клавишу ALT (это удалит половину выделения).
Создайте новый слой, залейте оставшуюся форму белым и установите непрозрачность до 7%.



8. Затем напишите своему сайту имя, я использовал шрифт Walkway.
Двойной щелчок по слою с текстом, чтобы войти в Blending Options, установите следующие параметры для Inner Shadow.



9. Используя Rounded Rectangle Tool с радиусом 10px, нарисуем кнопку "Контакты". Дважды щелкните по слою, чтобы войти в Blending Options, и выставите значения как ниже. Далее пишем слово "Контакты" и накладываем тень в Blending Options.



10. Используя Rectangle Tool, нарисуйте форму фона меню. Дважды щелкните по слою, чтобы войти в Blending Options, и поставьте значения как в приведенных ниже вариантах.
Используя шрифт, как указано ниже, напишите названия пунктов меню.



11. Используя Line Tool (1px), создайте 1 черную и 1 белую линии разделителя, как показано ниже в меню. Установите непрозрачность белой линии на 10%.
Удерживая нажатой клавишу CTRL выберите 2 слоя линии, и перетащите их на значок папки, чтобы поместить их в папку.
Находясь на слое с папкой, нажмите на иконку "Add Layer Mask". После чего сотрите нижнюю часть линий разделителя, используя кисть черного цвета с мягкими краями.



12. Загрузите эти иконки веб-дизайна и разместите в меню. Совет: Для того, чтобы уменьшить иконки, нажмите CTRL + T и перетащите угол вниз, удерживая нажатой клавишу Shift.



13. Используя Rectangle Tool, нарисуйте белую форму для слайдера изображений. Перейдите в Blending Options и выставьте значения как ниже. Скопируйте и вставьте изображение, которое вы хотите, непосредственно над слоем слайдера. Щелкните правой кнопкой мыши на слое с изображением и выберите Create Clipping Mask. Это обрежет изображение до размеров белой формы.



14. Далее напишите какой-нибудь текст.



15. С помощью Rectangle Tool нарисуйте форму футера. Дважды щелкните по слою, чтобы войти в Blending Options, и примените значения, как на скриншотах ниже.
Повторите шаги 5, 6 и 7 для футера.



16. Используя Rounded Rectangle Tool (50px Radius), нарисуйте панель поиска белого цвета. Двойной щелчок, чтобы войти в Blending Options, и примените значения для Inner Shadow как на скриншоте.
Затем перейдите к инструменту Custom Shape Tool и выберите форму лупы. Нарисуйте небольшую форму на панели поиска, используя цвет, указанный ниже:



17. Наконец, используя шрифт, указанный ниже, напишите Copyright и меню футера.



Конечный результат



Источник
Перевод: PS-Studio.Info
Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: