Осенняя шапка для твиттера. Новое оформление в twitter

Рассмотрим различные варианты оформления самых популярных соцсетей.

Оформляем Facebook

Размер аватара для Facebook: 160px × 160px, – однако Facebook требует исходник минимум 180×180.

Размер обложки страницы: 851px × 315px, – но можно загружать и более высокое разрешение (например, 1702×628). Стоит учитывать, что на мобильниках шапка обрезается справа, то есть всю важную информацию лучше помещать по левому краю.

Оформляем Twitter

Создание шапки для Twittera оказалось задачей нетривиальной. Рекомендуемые размеры, найденные в Сети, были 1500px × 500px, а также 1252px × 626px, но социальная сеть имеет резиновый дизайн, то есть растягивается по ширине экрана, и на больших экранах такая маленькая шапка растянутой будет выглядеть некачественной. Опытным путем был найден максимальный размер шапки – 1900px × 500px, – а дальше самое интересное: при загрузке такой шапки, она все равно обрезается! Выход был найден: к картинке 1900×500 добавляются белые поля сверху и снизу до размера 1900px × 633px, тогда все встает, как надо.

Оформляем Google Plus

Размер шапки: 1080px × 680px, максимальный размер – 2120px × 1192px, минимальный – 480px × 270px.

Размер аватара: от 250px × 250px, можно загружать большие разрешения. Необходимо также учитывать, что аватар круглый (то есть не нужно делать текст близко к краям – обрежется).

Оформляем Youtube

Итоговый размер изображения шапки подо все носители – 2560px × 1440px, размер «безопасной» зоны, где можно располагать логотипы и т.д., – 1546px x 423px.

Оформляем VK

Размер аватара справа – ширина 200px, высота до 500px.

Размер области с графическим меню: ширина для одного изображения без рамки (не в таблице) – 388px; максимальная ширина одного ряда двух и более изображений, помещаемый на главное меню не в таблицу (с вкл. опцией nopadding), – 376px; максимальная ширина для одного изображения, помещаемого без рамки в таблице, составляет 376px; максимальная ширина для двух и более изображений, помещаемый на главное меню в таблицу в один ряд (с вкл. опцией nopadding), – 370px (в том случае, если в таблице не присутствует «расширяющая» картинка 376×1px).

Предыстория дизайна профилей в Твитер. Бесплатный шаблон с разметкой и готовым дизайном изображения шапки профиля от Полин Кабрера

Предыстория

В феврале 2014 года на twitter.com стали тестировать новый дизайн профилей. Он очень напоминал дизайн Facebook или даже Google+. Основной фишкой стала его адаптивность под разные размеры экраном.

В апреле 2015 года Твиттер официально представил новый дизайн на суд общественности. Теперь нам снова придётся поработать над своим профилем.

Шаблон изображения шапки для Твиттер

Я не умею творить, но умею использовать то, что создают другие. В этой статье я предлагаю вам познакомиться с шаблоном изображения шапки для Твитер, предложенный Полин Кабрера (Pauline Cabrera) и немного доработанный мной до стандарта.

Особенностью изображения шапки в Твиттер является адаптивностью её размеров и пропорций под используемые пользователем устройства. Нам важно знать, что увидит, а что не увидит пользователь.

Методом проб и ошибок был определён ниже следующий шаблон изображения шапки для Твиттер .

Это тоже достаточно условный, но приближенный к реальности, вариант разметки. Возможно, вам придётся подогнать свой вариант или воспользоваться готовым дизайном, который я добавил в шаблон.

В предлагаемом ZIP-архиме (1,4 Мб) находится PSD (Photoshop) файл. Слой с разметкой помещены в папку Templates . Примеры в папку Example . Мой вариант изображения шапки для Твиттер в папку Design . Папка Design содержит несколько подпапок:

При этом потребуется дать доступ к настройкам вашего Твиттер аккаунта. Всё остальное произойдёт автоматически.

Недавно в Твиттере появилась интересная функция – можно добавить к своему аккаунту «шапку» с интересным дизайном. Особенно оригинально будет смотреться, если она будет гармонировать с фотографией в профиле. За счет такого объединения у вас может быть абсолютно уникальная страничка, которая будет не только красивой, но еще и непохожей ни на какие другие.

Как это делается?

Первоначально вам следует выбрать интересную картинку, после чего создать в каком-либо графическом редакторе (для этих целей подойдёт даже стандартный Paint) новый документ и выставить основные направляющие. Следующий шаг – сделать и сохранить отдельно картинки для аватара и шапки, после чего загрузить каждый отдельный элемент в Твиттер и создать уникальный дизайн собственного профиля. Стандартный размер шапки для Твитера должен составлять не менее 1252х626. Если же изображение больше, то соотношение сторон должно быть примерно таким же. Так как именно этот размер шапки в Твиттере позволяет получить информативную и в то же время полноценную картинку.

