Рисуем перекидное табло в фотошоп — уроки фотошоп

Урок 36. Анимация в PhotoShop. Часть 1. Покадровая анимация._

Рисуем перекидное табло в Фотошоп - уроки фотошоп

Вы узнаете:

  • Как открыть и закрыть и настроить панель анимации.
  • Как добавлять, удалять и редактировать ключевые и кадры анимации.
  • Для чего нужна кнопка Tween (Создание промежуточных кадров).
  • Как сделать простую анимацию рисования звезды.
  • Как настроить интервалы времени для каждого кадра анимации.
  • Как оптимизировать анимацию для уменьшения размера Gif файла.
  • Как импортировать Gif файлы в программу.
  • Как переключаться с покадровой анимации на временную шкалу.

Что такое анимация

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

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

Следует иметь в виду, что Photoshop все-таки графический редактор, и не рассчитан на сложные анимационные процессы. В программе есть два способа создания анимации – это покадровая анимация и анимация в режиме временной шкалы. Мы последовательно рассмотрим оба вида анимации.

Весь 36 урок мы посвятим изучению покадровой  анимации. А в 37 уроке займемся временной шкалой. Некоторые простые задачи удобнее выполнять именно в режиме покадровой анимации.

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

Часть 1. Покадровая анимация

Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.

Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значкувнизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.

На панели инструментов выберите инструмент кистьчерного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию(поставьте точку, нажмите Shift и поставьте следующую точку — линия получится прямой).

Создайте второй слой. Начертите следующую линию. Затем третий слой
и еще одну линиюи т. д. У вас должно получиться шесть слоев, включая фоновый слой.

Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку в правой нижней части панели анимации.

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

Нажмите значоквнизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значоки включите видимость второго слоя.

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

В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.

— преобразование в анимацию по временной шкале.

— Tween(Создание промежуточных кадров).

— Duplicate сurrent frame (Создание копии выделенных кадров).

— Кнопки воспроизведения (Как на любом магнитофоне).

Selects First Frame (Выбратьпервыйкадр);Selects Previews Frame (Выбратьпредыдущийкадр);

Play (Запуск анимации);

SelectsNextFrame(Выбрать следующий кадр).

— Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).

Настройка интервалов.

Теперь настроим интервалы времени, в течении которых будут видны кадры анимации.

Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).

Настройка периодичности повторов.

Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.

Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.

Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.

При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).

Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.

Анимация стилей.

Перейдите в панель анимации. Нажмите на значокDuplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя. Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.

Дважды щелкните по слою для перехода в настройки стиля. Задайте тень и наложение цвета. Цвет выберите по своему желанию.

Вернитесь к первому кадру анимации и снимите видимость слоя со звездой

в палитре Layers (Слои).

Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.

Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значокDuplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.

Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.

Снова скопируйте слой и еще немного увеличьте масштаб, а также поменяйте стиль. И добавьте кадр анимации. У вас должна получиться примерно такая раскадровка:<\p>

Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.

Оптимизация анимации.

Нажмите на значокв правой верхней части панели анимации. Появится дополнительное меню.

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

Выберите Optimize Animation…(Оптимизировать анимацию). Отметьте галочками оба пункта.BoundingBox (Ограничительная рамка) — обрезает кадры по измененной области по сравнению с предыдущим кадром.

Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.

Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр «Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:

Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,

Donotdispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,

Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.

Сохранение анимации.

Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).

Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер.

Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах.

Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).

Можно сохранить анимацию в формате PSD для последующей доработки или для импорта в Adobe After Effects (программа для создания спецэффектов).

Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.

В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментовили меню File (Файл)— Edit in ImageReady (Перейти в ImageReady ).

Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web).

А также сохранить можно с помощью команды Меню File (Файл) – Export (Экспортировать) – Render Video (Просмотреть видео). Этот пример сохранения мы рассмотрим в разделе Timeline (Временная шкала).

Tween (Создание промежуточных кадров).

Рассмотрим еще один маленький пример создания покадровой анимации, в котором разберем для чего нужна кнопка Tween (Создание промежуточных кадров).

