Для начинающих

Новое оформление в twitter. Все ли изменения к лучшему? Как создать и оформить твиттер-аккаунт для компании Как это делается

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

Шаг 1.
Создаем в фотошопе новый документ размером 1252х626 пикселей.

Шаг 2.
В левом верхнем углу создаем прямоугольник размером 540х60 пикселей.

Шаг 3.
Потом создаем квадрат размером 175х175 пикселей и прислоняем его к правому нижнему углу белого прямоугольника, как на рисунке ниже. По всем сторонам квадрата устанавливаем направляющие.

Шаг 4.
Теперь берем любую картинку, которую мы хотим установить в шапку. Желательно размер картинки не меньше, чем 1252х626 пикселей. В пересечении направляющих устанавливаем часть картинки, которая будет аватаром в Твиттере.

Шаг 5.
После этого сохраняем первую картинку полностью размером 1252х626 пикселей. Потом кадрируем изображение по размеру аватара и сохраняем вторую картинку размером 175х175 пикселей.

Шаг 6.
Переходим в аккаунт в Твиттере, выбираем пункт «Настройки».

Шаг 7.
Update 22.11.12: Разработчики перенесли блок смены изображения в шапке в пункт меню «Профиль». Далее в меню слева выбираем пункт «Оформление» и нажимаем на кнопку «Изменить изображение шапки». В открывшемся диалоговом окошке выбираем первую картинку у себя на компьютере и загружаем ее.

Шаг 8.
На следующем шаге нам предложат отрегулировать масштаб картинки, если надо. После этого нажимаем «Сохранить».

Шаг 9.
Теперь в меню слева выбираем пункт «Профиль» и нажимаем кнопку «Изменить фотографию». Загружаем вторую картинку с изображением аватара.

Шаг 10.
В результате получаем собственный дизайн шапки в Твиттере.

P.S. Постовой. А вы знаете, что иногда, чтобы посетители увидели дизайн вашего сайта, нужно, как минимум, знать

Вы можете изменить внешний вид своей страницы в социальных сетях с помощью многочисленных фонов, доступных на сайте 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. В этом уроке вы узнали, как с помощью нескольких трюков создать идеальные углы без каких-либо математических расчётов. После этого мы добавили коллекцию фотографий и применили несколько дополнительных эффектов в виде тонировки и мягкого фокуса, чтобы композиция выглядела целостной.

Когда интернет-пользователь впервые видит ваш профиль в «Твиттере», он обращает внимание на его оформление, а после этого читает описание и твиты. Из этой статьи вы узнаете, как повысить визуальную привлекательность профиля в сервисе микроблогов и увеличить эффективность социального маркетинга с помощью шапок для «Твиттера».

Как добавить шапку в «Твиттере»

Чтобы установить шапку, следуйте описанному алгоритму:

Войдите в свой аккаунт в «Твиттере».
Воспользуйтесь меню «Изменить профиль» в правом верхнем углу страницы.
Выберите опцию «Добавить шапку».
Выберите подготовленное изображение на жестком диске компьютера. Рекомендованный размер шапки составляет 1500 на 500 пикселей.
Сохраните изменения.

Также вы можете воспользоваться приложениями для смены обложки, например, TwitrCovers . Достаточно выбрать понравившуюся шапку, авторизовать приложение в вашем аккаунте и сохранить изменения. Наконец, вы можете создать шапку самостоятельно, воспользовавшись сервисом Canva или другими инструментами для работы с визуальным контентом .

Как использовать обложки для «Твиттера» для продвижения бизнеса

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

1. Формируйте доверие с помощью обложки

Обратите внимание на аккаунт интернет-маркетолога Ребекки Рэдис . Яркий цвет шапки и фото владельца аккаунта легко привлекают внимание пользователей. Кроме того, обложка включает информацию, формирующую доверие к специалисту:

Сведения о сайтах, публикующих статьи эксперта.
Адрес личного сайта маркетолога.
Информация о достижениях: Ребекка Рэдис сообщает, что сайт BuzzSumo.com включил ее в десятку лучших контент-маркетологов 2014 года.
Рекламная декларация. Специалист коротко объясняет выгоду, которую получают ее клиенты.

Маркетинговый совет: у вас есть поводы для гордости? Расскажите о них в шапке аккаунта.

2. Превратите шапку в информационный баннер

Шапка твиттер-аккаунта агентства WebSearchSocial - это информационный или рекламный баннер. Он коротко описывает суть бизнеса компании. Пользователям «Твиттер» достаточно секунды, чтобы понять, интересно ли им взаимодействовать с агентством.

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

3. Анонсируйте отраслевое мероприятие

Маркетинговое агентство MCNG использовало шапку, чтобы анонсировать отраслевую конференцию. Руководитель агентства выступит на ней в качестве спикера. Обложка эффективно привлекает внимание благодаря ярким цветам в оформлении, информирует пользователей о мероприятии и призывает принять в нем участие.

Маркетинговый совет: не упускайте возможности рассказать фолловерам о мероприятиях, в которых вы принимаете участие.

4. Показывайте товар лицом

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

Маркетинговый совет: если вы производите и продаете товары, не ломайте голову над вариантами шапок. Сделайте профессиональные фото продукта, дополните их слоганом и загрузите в «Твиттер». Если вы продаете услуги, сфотографируйте ваших сотрудников и клиентов. Представьте, какую интересную шапку может сделать стоматологическая клиника, автомастерская или строительная компания.

5. Анонсируйте большие формы контента

Маркетинговое агентство OverGo опубликовало электронную книгу. Организация рассказывает об этом своим фолловерам с помощью обложки аккаунта.

Маркетинговый совет: если вы выпустили книгу, провели важное исследование, опубликовали white paper, анонсируйте такой контент с помощью шапки. Измените URL в профиле, чтобы отсылать пользователей «Твиттера» на страницу, с которой можно скачать книгу.

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

Оформляем 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).

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

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

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

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

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

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

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

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

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

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