Первоначально ищем в интернете или на своём компьютере подходящее изображение шапки для Твиттера, после чего открываем его, например, в Paint. Желательно сразу найти такую картинку, которая будет равна тому стандарту, который предполагают размеры шапки для Twitter, или же иметь такое же соотношение. Чтобы реализовать уникальный вариант картинки, желательно сделать так, чтобы какая-то отдельная небольшая часть будущей «шапки» могла послужить вам аватаром для профиля. Открыв выбранное изображение в Paint, нажимаем кнопку «Выделить» и обводим тот участок, который будет нам служить аватаром, после чего нажимаем правой кнопкой мыши и выбираем «Обрезать».

Теперь у вас есть две картинки – одна побольше и прямоугольная, другая поменьше и квадратная. Заходим на наш профиль в Твиттере, нажимаем на изображение яйца в правом верхнем углу и нажимаем «Показать мой профиль». Далее нажимаем «Изменить профиль» и в появившемся окне нажимаем на «Добавьте шапку».

После того, как все будет добавлено, нажимаем «Сохранить изменения». Все, готово! Таким образом, вы можете создавать самые разнообразные красивые шапки для Твиттера.

Это только первый шаг к созданию оригинального дизайна блога в Твиттере. Дальше мы расскажем вам еще о множестве других действий, которые можно сделать, чтобы улучшить свой аккаунт.

Всем привет!
Уже давненько люди в сети начали говорить о том, что скоро появится новое оформление twitter аккаунтов. И вот недавно (когда именно не могу сказать) это свершилось! Теперь у нас есть возможность поменять старое оформление аккаунта на новое. Многие начали возмущаться, и говорить, что это оформление уж очень напоминает . И это действительно так. В новом оформлении у нас аватар располагается слева, а шапка находится сверху, как на фейсбуке. Лично меня устраивает данный вид моего профиля в твиттере. Но тем кто не хочет меня оформление твиттер дает возможность остаться со старым оформлением. Но вот на долго ли? Это остается вопросом, т.к. все мы помним, как нам вконтакте давали возможность не использовать микроблоговую стену, пока некоторые во всю пользовались новыми функциями стены. Но потом в один день нам всем просто взяли и поменяли стену, на микроблог. И покатилась волна возмущения, и надписи «Дуров, верни стену!» заполнили весь контакт. Тогда конечно пошли на некоторые уступки и некоторые функции были изменены. Но прежней стены пользователи так и не получили.
Так же, мне кажется, будет и с твиттером. Думаю через время старое оформление полностью уберут и оставят лишь новое.
А поэтому давайте сразу запасемся красивыми шапками и аватарками.

Новое оформление твиттера. Размеры шапки и аватара

Итак по новым стандартам в шапку твиттера рекомендуется ставить изображение размером 1500 на 500 пикселей.
Аватар же в свою очередь рекомендуют ставить размером 400 на 400 пикселей.
Достаточно большой аватар по сравнению с тем же фейсбуком получается. Так что есть где развернуться =)

Что еще нового в этом оформлении?
В этом же обновлении нам дают возможность приклеплять один твит наверху профиля. Как по мне это некое подобие статуса. В принципе вещь полезная. Особенно если у вас какой-то корпоративный микроблог в twitter, то вы можете самые интересные предложения, конкурсы или акции прикреплять сверху, чтобы всяких, заходивший на ваш профиль твиттерянин видел самую интересную информацию.

Прикрепить твит очень просто. Вам надо лишь нажать на три точки под твитом и выбрать «Прикрепить к вашей странице профиля»

Прикрепленный твит будет выделен большим шрифтом по сравнению с остальной лентой, и его будет сложно не заметить.

Также у нас поменялось отображение блоков «актуальные темы дня» и «близкие по духу». Теперь они находятся справа.
В принципе новое оформление твиттера мне нравится. Достаточно удобное, И что главное, теперь есть где развернуться — шапка будет больше, чем на фейсбуке! А пока нам не ввели никаких ограничений на изображения и текст на шапке — можно писать на ней всякие призывы к действию, либо опять таки какие-то акции озвучивать, либо контакты писать. Так что пользуемся нововведениями себе во благо! =)

С вами была Кристина,
Всем вам хорошего дня!

Это тоже может быть вам интересно

Как создать группу вконтакте, чем отличается публичная страница от группы, как наполнять группу (паблик)

Сервисы бесплатной и платной раскрутки групп и аккаунтов в социальных сетях

