Вы находитесь на странице: 1из 26

Урок № 11

Создание дизайна
брендированного
оформления
социальной сети.
Создание
инфографики

В
современном мире общение играет очень
важную роль. Это должно быть быстро,
удобно и, желательно, интересно.
Вы наверняка пользовались или хотя бы слышали о
таких социальных сетях, как Facebook и Instagram. Но
почему бы не создать собственную социальную сеть, че-
рез которую вы бы могли найти новых друзей по инте-
ресам?
Сегодня мы поработаем над дизайном интерфей-
сов и инфографикой и создадим дизайн стартовой
страницы Дарта Вейдера из «Звездных войн» для мо-
бильной версии социальной сети Darkside.

Материалы к уроку прикреплены к данному PDF-файлу.


Для доступа к материалам необходимо открыть урок
в программе Adobe Acrobat Reader.

2
Создание дизайна оформления соцсети, инфографики

Для начала продумаем, какие функции будут в со-


циальной сети Darkside.
Дарту Вейдеру как ситху, понадобится мессенджер,
чтобы быстро обмениваться информацией. Понадобит-
ся новостная лента, где будут опубликованы важные но-
вости. Например, о переходе на светлую сторону. Также
можно добавить статус: ученик, мастер, ситх и так да-
лее. Важно добавить графу поиска. А вот мероприятия
совсем не обязательны – еще нереализованные темные
замыслы лучше держать в тайне!
Теперь посмотрим, какие опции есть у уже существу-
ющих социальных сетей. Стартовая страница Facebook
выглядит, как на рисунке 1. Дальше пользователь видит
новостную ленту.

Рисунок 1

3
Урок № 11

Давайте рассмотрим интерфейс главной страницы


Instagram (рис. 2). Сверху расположены иконки – сде-
лать фото, прямые трансляции IGTV и мессенджер
Direct, а чуть ниже  –  новостная лента. Внизу располо-
жены иконки домашней страницы, поиска, добавления
новой публикации, действия и личная страница.

Рисунок 2

4
Создание дизайна оформления соцсети, инфографики

Как видим, и в Facebook, и в Instagram пункты меню


оформлены небольшими иконками, которые интуитив-
но понятны пользователю. В обеих соцсетях пользова-
телей перенаправляют на новостные ленты.
Пускай главная страница Darkside так же будет
новостной лентой.
Приступим к созданию дизайна, для этого мы реко-
мендуем использовать Adobe Photoshop.
Для начала соберем палетку для нашей социальной
сети. В Instagram и Facebook преобладает белый цвет, а
для социальной сети Darkside будем использовать залив-
ку темного цвета. Сразу подберем несколько дополни-
тельных цветов или оттенков. На предыдущих встречах
мы подробно разбирали составление цветовых палеток.
Вы можете использовать палетку, поданную на рисун-
ке 3, но мы рекомендуем вам составить палетку само-
стоятельно.

Рисунок 3

Приступим к созданию дизайна.

5
Урок № 11

Создадим рабочий файл с параметрами экрана


смартфона (рис. 4).

Рисунок 4

Разблокируем Background и зальем его темным цве-


том. Затем с помощью Rectangle Tool (хоткей U) созда-
дим плашку меню и разместим ее вверху экрана (см.
рис. 5 на стр. 7).
Перейдем в Layer Style (Стиль слоя), дважды клик-
нув левой кнопкой мыши по слою Rectangle. Добавим
затемнение по краям с помощью Inner Glow (Внутрен-
нее свечение) (см. рис. 6 на стр. 7).
В окне справа вы увидите предпросмотр настро-
ек эффекта. Поэкспериментируйте с прозрачностью
(Opacity), размером свечения (Size) и режимами нало-
жения (Blend Mode).
6
Создание дизайна оформления соцсети, инфографики

Рисунок 5

Рисунок 6

7
Урок № 11

Добавим к плашке также Outer Glow (Внешнее све-


чение), используя красный цвет – цвет лазерного меча
ситха. Рекомендуем выбрать режим наложения Screen,
чтобы свечение было хорошо видно на темном фоне
(рис. 7).

Рисунок 7

После применения эффектов получим такой резуль-


тат (рис. 8):

Рисунок 8

8
Создание дизайна оформления соцсети, инфографики

Разместим на макете экрана иконку мессендже-


ра – файл message из дополнительных материалов.
Обмен сообщениями  –  одна из наиболее важных
опций Darkside. Поэтому добавим к ней голубую под-
светку, используйте стиль слоя Outer Glow.
Добавим к иконке и другие эффекты. Например, на-
строим Elements  > Techniques  >  Precise, задав режим
наложения Screen (рис. 9–10).

Рисунок 9

9
Урок № 11

Рисунок 10

Продолжим работу над верхним меню.


Создадим кнопку для настройки статуса, восполь-
зовавшись Ellipse Tool. Добавим к фигуре голубую под-
светку (рис. 11–12).

10
Создание дизайна оформления соцсети, инфографики

Рисунок 11

Рисунок 12

11
Урок № 11

В дальнейшем пользователи смогут выбирать между


учеником или мастером, ситхом или джедаем. Для маке-
та будем использовать статус – Дарт Вейдер. Для этого
вставим в рабочий документ иконку Дарта Вейдера из
дополнительных материалов (файл darth vader) (рис.
13).

Рисунок 13

Добавим разделы «Новости» и «Поиск» на панель


