Twitter Background Design How-To и лучшие практики

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

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


Вообще говоря, существует три основных подхода к созданию фона для Твиттера (кроме скучного сплошного цвета!):

1. Повторение фонового рисунка

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

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

2. Фоновая графика исчезает в цвете


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

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

3. Очень большой фоновый рисунок

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

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Профиль в твиттере

Боковая панель или нет боковой панели?


Одной из тенденций, которая возникла в результате творчества за дизайном фона в Twitter, является использование боковой панели. Боковая панель — это область экранной недвижимости, которая используется для отображения дополнительной информации о пользователе, такой как большое изображение профиля, биография и списки веб-сайтов и других социальных сетей. Из-за нехватки места на мониторах с разрешением 1024 × 768, профили, использующие подход боковой панели, обычно размещают только 1280 × 1024 вверх, при этом все остальное скрывается основным контентом веб-сайта Twitter.

Я собрал удобный шаблон, чтобы вы могли визуализировать, как ваша тема будет выглядеть на популярных разрешениях 1024 × 768, 1280 × 1024, 1680 × 1050 и 2000 × 1920. Откройте PSD и поместите ваш дизайн в папку Template.

Давайте создадим наш собственный

Дизайн профиля в Твиттере

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

Откройте Twiter-BG-Template.psd в Photoshop. Мы согласимся на размещение 1280 × 1024 и выше, в первую очередь, с чем-то меньшим, просто видя меньше дизайна.

Выберите сплошной цвет для фона, я выбираю теплый серый. Залейте фоновый слой, используя Option / Alt + Backspace.

Загрузите линованный ресурс из SXC и откройте его в Photoshop, вырежьте часть бумаги с помощью Pen Tool.

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

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

Щелкните правой кнопкой мыши эффект Drop Shadow из палитры Layers и выберите Create Layer, затем нажмите CMD + T и Warp, чтобы исказить тень.

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

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

Откройте это изображение кофейной чашки в новый документ, создайте маску вокруг чашки и вырежьте основной объект.

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

Высокая чашка в реальной жизни будет отбрасывать намного большую тень, поэтому создайте слой из Drop Shadow и используйте настройки Warp, чтобы растянуть тень, добавляя гораздо больше реализма. Удалите непрозрачность, чтобы избежать выделения тени в дизайне.

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

Измените страницу с настройкой Деформации, чтобы изогнуть нижний угол вверх.

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

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

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

Откройте свою фотографию и поместите ее в область Polaroid. Используйте маску, чтобы срезать лишнее.

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

Напишите личное сообщение в нижнюю часть Polaroid, используя кисть или готовый рукописный шрифт.

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

Обрежьте изображение, чтобы разместить только графические элементы, остальное — просто плоский цвет, который можно воспроизвести в настройках Twitter.

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

Войдите в свой профиль Twitter и перейдите на вкладку «Дизайн». Найдите фоновое изображение и загрузите его на сервер.

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

Дизайн профиля в Твиттере

С дизайном теперь перейдите в свой профиль, чтобы проверить тему по-настоящему. Если вам понравилась эта статья, приходите и поздоровайтесь со мной в Twitter .



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.