• Страница 1 из 1
  • 1
Оформляем сообщество в новом дизайне ВК
Написал 19.10.2016 в 19:49 1Offline (Ур. 7)
С момента перевода всех на новый дизайн, многие так и не смогли разобраться, какие же размеры для картинок при оформлении сообщества наиболее оптимальны. Так что сегодня мы будем разбираться и делать для Вас своеобразный гайд, который будет полезен как для администраторов сообществ, так и для тех, кто арбитражит в ВК. Итак, поехали. 

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

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

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

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

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

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

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

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

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

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

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

Как пользоваться шаблоном?
1. Скачиваем прилепленный к посту архив, распаковываем и открываем в фотошопе; 
 

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

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

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

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

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

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

С загрузкой аватара делаем тоже самое: 
 

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

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

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


Вступайте в нашу группу Вконтакте и канал Telegram

Продажа сообществ, аккаунтов в соцсетях
Написал 23.10.2016 в 11:41 2Offline (Ур. 1)
Очень полезная информация спасибо автору.
Куплю купоны различных сервисов.
  • Страница 1 из 1
  • 1
Поиск: