Подготовка Иллюстрация для веб
16 июня 2008 по chriscoyier · 3 Комментария
Иллюстрация прекрасная тенденция в веб-дизайне. Оно вписывается среду хорошо. Великий иллюстраторов, хотя, зачастую не думаю, что с точки зрения Интернета, когда они делают свои иллюстрации. Взгляните на это очень приятно небо / холме городской пейзаж иллюстрации я нашел на Shutterstock:
Я думаю, что эта иллюстрация бы прекрасной базой для веб-дизайна, но явно не подготовлен к такой задаче вне коробки. Давайте делать некоторые манипуляции и подготовить его в Интернете.
Получить его в Photoshop
Это фантастика, что иллюстрация вектор. Это означает, что мы можем сделать ее любого размера мы должны без каких-либо потери качества. Нашей целью будет, чтобы сделать эту сцену сидеть в верхней центральной части окна браузера, так что давайте его в Photoshop на максимум в области основного содержания нашего сайта. Скажем, 960px. Создайте новый документ Photoshop 960px широкий и выше, чем она должна быть, чтобы соответствовать.
Откройте ваши иллюстрации в Adobe Illustrator и Выделить все. Копирование и вставка в документ Photoshop. Убедитесь в том, чтобы вставить его как Smart Object. Это позволит ему сохранить это векторный характер, что позволяет высококлассные это без потери качества. Он может приехать, как слишком мал. Не волнуйтесь там, только масштаб ее, чтобы вписаться в ваш 960px широкий документ.
Расширение края
Браузер окна не фиксированной ширины средах, таких как Photoshop документы есть. Мы должны подготовить нашу иллюстрации хорошо выглядеть, когда окно браузера шире, чем наш базовый 960px. Давайте пойдем дальше и увеличить ширину холста нашего документа на 1280px, так что у нас есть комнаты для работы с.
Наша цель здесь, чтобы у края этой иллюстрации конца в то, что будет горизонтально повторяемым. Человек нарезка этот документ будет нужно что-то вроде этого, чтобы сделать это проектные работы в Интернете. В конечном счете эта часть будет фоном для <body> элемент веб-страницы, с нашей основной иллюстрации сидящего на вершине.
Я возьму небольшой кусочек правого края этой иллюстрации и "плавать" его на свой собственный новый слой (Ctrl-J).
Теперь мы можем Free Transform этой новой кусочек (Command-T) и расширить ее по горизонтали с обеих сторон документа. Поскольку градиенты были созданы хорошие и вертикальные, это расширение прекрасно работает с правой стороны. Правой стороны не менее, выглядит слишком резкой, с холма, Буш и дорожных быть отрезанным внезапно.
Obscuring перехода
Вместо того, чтобы сделать что-нибудь слишком фантазии и попытаться объединить эти два слоя вместе, давайте неясным, что трудности переходного периода, разместив объект на переднем плане прямо по вершине. Эта иллюстрация может сделать с небольшим количеством дополнительную глубину в любом случае.
Этот вектор почтовый ящик будет делать красиво.
Удалить все, кроме самого почтового ящика и вставьте его в качестве иллюстрации смарт-объект так же, как мы разместили оригинальные иллюстрации. Немного изменение размера и трудоустройства, а у нас есть прекрасный элемент для затемнения перехода в фонах.
Области основного содержания
Наши иллюстрации собирается сделать для прекрасных заголовков и фона, но за фактическое содержание веб-сайта, мы будем нуждаться в какой-то большой блок белый. Позволяет падение белый прямоугольник на самом верху с небольшим количеством тени установить его.
Заполнение Нижний
С горизонтального края в настоящее время хорошо скрыта, мы можем заполнить цвета на остальной нижней части сайта макет. Пример цвета (с пипетки) от того, как самый нижний пиксель иллюстрации, а затем заполнить нашу снизу наиболее пустой слой с новым цветом.
Это область основного содержимого теперь будет ветер для любой приличный веб-дизайнера, чтобы нарезать.
Последние штрихи
Бросьте миленький приветственное сообщение в небе, и мы сами приятные глазу иллюстрированный веб-макет. Потому что у нас задумчиво заботятся как горизонтальные, так и вертикального расширения расширения, эта иллюстрация теперь идеально подходит для преобразования в реальном разметки веб.
Оставайтесь с нами на CSS-трюки , где я буду превращения этого в реальной веб-страницы в ближайшие несколько недель.
Зачем использовать Photoshop для решения этой задачи на всех?
Почему бы не использовать фотошоп? Photoshop является хорошим инструментом для изображения для веб, а не для векторов, как это изображение, но хорош для макетов (учебник идея).
Спасибо за совет! Photoshop это волшебство!