Вы можете изменить внешний вид своей страницы в социальных сетях с помощью многочисленных фонов, доступных на сайте Envato Market .

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

1. Анализируем макет

Twitter использует плавающий фон, который подстраивается под разные разрешения экрана. Из-за этого достаточно сложно рассчитать, какую именно область шапки будет видеть пользователь на том или ином устройстве. К счастью, есть определенные рекомендации, которые позволят нам избавиться от лишней работы. В Twitter рекомендуется использовать для шапки изображение размером 1500 х 500 пикселей. Однако, картинка все равно будет уменьшена системой до размера 1263 х 421 пикселей, но я считаю, что разумнее придерживаться официальных рекомендаций.

Шаг 1

Открываем Photoshop и переходим File - New (Файл - Новый) (Ctrl+N). Называем новый документ «Шапка твиттера» и устанавливаем Width (Ширина) на 1500 пикселей, а Height (Высота) - 500 пикселей. Resolution (Разрешение) - 72 пикселя/дюйм, фон оставляем белый.

Шаг 2

Переходим View - New Guide (Вид - Новая направляющая) и создаем направляющие линии. Сначала устанавливаем вертикальную и вводим значение 317 пикселей. Затем создаем еще одну вертикальную направляющую со значением 1188 пикселей. Таким образом, мы разделили рабочее полотно на три колонки. Центральная область будет отображаться на мобильных устройствах. Поэтому важно учитывать эти направляющие при разработке дизайна шапки.

2. Рисуем треугольную сетку

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

Шаг 1

Берем Rectangle Tool (U) (Прямоугольник) и выбираем любой яркий цвет, который будет выделяться на белом фоне (позже мы его изменим). Кликаем по рабочему полотну, чтобы вызвать окно Create Rectangle (Создать прямоугольник). В поле Width (Ширина) вводим 10 пикселей, а в Height (Высота) - 900 пикселей. Затем кликаем ОК и перемещаем созданный прямоугольник к правой направляющей.

Шаг 2

Используем Path Selection Tool (A) (Выделение контура), чтобы выделить прямоугольник (убедитесь, что на верхней панели параметров инструмента Path Operations (Операции с контуром) установлен на Add to Shape (Добавить к фигуре)). Переходим Edit - Copy (Редактирование - Копировать) (Ctrl+C), чтобы скопировать фигуру. Затем переходим Edit - Paste (Редактирование - Вставить) (Ctrl+V), чтобы вставить скопированный прямоугольник выше оригинала.

Далее Edit - Free Transform (Редактирование - Свободная трансформация) (Ctrl+T), поворачиваем копию так, чтобы нижний конец касался правого нижнего угла рабочего полотна и пересекал вертикальный прямоугольник точно по центру. Левый конец копии должен касаться верхней части рабочего полотна.

Шаг 3

Убедитесь, что предыдущий прямоугольник все еще выделен, переходим Edit - Copy (Редактирование - Копировать) (Ctrl+C) и Edit - Paste (Редактирование - Вставить) (Ctrl+V), чтобы скопировать фигуру. Затем Edit - Free Transform (Редактирование - Свободная трансформация) (Ctrl+T) и отражаем копию по горизонтали.

Шаг 4

Снова активируем Path Selection Tool (A) (Выделение контура), чтобы выделить две диагональные линии. Затем копируем и вставляем их. Активируем свободную трансформацию и перемещаем копии так, чтобы их левые концы касались левой направляющей линии.

Шаг 5

Скопированные прямоугольники все еще находятся в буфере обмена, поэтому еще раз жмем Ctrl+V, чтобы вставить новую копию. Перемещаем их левее на самый край рабочего полотна, чтобы из линий образовался треугольник. Убедитесь, что прямоугольники соединяются верхним и нижним концами с соседними линиями справа.

Шаг 6

Нам осталось добавить в левой части вертикальный прямоугольник. Копируем и вставляем вертикальную линию и переносим копию на левую направляющую.

3. Создаем треугольники для фото

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

Шаг 1

Называем слой с сеткой Border Lines (Сетка) и жмем на кнопку Lock All (Закрепить все) на панели слоев, чтобы случайно не изменить этот слой во время работы с фотографиями.

Шаг 2

Кликаем на фоновый слой, чтобы снять выделение со слоя Border Lines (Сетка). Затем берем Pen Tool (P) (Перо) в режиме Shape (Фигура) и устанавливаем цвет заливки, который будет выделятся на белом фоне и сетке. В левом верхнем углу рисуем треугольник. Убедитесь, что он находится под сеткой.

Шаг 3

