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



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

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

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

ONLINE Отправлено

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

    ♥♥♥akk-best.twopay.ru♥♥♥ Лучший магазин!

  • Cообщений: 33 680
  • Друзей:1056
  • Поинты: 911
  • Предупреждений: 0
  • Онлайн:158д 7ч 52м
1 108

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

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

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

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,02 cdc280d064c3.jpg6,02

0c593ebf9caf.gif18,3ece2a95df3b4.gif31,12
    • 7
  • Наверх
  • Ответить

OFFLINE Отправлено

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

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

  • Cообщений: 806
  • Друзей:38
  • Поинты: 429
  • Предупреждений: 0
  • Онлайн:43д 5ч 22м
37

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 2 704
  • Поинты: 4
  • Предупреждений: 37
  • Онлайн:53д 9ч 36м
26

О спс


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

OFFLINE Отправлено

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

    Рисую Арты по фото - goo.gl/9wY18e

  • Cообщений: 820
  • Друзей:16
  • Поинты: 2 611
  • Предупреждений: 0
  • Онлайн:24д 20ч 3м
7

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


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

OFFLINE Отправлено

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

    Новенький

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

OFFLINE Отправлено

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

    ...

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

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


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

ONLINE Отправлено

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

    ♥♥♥akk-best.twopay.ru♥♥♥ Лучший магазин!

  • Cообщений: 33 680
  • Друзей:1056
  • Поинты: 911
  • Предупреждений: 0
  • Онлайн:158д 7ч 52м
1 108

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

http://rgho.st/7L6Cvn5crVT

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

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

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

85e05713dc23.gif2,02 cdc280d064c3.jpg6,02

0c593ebf9caf.gif18,3ece2a95df3b4.gif31,12
    • 1
  • Наверх
  • Ответить

OFFLINE Отправлено

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

    в потоке

  • Cообщений: 926
  • Друзей:154
  • Поинты: 1 608
  • Предупреждений: 0
  • Онлайн:54д 16м
164

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

 

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

 

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 291
  • Друзей:23
  • Поинты: 976
  • Предупреждений: 0
  • Онлайн:20д 22ч 51м
13

Спасибо, Like!


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

OFFLINE Отправлено

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

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

  • Cообщений: 866
  • Друзей:14
  • Поинты: 47
  • Предупреждений: 10
  • Онлайн:33д 6ч 23м
45

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 639
  • Поинты: 166
  • Предупреждений: 10
  • Онлайн:33д 5ч 41м
17

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


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

OFFLINE Отправлено

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

    Axe

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

От души 


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

OFFLINE Отправлено

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

    Магазин аккаунтов Vkmix - Likesfm.ru

  • Cообщений: 17 256
  • Друзей:19
  • Поинты: 3 669
  • Предупреждений: 0
  • Онлайн:97д 12ч 1м
1 776

Благодарю


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

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

OFFLINE Отправлено

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

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

  • Cообщений: 923
  • Поинты: 33
  • Предупреждений: 0
  • Онлайн:17д 14ч 2м
22

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


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

OFFLINE Отправлено

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

    Новичок

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

OFFLINE Отправлено

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

    Всем Бобра)

  • Cообщений: 15 261
  • Друзей:175
  • Поинты: 15 961
  • Предупреждений: 0
  • Онлайн:76д 1ч 42м
366

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

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


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

OFFLINE Отправлено

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

    Kuponseller.com магазин купонов и аккаунтов

  • Cообщений: 17 387
  • Друзей:141
  • Поинты: 3
  • Предупреждений: 0
  • Онлайн:79д 12ч 39м
630

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


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

OFFLINE Отправлено

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

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

  • Cообщений: 725
  • Друзей:1
  • Поинты: 9
  • Предупреждений: 0
  • Онлайн:4д 16ч 6м
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
  • Наверх
  • Ответить



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