Создайте новый документ размером 500 на 250 пикселей. Выберите инструментType (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформациютекста также можно анимировать.

В панели анимации задайте интервал 0,2 сек. Нажмите кнопку, чтобы скопировать первый кадр. Перейдите в палитру Layers (Слои) и уменьшите непрозрачность до 0. Поменяйте стиль слоя (например, вместо наложения градиента добавьте наложение цвета). Переключаясь между кадрами, вы сможете наблюдать, как меняется изображение.

Добавим перемещение. Выберите инструментMove (Перемещение) и передвиньте текст вниз, за пределы листа. Перейдите в панель анимация и нажмите кнопкуTween (Создать промежуточные кадры).

В появившемся окне можно настроить количество добавляемых кадров. Чем их больше, тем равномернее будет переход. В графе TweenWith (Промежуточные кадры) можно выбрать из списка, куда будут вставлены кадры:

Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.

Читайте также:  Строим лабиринт в фотошоп - уроки фотошоп

Оставьте все настройки по умолчанию. Нажмите ОК.

Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.

Открытие GIF-файлов.

В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:

Обязательно установите QuickTime Pro 7.1 или выше.

В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.

Выберите в меню File (Файл) –Import (Импортировать) — Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.

gif и вставить его в поле имя файла или вручную набрать наименование в этом поле.

Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).

Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.

Кнопки унификации слоев анимации.

Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).

Unify layer position ( Унифицировать положение слоя ).

Unify layer visibility ( Унифицировать видимость слоя ).

Unify layer style ( Унифицировать стиль слоя ).

Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. НажмитеPlay (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопкуUnify layer visibility ( Унифицировать видимость слоя ). Появится окно: .

Нажмите Match (Синхронизировать) и снова запустите анимацию. Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.

В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).

Закрытие панели анимации.

Закрыть панель анимации можно разными способами:

  1. Убрать галочку в меню Window (Окно) — Animation (Анимация).
  2. Нажмите на значокв правой верхней части панели анимации. Выберите Close Palette (Закрыть).
  3. Если щелкнуть правой кнопкой мыши в левой верхней части панели анимации, то появится контекстное меню с дополнительными настройками:

Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).

Вопросы:

  1. Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?

— Выделенный кадр будет удален.

— Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.

— Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.

— Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.

  1. У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
    5 промежуточных кадров между последним и первым кадрами?

— Выбрать первый кадр. Нажать кнопкуTween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).

— Выбрать последний кадр. Нажать кнопкуTween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).

— Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).

  1. Для чего нужна оптимизация анимации?

— Для преобразования в анимацию по временной шкале.

— Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

— Для настройки периодичности повторов анимации.

Домашнее задание:

1)Выполнить покадровую анимацию рисования звезды (по уроку).

2) Выполнить покадровую анимацию текста.

Источник: http://www.fotiy.com/urok-36-animaciya-v-photoshop-chast-1-pokadrovaya-animaciya-_/

Урок Photoshop Рисуем спортивное табло — Немного обо всем

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

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

Для начала создайте новый документ и новый слой на нем, который назовите «Табло 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. Теперь между опорами равное расстояние.

Источник: http://nemnogo-obo-vsem.ru/showthread.php?t=1110

Создаём перекидное табло для текста в Фотошоп

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

Итоговый результат

Материалы для урока:

Поцарапанная текстура
Шрифт League Gothic

Шаг 1. Создание документа

Откройте фотошоп и создайте новый документ с размерами 1200 x 600пикс.

Шаг 2. Создание фона

Для начала залейте фоновый слой цветом # 666666.  Далее используем текстуру с царапинами, чтобы придать фону вид поверхности.

Используйте текстуру предложенную в начале урока или выберите что-нибудь подходящее из бесплатных тестур.  Поместите вашу текстуру в документ прямо над слоем с фоном. В панели слоев, измените режим наложения слоя с текстурой на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 10%.

Шаг 3. Создание текста

Автор выбрал для надписи слово TYPE. Вы можете использовать свой текст. Активируйте инструмент Текст (Horizontal Type Tool) и напишите его. Для этого выберите шрифтLeague Gothic с размером около 500 пт. После того, как создали тест, идём в меню Слой – Растрировать – Текст (Layer > Rasterize > Type).

Шаг 4. Рисуем основную фигуру перекидного табло.

