Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Рисуем дизайн сайта портфолио для веб и мобильных версий (урок)

Дата добавления: 06.07.2014 - 11:42
Добавил: Buger
Количество просмотров: 1698
Количество комментариев: 1
Размер файла: 5.21Mb
Рейтинг материала: 5.0 / 1
Рисуем дизайн сайта портфолио для веб и мобильных версий (урок)
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 1
В этом уроке я проведу вас через процесс создания простого и чистого дизайна на основе портфолио.
Мы будем использовать некоторые образы, чистую цветовую палитру и гладкие шрифты.
Мы начнем с создания обычной веб-версии, а затем я покажу вам, как быстро адаптировать его для мобильного приложения.

Для того чтобы приступить, вам потребуются скачать нужные активы.

После того, как вы скачали архив и ознакомились с содержимым, можем приступать дальше.

Шаг 1
Начните с создания нового документа Photoshop ((rus) Файл > Новый... / (eng) File > New ...), используя параметры, указанные ниже.


 
Шаг 2
Давайте установим направляющие, так наша разметка имеет достаточно места и выглядит сбалансированным.
Я не всегда использую сетку, но настройка некоторых рекомендации обеспечит опрятность и поможет определить ширину сайта.
Я обычно выбираю ширину сайта 1000px. И таким образом нам необходимо выставить по 100px слева и права направляющие, т.к. ширина нашего дизайна составляет 1200px (1200-100-100=1000px)

Примечание: от верхней части на 100px, 600px и 1100px.

Совет: Вы можете также использовать плагин GuideGuide Photoshop, чтобы сделать этот процесс еще быстрее.



Шаг 3
Придерживаясь этикета Photoshop мы будем создавать всё организовано, чтоб можно было легко ориентироваться и редактировать.
Давайте создадим три группы слоев с именем Header, Photos и Contact. Для создания группы перейдите на вкладку (eng) Layer> New> Group... / (rus) Слои > Новый > Группа... и дать каждой из них название, как упоминалось.
Для быстрого создания группы просто нажмите на значок (показанный на изображении).



Проектирование Область заголовка

Шаг 1
Давайте сначала создадим фон в блоге. Внутри заголовка группы нарисовать любую форму цвета прямоугольник с помощью Rectangle Tool (U). В моем случае я обратил 1200x600px размер прямоугольника и поместил его в верхней части документа.
Теперь перетащите Фотографию горы в документ Photoshop и поместите его над слоем прямоугольника.
Переименуйте слой на изображение, в моем случае я использовал IMG. После этого нажмите и удерживайте клавишу Alt и мышь на фото слоя, пока вы не увидите небольшую стрелку, указывающую вниз, затем отпустите ее. Вы только что создали обтравочную маску.
Теперь нажмите Ctrl + T и измените размер фото под свои нужды.

Совет:
удерживайте клавишу Shift, чтобы изменять пропорционально.



Шаг 2
Давайте сделаем некоторые коррективы в наш стиль, так это выглядит более ярким и запоминающимся.
Создайте новый слой, назовем его Shadow и создайте Обтравочную Маску, как мы сделали для изображения гор.
Затем выберите инструмент градиент (Gradient Tool (G)) и установите градиент цвета с переходом от черного #000000 к прозрачному. Уменьшить непрозрачность (Opacity) градиента слоя до 60%.





Шаг 3
Давайте добавим еще несколько цветов, чтобы наш заголовок стал еще более удивительным.
Создайте новый слой, назовите его Gradient и еще раз выберите инструмент градиент (Gradient Tool (G)) для данного слоя.
После этого установите градиент цвета с переходом от фиолетового # 37056b в розовом # ff01fc (или любые другие цвета которые вы хотите). Уменьшить непрозрачность (Opacity) градиента слоя до 20%.



Шаг 4
Время разместить логотип для нашего портфолио.
Выберите инструмент Горизонтальный Текст Horizontal Type Tool (T) и введите название вашего портфолио, будь то ваше имя или псевдоним.
Для этого я использовал очень стильный шрифт Kaushan Script с размером шрифта в 21px. Перетащите логотип в левый верхний угол Вашего сайта рядом с первой вертикальной направляющей.



