Перейти к содержимому



Купить ссылку здесь
Фотография
- - - - -

Оформляем сообщество в новом дизайне ВК

Форум ZiSMO.biz
43
Сообщений в теме: 43

ONLINE Отправлено

Sergei1994
группа пользователя

    My-vk.ru самый лучший магазин Vk.com

  • Cообщений: 35 958
  • Друзей:1222
  • Поинты: 5 854
  • Предупреждений: 0
  • Онлайн:177д 17ч 40м
1 252

*
Популярное сообщение!

С момента перевода всех на новый дизайн, многие так и не смогли разобраться, какие же размеры для картинок при оформлении сообщества наиболее оптимальны. Так что сегодня мы будем разбираться и делать для Вас своеобразный гайд, который будет полезен как для администраторов сообществ, так и для тех, кто арбитражит в ВК. Итак, поехали. 

Размер аватара

200х500px -- это тот размер, который рекомендует техподдержка ВК. Его можно масштабировать и под 400х1000, и под 300х750. Главное, чтобы сохранялась пропорция 2:5. 
Размер миниатюры аватара - 200х200px. На этапе отрисовки необходимо сразу учитывать этот момент, чтобы лого или другой важный элемент вашей авы не был обрезан и не пришлось всё переделывать.   

Размер фото в каталог товаров

Оптимальный размер 1000х1000px. Очень важно сохранять картинку для web свключённым sRGB. О правильном сохранении фото будет чуть ниже.  

Размер картинки в закрепе

На самом деле, проштудировав достаточное количество доступной инфы я в очередной раз убедился, что если надо что-то сделать хорошо, надо сделать это самому. Я это к тому, что вариантов в сети описано много, но всё как-то не так: то нижняя граница закрепа не совпадает с нижней границей аватара, то слишком маленькая высота баннера, то вовсе не предусмотрена совместимость с ретиной и просто большими экранами. В общем, я решил методом проб и ошибок найти наилучший размер. В итоге я приплыл к тому, что 510х353px - это тот размер, при котором все границы будут совпадать без использования каких-либо костылей:   
dbXufRTTGYE.jpg 


Казалось бы, всё отлично смотрится, можно использовать. Однако появилосьжирное "НО": при клике на закреплённую картинку на моём 22х дюймовом экране она выглядела вообще крохотулей: 
jbJK0cHMWvI.jpg 


При клике на аватар с размером 200х500px всё тоже было как-то грустно:  
vDJuqVr8Zp8.jpg 


"Надо масштабировать!", -- подумал я и просто увеличил картинки вдвое. В этот раз получилось очень даже прилично: 
-lc9fY9Z5js.jpg 


Аватар 400х1000px уже смотрелся совершенно по-другому: 
7nJ1oBvjxPE.jpg 

Где-то проскакивала инфа, что ВК рекомендует ширину картинки 1280px, поэтому я решил попробовать максимально приблизиться к этому значению. Умножив исходный размер на 2.5 я получил ширину 1275px и не прогадал, т.к. картинка стала открываться на максимум. Это именно то, что я пытался найти! 
6F8WFD5Aaps.jpg 

Аватар 500х1250px ничем не отличался от прошлого варианта. Однако именно такой размер надо использовать, если мы работаем по сетке и делаем слитные закреп и аватар. 

Вывод:

Юзайте картинки 1275х883px и будет Вам счастье ;) 
Кстати, специально для подписчиков нашего паблика я сделал шаблон сетки, с помощью которой Вы без всяких проблем сможете запилить своё оформление по принципу, как на картинке ниже:    
55OkrNqN_DY.jpg 

Вот только есть один косяк в новом дизайне -- это щель между меню и аватаром. И не просто щель, а дыра. Дырииииище. С этим, к сожалению, ничего не поделать.  

Как пользоваться шаблоном?

1. Скачиваем прилепленный к посту архив, распаковываем и открываем в фотошопе; 
kwLl1zOaNR0.jpg 


2. Закидываем в самый верх слой с готовым дизайном, либо пилим дизайн внутри шаблона; 
3. Когда всё готово, удаляем слой "основа" и жмём ctrl+shift+e (склеиваем все слои)  
4. Жмём букву М (включает инструмент "прямоугольное выделение") и выделяем нужный нам участок по сетке: 
Zh7cLPLTUY0.jpg 


