Как нарисовать фон для Twitter? Ну что ж, сегодня пятница, впереди выходные, а значит можно либо повалять дурака, либо поупражняться в навыках овладения Фотошопом. Нарисовать свой собственный фон для Twitter на самом деле не так уж и сложно. Для чего это вообще нужно, почитайте здесь: TODO list для нового аккаунта в Twitter.

Для начала несколько слов о том, какими бывают фоны для Twitter. Условно их можно разделить на три типа:

1. Одна большая картинка (фотография, рисунок и т.п.)
2. Одна мелкая картинка без повторов
3. Повторяющаяся картинка (паттерн)

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

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

Окей! Это все присказка была. Давайте рассмотрим вариант создания собственного фона для Twitter в самом, на мой взгляд, правильном варианте исполнения. А именно: красивая однотонная картинка без повторов + фотография + несколько контактных данных. Для его создания используем Фотошоп любой версии.

Для начала следует запомнить, что ширина рабочего пространства в Twitter, суть, величина постоянная и составляет ровно 756 пикселей. Сверху имеется отступ высотой в 60 пикселей, где размещено лого Twitter и главная навигация. Поля для ленты сообщений, под навигацию и в подвале всегда белые.

Кроме того, рабочее пространство всегда находится в центре монитора. Поэтому, в зависимости от размеров и разрешения вашего монитора, боковые поля будут разные. Например, если у вас выставлено в настройках разрешение экрана 1024х768, то боковые поля будут равны (1024 – 756)/2 = по 134 пикселя. Если же разрешение монитора 1280х1024, то соответственно по 262 пикселя. Исходя из данных размеров, левое боковое поле, которое по обыкновению и используется для размещения фотки и текста описания, имеет смысл делать не шире 140 пикселей. Так и поступим.

Создадим новый документ в Фотошоп. Пусть он будет 1024х768. Зальем его темно-серым цветом #5b5b5b:

Теперь выставим линейки на 60 пикселей сверху и на 140 пикселей слева, ограничив, соответственно, верхнюю и левую часть:

Добавим новый слой. Теперь в палитре выставим еще более темный серый цвет #333333, затем возьмем инструмент Окружность (Ellipse Tool) и станем в произвольном порядке рисовать окружности. Чтобы окружности получались именно круглыми, а не овалами, удерживайте нажатой клавишу Shift.

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

Затем в каждом слое уменьшим прозрачность (Opacity) до 50%. Получим вот такую симпатичную основу:

Добавим новый слой, на котором разместим свою фотку. Инструмент Лассо (Polygonal Lasso Tool) вам в помощь. Вырезаем с его помощью фигуру из фона, открыв фотографию в новом документе. Чем точнее и аккуратнее будете действовать, тем качественнее получатся края. Затем копируем выделение (Ctrl+C) и вставляем (Ctrl+V) его на новом слое на нашем фоне:

При необходимости можно подкорректировать расположение и поворот фигуры, используя Edit – Transform.

Затем на новых слоях последовательно набросаем всякого текста, используя всевозможные шрифты, которых в сети просто море для свободного скачивания. Вот, к примеру, пара замечательных ресурсов urbanfonts.com и dafont.com.

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

Краткое дополнение: так как фон рисовался под достаточно маленькое разрешение экрана, а у многих сейчас дома мониторы гораздо крупнее, то чтобы картинка фона не плавала одиноко посреди белого пространства, при установке фона в настройках нужно будет заменить общий цвет фона на подходящий к вашей картинке. В нашем примере это цвет #5b5b5b. Ну и в боковой панели тоже следует подобрать цвета фона и ссылок, чтобы выглядело кошерно. Думаю, с этим вы легко справитесь.