Чтиво Как самому сделать аватар и баннер для группы вк

Тема в разделе "Компьютеры, Интернет, IT-новости", создана пользователем sandstormia, 16 фев 2016.

  1. sandstormia

    sandstormia Свой

    Регистрация:
    2 апр 2015
    Сообщения:
    50
    Симпатии:
    177
    Аватар и баннер для группы вк.

    Сейчас стало важно при создании группы в социальной сети еще и красиво её оформить, особенно если группа создана для бизнеса, продажи товаров или услуг. Очень важно, чтобы оформление было приятно глазу и выделяло вашу группу среди конкурентов. Хорошее оформление увеличивает процент вступления в вашу группу новых участников, возможных потенциальных клиентов.

    Очень часто для этого люди обращаются к дизайнерам(как раз то направление, в котором я сейчас и стараюсь развиваться). И я хочу поделиться тем, как можно сделать красивое оформление совершенно самостоятельно. Статья рассчитана на базовые навыки владения фотошопом. Курсов и видеоуроков по нему итак предостаточно. Но все равно буду стараться объяснять все подробно.

    Очень часто, практически всегда делают так, чтобы с баннера в верхней части страницы можно было попасть в меню. И часто просят сделать, чтобы картинка с аватара переходила в баннер.

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

    cflGc1KVA0M.jpg
    Между баннером и аватаркой рассмояние 10 пикселей. Если бы над баннером захотите разместить еще информацию советую воспользоваться линейкой mySize и все вымерять, примерно вот так.


    QIP Shot - Screen 140.png

    Здесь например расстояние не 50 пикселей как указано на предыдущей картинке, а 206. Все это будем учитывать при проведении направляющих в фотошопе.

    Итак,начнем: Открываем фотошоп -> Файл -> Создать либо Ctrl+N.
    Открывается окошко, пишем название и размер, но почему я взяла 2420 на 2000. Я просто увеличила наши размеры в 4 раза, на мой взгляд, так в вк выглядит лучше.
    QIP Shot - Screen 141.png
    Теперь проводим направляющие. Если по краям нет линеечек, включим их: Просмотр -> Линейки либо Ctrl+R. Направляющие можно вытаскивать из них с учетом, что они показывают пиксели, для этого щелкаем на линейке правой кнопкой мыши и выбираем пиксели, если стоит что-то другое.

    QIP Shot - Screen 142.png
    Потом щелкаем по линеечке левой кнопкой и не отпуская тащим в сторону нашего документа до нужного значения. Сначала я ставлю направляющие по краям документа, вот так.

    QIP Shot - Screen 143.png

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

    QIP Shot - Screen 144.png

    Ставим следующие направляющие горизонтальные: 0, 2000 (крайние), 200, 1360 пикселей; вертикальные: 0, 2420 (крайние), 1580, 1620 пикселей. И у нас получилась заготовка для наших аватарки и баннера.

    QIP Shot - Screen 145.png

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

    QIP Shot - Screen 146.png

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

    QIP Shot - Screen 147.png

    Теперь подберем картинку, у меня группа по тематики дизайна, пусть картинка будет такой.

    depositphotos_78122438-Web-Design-Media-Content-Light-Bulb-Inspiration-Concept.jpg

    Перетащим её в наш документ.

    QIP Shot - Screen 148.png

    Теперь копируем и один слой перемещаем на слой над авой.

    QIP Shot - Screen 149.png

    Далее нажимаем Alt и подводим мышку между слоем с картинкой и предыдущим, появиться стрелка ждем на нее левой кнопкой мыши. И так проделаем два раза. Теперь картинка прилепилась к слоям ава и баннер.

    QIP Shot - Screen 150.png

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

    QIP Shot - Screen 151.png

    Проделаем с прямоугольниками тоже самое, то и с картинками прилепим их к аве. И перекрасим в цвет, который нам нравиться. У меня синий.

    QIP Shot - Screen 152.png
    Теперь мне показалось что ава длиновата, я нажала на слой ава, потом Ctrl+T, и слегка изменила её длину, вообще стандартная ава 200 на 500, но длину не обязательно делать 500, она может быть в принципе любой.
    QIP Shot - Screen 153.png

    Теперь добавила название и призыв. Шрифт использовала Rexx Bold.

    QIP Shot - Screen 154.png

    Призыву к действию не хватает кнопочки и стрелочек. А для название сделаем подчеркивание.

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

    QIP Shot - Screen 155.png

    Открываем стиль слоя и заходим в обводку, делаем её белой примерно 4 пикселя. Ту опять на ваше усмотрение.

    QIP Shot - Screen 156.png

    Под названием проводим две прямые линии. Раскрашиваем их в цвета: одну - чуть темнее основного, вторю - чуть светлее.

    QIP Shot - Screen 157.png

    И вот что получилось.

    QIP Shot - Screen 158.png

    У меня в задумке на картинке будут надписи, так что надо сделать её не такой выделяющейся. Наложим на нее однородный полупрозрачный фон. Я долго игралась с цветами и способами наложения и пришла к следующему результату. Фон бежевого цвета - непрозрачность 80%, режим наложения - умножение.

    QIP Shot - Screen 159.png

    QIP Shot - Screen 160.png

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

    QIP Shot - Screen 161.png

    Теперь делаю кнопочку на баннере. Тем же способом.

    QIP Shot - Screen 162.png

    И описываю, что же нужно узнать подробнее.

    QIP Shot - Screen 163.png

    Впринципе дизайн готов. Выбираем инструмент рамка.
    QIP Shot - Screen 165.png

    И с её помощью сначала выделяем аватарку, и сохраняем её. Потом также баннер.

    QIP Shot - Screen 166.png

    Чтобы сохранить: Файл -> Сохранить для Web... Сохраняю в Jpeg, в высоком качестве.

    QIP Shot - Screen 168.png

    Теперь можно устанавливать в группу. Для авки просто жмем загрузить новую фотографию и загружаем. Для баннера. Ставим ссылку на меню .удаляем когда внизу появиться ссылка как на скрине и жмем загрузить фотографию. Жмем отправить и обязательно, чтобы было от имени группы. Потом жмем на время отправления и появиться под постом кнопочки: редактировать, удалить, закрепить. Жмем - закрепить.
    QIP Shot - Screen 170.png

    А вот и наше готовое оформление.

    QIP Shot - Screen 171.png

    Надеюсь объяснила более менее понятно, если возникнут вопросы с радостью на них отвечу и постараюсь помочь разобраться. С благодарностью приму обоснованную критику, так как только учусь всему этому и опыта не так много как хотелось бы.

    P.S. Бонус - аватар и баннер + шрифт, которые мы делали в статье. Изменяем текст, цвета и картинку и получаем прикольный готовый дизайн.

    Для просмотра ссылок зарегистрируйтесь или авторизуйтесь на сайте.


    Автор: sandstormia
     
    Tourette, Sentinel, Arhangel и 6 другим нравится это.
  2. 64sio

    64sio Белый Маг Джедай

    Регистрация:
    24 ноя 2015
    Сообщения:
    2.893
    Симпатии:
    4.514
    :thanks:
    Талантливые люди везде себе найдут применение и возможности роста! Спасибо. Интересно. Доходчиво.Ненавязчиво:ya_za:
     
    Sentinel и sandstormia нравится это.
  3. sandstormia

    sandstormia Свой

    Регистрация:
    2 апр 2015
    Сообщения:
    50
    Симпатии:
    177
    Благодарю, я старалась :rolleyes:
     
  4. wagamata

    wagamata Создатель Админ

    Регистрация:
    7 май 2013
    Сообщения:
    3.869
    Симпатии:
    7.048
    Вообще качественный мануал. Респект! :klasss:
     
    sandstormia нравится это.
  5. olken83

    olken83 Юзер

    Регистрация:
    17 фев 2016
    Сообщения:
    52
    Симпатии:
    11
    О, то, что надо. Как раз только недавно группу в вк создал. Спасибо за столь подробную инструкцию.
     
Загрузка...
Похожие темы - Как самому сделать
  1. MIG
    Ответов:
    0
    Просмотров:
    114
  2. Krasava777
    Ответов:
    0
    Просмотров:
    503
  3. Grihan73
    Ответов:
    0
    Просмотров:
    344
  4. MIG
    Ответов:
    0
    Просмотров:
    168
  5. fokakatu
    Ответов:
    4
    Просмотров:
    761
  6. rambler
    Ответов:
    0
    Просмотров:
    194
  7. Corda
    Ответов:
    3
    Просмотров:
    419