5. Жмём ctrl+c (скопировать выделенный участок), ctrl+n (создать новое изображение (там уже сразу будет предложен размер скопированного участка, поэтому не запариваемся и жмём enter)), ctrl+v (вставляем скопированный фрагмент), ctrl+alt+shift+s (сохранить для Web) и выставляем значения из принтскрина (в дальнейшем это делать не придется, т.к. эти параметры будут предлагаться "по умолчанию"): 
aXQbOoNH-FM.jpg 


6. Теперь проделываем те же самые махинации с аватаром: 
Vl0ZcCP_vuA.jpg 

Готово! Вы превосходны ;) 

Как правильно сохранять и загружать картинки

Теперь, как и обещал, немного о правильном сохранении и загрузке картинок (чтобы не терять сильно в качестве). 
Во-первых, картинки должны быть в хорошем качестве изначально. 
Во-вторых, сохранять надо для веба (в фотошопе сочетание клавиш ctrl+alt+shift+s) и ОБЯЗАТЕЛЬНО с преобразованием в sRGB
M66i7ZdE6k8.jpg 


В-третьих, жмём "добавить фото" и НЕ загружаем его, а просто перетаскиваем в это окошко: 
e9pS7et13dg.jpg 


С загрузкой аватара делаем тоже самое: 
RmMv3v-oXig.jpg 


Я не знаю, какого ёжика нужно делать именно так, но этот способ рекомендует техподдержка вконтакте.  

P.S. Шаблон встанет ровно в том случае, если в паблике есть какой-то статус. Без него съедет вёрстка. 
Юзайте горячие клавиши, которые я использую в статье. Всего за день можно это дело довести до автоматизма, а время экономят и облегчают жизнь эти штуки очень даже заметно. 


Как бы не было грустно, но на сегодня всё.   


Сообщение отредактировал Sergei1994: 10 09 2016 - 10:56




Изображение2,05 Изображение6,06
Изображение20.5 Изображение31.4
    • 7
  • Наверх
  • Ответить

OFFLINE Отправлено

Yura1206
группа пользователя

    Шикарные прокси и VPN: proxybiz.ru

  • Cообщений: 925
  • Друзей:47
  • Поинты: 1 409
  • Предупреждений: 0
  • Онлайн:49д 6ч 43м
41

Полезно, спасибо. Также можно не выделять и копировать фрагмент в новый документ, а просто обрезать все лишнее, сохранить и нажать Ctrl + Alt + Z и это вернет документ к исходному виду. Потом проделать то же самое с другим фрагментом :)


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

viper1997
группа пользователя

    Слава Україні!!!

  • Cообщений: 2 807
  • Поинты: 38
  • Предупреждений: 0
  • Онлайн:58д 3ч 39м
30

О спс


Хорошый заработок на мобильном трафике в день эсли етсь трафик можно и 1 000$ поднять вот тема: Ссылка
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

neskl
группа пользователя

    Уровень 2

  • Cообщений: 1 298
  • Друзей:27
  • Поинты: 4 507
  • Предупреждений: 0
  • Онлайн:43д 6ч 12м
25

благодарочка) 


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

MXA3b
группа пользователя

    Новенький

  • Cообщений: 2 013
  • Друзей:52
  • Поинты: 28
  • Предупреждений: 80
134
Спасибо.
    • 1
  • Наверх
  • Ответить

OFFLINE Отправлено

vrnkan
группа пользователя

    ...

  • Cообщений: 82
  • Друзей:3
  • Поинты: 3
  • Предупреждений: 50
8

вовремя, спасибо


    • 0
  • Наверх
  • Ответить

ONLINE Отправлено

Sergei1994
группа пользователя

    My-vk.ru самый лучший магазин Vk.com

  • Cообщений: 35 958
  • Друзей:1222
  • Поинты: 5 854
  • Предупреждений: 0
  • Онлайн:177д 17ч 40м
1 252

Полезно, спасибо. Также можно не выделять и копировать фрагмент в новый документ, а просто обрезать все лишнее, сохранить и нажать Ctrl + Alt + Z и это вернет документ к исходному виду. Потом проделать то же самое с другим фрагментом :)

