Создаем фон для Твиттера из фотографии с океанскими волнами

7

  • Мой новый вордпресс шаблон:
  • Представляю новый премиум вордпресс шаблон Wecreation Style
    Все подробности можно узнать здесь »

Уроки / Мои уроки27-06-2010

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

Шаг 1.
Создаем в фотошопе новый документ размером 1440х850 пикс. Берем любую фотографию с океанскими волнами.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 2.
Увеличиваем фотографии яркость и контрастность.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 3.
Создаем дубликат слоя и накладываем его сверху режимом наложения «Перекрытие». Снижаем прозрачность до 50%. Картинка стала ярче и насыщеннее.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 4.
На новом слое выделяем область где-то посередине картинки. Выбираем инструмент градиент от белого к прозрачному и многократно проводим мышкой от правого края выделения в сторону левого. С правой стороны должен получиться сплошной белый фон, который постепенно сходит на нет.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 5.
На этом шаге на новый слой копируем кусок картинки с волной шириной около 400 пикс, трансформируем его по горизонтали и устанавливаем его с правой стороны под слоем с белым градиентом.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 6.
Теперь воспользуемся такой вот кисточкой. Я ее сохранила в png формате. Скачать можно здесь.
Создаем фон для Твиттера из фотографии с океанскими волнами

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

Шаг 7.
Создаем новый слой. Выбираем инструмент «Кисть». Выбираем изображение звездочки. Меняем размер на 50 пикс.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 8.
Теперь настроим кисть. Нажимаем F5 и вызываем палитру настроек. Идем в закладку «Рассеивание» и устанавливаем значения, как на рисунке ниже.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 9.
Проводим кисточкой по участку с водой в левом нижнем углу картинки.
Создаем фон для Твиттера из фотографии с океанскими волнами

Шаг 10.
Воспользуемся еще одной кисточкой с изображением рыбы. Я ее тоже сохранила в png формате. Скачать можно здесь.
Создаем фон для Твиттера из фотографии с океанскими волнами

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

Финал
Изображение в большом размере можно скачать здесь. Жмем по кнопке со словом “Download”.
Создаем фон для Твиттера из фотографии с океанскими волнами

А так будет выглядеть наш фон в самом Твиттере. Предпочтительный цвет сайдбара белый.
Создаем фон для Твиттера из фотографии с океанскими волнами

Если вам понравилась эта статья и у вас есть Твиттер - поделитесь ею с другими,
нажав кнопку "Retweet" (?). Или просто добавьте статью в социальные сервисы. Опубликовать в своем блоге livejournal.com

Подписаться на обновления:

   Присоединяйтесь в:в Google+Присоединиться В КонтактеПрисоединиться во FriendFeedПрисоединиться в FacebookПрисоединиться в ЖЖПрисоединиться в Твиттере или 


Короткая ссылка на этот пост: http://www.designonstop.com/?p=1610
А вот еще интересное:

Написать комментарий с помощью формы ВКонтакте

Комментариев (7)

Роман27-06-2010 . 12:25
# 
1

Красиво получилось, освежающе :)

ОтветитьОтветить
Наташа Клевер28-06-2010 . 09:11
# 
2

@Роман
Спасибо, Рома! Уже видела свой фон в действии в одном из Твиттеров. Ниче так, освежающе :)

ОтветитьОтветить
Oleg Mykhailenko28-06-2010 . 16:42
# 
3

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

ОтветитьОтветить
Наташа Клевер28-06-2010 . 20:56
# 
4

@Oleg Mykhailenko
Я и так и этак голову ломала, как мне нижнюю часть совместить. Конечно, было бы здорово, чтобы до конца шел белый фон под блоками. Но из-за того, что блоки двигаются в зависимости от разрешения экрана, приходится идти на такие вот жертвы :)

ОтветитьОтветить
Александр17-11-2011 . 13:30
# 
5

Всё понравилось доходчиво буду пробовать и развиваться.

ОтветитьОтветить
Наташа Клевер17-11-2011 . 13:38
# 
6

@Александр:
Спасибо! Желаю вам удачи ))

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

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