Новичок
4 урока
(47 минут)
Курс
Дизайн сайта портфолио в Photoshop
Курс научит вас рисовать дизайн сайта в Photoshop.

#3 — Дизайн мобильной версии сайта-портфолио

Приветствуем вас, наши дорогие друзья! Сегодня на этом видеоуроке мы быстро превратим шаблон нашего сайта в веб-версию для мобильных устройств, т.е. создадим дизайн мобильной версии сайта.

Зачем делать шаблон сайта удобным для пользователей мобильных устройств?

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

Немного статистики

Согласно исследованиям, в современном мире около 90% пользователей смартфонов ищут локальную информацию с помощью своих телефонов. Что забавно, около 70% поисковых запросов выполняются дома или на рабочем месте, где наверняка есть полноценные компьютеры. Это говорит о том, что дизайн мобильной версии сайта должен быть еще привлекательнее, чем обычный. А теперь за работу!

Действия по преображению

1. Создаем новый файл «Portfolio-mobile.psd». Задаем ширину нашего документа в 320px, высоту — 2100рх и выставляем направляющие 20рх, 300рх и 160рх. После этого выделяем все группы Heаder, Photos и Contact в нашей веб-версии сайта, нажимаем правую кнопку мыши, и выбираем Дубликат группы, указывая наш новый файл.

2. Редактируем фон, надписи и кнопки социальных сетей. В группе заголовков находим наш логотип и с помощью Move Tool (V) перемещаем его вправо, совмещая его рядом с первой вертикальной направляющей. После этого двигаем иконки социальных сетей влево до третьей направляющей. Можно нажимать Shift и клавиши перемещения курсора для более точного позиционирования объектов. Иконки социальных сетей уменьшаем с 32рх до 25рх. Далее выравниваем фон и заголовки.

3. Редактируем область для демонстрации наших фотографий. Переносим заголовок «Последние фотографии». Увеличиваем высоту фона для отображения теперь трех фото вместо двух. Выбираем первое фото и увеличиваем ширину до правой направляющей. Аналогично организуем две другие фотографии в одном столбце между направляющими. Не забудьте область с контактной информацией и кнопкой выровнять посередине сайта, а также сделать разрывы строк.

4. Редактируем подвал (footer) нашего сайта. Сдвигаем линию footerа. Выравниваем надпись посередине, разбиваем на 2 строки и увеличиваем высоту строки на 18рх, чтобы текст не слипался. Шаблон дизайна мобильной версии сайта готов! Отключаем наши направляющие и смотрим, все ли правильно.

На этом наш видеоурок заканчивается. Надеемся, что у вас быстро и качественно получилось сделать дизайн мобильной версии сайта, повторяя действия за нами.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Источник вдохновения для урока:https://webdesign.tutsplus.com/tutorials/designing-a-simple-instagram-based-portfolio-in-photoshop—cms-21402

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#3 — Дизайн мобильной версии сайта-портфолио

  1. doktor081:

    Благодарю за отличное представление материала.Все грамотно и понятно.

  2. Marina_L:

    Все уроки замечательные! Спасибо автору за легкость подачи материала.

Добавить комментарий

Рекомендуемые курсы