Фото: Шри Путри Хулио
Веб-дизайн всегда был быстро развивающейся областью, где профессионал должен умело сочетать визуальный дизайн информации, эстетику и композиционные принципы с наиболее актуальными современными идеями и тенденциями, чтобы удовлетворить ожидания своего клиента.
У хорошего веб-дизайнера есть четкое видение главной цели создаваемого ими веб-сайта и конкретной идеи, которую они пытаются донести.
С появлением Bootstrap , Foundation и подобных фреймворков становится ясно, что макеты могут стать более «похожими», чем когда-либо прежде. Мы все хорошо знакомы с этим «Bootstrap Look», верно?
В этом контексте необходимость в небольшой разнице в дизайне актуальна как никогда. Я думаю, что одна из самых сложных задач для веб-дизайнера — найти творческий подход к созданию работы, которую можно считать уникальной и уникальной.
Другими словами, в идеале мы все хотели бы создать макет и опыт сайта, который не может быть легко воспроизведен массами.
Правило, которым нужно следовать для выполнения этой первой задачи, состоит в том, чтобы использовать воображение и избегать наиболее часто используемых изображений, фокусов, композиций или эффектов.
Все больше и больше профессионалов пытаются создать довольно классную графику и анимацию с использованием чистого CSS, используя весь свой скрытый потенциал, как в этом случае .
Хорошо, возможно, это слишком много.
Давайте попробуем с этой конструкцией от Римского Кортеса. Несмотря на то, что он может быть недоступен не для всех, это хорошее напоминание о том, что CSS3 может позволить нам сделать.
Но что, если я не эксперт по CSS и у меня нет таких продвинутых компетенций? Или, если у меня, возможно, нет времени (или желания) рисовать изображения с помощью CSS, и вместо этого я предпочитаю использовать то, что я узнал о Photoshop или Illustrator?
К счастью, Photoshop может помочь нам добиться хороших результатов и создать менее наглядные методы лечения.
В этом уроке вы увидите, как создать текст, заполненный фотографиями, за несколько простых шагов, которые вы можете использовать для украшения своего следующего проекта.
Фотошоп в действии
Этот учебник поможет нам понять, как просто вставить фотографию в текст с помощью Adobe Photoshop CS6. Мы собираемся использовать очень немногие и очень известные команды программы, и я уверяю вас, что результат, которого вы достигнете, является потрясающим.
Мы можем использовать наши личные фотографии или изображения, которые мы нашли в Интернете. Там нет никаких ограничений, и все, что нам нужно сделать, это следовать нашей фантазии.
Давайте начнем наш проект с выбора фотографии, которую мы особенно любим, которую мы любим, или мы хотели бы поработать и подумать о шрифте, который мы будем использовать для этого.
Я выбираю прекрасный вид на Тауэрский мост, замечательный комбинированный мост и подвесной мост через реку Темзу. Он находится недалеко от Лондонского Тауэра, от которого он берет свое имя и стал знаковым символом этого города.
Очевидно, не стесняйтесь работать и над темой по вашему выбору.
Посмотрим как дальше.
1). Настройте свой текст
Откройте фотографию, которая станет нашей базой, и нажмите «Текст» в палитре инструментов слева.
На этом этапе выберите шрифт, размер, цвет и выравнивание текста в опциях выше. Блочный шрифт без засечек часто будет работать лучше, но не стесняйтесь экспериментировать. В итоге я выбрал Dock11 в качестве своего шрифта из-за его простоты (доступно в категории Sans, вы можете скачать его здесь ).
Что касается цвета, я выбрал тот, который будет сильно контрастировать с темным фоном, выравнивание текста по левому краю, а затем я установил его размер (обратите внимание, что размер будет установлен снова на следующем шаге).
После этого введите свое сообщение и составьте его в своем документе. Поскольку я выбираю фотографию Лондона, очевидный текст для меня — это название города. Поместите свой текст, где вы хотите. Я предпочел переместить его внизу фотографии.
2). Размер вашего текста в пространстве
Затем на клавиатуре нажмите Ctrl + T, чтобы выделить пространство текста и перетащите курсором точки привязки, чтобы растянуть текст, а затем увеличить его размер.
3). Создать обтравочную маску
Теперь поместите курсор на фоновый слой, щелкните правой кнопкой мыши> Duplicate Layer . Мы создадим новый уровень с именем Background copy . Перетащите фоновую копию слоя над лондонским текстом.
(Обратите внимание, что после этого шага наш текст «временно исчезнет»).
После создания обтравочной маски уровень с именем «Фоновая копия» на панели уровней будет отображаться с отступом маленькой стрелкой вниз, но изображение не изменится.
Выберите текстовый уровень и, удерживая нажатой клавишу Ctrl, нажмите кнопку « Новый слой» (второй последний значок, начинающийся слева) вниз на панели уровней, чтобы создать новый уровень, который должен быть расположен под текстовым уровнем.
Затем сбросьте оба цвета переднего плана и второй цвет, нажав «D». Используйте цвет переднего плана (черный), чтобы заполнить уровень 1, который мы создали ранее. Если вы предпочитаете что-либо, кроме черного, в качестве фона, смело меняйте его.
Наконец, нажмите на инструмент перемещения и сдвигайте изображение ниже, пока не получите желаемый результат.
Вот наш фоновый рисунок в нашем тексте!
Вы можете использовать эффект слоя Bevel and Emboss для улучшения внешнего вида вашего нового заголовка и выделения букв.
Выводы
Эффекты, которые мы можем применить к тексту, практически не зависят. Вы можете наслаждаться разнообразием изображений, чтобы заполнить ваше сообщение и настроить эффект для ваших целей.
Не тормозите воображение!