Важно, чтобы Path Operations (Операции с контуром) на панели параметров инструмента был установлен на New Layer (Новый слой). Благодаря этому, каждый новый треугольник будет создан на отдельном слое. Рисуем второй треугольник, чтобы проверить, что все работает так, как надо.

Шаг 4

Продолжаем рисовать треугольники, пока не заполним всю сетку. У вас должно получиться 12 треугольников.

Шаг 5

Снимаем блокировку со слоя Border Lines (Сетка) и меняем цвет контура на белый.

4. Добавляем фото

Закончив с треугольниками, начинаем встраивать в композицию фотографии. Сложнее всего определить какой снимок в каком месте добавлять, чтобы все смотрелось красиво и гармонично. К счастью, данная техника позволяет нам свободно экспериментировать с размером и расположением фотографий.

Шаг 1

Сначала выбираем фигуру, поверх которой будем добавлять фото. Потом переходим File - Place Embedded (Файл - Поместить встроенные) и выбираем наш снимок. Размещаем его так, чтобы он полностью покрывал треугольник.

Шаг 2

Переходим Layer - Create Clipping Mask (Слой - Создать обтравочную маску) (Alt+Ctrl+G), чтобы трансформировать слой с фото в обтравочную маску для треугольника. При этом фото остается полностью независимым и доступно для редактирования. Благодаря этому мы можем разместить его так, как нам хочется, не беспокоясь о лишних деталях.

Шаг 3

Продолжаем процесс добавления фото и преобразования его в обтравочную маску до тех пор, пока не будут заполнены все 12 фигур.

5. Финальные эффекты

Из-за большого разнообразия фото такой дизайн может смотреться хаотично и несвязно. А отсутствие согласованности в композиции может смущать зрителя. Поэтому мы добавим несколько дополнительных эффектов, которые помогут нам создать целостный дизайн.

Шаг 1

Активируем самый верхний слой с фото на панели слоев. Он должен находиться сразу под слоем Border Lines (Сетка). Затем переходим Select - Color Range (Выделение - Цветовой диапазон). В выпадающем меню Select (Выбрать) выбираем Reds (Красные) и активируем опцию Invert (Инвертировать). Таким образом мы выделим все оттенки, кроме красных.

Шаг 2

Добавляем корректирующий слой Layer - New Adjustment Layer - Gradient Map (Слой - Новый корректирующий слой - Карта градиента). Photoshop автоматически применит выделение из предыдущего шага к маске корректирующего слоя. Это значит, что эффект градиента будет применен ко всему изображению, кроме красных участков.

Шаг 3

На панели Window - Properties (Окно - Свойства) открываем выпадающий список с выбором градиентов, там кликаем на значок шестеренки и выбираем градиент Photographic Toning. В появившемся диалоговом окне нажимаем кнопку Append (Добавить), чтобы добавить новые градиенты к текущему списку.

Прокручиваем в самый низ списка градиентов и выбираем Sepia-Blue 2.

Шаг 4

Устанавливаем непрозрачность корректирующего слоя на 60%, чтобы уменьшить действие эффекта.

Шаг 5

Зажимаем клавишу Alt и переходим Layer - Merge Visible (Слой - Объединить видимые) (Shift+Ctrl+E), чтобы создать один объединенный слой. Обесцвечиваем его Image - Adjustments - Desaturate (Изображение - Коррекция - Обесцветить) (Shift+Ctrl+U).

Шаг 6

Устанавливаем режим смешивания слоя на Screen (Осветление) и уменьшаем непрозрачность до 30%. Затем переходим Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) и устанавливаем Radius (Радиус) на 5 пикселей. Это придаст всей композиции эффект мягкого фокуса.

Шаг 7

Переходим File - Export As (Файл - Экспортировать как) и выбираем формат JPG. Устанавливаем максимально низкое качество, при котором на картинке не появляются слишком заметные искажения. Чем меньше вес файла, тем быстрее он будет загружаться на странице вашего профиля. После сохранения переходим в Twitter и обновляем шапку страницы.

Для того, чтобы создать подобную шапку для профиля в Twitter, важно использовать такую же тонировку и эффект мягкого фокуса. Примените корректирующий слой Карта градиента с похожими настройками и создайте объединенный слой с легким размытием.

Это достаточно универсальный дизайн, который можно использовать с любыми фотографиями любой тематики.

Красивый геометрический дизайн — это отличный способ выделить ваш профиль в Twitter. В этом уроке вы узнали, как с помощью нескольких трюков создать идеальные углы без каких-либо математических расчётов. После этого мы добавили коллекцию фотографий и применили несколько дополнительных эффектов в виде тонировки и мягкого фокуса, чтобы композиция выглядела целостной.