Создайте новый слой и с помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме Фигура (Shape) и с радиусом 15 пикселей нарисуйте базовую форму табло вокруг первой буквы. Рассчитывайте размеры так, чтобы фигуры табло не прикасались между собой. Так же обратите внимание, что слой с фигурой должен быть под слоем с текстом в палитре слоёв.

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

Теперь поместите этот слой в новую группу. Для этого сделайте его активным и идите в меню Слой – Сгруппировать слои (Layer > Group Layers). Дайте название группе Flap 1, чтобы ваша работа была более организована.

Шаг 5. Стили для базовой формы Табло

Добавим фигуре три стиля слоя – Наложение градиента (Gradient Overlay), Тень (Drop Shadow) и Обводку (Stroke).  И так, перейдите в меню Слои – Стиль слоя – Наложение градиента (Layer > Layer Style > Gradient Overlay).

Читайте также:  Художественная обработка детской фотографии в фотошоп - уроки фотошоп

Наложение градиента (Gradient Overlay),

В окне настроек градиента выберите стиль Зеркальный (Reflected). Теперь откройте редактор градиента, нажав на окно его просмотра

Выберите из набора градиент от чёрного к белому.

Тень (Drop Shadow)

Теперь мы собираемся добавить эффект тени к нашему слою для того, чтобы фигура табло выделялась от фона. В окне настроек стилей слоя перейдите на вкладку Тень (Drop Shadow).

Обводка (Stroke)

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

Шаг 6. Создание внутренней фигуры в табло

Теперь растрируем базовую фигуру табло. Для этого идём в меню Слои – Растрировать – Фигуру (Layer> Rasterize> Shape). Выделите этот слой в палитре слоёв и загрузите его выделение в меню Выделение – Загрузить выделенную область (Select> Load Selection). Это создаст выделение вокруг фигуры.

Теперь сократим выделение в меню Выделение – Модификация – Сжать (Select> Modify> Contract). В диалоговом окне поставьте значение 5 пикселей.

Создайте новый слой и залейте на нём сжатое ранее выделение чёрным цветом #000000.

Результат на данном этапе.

Шаг 7.

Чтобы создать видимость того, что табло делится на две части нам нужно дублировать верхнюю часть внутренней формы на новый слой и задать ей свой собственный стиль слоя. Найдём центр внутренней фигуры.

Для этого идём в меню Редактирование – Свободное трансформирование (Edit > Free Transform).

Убедитесь, что у вас отмечена опцияПоказать управляющие элементы (Show Transform Controls).

Примечание переводчика: Эта опция (Показать управляющие элементы) доступна при активном инструменте Перемещение (Move). Проще определить центр фигуры, если у вас отмечена Привязка в меню Вид, тогда направляющая сама цепляется в центре.

Проверьте что у вас включены линейки Ctrl+R и вытащите горизонтальную направляющую, оставив её в центре фигуры.

Используя инструмент Прямоугольное выделение (Rectangular Marquee Tool) создайте выделение вокруг верхней половины фигуры. После этого перейдите в меню Слои – Новый – Скопировать на новый слой (Layer > New> Layer via Copy). Это автоматически создаст новый слой с выделенной верхней частью фигуры.

Шаг 8.

Убедитесь, что в палитре слоёв активен слой с созданной половинкой и откройте окно стилей слоя. Применим Наложение градиента (Gradient Overlay).

Шаг 9. Разделитель

Создайте новый слой поверх слоя с текстом.

Сделайте выделения с помощью инструмента Прямоугольное выделение (Rectangular Marquee Tool) с размерами 200 пикс в ширину и 6 пикселей в высоту.

Заполните созданное выделение серым цветом # 333333. С помощью инструмента Свободное трансформирование (Free Transform) редактируйте края прямоугольника, подвинув их внутрь.

Шаг 10. Создание петель

Теперь мы собираемся сделать петли, которые будут скреплять таблички. Создайте новый слой и с помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) нарисуйте прямоугольник с размерами 6х25 пикселей и залейте его чёрным цветом. Применим стиль слоя Наложение градиента (Gradient Overlay).

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

Поместите эти три слоя в группу слоёв в меню Слои – Новый – Группа из слоёв (Layer > New > Group from Layers) и назовите эту группу Split 1.