Шаг 5
Мы добавим некоторые медиа иконки социальных сетей, чтобы люди могли следовать за вами и наблюдать за вашими работами.
Перетащите Facebook, Twitter и Instagram иконки из Iconfinder в документ Photoshop, переименуйте слои иконок, чтобы они были быстро узнаваемыми, и разместите их на верхней правой стороне рядом с последней вертикальной направляющей.
После этого нажмите правой кнопкой мыши на одном из слое значков, и выберите Blending Options ... и применить параметр Color Overlay белым цветом # FFFFFF. Сделайте то же самое с остальными иконками.



Убедитесь, что вы обеспечили достаточное пространство по бокам и выровните значки по горизонтали вместе с вашим логотипом.



Шаг 6
Давайте закончим нашу область заголовка. У нас есть прекрасный образ и множество места.
Выберите инструмент Горизонтальный Текст Horizontal Type Tool (T) и используя размер 36px шрифта Lato (черный) введите пару слов. В моем случае я написал "HELLO! I'M JONATHAN"
Сразу после этого, на новой линии с меньшим шрифтом, введите еще ​​некоторую информацию о себе или о сфере деятельности. Для этого урока я использовал размер 16px шрифт Lato.
Убедитесь, что высота строки является достаточно большой. Поместите текст в середине области заголовка.



Проектирование Площади Фотографий
В этой области мы разместим фотографии с Instagram, чтобы показать несколько примеров работы, демонстрируя, насколько квалифицированный и актуальным художником или дизайнером, являетесь.

Шаг 1
Давайте сначала изменим фон для этой области. Минимизировать заголовки групп, нажав маленькую стрелку рядом с именем группы и откроем группу Photos.
После этого, выберите Rectangle Tool (U) и нарисуйте немного серый прямоугольник. В моем случае я использовал цвет # EEEEEE и нарисовал прямоугольник размером 1200x880px.



Шаг 2
Теперь давайте добавим строку, описывающую работу. Это может быть просто "Последние работы" или в моем случае "Новые фото".
Текст должен быть читабельным, по этой причине я использовал серый цвет # 9b9b9b и шрифт является Lato (Жирный) Размер 12px.



Шаг 3

Отлично! Мы, наконец, готовы добавить некоторые интересные фотографии в наше портфолио. Создаем новую группу с названием Photo (фотография).
После этого вы должны решить, сколько фотографий вы хотите отобразить в ряд. Я решил поместить четыре на сроку, так что мне нужно сделать некоторые математические определения в пикселях.

Ширина нашего контента сайта 1000px, так что я буду делить его на 4, что дает мне 250px для каждого изображения, но мы также должны оставить немного расстояние по бокам, скажем 20px между изображениями. Таким образом, окончательный ширина изображения будет (1000px-60px) / 4 = 235px.

Выбраем инструмент прямоугольник (U) и, удерживая клавишу Shift, нарисуйте прямоугольник размером 235x235px. После этого выбирите изображение из Instagram или из unsplash.com или getrefe.tumblr.com, перетащите его в документ Photoshop и поместите его над прямоугольником.
Затем, удерживая нажатой клавишу Alt, создайте обтравочную маску и с помощью Ctrl + T измените размер изображения и поместите его, как вы хотите.



Шаг 4
Теперь нам нужно добавить количество "лайков" (в качестве некоторого социального доказательства) и краткое описание.
Создайте новый слой и назовите его Shadow, поместите его над изображением. После этого, используя Gradient Tool (G) примените градиент, идущий от черного к прозрачному, используемый ранее в этом уроке. Уменьшить его непрозрачность до 60%.



Выберите инструмент Horizontal Type Tool (T) и введите текст. Я использовал размер 13px шрифт Montserrat и оставил 15px пространство слева и снизу.



Теперь выберите инструмент прямоугольник (U) и нарисуйте белый прямоугольник под фото. Затем берем инструмент Horizontal Type Tool (T) и пишем краткое описание фотографии. Шрифт я использовал Montserrat размером 12px в сером цвете # 808080.



