Вопрос или проблема
Я получил дизайн веб-сайта в PSD-файле от веб-дизайнера. Все элементы там привязаны к направляющим, что удобно, когда я делаю выборку, чтобы скопировать элемент дизайна в PNG-файл: направляющие делают мой выбор точным.
Одна кнопка имеет два состояния: обычное и при наведении. Оба состояния состоят из нескольких слоев. Поэтому я пытаюсь скопировать оба состояния как PNG-файлы, чтобы создать красивую кнопку в html.
Проблема в том, что оба состояния имеют тени, которые выходят за границы слоев, т.е. когда я пытаюсь выбрать кнопку, моя выборка (привязанная к направляющим) не включает внешнюю часть тени.
Как мне сделать точный выбор состояния кнопки в такой ситуации?
Вот метод, который я использую для извлечения элементов из PSD:
1) Убедитесь, что видимы только слои кнопки. Скрыть все остальные.
2) Убедитесь, что нет фона или каких-либо других нежелательных цветов или полупрозрачных пикселей, которые “скрывают” — в противном случае это не сработает.
3) В меню выберите “Изображение” -> “Обрезать” и выберите все флажки. Нажмите “ОК”.
Теперь у вас должны быть видны только необходимые слои, включая эффекты (если они были видимы).
Теперь вы можете использовать “Сохранить для веба и устройств”, чтобы сохранить файл.
Ответ или решение
Копирование кнопки с эффектом тени из PSD в PNG может оказаться непростой задачей, особенно когда углубляешься в детализированные элементы дизайна. Однако следуя четким шагам, вы сможете извлечь необходимые элементы вместе с эффектами, не теряя их качества. Рассмотрим этот процесс более подробно.
1. Подготовка рабочего пространства
Перед началом работы убедитесь, что у вас открыт файл PSD в Adobe Photoshop. Чтобы упростить процесс, выполните следующие действия:
- Скрытие ненужных слоев: Убедитесь, что все слои, не относящиеся к кнопке, скрыты. Это позволит сосредоточиться только на нужных деталях.
- Проверка цвета фона: Убедитесь, что цвет фона чистый и не содержит прозрачных пикселей, чтобы избежать нежелательных эффектов при сохранении.
2. Создание выделения кнопки
Ваша цель — создать точное выделение, которое включает как саму кнопку, так и ее тени. Для этого выполните следующие шаги:
- Выбор слоев: Сначала выберите все слои кнопки, включая те, которые создают тени. Если для кнопки задействованы группы слоев, выделите всю группу.
- Использование направляющих: Постоянно проверяйте направляющие, чтобы сделать выделение максимально точным. Это особенно важно, если кнопка имеет сложную форму.
3. Применение обрезки изображения
Чтобы гарантировать, что выделение включает все элементы и эффекты, выполните следующую процедуру:
- Перейдите в меню "Изображение" -> "Обрезать" (Image -> Trim).
- Убедитесь, что все чекбоксы выбраны: "Слева", "Справа", "Сверху", "Снизу". Это удалит все лишнее, оставив только нужный объект с его эффектами.
4. Сохранение в формате PNG
Теперь, когда вы создали идеальное выделение кнопки, подходите к сохранению:
- Перейдите в меню "Файл" -> "Сохранить для веб" (File -> Save for Web).
- В открывшемся окне выбора формата выберите PNG. Это важно, так как формат PNG поддерживает прозрачный фон и высокого качества.
5. Повторение для второго состояния кнопки
Для второго состояния кнопки (например, Hover) повторите те же шаги, начиная с выбора нужных слоев и заканчивая сохранением в формате PNG.
Заключение
Следуя вышеперечисленным шагам, вы сможете без труда скопировать кнопку с эффектами тени из PSD в PNG с учетом всех необходимых деталей. Это обеспечит высокое качество элементов для дальнейшего использования в HTML и сохранит визуальную целостность вашего дизайна.
Помните, что внимательное отношение к деталям и правильный выбор инструментов в Adobe Photoshop являются ключевыми аспектами успешного выполнения данной задачи.