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

9

11881
27-06-2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Короткая ссылка на этот пост: https://www.designonstop.com/?p=1610
  • Поддержать DesingNonstop рублём!

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

Комментариев 9 комментариев

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

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

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

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

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

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

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

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

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

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

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

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

Очень здорово. Жаль, что нет видео урока. Для тех кто с Photoshop’ом на «вы» будет тяжеловато разобраться.

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

@Иван:
С видео конечно было бы нагляднее. Да все руки не доходят видео заняться ))

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

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

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

47 queries in 0,255 seconds.