С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Дизайн макета сайта для мобильных устройств в Фотошопе

Дизайн макета сайта для мобильных устройств в Фотошопе

Из этого урока Вы узнаете, как создать простой, но изящный и профессиональный макет веб-сайта специально для мобильных устройств в Adobe Photoshop. 

 

Предварительный просмотр

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 1

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 2 

 

Измените цвет фона на # f7f7f7. Создайте новый слой, залейте его белым цветом и измените Режим наложения (Blend Mode) на Умножение (Multiply). Перейдите в меню Фильтр> Шум> Добавить шум (Filter> Noise> Add Noise) с настройками, как показано на изображении ниже.


 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 3 

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 4

 

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

 

 

Шаг 5

 

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

 


Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 6 

 

Создайте новый слой и заполните форму белым цветом, измените Режим наложения (Blend Mode) на Умножение (Multiply). Далее перейдите в меню Фильтр> Шум> Добавить шум (Filter> Noise> Add Noise) с настройками, как показано на изображении ниже.

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 7 

 

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

 

 

Шаг 8 

 

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

 

 

Шаг 9 

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 10 

 

Используя инструмент Прямоугольник (Rectangle Tool) нарисуйте форму фона для меню. Дважды щелкните по слою с формой, чтобы открыть стили слоя и добавьте следующие стили слоя.  Напишите названия пунктов меню.

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 11 

 

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

 

 

Шаг 12

 

Загрузите эти иконки и поместите их в меню.  Если потребуется, измените размер иконок.

 

 

Шаг 13 

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 14 

 

Далее напишите некоторое содержание сайта.

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 15

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 16 

 

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

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Шаг 17

 

Далее добавьте копирайты и нижнее меню.

 

 

Финальный результат

 

Дизайн макета сайта для мобильных устройств в Фотошопе

 

Вот и всё, шаблон готов. Урок по теме - Создание простой темы для Wordpress в Фотошопе.

 


Автор урока: Ainsley

 

Переводчик урока: Ирина Шипилова 

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



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 19.02.2013
  •   Просмотров: 5579
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки