Как сделать фон для twitter? Интересное оформление темы для твиттера

твиттер фон и тема

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

Пример тому моя тема оформления на твиттере - http://twitter.com/mr_freegold (подписывайтесь на мой твиттер аккаунт :smile: Обещаю добавлять только интересный и полезный материал).

Фон для twitter я буду рисовать в фотошопе.

Приступим к созданию нашего фона.

1. Создаем новый документ File→New (Файл→Новый или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп).

В окошке я указал следующие параметры:

фотошоп новый документ

2. Выбираем инструмент фотошоп новый документPaint Bucket Tool (Ведро, G) и заливаем наш документ (я выбрал цвет FFEFCC).

фотошоп новый документ

3. Открываем браузер и делаем Print Screen (жмем кнопку PrtScr на клавиатуре) нашего блога.

4. После этого вставляем картинку в фотошоп идем в меню Edit→Past (Правка→Вставить) или жмем CTRL+V.

5. С помощью инструмента указатель фотошопMove Tool (Указатель, V) двигаем картинку как нам нужно (также картинку двигать можно стрелочками вверх, вниз, вправо и влево на клавиатуре).

фотошоп передвижение

6. После этого жмем D на клавиатуре (устанавливаем стандартные цвета в фотошопе) и выбираем Быструю маску (Q).

фотошоп быстрая маска

Далее берем инструмент фотошоп заливка градиентомGradient Toll (Заливка градиентом, G) и заливам наше выделение слева на право.

фотошоп быстрая маска

Теперь выходим из режима быстрой маски (Q). С помощью клавиши Delete (нажимаем несколько раз) удаляем часть слоя, пока картинка не перейдет плавно в фон. Убираем выделение, жмем CTRL+D.

Теперь остается сделать плавный переход сверху вниз (повторяем все действия, только градиентом заливаем уже сверху вниз :smile:).

7. Теперь размоем наш фон. Идем Filter→Blur→Gaussian Blur (Фильтр→Размытие→Размытие по Гауссу) и поставим у слоя Opacity (Непрозрачность) - 70%.

фотошоп размытие

фотошоп непрозрачность

8. Приступаем к созданию левой колонки. Создаем новый слой – нажимаем по пиктограмме фотошоп новый слой (в палитре Layers (Слои), F7) или просто жмем Shift+Ctrl+N (у нас получился новый прозрачный слой).

После этого выбираем инструмент фотошоп прямоугольное выделение Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение.

фотошоп прямоугольное выделение

