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



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

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

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

OFFLINE Отправлено

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

    Магазин акков соц.сетей kupikupon.biz

  • Cообщений: 36 942
  • Друзей:1278
  • Поинты: 3 555
  • Предупреждений: 0
  • Онлайн:189д 9ч 21м
1 293

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

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

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

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




36fad105e8dc.gif                                                          21ede01a7fe8.png  24,08
 
8130c5c44bb9.gif 24.8                                   de9bef911a_7777598_26726106.gif
    • 7
  • Наверх
  • Ответить

OFFLINE Отправлено

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

    SMM | Proxy | User-агенты | Тексты

  • Cообщений: 935
  • Друзей:52
  • Поинты: 27
  • Предупреждений: 0
  • Онлайн:50д 1ч 49м
42

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 2 838
  • Поинты: 11
  • Предупреждений: 0
  • Онлайн:60д 2ч 12м
34

О спс


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

OFFLINE Отправлено

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

    Выдаю займ: goo.gl/Di94Cz

  • Cообщений: 1 645
  • Друзей:41
  • Поинты: 5 622
  • Предупреждений: 0
  • Онлайн:56д 20ч 14м
54

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


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

OFFLINE Отправлено

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

    Новенький

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

OFFLINE Отправлено

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

    ...

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

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


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

OFFLINE Отправлено

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

    Магазин акков соц.сетей kupikupon.biz

  • Cообщений: 36 942
  • Друзей:1278
  • Поинты: 3 555
  • Предупреждений: 0
  • Онлайн:189д 9ч 21м
1 293

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

http://rgho.st/7L6Cvn5crVT

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

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

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

36fad105e8dc.gif                                                          21ede01a7fe8.png  24,08
 
8130c5c44bb9.gif 24.8                                   de9bef911a_7777598_26726106.gif
    • 1
  • Наверх
  • Ответить

OFFLINE Отправлено

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

    в потоке

  • Cообщений: 1 541
  • Друзей:240
  • Поинты: 0
  • Предупреждений: 0
  • Онлайн:91д 23ч 36м
320

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

 

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

 

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 387
  • Друзей:42
  • Поинты: 38
  • Предупреждений: 0
  • Онлайн:33д 7ч 27м
20

Спасибо, like!


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

OFFLINE Отправлено

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

    Уровень 2

  • Cообщений: 886
  • Друзей:15
  • Поинты: 26
  • Предупреждений: 10
  • Онлайн:34д 18ч 50м
47

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 802
  • Поинты: 5
  • Предупреждений: 10
  • Онлайн:40д 25м
18

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


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

OFFLINE Отправлено

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

    Axe

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

От души 


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

OFFLINE Отправлено

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

    Premium раскрутка VK/Insta smm-vtope.ru

  • Cообщений: 19 567
  • Друзей:1748
  • Поинты: 3 123
  • Предупреждений: 0
  • Онлайн:139д 1ч 10м
2 497

Благодарю


h_1442823991_9987470_3634f5df94.gif

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

OFFLINE Отправлено

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

    Уровень 2

  • Cообщений: 982
  • Поинты: 27
  • Предупреждений: 0
  • Онлайн:20д 7ч 21м
23

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


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

OFFLINE Отправлено

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

    Уровень 1

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

ONLINE Отправлено

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

    Всем Бобра)

  • Cообщений: 24 625
  • Друзей:272
  • Поинты: 38 428
  • Предупреждений: 0
  • Онлайн:136д 16ч 17м
1 048

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

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


7fcc957951ae.gif

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

OFFLINE Отправлено

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

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

  • Cообщений: 17 642
  • Друзей:164
  • Поинты: 0
  • Предупреждений: 0
  • Онлайн:82д 17ч 26м
631

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


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

OFFLINE Отправлено

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

    Уровень 2

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

годно.


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

OFFLINE Отправлено

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

    K P A C U B O

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

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


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

OFFLINE Отправлено

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

    Уровень 1

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

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


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



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