Шаг 5
Мы закончили с пунктом фото и теперь пришло время, чтобы добавить еще несколько фотографий к нашему портфолио.
Сведите к минимуму группу Photo и продублируйте ее, нажав Ctrl + J или нажав правой кнопкой мыши на имени группы и выбрав (eng)Duplicate Group ... / (rus)Создать дубликат группы... после этого продублируйте столько фотографий, сколько вы хотите иметь и организовать их в сетке.



Проектирование площади контактов
В этой области мы поместим простое сообщение с контактными данными для связи, а также общую информацию об авторских правах.

Шаг 1
Минимизировать группу Photos, нажав маленькую стрелку рядом с именем группы и открыть группу контактов.
После этого выбрать инструмент Horizontal Type Tool (T) и используя довольно большой тип ввести заголовок для раздела, в моем случае это "GET IN TOUCH". Я использовал для текста цвет # 565d64 размером 36px шрифт Lato (Black) для заголовка и 16px Lato (Regular) для описания.



Шаг 2
Теперь нам нужно сделать кнопку вызов действий, которые пользователи будут нажимать и осуществлять желаемое действие.
Для этого урока мы будем использовать простой кнопку контактов. Я использовал Rectangle Tool (U), обращается простую форму и помещается текст поверх него.
Убедитесь, что используете много места над кнопкой, так это выглядит сбалансированным и чистым.



Шаг 3
Наконец давайте поставим общую линию об авторских правах внизу нашего портфолио.
Прежде чем это сделать, выберите инструмент Line Tool (U) и нарисуйте тонкую серую горизонтальную линию в 1px по высоте с цветом # e0e0e0 через весь документ оставляя 90 пикселей пространства в самом низу.
Сразу после этого разместите текст об авторских правах. Я использовал размер 12px шрифта Lato (Bold) с буквенным шагом 270 и темно-серый цвет # 9b9b9b.



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

Проектирование мобильной версии
Шаг 1
Давайте создадим новый документ и установим размеры 320x2100px. Создайте три вертикальные направляющие на 20px, 150px и 300px, оставляя немного места по бокам.
После этого выбирите все группы в нашем документе веб-версии и перетащите их в новую вкладку документа, чтобы освободить нам группы для мобильной версии.



Шаг 2
Теперь откройте группу Header, найдите наш логотип и используя инструмент перемещения Move Tool (V) переместите его вправо, пока не видно в нашем новом узком макете.
Оставьте его рядом с первой вертикальной направляющей. После этого найдите социальные иконки и переместите их влево.



Шаг 3
Теперь настало время, чтобы адаптироваться. Выберите инструмент Horizontal Type Tool (T), разорвите строку описания и уменьшите шрифт основного сообщения, чтобы оно соответствовало между первой и третьей вертикальными контрольными линиями.
Настройте параметры высоты строки.



Шаг 4
Откройте группу Photos. После этого найти группу Photo и переместите его между вертикальными руководящих принципов. Затем откройте группу, нажмите на описание фоне прямоугольника, Ctrl + T и измените размер, чтобы он был 280px в ширину.
Сделайте то же самое с прямоугольником фото. Разместите фотографии в одном столбце и измените их размер, чтобы соответствовали между руководящими принципами.



Шаг 5
Наш раздел Photos стал больше, чем на веб-версии, так что корректировки фона необходимы. Найдите фоновый слой в группе Photos и нажмите Ctrl + T, чтобы изменить его размер, сделать выше и оставить пространство в нижней части секции.



Шаг 6
Наконец, мы должны изменить наш раздел контактов, так что сообщение соответствовало нашим принципам и было хорошо расположено. Откройте группу Contact и используя инструмент Horizontal Type Tool (T) разорвите строки контакт сообщения, чтобы они соответствовали нашим принципам.





Поздравляю!
Вот и все. Мы закончили с веб и мобильной версиями нашего портфолио.
Надеюсь, вы узнали что-то новое и, чему-то научились, приобрели какие-то навыки, которые помогут вам сделать удивительные вещи в будущем.



Источник: http://art-ucoz.ru
mever
12.10.2014 - 10:53
Лучше думаю когда видео урок присутствует ет более быстро обучаемое =)))
Добавлять комментарии могут только зарегистрированные пользователи.