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



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

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

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

OFFLINE Отправлено

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

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

  • Cообщений: 35 098
  • Друзей:1158
  • Поинты: 2 260
  • Предупреждений: 0
  • Онлайн:168д 13ч 23м
1 161

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

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

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

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




85e05713dc23.gif2,03 62999aad7930.gif6,04

0c593ebf9caf.gif18,3 389ec147f5c0.gif31,2
    • 7
  • Наверх
  • Ответить

OFFLINE Отправлено

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

    Прокси по 10 рублей и VPN: proxybiz.ru

  • Cообщений: 810
  • Друзей:40
  • Поинты: 472
  • Предупреждений: 0
  • Онлайн:43д 23ч 46м
37

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 2 744
  • Поинты: 21
  • Предупреждений: 37
  • Онлайн:54д 23ч 59м
29

О спс


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

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

OFFLINE Отправлено

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

    -

  • Cообщений: 995
  • Друзей:23
  • Поинты: 3 571
  • Предупреждений: 0
  • Онлайн:31д 3ч 37м
15

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


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

OFFLINE Отправлено

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

    Новенький

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

OFFLINE Отправлено

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

    ...

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

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 35 098
  • Друзей:1158
  • Поинты: 2 260
  • Предупреждений: 0
  • Онлайн:168д 13ч 23м
1 161

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

http://rgho.st/7L6Cvn5crVT

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

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

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

85e05713dc23.gif2,03 62999aad7930.gif6,04

0c593ebf9caf.gif18,3 389ec147f5c0.gif31,2
    • 1
  • Наверх
  • Ответить

OFFLINE Отправлено

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

    в потоке

  • Cообщений: 997
  • Друзей:182
  • Поинты: 620
  • Предупреждений: 0
  • Онлайн:62д 23ч 32м
182

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

 

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

 

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


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

ONLINE Отправлено

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

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

  • Cообщений: 355
  • Друзей:26
  • Поинты: 1 374
  • Предупреждений: 0
  • Онлайн:26д 19ч 38м
18

Спасибо, Like!


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

OFFLINE Отправлено

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

    Пользователь

  • Cообщений: 867
  • Друзей:14
  • Поинты: 58
  • Предупреждений: 10
  • Онлайн:33д 9ч 59м
45

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 693
  • Поинты: 125
  • Предупреждений: 10
  • Онлайн:34д 4ч 21м
17

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


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

OFFLINE Отправлено

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

    Axe

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

От души 


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

OFFLINE Отправлено

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

    Продажа Likes.fm в магазине Likesfm.ru

  • Cообщений: 18 673
  • Поинты: 31
  • Предупреждений: 0
  • Онлайн:109д 19ч 3м
2 256

Благодарю


b556b5d2b359.gif   :]  Ad-kash.ru  Лучший магазин аккаунтов 

1b5142b553fc.gif   :]  Ad-kash.ru  Самые привлекательные цены, зайди проверь    (nod) 

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

OFFLINE Отправлено

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

    Пользователь

  • Cообщений: 952
  • Поинты: 1
  • Предупреждений: 0
  • Онлайн:18д 16ч 42м
22

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


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

OFFLINE Отправлено

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

    Новичок

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

ONLINE Отправлено

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

    Всем Бобра)

  • Cообщений: 17 593
  • Друзей:201
  • Поинты: 23 392
  • Предупреждений: 0
  • Онлайн:85д 1ч 19м
473

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

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 17 563
  • Друзей:147
  • Поинты: 29
  • Предупреждений: 0
  • Онлайн:80д 23ч 39м
631

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


87bcf871c6bd574be8397ba850907214.gif

20.03.2017

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

OFFLINE Отправлено

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

    Пользователь

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

годно.


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

OFFLINE Отправлено

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

    K P A C U B O

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

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


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

OFFLINE Отправлено

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

    Новичок

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

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


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



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