меню. Иконки для них вы найдете в дополнительных
материалах. Вы можете использовать другие понравив-
шиеся иконки, найденные в интернете. Важно, чтобы
иконки были простыми и понятными. Пользователи
должны интуитивно понимать, какие действия стоят за
ними.
После того как мы вставили иконки в файл, следует
выровнять их с помощью линеек и направляющих (рис.
14). Активируем опцию, нажав Ctrl + R.
12
Создание дизайна оформления соцсети, инфографики

Рисунок 14

Также добавим к кнопкам эффект свечения, перей-


дя Layer Style > Outer Glow (рис. 15).

Рисунок 15

13
Урок № 11

В результате мы получим мягкое, неброское свече-


ние (рис. 16).

Рисунок 16

Перейдем к оформлению новостной ленты.


Используем главную страницу Facebook как рефе-
ренс. С помощью инструмента Rounded Rectangle Tool
нарисуем окно для ввода текста (рис. 17).
Не забудьте добавить эффекты слоя!

Рисунок 17

14
Создание дизайна оформления соцсети, инфографики

По тому же алгоритму добавим макет постов (рис.


18). Также можем скопировать верхнюю плашку с помо-
щью хоткея Ctrl + J и поместить ее вниз листа.

Рисунок 18

Теперь создадим наполнение для макета поста. Пу-


скай это будет инфографика прироста количества поль-
зователей Darkside за последний месяц.
Инфографика, как и презентация, должна понятно
передавать информацию, но при этом не нужно забы-
вать и о красивом оформлении. Для этого можно ис-
15
Урок № 11

пользовать иллюзию 3D, тени, насыщенные цвета или


динамичные формы.
Для начала включим Grid (Сетка), перейдя
View  >  Show  >  Grid. Затем с помощью Rectangle Tool
(хоткей U) нарисуем прямоугольник синего цвета и раз-
местим его в публикации (рис. 19).

Рисунок 19

16
Создание дизайна оформления соцсети, инфографики

Перейдем в режим трансформирования, воспользо-


вавшись хоткеем Ctrl + T.
Щелкнем правой кнопкой мыши по прямоугольни-
ку и выберем опцию Warp (рис. 20). В результате полу-
чим дополнительные опорные точки на прямоугольни-
ке для гибкого трансформирования (рис. 21).

Рисунок 20 Рисунок 21

17
Урок № 11

Выделим верхние опорные точки и сместим их, что-


бы плавно изогнуть прямоугольник (рис. 22). Обратите
внимание, что мы все еще находимся в режиме транс-
формирования.

Рисунок 22

Сохраним изменения, нажав Enter. При сохранении


трансформации всплывет диалоговое окно. Нажмем Yes
и продолжим работу (рис. 23).

Рисунок 23

18
Создание дизайна оформления соцсети, инфографики

С помощью хоткея Ctrl + J скопируем прямоуголь-


ник. Отразим прямоугольник по горизонтали, исполь-
зуя Transform (Ctrl + T)  >  Flip Horizontal. Перенесем
копию прямоугольника под оригинал на панели Layers.
Уменьшим размер копии, а затем изменим цвет заливки
на более темную (рис. 24).

Рисунок 24

Откроем панель Layer Style для синего прямоуголь-


ника и добавим иллюзию объема с помощью Bevel &
Emboss.
Мы задали настройки, как на рисунке 25 на страни-
це 20, но вы можете подобрать их самостоятельно. Ре-
зультат показан на рисунке 26.

19
Урок № 11

Рисунок 25

Рисунок 26

Выделим и скопируем эти два прямоугольника. Да-


лее переместим их выше. Изменим цвет заливки сине-
го прямоугольника, добавим градиент. Не забывайте,
20
Создание дизайна оформления соцсети, инфографики

его можно настроить на верхней панели, если выделить


нужный прямоугольник и активировать Rectangle Tool
(рис. 27).

Рисунок 27

Повторим действия еще раз и добавим еще одну


красную ступень (рис. 28).

Рисунок 28

21
Урок № 11

Можем усовершенствовать инфографику, добавив


эффект Drop Shadow для серых прямоугольников (рис.
29).

Рисунок 29

Также добавим текст с помощью Text Tool и элемен-


ты инфографики с помощью Brush Tool (рис. 30).

22
Создание дизайна оформления соцсети, инфографики

Рисунок 30

А на рисунке 31 на следующей странице вы увидите,


как еще интересно можно оформить инфографику.

23
Урок № 11

Рисунок 31

24
Урок № 11
Создание дизайна брендирован-
ного оформления социальной
сети. Создание инфографики

© Компьютерная Академия ШАГ


www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения,


фрагменты которых использованы в материале, принадлежат их законным владель-
цам. Фрагменты произведений используются в иллюстративных целях в объёме,
оправданном поставленной задачей, в рамках учебного процесса и в учебных целях,
в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське
право і суміжні права». Объем и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию объектов
авторского права и не ущемляет законные интересы автора и правообладателей.
Цитируемые фрагменты произведений на момент использования не могут быть
заменены альтернативными, не охраняемыми авторским правом аналогами, и
как таковые соответствуют критериям добросовестного использования и честного
использования.
Все права защищены. Полное или частичное копирование материалов запрещено.
Согласование использования произведений или их фрагментов производится
с авторами и правообладателями. Согласованное использование материалов
возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое исполь-
зование материалов определяется действующим законодательством Украины.