Далее берем инструмент фотошоп заливка градиентомGradient Toll (Заливка градиентом, G) и заливаем (цвета я выбрал такие - передний фон: #ffeabf, задний фон: #ffeecc.) наше выделение сверху вниз. Убираем выделение - CTRL+D

фотошоп градиет цвета

Cтавим у слоя Opacity (Непрозрачность) - 70%.

9. Теперь сделаем тень для левой колонки. Для этого создаем новый слой - Shift+Ctrl+N. Далее используем инструмент фотошоп рисование кистьюBrush Tool (Кисть, B). Выбираем мягкую кисточку размером - 4 пикселя, цвет: #3e3e3e и рисуем мышкой (с нажатой клавишей Shift) линию сверху вниз.

фотошоп кисть линия

Теперь размоем нашу линию. Идем Filter→Blur→Gaussian Blur (Фильтр→Размытие→Размытие по Гауссу), значение: 1.

фотошоп кисть линия

10. После этого удалим часть тени. Берем инструмент фотошоп резинка ластикErase Tool (Ластик, E), размер кисти 500 пикселей, ставим для него мягкие края и несколько раз кликаем мышкой по концу линии.

фотошоп ластик

фотошоп ластик

Теперь нужно слой с нашей тенью переместить за слой с фоном. Для этого в палитре Layers (Слои, F7), выбираем мышкой наш слой и переносим его ниже слоя с фоном.

После этого для слоя с тенью ставим Opacity (Непрозрачность) - 25%.

фотошоп ластик

фотошоп ластик

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

11. Далее набираем текст, я написал - "Дизайн: Freegold.ru", "Freegold.ru", "Блог об Интернете", "Досье автора", "Имя: Сергей", "Ник: Klerik", "ICQ: 123456789", "Блог: Freegold.ru", "“Жизнь — слишком серьезная штука, чтобы говорить о ней всерьез”", "Оскар Уайльд". С помощью инструмента указатель фотошопMove Tool (Указатель, V) расположим слои с текстом в нужных нам местах.

фотошоп ластик

12. Для слоя "Дизайн: Freegold.ru" я использовал такие настройки текста:

фотошоп работа с текстом

Для слоя "Freegold.ru":

фотошоп текст

Для слоя "Блог об Интернете":

фотошоп текст

Для слоя "Досье автора":

фотошоп текст

Для слоев "Имя: Сергей", "Ник: Klerik", "ICQ: 123456789", "Блог: Freegold.ru":

фотошоп текст

Для слоя "“Жизнь — слишком серьезная штука, чтобы говорить о ней всерьез”":

фотошоп текст

Для слоя "Оскар Уайльд":

фотошоп текст

В итоге получилось:

фотошоп текст

13. Теперь создаем подложки для нашего текста. Для этого используем инструмент фотошоп формыRounded Rectangule Tool (Закругленная форма, U), с такими настройками.

фотошоп настройка форм

После этого рисуем саму подложку. Далее дважды щелкаем по слою с подложкой в палитре Layers (Слои, F7) и открывается окошко со стилями слоя, выбираем градиентную заливку - Gradient Overlay (Заливка градиентом) и ставим следующие настройки. Щелкаем два раза по полоске с градиентом:

фотошоп настройка форм

В следующем окошке щелкаем мышкой по левому маркеру:

фотошоп настройка форм

В открывшемся окошке, внизу указываем цвет f5daa4 и жмем OK.

фотошоп настройка форм

Далее щелкаем по правому маркеру и в открывшемся окошке указываем цвет f4cc93 и жмем OK.

После этого для слоя с подложкой выбираем стиль Stroke (Обводка):

фотошоп настройка форм

Получилась вот такая, симпатичная подложка:

фотошоп настройка форм

По аналогии создадим вторую подложку:

фотошоп настройка форм

После этого сделаем "шапочку" для второй подложки. Идем в палитру Layers (Слои, F7). Выбираем слой с нашей подложкой, зажимаем клавишу CTRL и кликаем мышкой по пиктограмке слоя.

фотошоп выделение форм

Должно появиться выделение слоя.

фотошоп выделение форм

После этого выбираем инструмент фотошоп прямоугольное выделениеRectangular Marque Tool (Прямоугольное выделение, M). Далее нам нужно удалить большую часть выделения (оставить только сверху). Нажимаем клавишу ALT и не отпуская рисуем новое выделение.

фотошоп выделение форм

Далее создаем новый слой Shift+Ctrl+N и заливаем его произвольным цветом. Далее идем в настройки стилей слоя и выбираем градиентную заливку - Gradient Overlay (Заливка градиентом) со следующими настройками.

фотошоп слой градиентная заливка

и у нас получилась вот такая красота.

фотошоп заливка слоя

15. Далее нам осталось вставить картинку автора блога. Для этого рисуем сначала одну форму-подложку.

фотошоп заливка слоя

В свойствах стилей слоя с формой ставим такие настройки.

фотошоп заливка слоя

фотошоп заливка слоя

фотошоп заливка слоя

Вот что получилось.

фотошоп заливка слоя

Далее рисуем еще одну форму внутри предыдущей.

фотошоп заливка слоя

Выставляем такие настройки для слоя.

фотошоп заливка слоя

фотошоп заливка слоя

получилось вот.

фотошоп заливка слоя

После этого вставляем саму картинку автора (у нас картинка автора будет представлена изображением Шрека :smile:). Открываем заранее подготовленную картинку в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш документ. Для этого выбираем инструмент фотошоп копировать слойMove Tool, выбираем слой с картинкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя). Во вкладочке Document (Документ) выбираем название документа куда будет копироваться слой с картинкой.

фотошоп заливка слоя

После этого слой с картинкой должен скопироваться в наш основной документ.

фотошоп заливка слоя