http://rgho.st/7L6Cvn5crVT

https://www.virustot...sis/1473500363/

Есть ещё psd, но я не смотрел, тут тоже что то про оформление

Сообщение отредактировал Sergei1994: 10 09 2016 - 13:02

Изображение2,05 Изображение6,06
Изображение20.5 Изображение31.4
    • 1
  • Наверх
  • Ответить

OFFLINE Отправлено

Freebodin
группа пользователя

    в потоке

  • Cообщений: 1 409
  • Друзей:215
  • Поинты: 5 088
  • Предупреждений: 0
  • Онлайн:81д 20ч 48м
289

http://rgho.st/7L6Cvn5crVT https://www.virustotal.com/ru/url/86b56b78c1e8198ce1f1fb8b8128ab2b107ffde9eec8e87b8d4a5bfdcfdaacb0/analysis/1473500363/

 

Есть ещё psd, но я не смотрел, тут тоже что то про оформление 

 

Спасибо, давно искал похожую информацию, плюс в репутацию. 


ed8e6888a488.jpg

    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

022102
группа пользователя

    НЕТ бесполезным темам и сообщениям.

  • Cообщений: 387
  • Друзей:37
  • Поинты: 1 438
  • Предупреждений: 0
  • Онлайн:32д 6ч 15м
20

Спасибо, like!


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

wlad95
группа пользователя

    Уровень 2

  • Cообщений: 868
  • Друзей:14
  • Поинты: 15
  • Предупреждений: 10
  • Онлайн:33д 11ч 29м
45

За старания лайк!


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

PaukDon
группа пользователя

    Нарушение статуса.

  • Cообщений: 766
  • Поинты: 29
  • Предупреждений: 10
  • Онлайн:36д 22ч 14м
17

Спасибо за полезную инфу


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

DenProExpert
группа пользователя

    Axe

  • Cообщений: 269
  • Друзей:13
  • Поинты: 4
  • Предупреждений: 60
-4

От души 


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Олеся Авдонина
группа пользователя

    FREE LOREY: zismo.biz/topic/795854

  • Cообщений: 19 148
  • Поинты: 10 841
  • Предупреждений: 0
  • Онлайн:125д 7ч 21м
2 423

Благодарю


qXBSYMu.png

    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

XaKeR_xD
группа пользователя

    Уровень 2

  • Cообщений: 970
  • Поинты: 37
  • Предупреждений: 0
  • Онлайн:19д 21ч 23м
23

Спасибо, полезная информация!


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

ilgizON
группа пользователя

    Уровень 1

  • Cообщений: 142
  • Друзей:8
  • Поинты: 1
  • Предупреждений: 10
  • Онлайн:7д 3ч 59м
21
Благодарю
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Vl-ad-im-ir
группа пользователя

    Всем Бобра)

  • Cообщений: 20 720
  • Друзей:241
  • Поинты: 31 498
  • Предупреждений: 0
  • Онлайн:102д 18ч 26м
699

Статья действительно полезная, добавил в закладки)

А есть ссылка на источник, откуда брал?) 


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Denk
группа пользователя

    Kuponseller.com - купоны и аккаунты

  • Cообщений: 17 620
  • Друзей:163
  • Поинты: 7
  • Предупреждений: 0
  • Онлайн:82д 4ч 57м
631

Cпасибо за гайд


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

saint1313
группа пользователя

    Уровень 2

  • Cообщений: 736
  • Друзей:1
  • Поинты: 3
  • Предупреждений: 0
  • Онлайн:5д 4ч 21м
3

годно.


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

闇の 子供
группа пользователя

    K P A C U B O

  • Cообщений: 420
  • Поинты: 47
  • Предупреждений: 10
  • Онлайн:20ч 37м
-1

Как раз , то что искал) Спасибо  :)


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Iven717
группа пользователя

    Уровень 1

  • Cообщений: 3
  • Поинты: 12
  • Предупреждений: 0
  • Онлайн:3ч 51м
0

Спасибо , искал давно эту тему!


    • 0
  • Наверх
  • Ответить



Напишите свое сообщение