Шаг 11. Дублируем таблички для всех букв

Теперь дублируем группу Flap 1 в меню Слои – Дубликат группы (Layer > Duplicate Group). Дайте имя дублированной группе — Flap 2, так ваша работа будет более организованной и в ней будет легче ориентироваться.

Используйте инструмент Перемещение (Move Tool) для того чтобы поставить копированную табличку под следующую букву.
Повторите эти действия для следующих букв, меняя названия дублированным группам.

Шаг 12.

Используя способ описанный в предыдущем шаге дублируйте группу Split 1 и дайте копии название Split 2. Переместите эту группу к следующей букве.

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

Шаг 13. Эффект свечения

Установите основной цвет на белый # FFFFFF.

Выберите инструмент Градиент (Gradient Tool) на панели инструментов. В верхней панели настроек выберите для градиента радиальный режим. Теперь нажмите на окошко градиента чтобы открыть его редактор.

Выберите градиент от белого к прозрачному.

Теперь создайте новый слой поверх всех остальных слоев. Проведите градиентом начиная примерно с центра документа в конец. Используйте свободную трансформацию для трансформирования слоя со свечением так, чтобы оно проходило от краёв документа и было продолговатым. Измените режим наложения этому слою на Мягкий свет (Soft Light).

Шаг 14. Создание внутренней тени

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

Активируйте инструмент Прямоугольное выделение (Rectangular Marquee Tool) и в верхнем меню настроек поставьте значение Растушевки (Feather) 50 пикселей.

Теперь идём в меню Выделение – Все (Select > Select All). Инвертируем выделение Shift+Ctrl+Iи заливаем его чёрным цветом.

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

Шаг 15. Цвет

В этом шаге мы добавим нашей работе немного цвета. Активируйте самый верхний слой в палитре слоёв и добавьте новый корректирующий слой в меню Слои – Новый корректирующий слой – Карта градиента (Layer> New Adjustment Layer> Gradient Map).

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

Измените режим наложения корректирующего слоя на Цветность (Color) и уменьшите Непрозрачность (Opacity) до 50%.

Вот и всё. Автор надеется, что урок с полезной и насыщенной информацией вам очень пригодится.

Источник: photoshop-master.ru

Источник: http://bb3x.ru/blog/sozdayom-perekidnoe-tablo-dlya-teksta-v-fotoshop/

Создаем текстовое перекидное табло в Photoshop

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

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

Конечный результат

Исходные файлы:

Шаг 1: Создайте новый документ

Создаем новый документ размерами 1200x600px. 

Шаг 2: Создание фона

