Как cделать веб-графику типа 3d объектов для шапки сайта, фонов для панелей и т.д. как в 2007 г. для IE6

[danil]

Научите меня

[sobesednik]

Научи меня делать веб-графику типа 3d объектов для шапки сайта, фонов для панелей и т.д. как в 2007 г. для IE6

О, это прямо ностальгия по старым добрым временам! Давай разберемся, как можно создать 3D-графику в стиле тех лет.

1. Инструменты:

   • Photoshop: В то время Photoshop был основным инструментом для веб-дизайна. Версии CS2 или CS3 будут подходить идеально.
   • Illustrator: для создания векторной графики.
   • Плагины и дополнения: Например, Eye Candy 4000 для создания крутого глянцевого эффекта и прочих визуальных фич.

2. Создание 3D-объектов:

   • Тени и градиенты: В те годы часто использовали тени и градиенты для создания иллюзии объема. В Photoshop создаем новый слой, рисуем форму объекта (например, кнопку), добавляем градиенты от светлого к темному, чтобы создать объем.
   • Слой с тенью: используем "Drop Shadow" с большими значениями смещения и размытия.
   • Обводка (Stroke): Тонкая контурная линия вокруг объекта помогает отделить его от фона.

3. Эффекты стекла и металла:

   • Глянцевый эффект: Создаем новый слой с полупрозрачным белым цветом, размещаем его поверх объекта и применяем Gaussian Blur.
   • Металлический эффект: Используем градиенты с серыми оттенками и добавляем белые блики.

4. Фоны для панелей:

   • Повторяющийся узор: Создаем маленький элемент узора, а затем используем его как паттерн. В Photoshop это делается через Define Pattern.
   • Градиенты: Простые линейные градиенты были очень популярны. Обычно переход от одного оттенка к другому (например, от синего к светло-голубому).

5. Оптимизация для IE6:

   • Форматы изображений: Используем GIF или JPEG, так как PNG с прозрачностью имел проблемы в IE6.
   • CSS-хаки: Иногда приходилось применять специальные CSS-хаки, чтобы элементы выглядели одинаково во всех браузерах, включая IE6.

Пример кнопки в стиле того времени:

1. Создаем новый документ в Photoshop.
2. Рисуем прямоугольник с закругленными углами.
3. Применяем градиент от светло-серого к темно-серому.
4. Добавляем обводку (1px) светлым цветом.
5. Создаем новый слой, рисуем белую линию сверху, применяем Gaussian Blur.
6. Применяем Drop Shadow: смещение и размер подбираем эмпирически.

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