Нам нужна картинка, на которой изображена голова Шрека, все остальное можно удалить.
Для этого берем инструмент фотошоп прямоугольное выделениеRectangular Marque Tool (Прямоугольное выделение, M) и рисуем нужное нам выделение, что бы выделение получалось пропорциональным нужно при рисовании держать нажатой клавишу Shift.

фотошоп заливка слоя

Само выделение можно двигать клавишами клавиатуры вверх, вниз, право и лево.

Теперь давайте удалим ненужную часть изображения, оставив только часть со Шреком. Для этого нажимаем Shift+Ctrl+I или Select-Invere (Выделить-Инвертировать) и после этого просто нажимаем Delete. Далее снимаем наше выделение Ctrl+D.

Берем инструмент Move Tool и переносим нашу картинку в место с нашими формами. Если у картинка получилась большого размера, чем нужно - ее нужно уменьшить. Для этого идем Edit→Free Transform (Правка→Свободная Трансформация, Ctrl+T). Вокруг картинки появляется рамочка с маркерами. Далее для равномерного уменьшения картинки, нажмем Shift и не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем картинку как нам нужно и жмем Enter.

фотошоп трансформация слоя

фотошоп заливка слоя

Теперь вставим картинку автора в нашу форму. Для этого в палитре Layers (Слои, F7) выбираем слои с нашей формой, далее с нажатой клавишей Ctrl кликаем по пиктограмме слоя, должно появиться выделение формы.

Далее выбираем слой с картинкой автора и нажимаем кнопочку фотошоп работа с масками

фотошоп заливка слоя

Картинка автора должна вставиться в форму.

фотошоп заливка слоя

Нам осталось добавить Шреку его обрезанное ухо :smile:

Для этого идем в палитру со слоями (жмем F7), выделяем наш слой с картинкой и выбираем пиктограмму с маской слоя.

фотошоп заливка слоя

Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).

фотошоп заливка слоя

После этого выбираем инструмент фотошоп заливка слояBrush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет - как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться.

Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто).

Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (ухо выходит за пределы картинки :smile:).

фотошоп заливка слоя

В итоге у нас получилось вот такая картинка.

фотошоп заливка слоя

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

Теперь осталось только вставить наш фон в твиттер. Идем на Twitter.com (заходим под своим логином).

Далее в меню (справа-сверху) выбираем вкладочку Settings (Настройки), далее выбираем вкладку Design (Дизайн).

фотошоп заливка слоя

В самом низу есть кнопочка Change background image, нажимаем ее.

фотошоп заливка слоя

Появляется форма для загрузки изображения картинки (обратите внимание, картинка не должна быть весом больше 800 килобайт) с компьютера. Нажимаем кнопочку Обзор и выбираем картинку, после выбора картинки жмем кнопку Save Changes (Сохранить изменения).

фотошоп заливка слоя

Теперь осталось изменить оформление основных элементов. Кликаем по кнопке Change design colors.

фотошоп заливка слоя

Перед нами открывается 5 квадратов: background (цвет фона), text (цвет текста), links (цвет ссылок), sidebar (цвет фона боковой колонки), sidebar border (цвет обводки боковой колонки).

фотошоп заливка слоя

Щелкаем по первому квадрату. Указываем/выбираем нужный нам цвет и нажимаем кнопку Done.

фотошоп заливка слоя

По аналогии поступаем с каждым из квадратов.

Вот и все! Получилась такая длинная история, а наша картинка отлично вписалась в виде обои для твиттера :ad:

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

Так же предлагаю всем желающим бесплатно скачать фон для твиттера в psd формате.

На сегодня это все чем я хотел поделиться с вами. Готов ответить на ваши вопросы (понравился ли вам урок? какие уроки вы бы хотели видеть в будущем? понятно ли изложенно? и т.д.), если таковые будут, оставляйте их в комментария.

Ваш Klerik, автор блога об Интернет Blogohelp.ru

p.s. Напоминаю, вы можете подписаться на мою рассылку по фотошопу и всегда быть вкурсе нового материала о программе Adobe Photoshop на блоге (обещаю только интересный и полезный материал). Подпишитесь прямо сейчас и бесплатно получите мою авторскую книгу с уроками фотошоп - 6 авторских уроков для программы Adobe Photoshop + бонус!


Ваше имя: *
Ваш e-mail: *


Подписчиков:

Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop. 