Теперь нужно заполнить фоновый слой серым цветом ( # 666666 ).

Далее будем использовать текстуру царапин, чтобы изменить текстуру нашего фона. Помещаем текстуру в документ Photoshop над фоновым слоем. В панели слоев измените режим наложения слоя с текстурой на Soft Light (мягкий свет ) и уменьшите непрозрачность до 10%.

 Шаг 3: Создание текста

Наш текст — «TYPE». С помощью Horizontal Type Tool (T) вводим текст.

Шрифт — League Gothic. Размер шрифта — 500pt. Когда текст уже готов, нужно преобразовать его растрировать  Layer> Rasterize> Type (слои-растрировать-текст).

Шаг 4

Для основной формы нашего перекидного табло нужно создать новый слой. Далее будем использовать инструмент  Rectangle Tool. Выбираем прямоугольник с закругленными углами и в панели настроек устанавливаем радиус 15px .

Создайте прямоугольник вокруг первой буквы. Обратите внимание, что слой с прямоугольником должен быть размещен за буквой, а не перед ней.

В дальнейшем мы будем дублировать первую форму для остальных букв. 

После того как вы нарисовали первую форму будущего табло, убедиться, что слой с формой активный и разместите его в группу, нажавLayer > Group Layers.

Переименуйте слой в группе  на «Flap 1». 

Шаг 5

Далее к форме зададим стили: Gradient Overlay, Drop Shadow и Stroke. Для этого будем использовать настройки стилей слоя. . Ниже представлены скриншоты для каждого эффекта слоя. 

Gradient Overlay  (наложение градиента)

Выбирете слой с формой табло и перейдите в Layer> Layer Style> Gradient Overlay.

В окне наложения Gradient Overlay измените опцию на  Reflected (Зеркальный).

Затем откройте редактор градиентов.

В окне редактора градиента, выберите черный и белый  градиент. 

Drop Shadow  (Тень)

Теперь к нашему слою будем добавлять эффект тени.  Для этого перейдите в Layer> Layer Style> Drop Shadow.

Stroke (Обводка)

Наконец, добавим обводку размерами в 4px. Для этого перейдите в  Layer > Layer Style > Stroke.

Шаг 6: Создание внутренней части табло

Чтобы облегчит работу, растрируем нашу форму, перейдя в Layer> Rasterize> Shape.

Затем убедитесь, что слой с формой активный и перейдите в Select> Load Selection. Это создаст область выделения вокруг формы. 

 Будем уменьшать область выделения с помощью команды  Select> Modify> Contract. В диалоговом окне установите размер 5px. 

Затем создайте новый слой, выбрав Layer>New> Layer. 

В новый слое залейте (Edit> Fill) выделение черным цветом ( # 000000 ).

Шаг 7

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

Во-первых, нужно найти центр нашей формы.Простой способ определить центр: К Edit> Free Transform и  создайте горизонтальную направляющую в центре формы.

Используя Rectangular Marquee Tool (M) (прямоугольная область), создайте область выделения вокруг верхней половины формы табло. После  перейдите в Layer> New> Layer via Copy (слой как копия). Это позволит автоматически создать новый слой с частью настроек предыдущего слоя. 

Шаг 8

Убедитесь, что активный слой с верхеней формой нашего табло и перейдите в  Layer> Layer Style> Gradient Overlay.

Шаг 9

Поверх слоя с текстом создайте новый слой. Создайте область выделения с помощью Rectangular Marquee Tool (M) шириной в 200px и высотой в  6 пикселей. Заполните прямоугольное выделение серым цветом: # 333333.

Используя Free Transform Tool (Edit> Free Transform), настраиваем края так прямоугольника, чтобы он был размещен внутри таблички. 

Шаг 10: Создание Петли

Теперь нужно сделать петли, к которым будут прикрепляться таблички. Во-первых, создайте новый слой. На новом слое с помощью Rectangular Marquee Tool (M) создайте прямоугольник размерами 6x25px и залейте (Edit> Fill) его черным цветом. Теперь накладываем градиент:

Дублируем слой, который только-что создали (Layer> Duplicate Layer) и перемещаем его вправо. 

В панели слоев выбираем линию разрыва табличек  (серую горизонтальную линию в середине нашего табло) и два слоя  с петлей. Поместите эти три слоя в группу, выбрав  Layer > New > Group from Layers  и назовите новую группу  «Split 1».

Читайте также:  Бесшовный узор в фотошоп - уроки фотошоп

Шаг 11: Дублируем таблички для других букв

Теперь копируем группу  «Flap 1». Изменяем имена групп. Все буквы размещаем поверх группы. 

Шаг 12

Теперь дублируем «Split 1» . Аналогично называем копии   «Split 2» , «Split 3», «Split 4».  

Шаг 13: добавляем эффект свечения

Установите в качестве основного цвета белый ( # FFFFFF ).

Выберите на панели инструментов Gradient Tool (G).  Выберите радиальный градиент и открываем редактор градиентов.  

Выберите градиент Foreground to Transparent (от переднего плана к прозрачному). 

Наши Gradient Tool теперь готов к работе.

Поверх всех остальных слоев создайте новый слой.Примерно с центра создаем наш градиент. Далее, используя  Free Transform Tool (Edit> Free Transform) редактируем градиент, чтобы создать эффект свечения. Затем измените режим наложения свечения слоя Soft Light (Мягкий свет).

Шаг 14

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

Выбираем инструмент Rectangular Marquee Tool (M).  В настройках в поле  Feather (растушевка) вводим 50px.  

Разместите выделенную область вокруг всего холста, выбрав Layer> Select All (Выделить все).

Мы хотим, чтобы область выделения была размещена по краям, поэтому нажимаем Select> Inverse.

Залейте выделение черным.

Шаг 15: добавляем цвет

Это последний шаг. В этом шаге мы собираемся добавить к нашей табличке немного цвета.

В панели слоев  выберите самый верхний слой. После этого  перейдите в Layer>New Adjustment Layer > Gradient Map.

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

Измените режим наложения корректирующего слоя карты градиентов на  Color и уменьшите прозрачность до 50%.

Источник: http://www.dejurka.ru/tutorial/split_flap_text_display/

Создаём перекидное табло для текста в Фотошоп — ИнформПланета

В то время, когда на смену перекидным табло приходят всё больше цифровые дисплеи, в таких местах, как аэропорты, вокзалы, автовокзалы, и так далее, они по-прежнему живут как символ путешествия. Используете ли вы их в интерфейсе приложения или ретро дизайне, автор уверен, что этот урок вы найдёте полезным и интересным. Итоговый результатМатериалы для урока:

Поцарапанная текстура

Шрифт League Gothic

Шаг 1. Создание документа

Откройте фотошоп и создайте новый документ с размерами 1200 x 600пикс.

Шаг 2. Создание фона

Для начала залейте фоновый слой цветом # 666666. Далее используем текстуру с царапинами, чтобы придать фону вид поверхности.

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

В панели слоев, измените режим наложения слоя с текстурой на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 10%.

Шаг 3. Создание текста

Автор выбрал для надписи слово TYPE. Вы можете использовать свой текст. Активируйте инструмент Текст(Horizontal Type Tool) и напишите его. Для этого выберите шрифт League Gothic с размером около 500 пт. После того, как создали тест, идём в меню Слой – Растрировать – Текст (Layer » Rasterize » Type).

Шаг 4. Рисуем основную фигуру перекидного табло.

Создайте новый слой и с помощью инструмента Прямоугольник со скругленными углами(Rounded Rectangle Tool) в режиме Фигура (Shape) и с радиусом 15 пикселей нарисуйте базовую форму табло вокруг первой буквы. Рассчитывайте размеры так, чтобы фигуры табло не прикасались между собой. Так же обратите внимание, что слой с фигурой должен быть под слоем с текстом в палитре слоёв.

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

Теперь поместите этот слой в новую группу. Для этого сделайте его активным и идите в меню Слой – Сгруппировать слои (Layer » Group Layers). Дайте название группе Flap 1, чтобы ваша работа была более организована.

Шаг 5. Стили для базовой формы Табло

Добавим фигуре три стиля слоя – Наложение градиента (Gradient Overlay), Тень (Drop Shadow) и Обводку (Stroke). И так, перейдите в меню Слои – Стиль слоя – Наложение градиента (Layer » Layer Style » Gradient Overlay).

Наложение градиента (Gradient Overlay),

В окне настроек градиента выберите стиль Зеркальный (Reflected). Теперь откройте редактор градиента, нажав на окно его просмотра

Выберите из набора градиент от чёрного к белому.

Тень (Drop Shadow)

Теперь мы собираемся добавить эффект тени к нашему слою для того, чтобы фигура табло выделялась от фона. В окне настроек стилей слоя перейдите на вкладку Тень (Drop Shadow).

Обводка (Stroke)

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

Шаг 6. Создание внутренней фигуры в табло

Теперь растрируем базовую фигуру табло. Для этого идём в меню Слои – Растрировать – Фигуру (Layer» Rasterize» Shape). Выделите этот слой в палитре слоёв и загрузите его выделение в меню Выделение – Загрузить выделенную область (Select» Load Selection). Это создаст выделение вокруг фигуры.

Теперь сократим выделение в меню Выделение – Модификация – Сжать (Select» Modify» Contract). В диалоговом окне поставьте значение 5 пикселей.

Создайте новый слой и залейте на нём сжатое ранее выделение чёрным цветом #000000. Результат на данном этапе.

Шаг 7.

Чтобы создать видимость того, что табло делится на две части нам нужно дублировать верхнюю часть внутренней формы на новый слой и задать ей свой собственный стиль слоя. Найдём центр внутренней фигуры.

Для этого идём в меню Редактирование – Свободное трансформирование (Edit » Free Transform). Убедитесь, что у вас отмечена опция Показать управляющие элементы (Show Transform Controls).

Примечание переводчика: Эта опция (Показать управляющие элементы) доступна при активном инструменте Перемещение (Move). Проще определить центр фигуры, если у вас отмечена Привязка в меню Вид, тогда направляющая сама цепляется в центре.

Проверьте что у вас включены линейки Ctrl+R и вытащите горизонтальную направляющую, оставив её в центре фигуры.

Используя инструмент Прямоугольное выделение(Rectangular Marquee Tool) создайте выделение вокруг верхней половины фигуры.

После этого перейдите в меню Слои – Новый – Скопировать на новый слой (Layer » New» Layer via Copy). Это автоматически создаст новый слой с выделенной верхней частью фигуры.

Шаг 8.

Убедитесь, что в палитре слоёв активен слой с созданной половинкой и откройте окно стилей слоя. Применим Наложение градиента (Gradient Overlay).

Шаг 9. Разделитель

Создайте новый слой поверх слоя с текстом. Сделайте выделения с помощью инструмента Прямоугольное выделение(Rectangular Marquee Tool) с размерами 200 пикс в ширину и 6 пикселей в высоту. Заполните созданное выделение серым цветом # 333333. С помощью инструмента Свободное трансформирование (Free Transform) редактируйте края прямоугольника, подвинув их внутрь.

Шаг 10. Создание петель

Теперь мы собираемся сделать петли, которые будут скреплять таблички. Создайте новый слой и с помощью инструмента Прямоугольник со скругленными углами(Rounded Rectangle Tool) нарисуйте прямоугольник с размерами 6х25 пикселей и залейте его чёрным цветом. Применим стиль слоя Наложение градиента (Gradient Overlay).

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

Поместите эти три слоя в группу слоёв в меню Слои – Новый – Группа из слоёв (Layer » New » Group from Layers) и назовите эту группу Split 1.

Шаг 11. Дублируем таблички для всех букв

Теперь дублируем группу Flap 1 в меню Слои – Дубликат группы (Layer » Duplicate Group). Дайте имя дублированной группе — Flap 2, так ваша работа будет более организованной и в ней будет легче ориентироваться.

Используйте инструмент Перемещение(Move Tool) для того чтобы поставить копированную табличку под следующую букву.

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

Шаг 12.

Используя способ описанный в предыдущем шаге дублируйте группу Split 1 и дайте копии название Split 2. Переместите эту группу к следующей букве.

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

Шаг 13. Эффект свечения

Установите основной цвет на белый # FFFFFF.

Выберите инструмент Градиент(Gradient Tool) на панели инструментов. В верхней панели настроек выберите для градиента радиальный режим. Теперь нажмите на окошко градиента чтобы открыть его редактор.

Выберите градиент от белого к прозрачному.

Теперь создайте новый слой поверх всех остальных слоев. Проведите градиентом начиная примерно с центра документа в конец. Используйте свободную трансформацию для трансформирования слоя со свечением так, чтобы оно проходило от краёв документа и было продолговатым. Измените режим наложения этому слою на Мягкий свет (Soft Light).

Шаг 14. Создание внутренней тени

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

Активируйте инструмент Прямоугольное выделение(Rectangular Marquee Tool) и в верхнем меню настроек поставьте значение Растушевки (Feather) 50 пикселей.

Теперь идём в меню Выделение – Все (Select » Select All). Инвертируем выделение Shift+Ctrl+I и заливаем его чёрным цветом.

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

Шаг 15. Цвет

В этом шаге мы добавим нашей работе немного цвета.

Активируйте самый верхний слой в палитре слоёв и добавьте новый корректирующий слой в меню Слои – Новый корректирующий слой – Карта градиента (Layer» New Adjustment Layer» Gradient Map).

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

Измените режим наложения корректирующего слоя на Цветность (Color) и уменьшите Непрозрачность (Opacity) до 50%.Вот и всё. Автор надеется, что урок с полезной и насыщенной информацией вам очень пригодится.

Исходник

Источник: http://informplanet.ru/showthread.php?t=1706929

Ссылка на основную публикацию