Інтеграція Adobe Photoshop та Dreamweaver CS3 - Програмні продукти

Відкрийте Dreamweaver CS3. Для нормальної роботи Dreamweaver потрібно налаштувати сайт, вказати його місце розташування на вашому комп'ютері + деякі додаткові параметри. Тому, якщо відповідне налаштування у вас не було проведено раніше, виконаємо його зараз. Для цього заходимо в менюSite &New Site. ЗамістьUnnamed Site вводимо свою назву вашого проекту. ТиснемоNext.

У наступному вікні нам пропонують вибрати технологію (PHP, ASP і т.д.), зупинимося на класичному html варіанті і виберемо пункт No. I don't want to use a server technology. Тиснемо Next.

Вказуємо місце розташування папки сайту і знову тиснемо Next. У наступному вікні зі списку вибираємо None. Тиснемо на кнопку Next. В останньому вікні нам пропонують перевірити вказану інформацію і або скасувати все натиснувшиCancel, або підтвердити, натиснувшиDone. Тиснемо Done. Буде створено кеш сайту. Нам потрібно створити головну сторінку. Для цього йдемо в менюFile &New. У поліPage type вказуємо html, уLayout вибираємо None, уDoc Type встановлюємо None. І зберігаємо її командоюFile >Save as. У полі імені файлу вкажіть index.html

Підготовка закінчена. Тепер припустимо, у вас є готовий макет документа в форматі PSD, і ви хочете інтегрувати його або його частину в веб-сторінку. УDreamweaver йдемо в менюImage >Insert і вказуємо ваш PSD файл макета.

Потім перед вами відкриється діалогове вікноImage Preview, де ви повинні вказати формат файлу, якість картинки. Якщо потрібно, то вказати область для експорту (якщо макет великий, а вам знадобилося додати тільки кнопку або окрему картинку з нього).

Усі інструменти інтуїтивнозрозумілі. Вони по суті виконують ті ж функції, що й у Photoshop із незначними відмінностями. Так зокрема, тутешній інструментExport Area дуже нагадує звичайний Crop, спробуємо застосувати його тут і ви побачите, що він відсікає зайві зовнішні області. Після того, як визначилися з вихідними даними, тиснемо кнопку Ок. нам пропонують зберегти зображення в директорію сайту та задати йому ім'я. Що ж, то й зробимо.

Додамо текст на нашу сторінку. І тепер подивимося додаткові можливості роботи. Клацніть на зображенні лівою кнопкою миші і зверніть увагу на нижню частину робочого вікна Dreamweaver. Для зручності придивіться до скріншота.

РядокSRC посилається на джерело зображення, тобто. в даному випадку на PSD файл звідки було імпортовано зображення. РядокAlign відповідає за вирівнювання зображення щодо тексту. У рядкуEdit значок Photoshop CS3 означає ні що інше як редагування всього макета у ньому.

- дана кнопка дозволяє виставити вручну розмір документа, якість буде вибрано автоматично. Зверніть увагу, що зміни, які відбуваються цією кнопкою та іншими з цього ряду, застосовуються до імпортованого зображення, а не до макету.

зліва направо:

  • Crop - виконує операцію кадрування, аналогічна кадруванню у Photoshop
  • Resample - додає або віднімає пікселі зі зміненого JPEG або GIF файлу, щоб зображення максимально відповідало оригінальному. Ця функція зменшує розмір файлу та покращує швидкість завантаження.
  • Brightness and Contrast - дозволяє змінювати яскравість та контрастність зображення
  • Sharpen - коригує різкість зображення