fazeful

Спортивное табло

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

Давайте разберем табло на части и нарисуем такое же. А вдруг вам оно тоже пригодится? =)

Для начала создайте новый документ и новый слой на нем, который назовите «Табло 1». С помощью Rounded Rectangle Tool нарисуйте светло-серый прямоугольник со скругленными углами.

Дважды кликните на слое и в его настройках установите такие параметры:

Продублируйте слой «Табло 1» и назовите копию «Табло 2». Немного уменьшите (Ctrl+T) прямоугольник на этом слое. Следите за четкостью краев.

Очистите настройки слоя: правый клик на слое → Clear Layer Style. Установите значение Fill=0% и, дважды кликнув по слою, установите следующие параметры:

Получившееся изображение должно быть примерно похоже на это.

Продублируйте слой «Табло 2» и назовите его «Экран 1».

Кликнув по иконке слоя, выберите для экрана более темный цвет, а в настройках слоя укажите такие параметры:

Сделайте копию слоя «Экран 1» и переименуйте его в «Экран 2». Сбросьте настройки слоя и установите Fill=0%. В настройках слоя необходимо установить следующие параметры:

Получается нечто похожее на это:

После успешного прохождения предыдущих уровней создайте новый слой (Ctrl+Shift+N), нажмите D, чтобы сбросить цвета, и нарисуйте на нем вот такую сетку размером с экран вашего будущего табло с помощью Pencil Tool.

Добавьте светлых градиентов с боков экрана.

В центре экрана сделайте блик с помощью Radial Gradient. Нужно сделать половину радиального градиента небольшого размера а затем растянуть его на ширину экрана. Заодно можно немного усилить градиенты сверху и снизу. Все градиенты накладывайте на новых слоях.

Поверх слоя «Табло 2» создайте еще один слой, залейте его белым и примените Filter→Noise→Noise около 60%, а затем Filter→Blur→Motion Blur. Выставьте ему Opacity=30% и смешивание Linear Burn. Добавилась легкая текстура металла.

Теперь начинаем рисовать опоры, на которых наше табло будет стоять. Создайте группу для слоев – «Опора». Возьмите Rectangle Tool и нарисуйте прямоугольник.

Примените к нему вот такие настройки слоя.

Возьмите Add Anchor Point Tool и поставьте дополнительную направляющую в центре, зажмите Shift и немного сдвиньте ее вниз, чтобы образовалась изогнутость.

Скопируйте этот слой, уменьшите его высоту и сделайте вогнутость сверху. Формируем подпятник.

Сверху нарисуйте овал с помощью Ellipse Tool. В настройках слоя поставьте легкий градиент от светлого к темному. Продублируйте его и сделайте так, чтобы он слегка появлялся снизу подпятника.

Продублируйте наш овал еще раз и растрируйте. Растяните его немного в стороны и заблюрьте, а затем примените Filter→Blur→Motion Blur. Образовалась тень.

Теперь трижды скопируйте группу слоев «Опора» и расставьте их по длине табло. С зажатым Ctrl выделите все группы и выполните Layer→Distribute→Horizontal Centres. Теперь между опорами равное расстояие.

Можно добавить позади немного неба и длинную легкую тень под всем табло.

А теперь информируем всех о том, что наши ведут! Просто напишите свою надпись любым шрифтом без антиалиазинга под слоем «Сетка».

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

А можно сделать анимашку =)

1. 1   angrycat 25 февраля 2010 — 11:39

   "и нарисуйте на нем вот такую сетку размером с экран вашего будущего табло с помощью Pencil Tool."
   
   Нет, что, правда, все пиксели рисовал? Может проще паттерн сделать было?
   Ответить

1. 2   fazeful http://fazeful.ru 25 февраля 2010 — 11:49

   Нет, все не рисовал, достаточно провести одну полоску.
   Ответить

1. 3   Roller http://kotovod.ru 23 марта 2010 — 05:38

   Прикольный урок. Пиксельная сетка решает)
   Ответить

1. 4   Vova http://g9p.ru 15 июня 2010 — 16:28

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

1. 5   Неля http://pronya.wordpress.com 27 ноября 2010 — 19:24

   Вот бы самой научиться.
   Ответить

1. 6   игорь http://fcmoskva1999.narod.ru/ 10 января 2011 — 01:08

   спасибо!
   попробую у себя на сайте поставить.
   Ответить

1. 7   Александр http://for-cheaters.3dn.ru 14 июня 2011 — 01:13

   Офигенно
   Ответить

1. 8   Александр http://vkayfe.com/ 16 июля 2011 — 02:44

   креативно, и выглядит отлично!
   Ответить

1. 9   Rednulnik http://tvsput.ru 29 августа 2011 — 00:47

   Мне понравилось! Отлично!
   Ответить

1. 10   AzCar http://azcar,az 18 ноября 2011 — 23:37

   Супеар! Ща покапаюсЬ )
   Ответить

1. 11   LAURA 5 января 2012 — 16:22

   Очень, красиво. Вы профессионал.
   Ответить

1. 12   Oleg http://travel-ua.info 14 января 2012 — 19:53

   Спасибо за метериал!
   Ответить

Добавить комментарий к «Спортивное табло»

Имя

E-mail

Домстраница

       


Запомнить вас? Посылать комментарии на ваш e-mail?