Облако тегов:

Отзывов к посту "Как сделать фон для twitter? Интересное оформление темы для твиттера" уже 27:

Аватар пользователя Людмила

Уроки мне твои нравятся. Многие очень помогли в работе в ФШ. Этот дизайн хорош, интересно его сделать самой. Но жаль, что я не работаю в twitterе.

Аватар пользователя Jam99998

Спасибо, у меня получилось! Класс)

Аватар пользователя samwicer

Спасибо, за интересную статью!попробую создать что-то свое и написать об этом свою статью))

Аватар пользователя Сергей Иванов

пожалуйста, заглядывай еще на огонек)

Аватар пользователя Станислав

Спасибо вам за очень полезный урок, доступное изложение. Делал все по инструкции, получилось замечательно! Заодно навыки Фотошопа подтянул и оформление Твиттера улучшил. Еще раз вам благодарен! Станислав.

Аватар пользователя Сергей Иванов

Станислав, очень рад за вас и что моя инструкция вам помогла.

Аватар пользователя John Ray

Спасибо=) Интересовал подход к рисованию таких фонов. Долго думал сам, в голову приходило только рисование картинки в углу и подбор цветов по краям=)

Аватар пользователя Сергей Иванов

Очень рад тому, что моя статья вам понравилась)

Аватар пользователя веб-мастер

А у меня картинка не на весь экран в твиттере, а слева, и левая колонка получилась слишком широкая. Может, нужна точная ширина?

Аватар пользователя Сергей Иванов

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

Аватар пользователя siberiashaman

Зделал примерно так как у вас написано, что-то картинка не помещается вся слева, да и у вас она уже смотрится не так как первом скрине. Стоит сделать левую колонку поменьше?

Аватар пользователя Сергей Иванов

можно поконретнее, что и как у вас не получается?

Аватар пользователя siberiashaman

Ответил в icq, так удобнее будет)

Аватар пользователя Вячеслав

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

Аватар пользователя Русаков Вячеслав

ОООчень подробно. Хороший материал.
Кстати, по запросу в гугле "как самому сделать фон твиттера" первая позиция. Это отлично! :)

Аватар пользователя nebo_taet

Спасибо за предоставленную информацию, лично для меня очень полезную))))
Все очень доступно рассказано, не зря время потратили)
подписалась на Ваш твиттер, буду следить за новостями)

Аватар пользователя gat

Только сегодня с утра задумалась о том, что ни черта не смыслю в этом деле, а тут - на тебе - всё по полочкам: разложено, показано, осталось только уложить в голову широкой общественности! В общем, спасибо!

Аватар пользователя Valeriy

Приятная история для познания нового урока.
Читаешь, делаешь - все получается.
Значить Klerik молодчина:bye:, сумел
донести материал. Спасибо.

Аватар пользователя Сергей Иванов

Valeriy рад что у вас все получается, значит я поработал не зря)

Аватар пользователя Delet_ER

а мне блогоника.ру делал.
не помню уж за что, но помню что я не рубля не отдал.

хотя в принципе я и сам с фотошопом дружу

Аватар пользователя Katrin

Спасибо, полезная информация! Расскажите, как сделать прозрачной боковую панель (та что справа) в самом твиттере. Все попробовала, не получается, расскажите поподробнее :)

Аватар пользователя kosport

Сам буквально несколько дней назад задался подобной идее, а у вас все просто и подробно. СПС

Аватар пользователя Сергей Иванов

Рад, что вам пригодился урок :ad:

Аватар пользователя Надежда

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

Аватар пользователя Сергей Иванов

1. Этот дизайн в фотошопе я сделал за час. После этого у меня ушло 8 часов (4 часа в один день и 4 часа в другой), на описание урока и публикацию его на сайте.

2. Насчет помогает ли зарабатывать или нет, не скажу, так как сам не знаю) А вот то, что оригинальное оформление нравится многим, это да. После публикации урока, на новости блога подписалось примерно 20 человек и примерно столько же последовало за мной в твиттере.

Аватар пользователя BloggerMen

Урок просто замечательный. Все очень подробно и доступно. Спасибо.

Аватар пользователя Сергей Иванов

Очень рад, что вам понравилось :ad:

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.