Spis Treści

nej” ramki ograniczającej PAGEREF _Toc534794420 \h
329

HYPERLINK \l "_Toc534794421"
Wyrównywanie względem obszaru roboczego PAGEREF _Toc534794421 \h
333

HYPERLINK \l "_Toc534794422"
Elementy pomocnicze PAGEREF _Toc534794422 \h
334

HYPERLINK \l "_Toc534794423"
Linijki PAGEREF _Toc534794423 \h
334

HYPERLINK \l "_Toc534794424"
Prowadnice PAGEREF _Toc534794424 \h
335

HYPERLINK \l "_Toc534794425"
Tworzenie prowadnic PAGEREF _Toc534794425 \h
335

HYPERLINK \l "_Toc534794426"
Blokowanie i ukrywanie prowadnic PAGEREF _Toc534794426 \h
336

HYPERLINK \l "_Toc534794427"
Przyciąganie do prowadnic PAGEREF _Toc534794427 \h
336

HYPERLINK \l "_Toc534794428"
Kolory prowadnic PAGEREF _Toc534794428 \h
337

HYPERLINK \l "_Toc534794429"
Usuwanie prowadnic PAGEREF _Toc534794429 \h
337

HYPERLINK \l "_Toc534794430"
Siatka PAGEREF _Toc534794430 \h
337

HYPERLINK \l "_Toc534794431"
Przyciąganie do siatki PAGEREF _Toc534794431 \h
338

HYPERLINK \l "_Toc534794432"
Kolor i rozmieszczenie linii siatki PAGEREF _Toc534794432 \h
338

HYPERLINK \l "_Toc534794433"
Grupowanie obiektów PAGEREF _Toc534794433 \h
338

HYPERLINK \l "_Toc534794434"
Maski alfa PAGEREF _Toc534794434 \h
340

HYPERLINK \l "_Toc534794435"
Tworzenie masek wektorowych PAGEREF _Toc534794435 \h
341

HYPERLINK \l "_Toc534794436"
Maski bitmapowe PAGEREF _Toc534794436 \h
342

HYPERLINK \l "_Toc534794437"
Dodawanie maski bitmapowej PAGEREF _Toc534794437 \h
342

HYPERLINK \l "_Toc534794438"
Polecenia Reveal All i Hide All PAGEREF _Toc534794438 \h
343

HYPERLINK \l "_Toc534794439"
Polecenia Reveal Selection i Hide Selection PAGEREF _Toc534794439 \h
343

HYPERLINK \l "_Toc534794440"
Technika Fireworks: Metoda kontrastu PAGEREF _Toc534794440 \h
344

HYPERLINK \l "_Toc534794441"
Edytowanie masek PAGEREF _Toc534794441 \h
345

HYPERLINK \l "_Toc534794442"
Wskazówki dotyczące maskowania PAGEREF _Toc534794442 \h
347

HYPERLINK \l "_Toc534794443"
Technika Fireworks: tworzenie ramek do zdjęć PAGEREF _Toc534794443 \h
348

HYPERLINK \l "_Toc534794444"
Krycie i tryby mieszania PAGEREF _Toc534794444 \h
349

HYPERLINK \l "_Toc534794445"
Sterowanie kryciem PAGEREF _Toc534794445 \h
350

HYPERLINK \l "_Toc534794446"
Wykorzystanie trybów mieszania PAGEREF _Toc534794446 \h
351

HYPERLINK \l "_Toc534794447"
Tryby mieszania PAGEREF _Toc534794447 \h
352

HYPERLINK \l "_Toc534794448"
Multiply (Mnożenie) i Screen (Mnożenie odwrotności) PAGEREF _Toc534794448 \h
353

HYPERLINK \l "_Toc534794449"
Darken (Ciemniejsze), Lighten (Jaśniejsze) i Difference (Różnica) PAGEREF _Toc534794449 \h
353

HYPERLINK \l "_Toc534794450"
Hue (Barwa), Saturation (Nasycenie), Color (Kolor) i Luminosity (Luminacja) PAGEREF _Toc534794450 \h
353

HYPERLINK \l "_Toc534794451"
Invert (Odwrotność) i Tint (Odcień) PAGEREF _Toc534794451 \h
353

HYPERLINK \l "_Toc534794452"
Erase (Usuwanie) PAGEREF _Toc534794452 \h
353

HYPERLINK \l "_Toc534794453"
Technika Fireworks: symulowanie źródeł światła za pomocą trybów mieszania PAGEREF _Toc534794453 \h
353

HYPERLINK \l "_Toc534794454"
Technika Fireworks: wtapianie zaznaczeń PAGEREF _Toc534794454 \h
355

HYPERLINK \l "_Toc534794455"
Technika Fireworks: komponowanie obiektów PAGEREF _Toc534794455 \h
355

HYPERLINK \l "_Toc534794456"
Podsumowanie PAGEREF _Toc534794456 \h
358

HYPERLINK \l "_Toc534794457"
Część IV Organizacja procesu tworzenia PAGEREF _Toc534794457 \h
360

HYPERLINK \l "_Toc534794458"
Rozdział 14. Przechwytywanie i import grafiki PAGEREF _Toc534794458 \h
361

HYPERLINK \l "_Toc534794459"
Wprowadzenie do przechwytywania obrazów PAGEREF _Toc534794459 \h
361

HYPERLINK \l "_Toc534794460"
Urządzenia obsługujące TWAIN PAGEREF _Toc534794460 \h
362

HYPERLINK \l "_Toc534794461"
Instalowanie modułów dodatkowych Photoshop Acquire (tylko dla MacOS) PAGEREF _Toc534794461 \h
363

HYPERLINK \l "_Toc534794462"
Skanowanie PAGEREF _Toc534794462 \h
363

HYPERLINK \l "_Toc534794463"
Proces skanowania PAGEREF _Toc534794463 \h
365

HYPERLINK \l "_Toc534794464"
Wybór rozdzielczości skanowania PAGEREF _Toc534794464 \h
365

HYPERLINK \l "_Toc534794465"
Określanie idealnej rozdzielczości PAGEREF _Toc534794465 \h
366

HYPERLINK \l "_Toc534794466"
Przekroczenie rozdzielczości drukowanego obrazu PAGEREF _Toc534794466 \h
366

HYPERLINK \l "_Toc534794467"
Wybór głębi kolorów PAGEREF _Toc534794467 \h
366

HYPERLINK \l "_Toc534794468"
Tryb czarno-biały PAGEREF _Toc534794468 \h
366

HYPERLINK \l "_Toc534794469"
Skala szarości PAGEREF _Toc534794469 \h
367

HYPERLINK \l "_Toc534794470"
Kolor PAGEREF _Toc534794470 \h
367

HYPERLINK \l "_Toc534794471"
Inne opcje skanowania PAGEREF _Toc534794471 \h
367

HYPERLINK \l "_Toc534794472"
Skanowanie bezpośrednio do Fireworks PAGEREF _Toc534794472 \h
368

HYPERLINK \l "_Toc534794473"
Aparaty cyfrowe PAGEREF _Toc534794473 \h
368

HYPERLINK \l "_Toc534794474"
Przechwytywanie obrazków bezpośrednio do Fireworks PAGEREF _Toc534794474 \h
369

HYPERLINK \l "_Toc534794475"
Cyfrowe kamery wideo PAGEREF _Toc534794475 \h
370

HYPERLINK \l "_Toc534794476"
Wstawianie obiektów z innych aplikacji PAGEREF _Toc534794476 \h
371

HYPERLINK \l "_Toc534794477"
Kopiowanie i wklejanie PAGEREF _Toc534794477 \h
371

HYPERLINK \l "_Toc534794478"
Przeciągnij i upuść PAGEREF _Toc534794478 \h
371

HYPERLINK \l "_Toc534794479"
Importowanie plików zewnętrznych PAGEREF _Toc534794479 \h
372

HYPERLINK \l "_Toc534794480"
Pliki grafiki bitmapowej PAGEREF _Toc534794480 \h
373

HYPERLINK \l "_Toc534794481"
Importowanie obrazków bitmapowych do istniejących dokumentów PAGEREF _Toc534794481 \h
373

HYPERLINK \l "_Toc534794482"
Importowanie plików Photoshopa PAGEREF _Toc534794482 \h
374

HYPERLINK \l "_Toc534794483"
Pliki grafiki wektorowej PAGEREF _Toc534794483 \h
376

HYPERLINK \l "_Toc534794484"
Importowanie plików wektorowych PAGEREF _Toc534794484 \h
377

HYPERLINK \l "_Toc534794485"
Importowanie plików EPS PAGEREF _Toc534794485 \h
378

HYPERLINK \l "_Toc534794486"
Praca z klipartami PAGEREF _Toc534794486 \h
379

HYPERLINK \l "_Toc534794487"
Pliki tekstowe PAGEREF _Toc534794487 \h
380

HYPERLINK \l "_Toc534794488"
Najczęściej występujące problemy PAGEREF _Toc534794488 \h
381

HYPERLINK \l "_Toc534794489"
Brakujące czcionki PAGEREF _Toc534794489 \h
381

HYPERLINK \l "_Toc534794490"
Odstępy w tekście PAGEREF _Toc534794490 \h
381

HYPERLINK \l "_Toc534794491"
Wieloplatformowe pliki PAGEREF _Toc534794491 \h
381

HYPERLINK \l "_Toc534794492"
Importowanie plików z MacOS do Fireworks dla Windows PAGEREF _Toc534794492 \h
382

HYPERLINK \l "_Toc534794493"
Importowanie plików Windows do Fireworks dla MacOS PAGEREF _Toc534794493 \h
382

HYPERLINK \l "_Toc534794494"
Zrzuty ekranowe PAGEREF _Toc534794494 \h
382

HYPERLINK \l "_Toc534794495"
Wbudowane narzędzia do tworzenia zrzutów ekranowych PAGEREF _Toc534794495 \h
382

HYPERLINK \l "_Toc534794496"
Windows PAGEREF _Toc534794496 \h
382

HYPERLINK \l "_Toc534794497"
MacOS PAGEREF _Toc534794497 \h
383

HYPERLINK \l "_Toc534794498"
Wyspecjalizowane aplikacje PAGEREF _Toc534794498 \h
383

HYPERLINK \l "_Toc534794499"
Otwieranie animacji PAGEREF _Toc534794499 \h
383

HYPERLINK \l "_Toc534794500"
Importowanie wielu plików jako nową animację PAGEREF _Toc534794500 \h
384

HYPERLINK \l "_Toc534794501"
Importowanie animacji utworzonych w programie Flash PAGEREF _Toc534794501 \h
385

HYPERLINK \l "_Toc534794502"
Podsumowanie PAGEREF _Toc534794502 \h
386

HYPERLINK \l "_Toc534794503"
Rozdział 15. Eksport i optymalizacja PAGEREF _Toc534794503 \h
387

HYPERLINK \l "_Toc534794504"
Funkcje optymalizacji PAGEREF _Toc534794504 \h
387

HYPERLINK \l "_Toc534794505"
Paleta Optimize PAGEREF _Toc534794505 \h
389

HYPERLINK \l "_Toc534794506"
Paleta Color Table PAGEREF _Toc534794506 \h
390

HYPERLINK \l "_Toc534794507"
Podgląd w obszarze roboczym PAGEREF _Toc534794507 \h
390

HYPERLINK \l "_Toc534794508"
Podgląd różnych formatów eksportu PAGEREF _Toc534794508 \h
391

HYPERLINK \l "_Toc534794509"
Zakładka Preview PAGEREF _Toc534794509 \h
392

HYPERLINK \l "_Toc534794510"
Zakładka 2-Up PAGEREF _Toc534794510 \h
392

HYPERLINK \l "_Toc534794511"
Zakładka 4-Up PAGEREF _Toc534794511 \h
393

HYPERLINK \l "_Toc534794512"
Panoramowanie PAGEREF _Toc534794512 \h
393

HYPERLINK \l "_Toc534794513"
Powiększanie PAGEREF _Toc534794513 \h
394

HYPERLINK \l "_Toc534794514"
Kontrolki odtwarzania klatek PAGEREF _Toc534794514 \h
395

HYPERLINK \l "_Toc534794515"
Eksportowanie kolorów indeksowanych PAGEREF _Toc534794515 \h
396

HYPERLINK \l "_Toc534794516"
Paleta kolorów PAGEREF _Toc534794516 \h
397

HYPERLINK \l "_Toc534794517"
Liczba kolorów PAGEREF _Toc534794517 \h
398

HYPERLINK \l "_Toc534794518"
Paleta Color Table PAGEREF _Toc534794518 \h
398

HYPERLINK \l "_Toc534794519"
Sortowanie względem „popularności” PAGEREF _Toc534794519 \h
399

HYPERLINK \l "_Toc534794520"
Matte (Tło) PAGEREF _Toc534794520 \h
400

HYPERLINK \l "_Toc534794521"
Stratna kompresja GIF PAGEREF _Toc534794521 \h
401

HYPERLINK \l "_Toc534794522"
Dithering PAGEREF _Toc534794522 \h
402

HYPERLINK \l "_Toc534794523"
Przezroczystość PAGEREF _Toc534794523 \h
403

HYPERLINK \l "_Toc534794524"
Usuwanie nieużywanych kolorów PAGEREF _Toc534794524 \h
405

HYPERLINK \l "_Toc534794525"
Przeplot PAGEREF _Toc534794525 \h
405

HYPERLINK \l "_Toc534794526"
Ustawienia zachowane (Saved Settings) PAGEREF _Toc534794526 \h
406

HYPERLINK \l "_Toc534794527"
Technika Fireworks: tworzenie obrazków przeznaczonych do wyeksportowania w formacie GIF PAGEREF _Toc534794527 \h
406

HYPERLINK \l "_Toc534794528"
Eksportowanie obrazków fotograficznych PAGEREF _Toc534794528 \h
408

HYPERLINK \l "_Toc534794529"
JPEG PAGEREF _Toc534794529 \h
409

HYPERLINK \l "_Toc534794530"
Jakość PAGEREF _Toc534794530 \h
409

HYPERLINK \l "_Toc534794531"
Jakość selektywna PAGEREF _Toc534794531 \h
411

HYPERLINK \l "_Toc534794532"
Wyostrzanie krawędzi PAGEREF _Toc534794532 \h
412

HYPERLINK \l "_Toc534794533"
Wygładzanie PAGEREF _Toc534794533 \h
413

HYPERLINK \l "_Toc534794534"
Progresywny JPEG PAGEREF _Toc534794534 \h
413

HYPERLINK \l "_Toc534794535"
PNG 32 i PNG 24 PAGEREF _Toc534794535 \h
413

HYPERLINK \l "_Toc534794536"
Inne formaty plików PAGEREF _Toc534794536 \h
414

HYPERLINK \l "_Toc534794537"
Praca w oknie Export Preview PAGEREF _Toc534794537 \h
414

HYPERLINK \l "_Toc534794538"
Kadrowanie PAGEREF _Toc534794538 \h
416

HYPERLINK \l "_Toc534794539"
Skalowanie eksportowanych obrazków PAGEREF _Toc534794539 \h
417

HYPERLINK \l "_Toc534794540"
Korzystanie z kreatorów eksportu PAGEREF _Toc534794540 \h
417

HYPERLINK \l "_Toc534794541"
Dodatkowe opcje eksportu PAGEREF _Toc534794541 \h
419

HYPERLINK \l "_Toc534794542"
Eksportowanie jako warstwy CSS PAGEREF _Toc534794542 \h
420

HYPERLINK \l "_Toc534794543"
Eksportowanie dla programu Director PAGEREF _Toc534794543 \h
421

HYPERLINK \l "_Toc534794544"
Eksportowanie plików PAGEREF _Toc534794544 \h
422

HYPERLINK \l "_Toc534794545"
Eksportowanie w formacie Image Wells PAGEREF _Toc534794545 \h
422

HYPERLINK \l "_Toc534794546"
Eksportowanie wektorów PAGEREF _Toc534794546 \h
423

HYPERLINK \l "_Toc534794547"
Eksportowanie dokumentów Photoshopa PAGEREF _Toc534794547 \h
425

HYPERLINK \l "_Toc534794548"
Podsumowanie PAGEREF _Toc534794548 \h
426

HYPERLINK \l "_Toc534794549"
Rozdział 16. Praca ze stylami Fireworks PAGEREF _Toc534794549 \h
427

HYPERLINK \l "_Toc534794550"
Podstawowe wiadomości o stylach PAGEREF _Toc534794550 \h
427

HYPERLINK \l "_Toc534794551"
Stosowanie stylów PAGEREF _Toc534794551 \h
428

HYPERLINK \l "_Toc534794552"
Tworzenie nowych stylów PAGEREF _Toc534794552 \h
429

HYPERLINK \l "_Toc534794553"
Zarządzanie stylami PAGEREF _Toc534794553 \h
431

HYPERLINK \l "_Toc534794554"
Technika Fireworks: wydobywanie tekstur i deseni ze stylów PAGEREF _Toc534794554 \h
433

HYPERLINK \l "_Toc534794555"
Podsumowanie PAGEREF _Toc534794555 \h
435

HYPERLINK \l "_Toc534794556"
Rozdział 17. Symbole i biblioteki PAGEREF _Toc534794556 \h
436

HYPERLINK \l "_Toc534794557"
Podstawowe wiadomości o symbolach i kopiach PAGEREF _Toc534794557 \h
436

HYPERLINK \l "_Toc534794558"
Paleta Library PAGEREF _Toc534794558 \h
439

HYPERLINK \l "_Toc534794559"
Tworzenie i modyfikowanie symboli PAGEREF _Toc534794559 \h
440

HYPERLINK \l "_Toc534794560"
Tworzenie symboli PAGEREF _Toc534794560 \h
440

HYPERLINK \l "_Toc534794561"
Konwertowanie obiektów PAGEREF _Toc534794561 \h
440

HYPERLINK \l "_Toc534794562"
Tworzenie symboli od zera PAGEREF _Toc534794562 \h
441

HYPERLINK \l "_Toc534794563"
Duplikowanie istniejących symboli PAGEREF _Toc534794563 \h
442

HYPERLINK \l "_Toc534794564"
Modyfikowanie symboli PAGEREF _Toc534794564 \h
442

HYPERLINK \l "_Toc534794565"
Edycja symboli „na skróty” PAGEREF _Toc534794565 \h
442

HYPERLINK \l "_Toc534794566"
Modyfikowanie właściwości symboli PAGEREF _Toc534794566 \h
443

HYPERLINK \l "_Toc534794567"
Usuwanie symboli PAGEREF _Toc534794567 \h
443

HYPERLINK \l "_Toc534794568"
Tworzenie kopii PAGEREF _Toc534794568 \h
444

HYPERLINK \l "_Toc534794569"
Modyfikowanie kopii PAGEREF _Toc534794569 \h
444

HYPERLINK \l "_Toc534794570"
Zrywanie połączeń PAGEREF _Toc534794570 \h
445

HYPERLINK \l "_Toc534794571"
Usuwanie kopii PAGEREF _Toc534794571 \h
445

HYPERLINK \l "_Toc534794572"
Praca z przyciskami PAGEREF _Toc534794572 \h
445

HYPERLINK \l "_Toc534794573"
Tworzenie i modyfikowanie symboli przycisków PAGEREF _Toc534794573 \h
445

HYPERLINK \l "_Toc534794574"
Przekształcanie istniejących obiektów na symbole przycisków PAGEREF _Toc534794574 \h
446

HYPERLINK \l "_Toc534794575"
Przekształcanie symboli przycisków na symbole graficzne PAGEREF _Toc534794575 \h
447

HYPERLINK \l "_Toc534794576"
Kopie przycisków PAGEREF _Toc534794576 \h
447

HYPERLINK \l "_Toc534794577"
Kreator łączy PAGEREF _Toc534794577 \h
448

HYPERLINK \l "_Toc534794578"
Zarządzanie bibliotekami PAGEREF _Toc534794578 \h
448

HYPERLINK \l "_Toc534794579"
Importowanie bibliotek PAGEREF _Toc534794579 \h
449

HYPERLINK \l "_Toc534794580"
Dostęp do najczęściej wykorzystywanych bibliotek PAGEREF _Toc534794580 \h
449

HYPERLINK \l "_Toc534794581"
Aktualizowanie importowanych bibliotek PAGEREF _Toc534794581 \h
450

HYPERLINK \l "_Toc534794582"
Eksportowanie i współużytkowanie bibliotek PAGEREF _Toc534794582 \h
450

HYPERLINK \l "_Toc534794583"
Podsumowanie PAGEREF _Toc534794583 \h
451

HYPERLINK \l "_Toc534794584"
Rozdział 18. Aktualizowanie i utrzymywanie grafiki internetowej PAGEREF _Toc534794584 \h
452

HYPERLINK \l "_Toc534794585"
Podgląd w przeglądarce PAGEREF _Toc534794585 \h
452

HYPERLINK \l "_Toc534794586"
Zarządzanie łączami za pomocą palety URL PAGEREF _Toc534794586 \h
454

HYPERLINK \l "_Toc534794587"
Lista URL History PAGEREF _Toc534794587 \h
455

HYPERLINK \l "_Toc534794588"
Dodawanie adresów URL do biblioteki PAGEREF _Toc534794588 \h
456

HYPERLINK \l "_Toc534794589"
Zarządzanie bibliotekami URL PAGEREF _Toc534794589 \h
457

HYPERLINK \l "_Toc534794590"
Aktualizowanie grafiki za pomocą palety Find and Replace PAGEREF _Toc534794590 \h
459

HYPERLINK \l "_Toc534794591"
Wyszukiwanie i zamienianie tekstu PAGEREF _Toc534794591 \h
461

HYPERLINK \l "_Toc534794592"
Wyszukiwanie za pomocą symboli wieloznacznych PAGEREF _Toc534794592 \h
462

HYPERLINK \l "_Toc534794593"
Wieloznaczniki PAGEREF _Toc534794593 \h
462

HYPERLINK \l "_Toc534794594"
Wyszukiwanie położeń znaków i powtarzających się znaków PAGEREF _Toc534794594 \h
463

HYPERLINK \l "_Toc534794595"
Wyszukiwanie zakresów znaków PAGEREF _Toc534794595 \h
463

HYPERLINK \l "_Toc534794596"
Korzystanie z grupowania w symbolach wieloznacznych PAGEREF _Toc534794596 \h
464

HYPERLINK \l "_Toc534794597"
Modyfikowanie atrybutów czcionek PAGEREF _Toc534794597 \h
465

HYPERLINK \l "_Toc534794598"
Zmiana kolorów w witrynie internetowej PAGEREF _Toc534794598 \h
466

HYPERLINK \l "_Toc534794599"
Zamienianie kolorów na bezpieczne dla Internetu PAGEREF _Toc534794599 \h
466

HYPERLINK \l "_Toc534794600"
Aktualizowanie adresów URL PAGEREF _Toc534794600 \h
467

HYPERLINK \l "_Toc534794601"
Praca z paletą Project Log PAGEREF _Toc534794601 \h
468

HYPERLINK \l "_Toc534794602"
Przetwarzanie wsadowe pików graficznych PAGEREF _Toc534794602 \h
469

HYPERLINK \l "_Toc534794603"
Procedura przetwarzania wsadowego PAGEREF _Toc534794603 \h
470

HYPERLINK \l "_Toc534794604"
Uruchamianie Skryptletów PAGEREF _Toc534794604 \h
472

HYPERLINK \l "_Toc534794605"
Podsumowanie PAGEREF _Toc534794605 \h
473

HYPERLINK \l "_Toc534794606"
Rozdział 19. Automatyzacja pracy za pomocą menu Commands i palety History PAGEREF _Toc534794606 \h
474

HYPERLINK \l "_Toc534794607"
Uruchamianie wbudowanych poleceń PAGEREF _Toc534794607 \h
474

HYPERLINK \l "_Toc534794608"
Podmenu Creative (Kreacja) PAGEREF _Toc534794608 \h
474

HYPERLINK \l "_Toc534794609"
Podmenu Document (Dokument) PAGEREF _Toc534794609 \h
475

HYPERLINK \l "_Toc534794610"
Center in Document (Wyśrodkuj w dokumencie) PAGEREF _Toc534794610 \h
475

HYPERLINK \l "_Toc534794611"
Rozkład na warstwy PAGEREF _Toc534794611 \h
476

HYPERLINK \l "_Toc534794612"
Zmiana właściwości warstw PAGEREF _Toc534794612 \h
476

HYPERLINK \l "_Toc534794613"
Odwracanie kolejności klatek PAGEREF _Toc534794613 \h
476

HYPERLINK \l "_Toc534794614"
Technika Fireworks: uzupełnianie animacji PAGEREF _Toc534794614 \h
476

HYPERLINK \l "_Toc534794615"
Panel Layout Sets (Konfiguracje palet) PAGEREF _Toc534794615 \h
477

HYPERLINK \l "_Toc534794616"
Panel Layout (Konfiguracja palet) PAGEREF _Toc534794616 \h
478

HYPERLINK \l "_Toc534794617"
Reset Warning (Przywracanie ostrzeżeń) PAGEREF _Toc534794617 \h
479

HYPERLINK \l "_Toc534794618"
Podmenu Web (Internet) PAGEREF _Toc534794618 \h
479

HYPERLINK \l "_Toc534794619"
Create Shared Palette (Utwórz wspólną paletę kolorów) PAGEREF _Toc534794619 \h
479

HYPERLINK \l "_Toc534794620"
Puste znaczniki Alt PAGEREF _Toc534794620 \h
480

HYPERLINK \l "_Toc534794621"
Set Alt Tags (Ustaw znaczniki Alt) PAGEREF _Toc534794621 \h
480

HYPERLINK \l "_Toc534794622"
Podnoszenie wydajności pracy za pomocą palety History PAGEREF _Toc534794622 \h
480

HYPERLINK \l "_Toc534794623"
Polecenia Undo (Cofnij) i Redo (Ponów) PAGEREF _Toc534794623 \h
481

HYPERLINK \l "_Toc534794624"
Tworzenie poleceń bez pisania kodu PAGEREF _Toc534794624 \h
482

HYPERLINK \l "_Toc534794625"
Ograniczenia polecenia Save as Command PAGEREF _Toc534794625 \h
483

HYPERLINK \l "_Toc534794626"
Technika Fireworks: skróty klawiaturowe do poleceń z menu PAGEREF _Toc534794626 \h
483

HYPERLINK \l "_Toc534794627"
Kopiowanie zadań do schowka PAGEREF _Toc534794627 \h
484

HYPERLINK \l "_Toc534794628"
Zarządzanie menu Commands PAGEREF _Toc534794628 \h
485

HYPERLINK \l "_Toc534794629"
Porządkowanie zainstalowanych poleceń PAGEREF _Toc534794629 \h
485

HYPERLINK \l "_Toc534794630"
Edycja menu Commands PAGEREF _Toc534794630 \h
486

HYPERLINK \l "_Toc534794631"
Katalog poleceń PAGEREF _Toc534794631 \h
487

HYPERLINK \l "_Toc534794632"
Dodawanie poleceń PAGEREF _Toc534794632 \h
488

HYPERLINK \l "_Toc534794633"
Podsumowanie PAGEREF _Toc534794633 \h
489

HYPERLINK \l "_Toc534794634"
Część V Obiekty sieciowe PAGEREF _Toc534794634 \h
490

HYPERLINK \l "_Toc534794635"
Rozdział 20. Mapy obrazków i plastry PAGEREF _Toc534794635 \h
491

HYPERLINK \l "_Toc534794636"
Podstawowe wiadomości o mapach obrazków i obszarach aktywnych PAGEREF _Toc534794636 \h
491

HYPERLINK \l "_Toc534794637"
Narzędzia do tworzenia obszarów aktywnych PAGEREF _Toc534794637 \h
492

HYPERLINK \l "_Toc534794638"
Prostokątne obszary aktywne PAGEREF _Toc534794638 \h
493

HYPERLINK \l "_Toc534794639"
Okrągłe obszary aktywne PAGEREF _Toc534794639 \h
494

HYPERLINK \l "_Toc534794640"
Wielokątne obszary aktywne PAGEREF _Toc534794640 \h
494

HYPERLINK \l "_Toc534794641"
Przydzielanie łączy do obszarów aktywnych PAGEREF _Toc534794641 \h
495

HYPERLINK \l "_Toc534794642"
Przekształcanie obiektów na obszary aktywne PAGEREF _Toc534794642 \h
496

HYPERLINK \l "_Toc534794643"
Eksportowanie kodu dla map obrazków PAGEREF _Toc534794643 \h
496

HYPERLINK \l "_Toc534794644"
Wybór stylu HTML PAGEREF _Toc534794644 \h
497

HYPERLINK \l "_Toc534794645"
Umieszczanie kodu mapy obrazka na stronie WWW PAGEREF _Toc534794645 \h
498

HYPERLINK \l "_Toc534794646"
Generic (Ogólny) PAGEREF _Toc534794646 \h
498

HYPERLINK \l "_Toc534794647"
Dreamweaver PAGEREF _Toc534794647 \h
499

HYPERLINK \l "_Toc534794648"
GoLive PAGEREF _Toc534794648 \h
500

HYPERLINK \l "_Toc534794649"
FrontPage PAGEREF _Toc534794649 \h
501

HYPERLINK \l "_Toc534794650"
Plastry PAGEREF _Toc534794650 \h
502

HYPERLINK \l "_Toc534794651"
Plastrowanie obrazków w Fireworks PAGEREF _Toc534794651 \h
503

HYPERLINK \l "_Toc534794652"
Prostokątne plastry PAGEREF _Toc534794652 \h
503

HYPERLINK \l "_Toc534794653"
Wielokątne plastry PAGEREF _Toc534794653 \h
504

HYPERLINK \l "_Toc534794654"
Prowadnice plastrów PAGEREF _Toc534794654 \h
504

HYPERLINK \l "_Toc534794655"
Kopiowanie obrazków do plastrów PAGEREF _Toc534794655 \h
505

HYPERLINK \l "_Toc534794656"
Przydzielanie adresów URL do plastrów PAGEREF _Toc534794656 \h
505

HYPERLINK \l "_Toc534794657"
Plastry tekstowe PAGEREF _Toc534794657 \h
506

HYPERLINK \l "_Toc534794658"
Opcje plastrów PAGEREF _Toc534794658 \h
507

HYPERLINK \l "_Toc534794659"
Eksportowanie plastrów PAGEREF _Toc534794659 \h
507

HYPERLINK \l "_Toc534794660"
Eksportowanie plastrów jako różnych typów obrazków PAGEREF _Toc534794660 \h
508

HYPERLINK \l "_Toc534794661"
Określanie opcji eksportu PAGEREF _Toc534794661 \h
508

HYPERLINK \l "_Toc534794662"
Wstawianie plastrów na stronę WWW PAGEREF _Toc534794662 \h
508

HYPERLINK \l "_Toc534794663"
Szablon Generic (Ogólny) PAGEREF _Toc534794663 \h
509

HYPERLINK \l "_Toc534794664"
Dreamweaver PAGEREF _Toc534794664 \h
509

HYPERLINK \l "_Toc534794665"
GoLive PAGEREF _Toc534794665 \h
509

HYPERLINK \l "_Toc534794666"
FrontPage PAGEREF _Toc534794666 \h
510

HYPERLINK \l "_Toc534794667"
Eksportowanie pojedynczych plastrów PAGEREF _Toc534794667 \h
510

HYPERLINK \l "_Toc534794668"
Technika Fireworks: Eksportowanie pozycji Dreamweaver Library PAGEREF _Toc534794668 \h
511

HYPERLINK \l "_Toc534794669"
Technika Fireworks: animowanie plastrów PAGEREF _Toc534794669 \h
512

HYPERLINK \l "_Toc534794670"
Podsumowanie PAGEREF _Toc534794670 \h
513

HYPERLINK \l "_Toc534794671"
Rozdział 21. Behawiory, czyli ożywiamy Fireworks PAGEREF _Toc534794671 \h
515

HYPERLINK \l "_Toc534794672"
Podstawowe wiadomości o behawiorach PAGEREF _Toc534794672 \h
515

HYPERLINK \l "_Toc534794673"
Paleta Behaviors PAGEREF _Toc534794673 \h
516

HYPERLINK \l "_Toc534794674"
Przydzielanie behawiorów PAGEREF _Toc534794674 \h
517

HYPERLINK \l "_Toc534794675"
Modyfikowanie behawiorów PAGEREF _Toc534794675 \h
517

HYPERLINK \l "_Toc534794676"
Usuwanie behawiorów PAGEREF _Toc534794676 \h
518

HYPERLINK \l "_Toc534794677"
Tworzenie rolloverów PAGEREF _Toc534794677 \h
518

HYPERLINK \l "_Toc534794678"
Jak działają rollovery PAGEREF _Toc534794678 \h
518

HYPERLINK \l "_Toc534794679"
Stany rolloverów PAGEREF _Toc534794679 \h
519

HYPERLINK \l "_Toc534794680"
Tworzenie obrazków używanych w rolloverach PAGEREF _Toc534794680 \h
519

HYPERLINK \l "_Toc534794681"
Stosowanie behawiora Simple Rollover (Prosty rollover) PAGEREF _Toc534794681 \h
521

HYPERLINK \l "_Toc534794682"
Eksportowanie rolloverów PAGEREF _Toc534794682 \h
522

HYPERLINK \l "_Toc534794683"
Eksportowanie kodu z Fireworks PAGEREF _Toc534794683 \h
523

HYPERLINK \l "_Toc534794684"
Wstawianie kodu rollovera na stronę WWW PAGEREF _Toc534794684 \h
524

HYPERLINK \l "_Toc534794685"
Behawior Nav Bar PAGEREF _Toc534794685 \h
525

HYPERLINK \l "_Toc534794686"
Tworzenia paska nawigacyjnego PAGEREF _Toc534794686 \h
525

HYPERLINK \l "_Toc534794687"
Tworzenie przycisków w oknie Button Editor PAGEREF _Toc534794687 \h
527

HYPERLINK \l "_Toc534794688"
Zaawansowane techniki tworzenia rolloverów PAGEREF _Toc534794688 \h
528

HYPERLINK \l "_Toc534794689"
Tworzenie rozdzielnych rolloverów PAGEREF _Toc534794689 \h
528

HYPERLINK \l "_Toc534794690"
Tworzenie zewnętrznych rolloverów PAGEREF _Toc534794690 \h
529

HYPERLINK \l "_Toc534794691"
Rollovery w obszarach aktywnych PAGEREF _Toc534794691 \h
530

HYPERLINK \l "_Toc534794692"
Wyświetlanie komunikatów w pasku stanu przeglądarki PAGEREF _Toc534794692 \h
531

HYPERLINK \l "_Toc534794693"
Pop-Up Menus (Listy rozwijane) PAGEREF _Toc534794693 \h
532

HYPERLINK \l "_Toc534794694"
Behawiory Drag-and-Drop („Przeciągnij i upuść”) PAGEREF _Toc534794694 \h
536

HYPERLINK \l "_Toc534794695"
Tworzenie prostego rollovera za pomocą techniki „przeciągnij i upuść” PAGEREF _Toc534794695 \h
536

HYPERLINK \l "_Toc534794696"
Tworzenie rolloverów rozdzielnych za pomocą techniki „przeciągnij i upuść” PAGEREF _Toc534794696 \h
537

HYPERLINK \l "_Toc534794697"
Usuwanie behawiorów Drag-and-Drop PAGEREF _Toc534794697 \h
538

HYPERLINK \l "_Toc534794698"
Podsumowanie PAGEREF _Toc534794698 \h
538

HYPERLINK \l "_Toc534794699"
Rozdział 22. Integracja z Dreamweaverem PAGEREF _Toc534794699 \h
539

HYPERLINK \l "_Toc534794700"
Podstawowe wiadomości o integracji Fireworks i Dreamweavera PAGEREF _Toc534794700 \h
539

HYPERLINK \l "_Toc534794701"
Optymalizacja obrazków z poziomu Dreamweavera PAGEREF _Toc534794701 \h
540

HYPERLINK \l "_Toc534794702"
Edycja obrazków z poziomu Dreamweavera PAGEREF _Toc534794702 \h
541

HYPERLINK \l "_Toc534794703"
Zdefiniowanie Fireworks jako edytora grafiki dla Dreamweavera PAGEREF _Toc534794703 \h
542

HYPERLINK \l "_Toc534794704"
Odczytywanie dziennika projektu (Design Notes) w Dreamweaverze PAGEREF _Toc534794704 \h
543

HYPERLINK \l "_Toc534794705"
Modyfikowanie plastrowanych obrazków PAGEREF _Toc534794705 \h
544

HYPERLINK \l "_Toc534794706"
Eksportowanie kodu Dreamweavera PAGEREF _Toc534794706 \h
544

HYPERLINK \l "_Toc534794707"
Praca z bibliotekami Dreamweavera PAGEREF _Toc534794707 \h
545

HYPERLINK \l "_Toc534794708"
Technika Fireworks: dodawanie warstw CSS do Dreamweavera PAGEREF _Toc534794708 \h
547

HYPERLINK \l "_Toc534794709"
Wykorzystywanie behawiorów Fireworks w Dreamweaverze PAGEREF _Toc534794709 \h
549

HYPERLINK \l "_Toc534794710"
Technika Fireworks: tworzenie internetowego albumu fotograficznego PAGEREF _Toc534794710 \h
550

HYPERLINK \l "_Toc534794711"
Tworzenie poleceń hybrydowych PAGEREF _Toc534794711 \h
552

HYPERLINK \l "_Toc534794712"
Podsumowanie PAGEREF _Toc534794712 \h
553

HYPERLINK \l "_Toc534794713"
Część VI Animacja PAGEREF _Toc534794713 \h
555

HYPERLINK \l "_Toc534794714"
Rozdział 23. Techniki animacyjne PAGEREF _Toc534794714 \h
556

HYPERLINK \l "_Toc534794715"
Podstawowe wiadomości o animacjach sieciowych PAGEREF _Toc534794715 \h
556

HYPERLINK \l "_Toc534794716"
Kwestia przepustowości PAGEREF _Toc534794716 \h
556

HYPERLINK \l "_Toc534794717"
Kompromis PAGEREF _Toc534794717 \h
557

HYPERLINK \l "_Toc534794718"
Dlaczego animowany GIF? PAGEREF _Toc534794718 \h
557

HYPERLINK \l "_Toc534794719"
Zestaw narzędzi Fireworks do tworzenia animacji PAGEREF _Toc534794719 \h
559

HYPERLINK \l "_Toc534794720"
Zarządzanie klatkami PAGEREF _Toc534794720 \h
559

HYPERLINK \l "_Toc534794721"
Dodawanie klatek PAGEREF _Toc534794721 \h
561

HYPERLINK \l "_Toc534794722"
Nazywanie klatek PAGEREF _Toc534794722 \h
562

HYPERLINK \l "_Toc534794723"
Usuwanie klatek PAGEREF _Toc534794723 \h
562

HYPERLINK \l "_Toc534794724"
Zmiana kolejności klatek PAGEREF _Toc534794724 \h
563

HYPERLINK \l "_Toc534794725"
Duplikowanie klatek PAGEREF _Toc534794725 \h
563

HYPERLINK \l "_Toc534794726"
Animowanie obiektów PAGEREF _Toc534794726 \h
563

HYPERLINK \l "_Toc534794727"
Kopiowanie obiektów do klatek PAGEREF _Toc534794727 \h
564

HYPERLINK \l "_Toc534794728"
Rozkładanie obiektów na klatki PAGEREF _Toc534794728 \h
564

HYPERLINK \l "_Toc534794729"
Zarządzanie statycznymi obiektami PAGEREF _Toc534794729 \h
564

HYPERLINK \l "_Toc534794730"
Kontrolki animacji PAGEREF _Toc534794730 \h
565

HYPERLINK \l "_Toc534794731"
Opóźnienia w odtwarzaniu klatek PAGEREF _Toc534794731 \h
566

HYPERLINK \l "_Toc534794732"
Technika „Onion skinning” PAGEREF _Toc534794732 \h
567

HYPERLINK \l "_Toc534794733"
Ustawianie zakresu klatek używanych w technice „Onion skinning” PAGEREF _Toc534794733 \h
567

HYPERLINK \l "_Toc534794734"
Edycja wielu klatek PAGEREF _Toc534794734 \h
568

HYPERLINK \l "_Toc534794735"
Ustawienia i opcje eksportu PAGEREF _Toc534794735 \h
568

HYPERLINK \l "_Toc534794736"
Usuwanie klatek PAGEREF _Toc534794736 \h
569

HYPERLINK \l "_Toc534794737"
Zapętlanie PAGEREF _Toc534794737 \h
569

HYPERLINK \l "_Toc534794738"
Eksportowanie animacji za pomocą okna dialogowego Export Preview PAGEREF _Toc534794738 \h
570

HYPERLINK \l "_Toc534794739"
Wykorzystywanie animowanych GIF-ów w projektach internetowych PAGEREF _Toc534794739 \h
572

HYPERLINK \l "_Toc534794740"
Animowanie obrazków tła PAGEREF _Toc534794740 \h
572

HYPERLINK \l "_Toc534794741"
Wielokrotne wykorzystywanie animacji PAGEREF _Toc534794741 \h
572

HYPERLINK \l "_Toc534794742"
Skalowanie animacji PAGEREF _Toc534794742 \h
572

HYPERLINK \l "_Toc534794743"
Wykorzystywanie tła przeglądarki w obrazku PAGEREF _Toc534794743 \h
573

HYPERLINK \l "_Toc534794744"
Wstępne ładowanie animacji PAGEREF _Toc534794744 \h
573

HYPERLINK \l "_Toc534794745"
Animowane rollovery PAGEREF _Toc534794745 \h
573

HYPERLINK \l "_Toc534794746"
Plastrowanie animacji PAGEREF _Toc534794746 \h
574

HYPERLINK \l "_Toc534794747"
Sekwencjonowanie symboli graficznych PAGEREF _Toc534794747 \h
574

HYPERLINK \l "_Toc534794748"
Technika Fireworks: sekwencjonowanie Xtra PAGEREF _Toc534794748 \h
577

HYPERLINK \l "_Toc534794749"
Technika Fireworks: sekwencjonowanie głębi PAGEREF _Toc534794749 \h
578

HYPERLINK \l "_Toc534794750"
Technika Fireworks: rozjaśnianie i ściemnianie PAGEREF _Toc534794750 \h
579

HYPERLINK \l "_Toc534794751"
Symbole animacyjne PAGEREF _Toc534794751 \h
581

HYPERLINK \l "_Toc534794752"
Tworzenie symboli animacyjnych PAGEREF _Toc534794752 \h
581

HYPERLINK \l "_Toc534794753"
Modyfikowanie symbolu animacyjnego PAGEREF _Toc534794753 \h
583

HYPERLINK \l "_Toc534794754"
Zmiany ustawień animacji PAGEREF _Toc534794754 \h
583

HYPERLINK \l "_Toc534794755"
Wykorzystanie palety Object PAGEREF _Toc534794755 \h
583

HYPERLINK \l "_Toc534794756"
Modyfikacja ścieżki ruchu PAGEREF _Toc534794756 \h
583

HYPERLINK \l "_Toc534794757"
Przekształcanie na symbol graficzny PAGEREF _Toc534794757 \h
584

HYPERLINK \l "_Toc534794758"
Usuwanie symbolu PAGEREF _Toc534794758 \h
584

HYPERLINK \l "_Toc534794759"
Modyfikowanie grafiki symbolu PAGEREF _Toc534794759 \h
584

HYPERLINK \l "_Toc534794760"
Podsumowanie PAGEREF _Toc534794760 \h
584

HYPERLINK \l "_Toc534794761"
Rozdział 24. Animowane banery reklamowe PAGEREF _Toc534794761 \h
586

HYPERLINK \l "_Toc534794762"
Podstawowe wiadomości o banerach reklamowych PAGEREF _Toc534794762 \h
586

HYPERLINK \l "_Toc534794763"
Rozmiar - standardy IAB/CASIE PAGEREF _Toc534794763 \h
586

HYPERLINK \l "_Toc534794764"
Rozmiar pliku PAGEREF _Toc534794764 \h
587

HYPERLINK \l "_Toc534794765"
Umieszczanie banerów na stronach WWW PAGEREF _Toc534794765 \h
587

HYPERLINK \l "_Toc534794766"
Przekaz informacji PAGEREF _Toc534794766 \h
588

HYPERLINK \l "_Toc534794767"
Technika Fireworks: tworzenie banerów reklamowych PAGEREF _Toc534794767 \h
588

HYPERLINK \l "_Toc534794768"
Krok 1: Ustawiamy scenografię PAGEREF _Toc534794768 \h
588

HYPERLINK \l "_Toc534794769"
Krok 2: Piszemy scenariusz PAGEREF _Toc534794769 \h
588

HYPERLINK \l "_Toc534794770"
Krok 3: Tworzymy aktorów PAGEREF _Toc534794770 \h
589

HYPERLINK \l "_Toc534794771"
Krok 4: Akcja! PAGEREF _Toc534794771 \h
589

HYPERLINK \l "_Toc534794772"
Krok 5: Usuwamy zbędne elementy PAGEREF _Toc534794772 \h
593

HYPERLINK \l "_Toc534794773"
Technika Fireworks: Rozmywanie jako sposób na oszczędzanie klatek PAGEREF _Toc534794773 \h
594

HYPERLINK \l "_Toc534794774"
Podsumowanie PAGEREF _Toc534794774 \h
595

HYPERLINK \l "_Toc534794775"
Część VII Programowanie w Fireworks PAGEREF _Toc534794775 \h
596

HYPERLINK \l "_Toc534794776"
Rozdział 25. Dostosowywanie Fireworks do własnych potrzeb PAGEREF _Toc534794776 \h
597

HYPERLINK \l "_Toc534794777"
Interpreter HTML i JavaScriptu PAGEREF _Toc534794777 \h
597

HYPERLINK \l "_Toc534794778"
Katalog Configuration PAGEREF _Toc534794778 \h
598

HYPERLINK \l "_Toc534794779"
Batch Code PAGEREF _Toc534794779 \h
599

HYPERLINK \l "_Toc534794780"
Commands PAGEREF _Toc534794780 \h
599

HYPERLINK \l "_Toc534794781"
Export Settings PAGEREF _Toc534794781 \h
600

HYPERLINK \l "_Toc534794782"
HTML Code PAGEREF _Toc534794782 \h
600

HYPERLINK \l "_Toc534794783"
jsextensions PAGEREF _Toc534794783 \h
600

HYPERLINK \l "_Toc534794784"
Libraries PAGEREF _Toc534794784 \h
601

HYPERLINK \l "_Toc534794785"
Nav Menu PAGEREF _Toc534794785 \h
601

HYPERLINK \l "_Toc534794786"
Patterns PAGEREF _Toc534794786 \h
601

HYPERLINK \l "_Toc534794787"
Styles PAGEREF _Toc534794787 \h
601

HYPERLINK \l "_Toc534794788"
Textures PAGEREF _Toc534794788 \h
601

HYPERLINK \l "_Toc534794789"
URL Libraries PAGEREF _Toc534794789 \h
602

HYPERLINK \l "_Toc534794790"
Xtras PAGEREF _Toc534794790 \h
602

HYPERLINK \l "_Toc534794791"
Plik preferencji Fireworks 4 PAGEREF _Toc534794791 \h
602

HYPERLINK \l "_Toc534794792"
Podsumowanie PAGEREF _Toc534794792 \h
612

HYPERLINK \l "_Toc534794793"
Rozdział 26. Interfejs programowania aplikacji - Fireworks API PAGEREF _Toc534794793 \h
613

HYPERLINK \l "_Toc534794794"
Niestandardowe typy danych PAGEREF _Toc534794794 \h
613

HYPERLINK \l "_Toc534794795"
Kolory PAGEREF _Toc534794795 \h
613

HYPERLINK \l "_Toc534794796"
URL plików PAGEREF _Toc534794796 \h
614

HYPERLINK \l "_Toc534794797"
Maski PAGEREF _Toc534794797 \h
614

HYPERLINK \l "_Toc534794798"
Matryce PAGEREF _Toc534794798 \h
614

HYPERLINK \l "_Toc534794799"
Punkty PAGEREF _Toc534794799 \h
615

HYPERLINK \l "_Toc534794800"
Prostokąty PAGEREF _Toc534794800 \h
615

HYPERLINK \l "_Toc534794801"
Rozdzielczość PAGEREF _Toc534794801 \h
615

HYPERLINK \l "_Toc534794802"
Metody globalne PAGEREF _Toc534794802 \h
615

HYPERLINK \l "_Toc534794803"
alert(komunikat) PAGEREF _Toc534794803 \h
615

HYPERLINK \l "_Toc534794804"
confirm(komunikat) PAGEREF _Toc534794804 \h
616

HYPERLINK \l "_Toc534794805"
prompt(nagłówek, tekst) PAGEREF _Toc534794805 \h
616

HYPERLINK \l "_Toc534794806"
WRITE_HTML(arg1[, arg2, ..., argN]) PAGEREF _Toc534794806 \h
617

HYPERLINK \l "_Toc534794807"
write(arg1[, arg2, ..., argN]) PAGEREF _Toc534794807 \h
617

HYPERLINK \l "_Toc534794808"
Obiekty globalne PAGEREF _Toc534794808 \h
617

HYPERLINK \l "_Toc534794809"
fw PAGEREF _Toc534794809 \h
617

HYPERLINK \l "_Toc534794810"
Właściwości PAGEREF _Toc534794810 \h
617

HYPERLINK \l "_Toc534794834"
Metody PAGEREF _Toc534794834 \h
619

HYPERLINK \l "_Toc534794841"
Obiekt Document PAGEREF _Toc534794841 \h
621

HYPERLINK \l "_Toc534794842"
Właściwości PAGEREF _Toc534794842 \h
622

HYPERLINK \l "_Toc534794885"
Metody PAGEREF _Toc534794885 \h
627

HYPERLINK \l "_Toc534794892"
Błędy PAGEREF _Toc534794892 \h
627

HYPERLINK \l "_Toc534794893"
Obiekt Find PAGEREF _Toc534794893 \h
630

HYPERLINK \l "_Toc534794894"
Obiekt Files PAGEREF _Toc534794894 \h
630

HYPERLINK \l "_Toc534794916"
Obiekty Hotspot PAGEREF _Toc534794916 \h
634

HYPERLINK \l "_Toc534794917"
exportDoc PAGEREF _Toc534794917 \h
634

HYPERLINK \l "_Toc534794918"
Mapy obrazków PAGEREF _Toc534794918 \h
634

HYPERLINK \l "_Toc534794919"
Obiekt ImageMap PAGEREF _Toc534794919 \h
635

HYPERLINK \l "_Toc534794920"
Właściwości PAGEREF _Toc534794920 \h
635

HYPERLINK \l "_Toc534794921"
Metody PAGEREF _Toc534794921 \h
635

HYPERLINK \l "_Toc534794922"
Obiekt ImageMapList PAGEREF _Toc534794922 \h
636

HYPERLINK \l "_Toc534794923"
Behawiory PAGEREF _Toc534794923 \h
636

HYPERLINK \l "_Toc534794924"
Obiekt BehaviorInfo PAGEREF _Toc534794924 \h
636

HYPERLINK \l "_Toc534794925"
Obiekt BehaviorsList PAGEREF _Toc534794925 \h
637

HYPERLINK \l "_Toc534794926"
Plastry PAGEREF _Toc534794926 \h
637

HYPERLINK \l "_Toc534794927"
Obiekt SliceInfo PAGEREF _Toc534794927 \h
638

HYPERLINK \l "_Toc534794928"
Właściwości PAGEREF _Toc534794928 \h
638

HYPERLINK \l "_Toc534794929"
Metody PAGEREF _Toc534794929 \h
639

HYPERLINK \l "_Toc534794930"
getFrameFileName(klatka) PAGEREF _Toc534794930 \h
639

HYPERLINK \l "_Toc534794931"
setFrameFileName(klatka, nazwaPliku) PAGEREF _Toc534794931 \h
639

HYPERLINK \l "_Toc534794932"
Obiekt Slices PAGEREF _Toc534794932 \h
640

HYPERLINK \l "_Toc534794933"
Dostęp do Fireworks API PAGEREF _Toc534794933 \h
640

HYPERLINK \l "_Toc534794934"
Funkcje obiektu Document PAGEREF _Toc534794934 \h
641

HYPERLINK \l "_Toc534794935"
Funkcje Fireworks PAGEREF _Toc534794935 \h
642

HYPERLINK \l "_Toc534794936"
Funkcje palety History PAGEREF _Toc534794936 \h
642

HYPERLINK \l "_Toc534794937"
Przerabianie wbudowanych poleceń PAGEREF _Toc534794937 \h
643

HYPERLINK \l "_Toc534794938"
Podsumowanie PAGEREF _Toc534794938 \h
646

HYPERLINK \l "_Toc534794939"
Dodatki PAGEREF _Toc534794939 \h
647

HYPERLINK \l "_Toc534794940"
Dodatek A Podstawowe wiadomości o stronach WWW PAGEREF _Toc534794940 \h
648

HYPERLINK \l "_Toc534794941"
Formatowanie stron PAGEREF _Toc534794941 \h
648

HYPERLINK \l "_Toc534794942"
Znaczniki i atrybuty PAGEREF _Toc534794942 \h
649

HYPERLINK \l "_Toc534794943"
Dziesięć najważniejszych znaczników PAGEREF _Toc534794943 \h
649

HYPERLINK \l "_Toc534794944"
Znacznik HTML: <html></html> PAGEREF _Toc534794944 \h
650

HYPERLINK \l "_Toc534794945"
Znacznik head: <head></head> PAGEREF _Toc534794945 \h
650

HYPERLINK \l "_Toc534794946"
Znacznik title: <title></title> PAGEREF _Toc534794946 \h
650

HYPERLINK \l "_Toc534794947"
Znacznik meta: <meta></meta> PAGEREF _Toc534794947 \h
651

HYPERLINK \l "_Toc534794948"
Znacznik body: <body></body> PAGEREF _Toc534794948 \h
651

HYPERLINK \l "_Toc534794949"
Znacznik paragraph: <p></p> PAGEREF _Toc534794949 \h
651

HYPERLINK \l "_Toc534794950"
Znacznik anchor: <a></a> PAGEREF _Toc534794950 \h
652

HYPERLINK \l "_Toc534794951"
Znacznik image: <img> PAGEREF _Toc534794951 \h
653

HYPERLINK \l "_Toc534794952"
Znacznik font: <font></font> PAGEREF _Toc534794952 \h
654

HYPERLINK \l "_Toc534794953"
Znacznik table: <table></table> PAGEREF _Toc534794953 \h
655

HYPERLINK \l "_Toc534794954"
Zróżnicowanie wśród przeglądarek internetowych PAGEREF _Toc534794954 \h
656

HYPERLINK \l "_Toc534794955"
Przeglądarki PAGEREF _Toc534794955 \h
657

HYPERLINK \l "_Toc534794956"
Netscape Navigator (Communicator) PAGEREF _Toc534794956 \h
657

HYPERLINK \l "_Toc534794957"
Microsoft Internet Explorer PAGEREF _Toc534794957 \h
657

HYPERLINK \l "_Toc534794958"
America Online PAGEREF _Toc534794958 \h
658

HYPERLINK \l "_Toc534794959"
WebTV PAGEREF _Toc534794959 \h
658

HYPERLINK \l "_Toc534794960"
Wieloplatformowość PAGEREF _Toc534794960 \h
659

HYPERLINK \l "_Toc534794961"
Czcionki PAGEREF _Toc534794961 \h
659

HYPERLINK \l "_Toc534794962"
Elementy formularzy PAGEREF _Toc534794962 \h
660

HYPERLINK \l "_Toc534794963"
Protokoły PAGEREF _Toc534794963 \h
661

HYPERLINK \l "_Toc534794964"
HTTP i HTTPS PAGEREF _Toc534794964 \h
661

HYPERLINK \l "_Toc534794965"
FTP PAGEREF _Toc534794965 \h
661

HYPERLINK \l "_Toc534794966"
SMTP i POP PAGEREF _Toc534794966 \h
661

HYPERLINK \l "_Toc534794967"
NNTP PAGEREF _Toc534794967 \h
662

HYPERLINK \l "_Toc534794968"
RTSP PAGEREF _Toc534794968 \h
662

HYPERLINK \l "_Toc534794969"
Dodatek B Skróty klawiaturowe PAGEREF _Toc534794969 \h
663

HYPERLINK \l "_Toc534794970"
Menu File (Plik) PAGEREF _Toc534794970 \h
663

HYPERLINK \l "_Toc534794971"
Menu Edit PAGEREF _Toc534794971 \h
664

HYPERLINK \l "_Toc534794972"
Menu View (Widok) PAGEREF _Toc534794972 \h
665

HYPERLINK \l "_Toc534794973"
Menu Insert (Wstaw) PAGEREF _Toc534794973 \h
666

HYPERLINK \l "_Toc534794974"
Menu Modify (Obiekt) PAGEREF _Toc534794974 \h
666

HYPERLINK \l "_Toc534794975"
Menu Text (Tekst) PAGEREF _Toc534794975 \h
669

HYPERLINK \l "_Toc534794976"
Menu Commands (Polecenia) PAGEREF _Toc534794976 \h
670

HYPERLINK \l "_Toc534794977"
Menu Xtras PAGEREF _Toc534794977 \h
671

HYPERLINK \l "_Toc534794978"
Menu Window (Okno) PAGEREF _Toc534794978 \h
671

HYPERLINK \l "_Toc534794979"
Menu Help (Pomoc) PAGEREF _Toc534794979 \h
672

HYPERLINK \l "_Toc534794980"
Paleta narzędziowa PAGEREF _Toc534794980 \h
673

HYPERLINK \l "_Toc534794981"
Dziesięć najważniejszych skrótów klawiaturowych Fireworks PAGEREF _Toc534794981 \h
675

HYPERLINK \l "_Toc534794982"
Dodatek C Co znajdziesz na CD-ROM-ie PAGEREF _Toc534794982 \h
676

HYPERLINK \l "_Toc534794983"
Korzystanie z płyty CD-ROM PAGEREF _Toc534794983 \h
676

HYPERLINK \l "_Toc534794984"
Pliki i programy na CD-ROM-ie PAGEREF _Toc534794984 \h
676

HYPERLINK \l "_Toc534794985"
Wersje demonstracyjne Fireworks 4, Dreamweaver 4, Dreamweaver UDev 4, Flash 4 i FreeHand 9 PAGEREF _Toc534794985 \h
676

HYPERLINK \l "_Toc534794986"
Dodatkowe oprogramowanie PAGEREF _Toc534794986 \h
677

HYPERLINK \l "_Toc534794987"
Xenofex firmy Alien Skin PAGEREF _Toc534794987 \h
677

HYPERLINK \l "_Toc534794988"
ColorWeb Pro firmy Pantone PAGEREF _Toc534794988 \h
677

HYPERLINK \l "_Toc534794989"
Nauka w trybie online PAGEREF _Toc534794989 \h
677

HYPERLINK \l "_Toc534794990"
Rozszerzenia Fireworks PAGEREF _Toc534794990 \h
677

HYPERLINK \l "_Toc534794991"
Polecenia Fireworks PAGEREF _Toc534794991 \h
677

HYPERLINK \l "_Toc534794992"
Style i tekstury Fireworks PAGEREF _Toc534794992 \h
678

HYPERLINK \l "_Toc534794993"
Gradienty, obrysy i biblioteki obrazków PAGEREF _Toc534794993 \h
678

HYPERLINK \l "_Toc534794994"
Przykłady do książki PAGEREF _Toc534794994 \h
678

HYPERLINK \l "_Toc534794995"
Zasoby internetowe PAGEREF _Toc534794995 \h
678

Część I
Poznajemy Fireworks

Rozdział 1.
Witamy w Fireworks

W tym rozdziale:

• „Filozofia” Fireworks.

• Łączenie grafiki wektorowej i bitmapowej.

• Integracja grafiki z istniejącymi obrazkami.

• Integracja z Internetem.

• Zarządzanie środowiskiem pracy.

• Nowe i poprawione funkcje Fireworks 4.

Każdego roku, czwartego lipca siedzimy z przyjaciółmi i rodziną na dachu domu są­sia­­dów i obserwujemy sztuczne ognie eksplodujące nad Manhattanem. Podobne grupy ob­ser­wa­to­rów znajdują się wówczas na dachach prawie wszystkich budynków w oko­licy. Z każdej stro­ny rozlegają się „ochy” i „achy” w odpowiedzi na spektakularne pokazy świe­t­lne. Nie­które wzory tworzone na niebie wydają się znajome, inne widzi­my po raz pierwszy.

Internet to globalny, trwający 24 godziny na dobę, pokaz fajerwerków. Grafika znaj­du­ją­ca się na stronach internetowych eksploduje swoją błyskotliwością, intensywnością i mno­gością znaczeń. Każdy może ją oglądać z własnej perspektywy. Internet to nowe uni­katowe medium, które jednocześnie uczy i bawi. Jest to również nadzwyczaj aktyw­ne medium. Każdego dnia pojawiają się w nim tysiące nowych i zaktualizowanych stron WWW. Oprócz tekstu, strony internetowe pełne są grafiki: wszystkich typów obraz­ków, ilustracji, logo, symboli i ikon. Niektóre obrazy są statyczne, inne animowane, a jesz­cze inne - interaktywne. Projektowanie zdecydowanie wkroczyło na zupełnie no­we obszary.

Aby wnieść swój wkład w działalność nowego medium, niezbędne jest posiadanie no­wych narzędzi. Internet jest medium opartym na wyświetlaniu informacji na ekranie, a nie na druku i dlatego też działa na własnych zasadach. Programy graficzne zorien­to­wa­ne na druk są wzbogacane o nowe narzędzia umożliwiające tworzenie grafiki inter­ne­towej, ale wystąpiła potrzeba stworzenia zupełnie nowego narzędzia, które dałoby


pro­jektantom internetowym wszystkie potrzebne funkcje i pozwoliło pracować jed­no­cześ­nie wydajnie i kreatywnie. Narzędzie zdolne tworzyć wspaniałą grafikę i na tyle potężne, aby mogłoby rozjaśnić noc.

Więc powstał program Fireworks.

Fireworks
- pakiet graficzny nowej generacji

Fireworks firmy Macromedia to program do tworzenia grafiki dla Internetu. Jako pakiet gra­ficzny nowej generacji, Fireworks zdecydowanie odróżnia się od wcześniej pow­sta­łych programów graficznych. Mimo że wiele funkcji Fireworks działa podobnie, jak w in­nych programach graficznych, jest on aplikacją nastawioną na tworzenie grafiki in­ter­netowej i posiada wiele innowacyjnych możliwości.

Fireworks został stworzony od początku do końca pod kątem Internetu. Przed wypro­du­ko­waniem Fireworks, Macromedia przeanalizowała metody pracy grafików i stwier­dzi­ła, że większość z nich w dążeniu do celu wykorzystuje wiele różnych narzędzi. Zarysy pro­jektów powstają przeważnie w programach wektorowych, takich jak FreeHand lub Adobe Illu­stra­tor. Grafiki wektorowe jednak nie mogą być obsługiwane w Internecie, dlatego też ilu­stracje muszą być następnie importowane do programów bitmapowych, takich jak Pho­toshop lub Corel PhotoPaint. W programach bitmapowych trzeba mozolnie stwo­rzyć wszystkie po­trze­bne efekty, na przykład wytłoczenia krawędzi i połączyć tekst z obraz­kiem, zanim gra­fi­kę będzie można wyeksportować do programu służącego do op­tymalizacji. Aplikacja optymalizująca, na przykład Debabelizer, musi tak prze­kształ­cić grafikę, by używała jedy­nie kolorów bez­pie­cznych dla Internetu i jej plik miał jak naj­mniejszy rozmiar fizyczny, aby mogła był szybko wyświetlana nawet u użytkow­ni­ków posiadających mało wydajne połą­cze­nie z Inter­ne­tem. Kolejne elementy integracji Fire­works z Internetem to: łącza do adre­sów URL, mapy obrazków, obrazki reagujące na na­jechanie kursorem (ang. rollovers), obrazki podzielone na fragmenty (ang. slices) i wie­le innych. Pozwala to na wyelimi­no­wa­nie potrzeby stosowania wielu specjali­sty­cznych programów. Dodatkowo wielu projek­tan­tów grafiki dla Internetu zmu­szonych jest nauczyć się języka HTML i JavaScript. Program komputerowy nie jest w stanie wy­ko­nać wszystkich określonych zadań i wiele z nich trzeba wykonać ręcznie. Oprócz ko­niecz­ności opanowania wszystkich tych osob­nych programów, występuje też kolejny pro­blem: edycja obrazka. Jeśli klient zasugeruje wprowadzenie zmian (a klienci zawsze chcą zmian!), cała grafika musi zostać stworzona od nowa.

Połączenie najlepszych możliwości

Fireworks oferuje rewolucyjne metody pracy z grafiką bitmapową. łączy najlepsze funk­cje wielu różnych programów:

• Narzędzia wektorowe służące do tworzenia projektu grafiki i jej edytowania.

• Proste, ale spektakularne efekty specjalne.

• Wyszukane narzędzia do edycji grafiki bitmapowej umożliwiające pracę z ist­nie­jącą grafiką i skanowanymi obrazkami.

• Narzędzia optymalizacji grafiki pod kątem standardów internetowych umo­żli­wia­jące porównanie różnych ustawień, co pozwala na wybranie obrazka, który naj­lepiej wygląda i ma najmniejszy rozmiar.

• Przypisywanie elementom graficznym funkcji opisanych za pomocą kodu HTML lub JavaScript.

Najlepsze jest jednak to, że praktycznie każdy element grafiki tworzonej w Fireworks mo­że być w dowolnej chwili modyfikowany. Możliwość ta pozwala nie tylko zao­szczę­dzić mnóstwo czasu, ale także podnieść wydajność pracy (a Internet jest medium wy­ma­gającym nadzwyczaj wielu materiałów i ciągłej troski o ich aktualność). Przez cały czas przybywa wiele nowych witryn WWW, a istniejące wymagają nieustannej aktu­ali­za­cji. Obiektowa natura Fireworks - każdy element może być w dowolnej chwili mody­fi­kowany - nadąża za potrzebami projektantów grafiki internetowej.

Wydajne tworzenie grafiki wektorowej

Jeśli wcześnie tworzyłeś grafikę przeznaczoną do druku i pracowałeś z programami, ta­ki­mi jak Adobe Photoshop, najpierw będziesz musiał poznać podstawowe funkcje Fire­works. Po pierwsze - musisz uświadomić sobie, że Fireworks nie jest programem słu­żą­cym do edycji grafiki bitmapowej, choć posiada doskonałe narzędzia umożliwiające edycję ob­razków. Zasadniczo Fireworks jest programem wektorowym, pozwalającym na two­rze­nie realistycznych obrazków bitmapowych. Jak już zrozumiesz, na czym polega two­rze­nie wektorów (dowiesz się, że ścieżki wektorowe są dużo bardziej elastyczne niż bit­ma­py) i sto­sowanie do nich bitmapowych obrysów oraz wypełnień, nie zechcesz powrócić do wcześ­niej wykorzystywanych programów.

Orientacja na wyświetlanie

Fireworks, jako program do tworzenia grafiki internetowej, jest zorientowany na pro­duk­cję grafiki, która będzie wyświetlana na ekranie, nie drukowana. Rozdzielczość obraz­ka wyświetlanego na ekranie jest zazwyczaj mniejsza niż rozdzielczość tego sa­me­go obrazka w druku. Obrazki są przeważnie tworzone i zapisywane w ich rzeczywistych roz­miarach; technika polegająca na pracy z dużymi obrazkami zawierającymi więcej szcze­gółów i późniejsza redukcja ich rozmiarów nie zdaje egzaminu w Fireworks. Dzia­ła­nie takie daje wręcz odwrotne rezultaty, gdyż powoduje utratę wielu szczegółów ob­raz­ka. Możesz jednak powiększyć obrazek (nawet do 6400 procent) i wówczas dokonać edy­cji jego szczegółów. Pamiętaj jedynie o tym, że w przeglądarkach internetowych obrazki są wyświetlane w swoich naturalnych rozmiarach.

Integracja z Internetem

Kolejna rzecz która sprawia, że program jest idealnym rozwiązaniem dla użytkowników ra­czkujących w Sieci: Fireworks jest zorientowany nie tylko na grafikę ekranową, ale na grafikę internetową. Wiele funkcji Fireworks jest dostosowanych do reguł panu­ją­cych w Internecie, takich jak minimalne rozmiary fizyczne plików, ograniczenia licz­by ko­lorów i możliwości większości przeglądarek internetowych. Fireworks w pełni res­pe­k­tuje wady i zalety środowiska, jakim jest Internet i, przy odpowiednim wyko­rzys­ta­niu, pomaga projektować grafikę respektującą ograniczenia przeglądarek i zaso­bów in­ter­netowych.

	Graficzną reprezentację możliwości, jakie daje Fireworks znajdziesz w kolorowej wkładce.

Piksele i ścieżki: Wszystko, co najlepsze

Mimo że Internet jest medium opartym na wyświetlaniu grafiki bitmapowej, wektory (zwa­ne również ścieżkami) są dużo łatwiejsze do kontroli i edycji. Najlepszą moż­li­woś­cią Fireworks jest tworzenie ścieżek, choć oferuje on również wiele opcji służących do pracy z grafiką opartą na pikselach. Swobodne przełączanie programu pomiędzy try­ba­mi pracy z pikselami i ścieżkami sprawia, że Fireworks jest doskonałym narzędziem do pracy z obydwoma rodzajami grafiki.

Oddzielne elementy graficzne są traktowane przez program jako niezależne obiekty, któ­re mogą być łatwo przekształcane, rozmieszczane i wyrównywane. Dwa główne typy obiektów, z którymi będziemy pracować w Fireworks to obiekty wektorowe i obiekty bitmapowe. Zorientowanie na pra­cę z obiektami jest nadzwyczaj przydatne w procesie produkcji. Na przykład prosty wektor, definiujący kontur przycisku, może być szybko duplikowany i rozmieszczany, co pozwala na stworzenie paska nawigacyjnego zawierającego wiele takich samych przy­cisków z odróżniającymi je etykietami tekstowymi. Do stworzenia obiektów przed­sta­wionych na rysunku 1.1 wykorzystane zostały jedynie trzy obiekty wektorowe.

Używanie narzędzi wektorowych z bitmapami

Fireworks zapewnia jeszcze większą elastyczność, zachowując podział pomiędzy obry­sem, wypełnieniem i efektami zastosowanymi do tego samego obiektu. Daje to projek­tan­tom prawie nieograniczone możliwości manipulowania grafiką z jednoczesnym utrzy­ma­niem jej podziału na oddzielne, edytowalne obiekty. Jeśli klientowi bardzo po­do­ba się po­ma­rańczowy blask otaczający przycisk, ale zechce, aby tekst przycisku zos­tał wy­środ­kowany, a nie wyrównany do jego prawej krawędzi, wykonanie tego w Fire­works nie będzie stanowiło problemu. Możliwość zmiany jednego z elementów grafiki, bez konie­czności tworzenia jej całej od początku, to jedna z najlepszych funkcji Fire­works.

Choć w procesie tworzenia struktury grafiki w Fireworks wykorzystywane są obiekty wek­torowe, wszystkie pozostałe elementy tej struktury (obrysy, wypełnienia i efekty) są two­rzone z pikseli (rysunek 1.2).

		Więcej informacji o obrysach znajdziesz w rozdziale 8. Jeśli chcesz do­wiedzieć się czegoś więcej o wypełnieniach, zajrzyj do rozdziału 11.
Rysunek 1.1. Podczas tworzenia i modyfikowania grafiki w Fireworks można w prosty sposób wielokrotnie wykorzystywać te same ścieżki wektorowe
Rysunek 1.2. Bez określenia obrysu, wypełnienia lub efektu doskonale widoczne są ścieżki wektorowe (po lewej).Jednak po zastosowaniu obrysu i (lub) wypełnienia i (lub) efektu, można skorzystać z powiększenia i zobaczyć, że widzialne elementy w Fireworks są wyświetlane za pomocą pikseli (po prawej).

Piksele są przeliczane za pomocą wielu różnych zmiennych i w rezultacie wy­świetlane jako naturalne wektorowe obiekty Fireworks. Piksele są ponownie przeliczane i za­sto­sowywane po każdej zmianie struktury ścieżki (rysunek 1.3). Pozwala to uchronić się przed zniekształceniami występującymi w innych programach komputerowych pod­czas zmian kształtów obrazków bitmapowych. Innymi słowy, gdy zmienisz ścieżkę w Fire­works, program szybko „przerobi” całą grafikę.

Rysunek 1.3. Fireworks po każdej zmianie kształtu obiektu ponownie przelicza i stosuje wypełnienie, obrys i inne jego właściwości

Zgodność bitmap

Jako narzędzie graficzne nowej generacji, Fireworks pozwala na wykorzystywanie ob­raz­ków tworzonych we wcześniejszych programach. Wykorzystując szeroki wachlarz fil­trów importu, w Fireworks można otwierać i edytować pliki tworzone w programach Pho­toshop, CorelDraw, FreeHand i wielu innych. Fireworks oferuje kompletny zestaw na­rzędzi selekcji używanych w pracy z bitmapami: zaznaczenie prostokątne, lasso i różdżkę oraz narzędzia służące do malowania, takie jak ołówek i gumka.

Bardzo ważnym elementem każdego programu do tworzenia grafiki bitmapowej są fil­try i Fi­reworks nie odstaje pod tym względem od swoich konkurentów. Oprócz wielu wbu­do­wa­nych filtrów, takich jak Gaussian Blur (Rozmycie gaussowskie), Invert (Od­wrot­ność) i Sharpen (Wyostrzenie), Fireworks umożliwia wykorzystanie filtrów zgod­nych z Photosho­pem. W rezultacie, w Fireworks działają wszystkie plug-iny obsługujące stan­dardy Pho­to­sho­pa, na przykład Kai's Power Tools i Eye Candy firmy Alien Skin oraz rozszerzenia Xenofex. Do Fireworks 4 dołączana jest nawet wersja LE (Limited Edition) pakietu Eye Candy, za­wierająca trzy filtry, m. in. filtr Motion Trail (Poruszenie) (rysunek 1.4). Co wię­cej, w prosty sposób można dołączać wszystkie rozszerzenia różnych firm, które są wy­korzystywane w Pho­to­shopie. Wystarczy w tym celu zmienić pojedyncze ustawienie w preferencjach programu.

	Chcesz dowiedzieć się więcej o wykorzystywaniu zewnętrznych filtrów w Fireworks? Zajrzyj do rozdziału 12.

Efekty

Jednym z największych wyzwań dla projektanta grafiki komputerowej jest stosowanie efek­tów specjalnych, na przykład fazowanie krawędzi czy rzucanie cieni. Fireworks za­stę­puje skomplikowaną pracę z warstwami i maskami mechanizmem nazywanym Live Effects. Live Effects XE "Live Effects" pozwala na bardzo łatwe modyfikacje parametrów poszczególnych efek­tów, takich jak Inner Bevel (Faza wewnętrzna), Outer Bevel (Faza zewnętrzna), Drop Shadow (Cień zewnętrzny) czy Emboss (Wytłoczenie).

Rysunek 1.4. Do Fireworks 4 dołączany jest filtr Motion Trail, będący częścią pakietu Eye Candy LE

Efekty te nie tylko można bardzo łatwo tworzyć w Fireworks, ale automatycznie dosto­so­wują się one do dowolnych zmian obiektów. Stąd ich nazwa - Live Effects (w wol­nym tłumaczeniu „żywe efekty”). Funkcja ta jest bardzo przydatna przy modyfikowaniu gra­fiki i pozwala znacznie zwiększyć wydajność pracy. Możesz nawet przetwarzać wsa­do­wo większe ilości plików. Gdy zredukujesz ich rozmiary, efekty zostaną również auto­matycznie przeskalowane i ponownie zastosowane.

Oprócz wbudowanego modułu filtrów Live Effects, w Fireworks 4 można wykorzystywać tak­że filtry zgodne z Photoshopem, które możesz instalować jako rozszerzenia (Xtras). Fil­try te są wyświetlane w palecie Effect, co przedstawiono na rys. 1.5, i są tak samo „żywe”, jak każdy inny filtr z gru­py Live Effects. Innymi słowy, dopóki wektorowy obiekt jest edytowalny, za­sto­so­wa­ne do niego efekty również mogą być w dowolnej chwili edytowane, usuwane lub usta­wiane w innej kolejności. Co więcej, kombinacje efektów można zapisać pod włas­ną nazwą i wykorzystywać w przyszłości do innych obiektów.

	Więcej informacji o Live Effects znajdziesz w rozdziale 12.

Style

Style XE "style" pozwalają na zachowanie spójnego wyglądu wielu różnych obiektów wy­ko­rzys­ty­wa­nych w jednym projekcie. Style Fireworks mogą zawierać ustawienia obrysów, efek­tów a nawet tekstu. Projektanci stron WWW mogą je wykorzystywać w celu zapew­nie­nia spój­nego wyglądu całej witryny internetowej. Dodatkowo style mogą być ekspor­to­wa­ne jako pliki. Funkcję tę można stosować do utworzenia stylów grafiki internetowej, któ­re będą mogły być wykorzystywane przez pozostałych projektantów pracujących nad grafiką przeznaczoną do zastosowania w tej samej witrynie WWW.

Rysunek 1.5. Paleta Effect pozwala na stosowanie, usuwanie i zmianę kolejności efektów Live Effects, jak również filtrów zgodnych z Photoshop, umożliwiając zarazem edytowanie wszystkich ustawień

Style są także sposobem na szybkie nadawanie różnych wyglądów pojedynczym obiek­tom. Możesz łatwo zastosować do obiektu zestaw różnych ustawień (rysunek 1.6).

Rysunek 1.6. Podstawowy kształt geometryczny (po lewej) przybiera nową formę po zastosowaniu stylów (w środku i po prawej)

Oprócz stylów znajdujących się standardowo w palecie Styles, Macromedia oferuje wiele do­datkowych, predefiniowanych stylów. Możesz je znaleźć na płycie instalacyjnej Fire­works lub w Internecie, pod adresem:

http://www.macromedia.com/software/fireworks/download/styles.

	Style pozwalają na zaoszczędzenie mnóstwa czasu i pracy. Przeko­nasz się o tym, czytając rozdział 16.

Animacja

Zanim pojawił się Fireworks, każdy projektant grafiki internetowej musiał mieć w swo­im zestawie narzędzie do tworzenia animowanych GIF-ów (Graphics Interchange For­mat), wy­korzystywanych w budowaniu bannerów reklamowych. Teraz nie są Ci już po­trzeb­ne żadne oddzielne programy. Fireworks umożliwia tworzenie, wyświetlanie i ekspor­to­wanie animowanych GIF-ów w dowolnych rozmiarach i kształtach. Oczywiście w pro­ce­sie two­rzenia animacji masz możliwość wykorzystywania wszystkich narzędzi, za­rów­no bit­mapowych, jak i wektorowych.

Każdy obiekt Fireworks może zostać zamieniony na symbol, który zostanie umie­szczo­ny w bibliotece (Library). Kopie symboli nazywane są w języku angielskim „instances”. Z wielu instancji moż­na utworzyć animowaną sekwencję. Tworzysz obiekt początkowy i końcowy, a Fireworks wy­znacza wszystkie etapy pośrednie. W sekwencjonowaniu (ang. tweening) można wy­ko­rzystywać zmiany położenia lub innych ustawień obiektu. Możesz na przykład stwo­rzyć efekt znikającego obiektu poprzez sekwencjonowanie pomiędzy dwiema jego instan­cjami: nieprzezroczystą i przezroczystą.

Oprócz typowej animacji klatka po klatce, Fireworks oferuje również specjalne animowane symbole, o właściwościach umożliwiających stałą edycję, dzięki czemu tworzenie i edytowanie animacji w Fireworks jest naprawdę łatwe (patrz rys. 1.7).

Rysunek 1.7. Łatwo jest stworzyć podobny symbol pojedynczej animacji, na który składa się szereg ujęć wstawionych automatycznie do dokumentu programu Fireworks

	Animacje są integralną częścią grafiki internetowej. Więcej informacji na ich temat znajdziesz w części VI.

Integracja z Internetem

Jak nazwałbyś program komputerowy, który daje większe możliwości niż sama produk­cja grafiki? Nazwałbym to wielką innowacją. Na zewnątrz, strony internetowe to kom­po­zycje tekstu i obrazu, ale za wszystko to odpowiada ich kod. Fireworks potrafi łączyć obraz­ki przeznaczone do wykorzystania na stronie WWW z kodem HTML i JavaScript i tworzyć mapy obrazków, podzielone obrazki, przyciski reagujące na najechanie kur­so­rem i wiele innych. Program daje nawet możliwość wyboru rodzaju stylu kodu, w za­leż­noś­ci od wykorzystywanego przez Ciebie programu służącego do projektowania stron.

Fireworks jest w pełni zintegrowany z Internetem. Każdy z jego elementów, od narzędzia pozwalającego próbkować kolory bezpieczne dla przeglądarek po optymalizację eksportu, respektuje re­guły panujące w Internecie. Nawet funkcje powszechnie spotykane także w innych pro­gramach, zostały w Fireworks ponownie zaprojektowane z myślą o ich zastosowaniu w sieci. Na przykład nieoceniona dla projektantów grafiki jest możliwość jej wydruko­wa­nia. W Fireworks możesz wydrukować grafikę tak jak będzie ona wyglądała w sieci lub w wyższej rozdzielczości - Twój wybór.

Aktywne obszary i plastry

Aktywne obszary (hotspots XE "hotspot" ) i plastry (slices XE "slice" ) to elementy bardzo często wykorzysty­wa­ne w projektowaniu grafiki internetowej. Zanim pojawił się Fireworks, projektanci musieli je tworzyć za pomocą dodatkowych narzędzi lub męczyć się i wszystko robić ręcznie. Ob­szar aktywny XE "Ob­szar aktywny" to część mapy obrazka umieszczonej na stronie WWW, któ­ra jest defi­nio­wana za pomocą współrzędnych x i y (czyli elementów niestosowanych na co dzień przez artystów). Fireworks pozwala na rysowanie aktywnych obszarów tak samo, jak każ­dego innego obiektu i wykona za Ciebie wszystkie niezbędne obli­czenia mate­matyczne.

Plaster XE "Plaster" to termin określający fragment większego obrazka, który został „pokrojony” na mniej­sze części. Pozwala to na szybsze ładowanie obrazka lub dołączenie do niego inter­aktywnych elementów. Poszczególne fragmenty obrazka są następnie łączone ze so­bą w tabeli zdefiniowanej w kodzie HTML. Jeśli wydaje Ci się, że wymaga to dużych na­kładów pracy, to masz rację - chyba, że wykorzystasz Fireworks. Krojenie obrazka po­lega na rysowaniu na nim poszczególnych plastrów (rysunek 1.8) i wyeksportowaniu ich jako jednej całości. Fireworks stworzy za Ciebie całą tabelę HTML. Oprócz tego, Fire­works pozwala także ustawiać różne parametry optymalizacji dla różnych plastrów. Przy­kładowo, jeden fragment obrazka może wyeksportować jako JPEG (Joint Pho­to­gra­phic Experts Group), zaś inny jako GIF (lub inny format graficzny zapewniający naj­wyż­szą jakość obrazka przy jak najmniejszym rozmiarze fizycznym pliku).

Rysunek 1.8. Narysuj plaster, a Fireworks potnie obrazek i wygeneruje kod HTML
		Więcej informacji o możliwościach aktywnych obszarów i plastrów znaj­dziesz w rozdziale 20.

Paleta URL

Aby móc w pełni wykorzystać zalety generowania przez Fireworks kodów HTML i Java­Script, musisz przydzielić hiperłącza do obrazków. Adresy URL można im­por­to­wać za pomocą palety URL z biblioteki URL, plików zakładek przeglądarki lub do­ku­men­tów HTML. Pozwala to nie tylko uniknąć żmudnego wprowadzania wszystkich adre­sów ręcznie, ale także zmniejsza ryzyko występowania błędów, które możesz po­peł­nić przy wpisywaniu. Adresy URL znajdujące się w palecie możesz łatwo zasto­so­wy­wać do plastrów lub aktywnych obszarów znajdujących się w mapach obrazków i two­rzyć w ten sposób przyciski nawigacyjne.

Obrazki z behawiorami

Projektantom stron WWW nie wystarczają już obrazy statyczne. Na każdej dobrej stro­nie internetowej powinny znajdować się interaktywne obrazki, czyli takie, które reagują na akcje użytkownika. Fireworks umożliwia tworzenie takich elementów za pomocą skryp­tów zwanych, podobnie jak w innych aplikacjach firmy Macromedia, beha­wio­ra­mi. Behawior XE "behawior" to połączenie obrazka ze złożonym kodem HTML lub JavaScript. Przy sto­sowaniu behawiorów w Fireworks, program generuje cały kod za Ciebie.

Behawiory Fireworks mogą na przykład wyświetlać komunikat, gdy użytkownik umieś­ci kur­sor nad określonym obrazkiem albo zmienić go na inny. Fireworks może nawet zmie­nić obrazek w jednym miejscu, gdy zostanie wybrana grafika znajdująca się gdzie in­dziej. Wspaniałą możliwością jest również to, że możesz określić, czy program ma eks­portować standardowy kod HTML, czy też zoptymalizowany pod kątem programu, w którym projektujesz strony WWW. Fireworks zawiera szablony kodów dla pro­gra­mów Macromedia Dreamweaver, Adobe GoLive i Microsoft FrontPage. Jeśli zajdzie taka potrzeba, możesz tworzyć tak­że własne szablony.

	Więcej informacji o behawiorach znajdziesz w rozdziale 21.

Optymalizacja pod kątem Internetu

Dla wielu projektantów grafiki najważniejszą sprawą jest optymalizacja plików: jak stwo­rzyć dobrze wyglądającą grafikę z jednoczesnym utrzymaniem jak najmniejszych roz­miarów fizycznych plików? Fireworks 4 umożliwia porównanie rezultatów czterech róż­nych ustawień kompresji bezpośrednio w oknie dokumentu. Bardzo łatwo można spraw­dzić wygląd swojej pracy przed jej wyeksportowaniem. Wystarczy w tym celu klik­nąć jedną z zakładek podglądu znajdujących się w oknie dokumentu (rysunek 1.9).

Paleta Optimize (Optymalizacja) zawiera zestaw różnych opcji eksportu po­trzeb­nych każdemu projektantowi grafiki internetowej i jest dostępna w dowolnym mo­men­cie pracy. Kolory mogą być edytowane, blokowane, przekształcane na bezpieczne dla prze­-

Rysunek 1.9. Porównując obrazek oryginalny z wersją zoptymalizowaną, bezpośrednio w obszarze roboczym, szybko stworzysz obrazek o jak najlepszej jakości przy jednoczesnym utrzymaniu jak najmniejszego rozmiaru pliku

glą­darki lub przezroczyste za pomocą jednego kliknięcia myszą w nowej palecie Color Table (Tabela kolorów). W Fireworks jest również paleta Frames (Klatki), umoż­li­wia­ją­ca kontrolowanie animacji.

	Aby uzyskać więcej informacji na temat eksportowania w Fireworks, zajrzyj do rozdziału 15.

Integracja z Dreamweaverem

Micromedia Dreamweaver to doskonałe narzędzie do tworzenia stron WWW, teraz jeszcze lepiej zin­tegrowane z Fireworks 4. W menu Commands Dreamweavera znajdują się polecenia umo­żliwiające bezpośredni dostęp do funkcji Fireworks i pomagające w importowaniu ko­du HTML generowanego w Fireworks. Rozbudowane możliwości tworzenia włas­nych skryptów pozwalają nawet na sterowanie programem Fireworks z poziomu menu Commands Dreamweavera.

Integracja ta odbywa się nie tylko w jedną stronę. Fireworks potrafi generować stan­dar­do­wy kod Dreamweavera lub szablony, które są umieszczane w bibliotece Dream­wea­vera i mogą być edytowane oraz zastosowywane z jego poziomu. Oba programy, w swoich wersjach 4.0, korzystają z tego samego interfejsu Micromedia Common User Interface.

Informacje o tym, jak maksymalnie wykorzystywać możliwości inte­gra­cji Fireworks z Dreamweaverem znajdziesz w rozdziale 22.

Narzędzia produkcyjne

Mimo to, że Internet jest wielkim polem dla wyrażania swoich wizji artystycznych, two­rzenie grafiki internetowej stało się obecnie biznesem. Aby odnieść sukces na tym po­lu, potrzebne Ci będzie narzędzie umożliwiające wydajną produkcję. Doskonale spraw­dza się tutaj Fireworks 4. Za jego pomocą możesz tworzyć całe strony WWW, prze­skalowywać wszystkie obrazki znajdujące się w określonym katalogu lub po­je­dyn­cze obrazki czy też modyfikować tekst znajdujący się w wybranych grafikach na stro­nie.

Automatyzacja

Nic nie jest tak czasochłonne i nużące jak wykonywanie wciąż tych samych czynności. Jed­nak w produkcji na potrzeby Internetu zadania tego typu trafiają się dość często. Ta­kie same czynności trzeba niekiedy powtarzać wiele razy.

Jako jedną ze swoich prostszych funkcji, paleta History daje możliwość cofania wy­ko­na­nych operacji, z możliwością dokładnego wskazania określonego etapu. Gdy przyj­rzysz się tej palecie nieco bliżej, zobaczysz że umożliwia ona również automatyzację pracy.

Rysunek 1.10. Paleta History jest zarówno rozszerzeniem polecenia Undo, jak i narzędziem umożliwiającym nagrywanie poleceń

Po wybraniu jednego lub grupy kroków w palecie History, możesz je przekształcić w po­­lecenie, które zostanie automatycznie umieszczone w menu Commands.

Paleta History ma także inne zastosowania. Każdy wyko­na­ny krok jest reprezentowany za pomocą kodu JavaScript, który można skopiować do scho­w­ka, wkleić do dowolnego edytora tekstów i poddać edycji.

		Zerknij do rozdziału 19, w którym znajdziesz informacje o automa­ty­za­cji pracy w Fireworks.

Przetwarzanie wsadowe

Na typowej stronie internetowej znajdują się przeważnie ogromne ilości obrazków. Wy­mu­siło to konieczność stosowania przetwarzania wsadowego. Niczym niezwykłym nie są już zlecenia polegające na tworzeniu miniaturek wersji wszystkich obrazków znaj­du­ją­cych się na stronie, które klient chce umieścić w katalogu swojej firmy. Z wyko­rzys­ta­niem przetwarzania wsadowego, wystarczy wskazać folder, w którym znajdują się ory­gi­nalne wer­sje obrazków i określić, czy Fireworks ma je przeskalować do rozmiaru po­da­nego w pik­selach, czy też o wartość procentową.

Kolejnym narzędziem pozwalającym zaoszczędzić mnóstwo czasu jest paleta Find and Re­place (Znajdź i zamień). Skąd takie narzędzie w programie graficznym? Jakie może mieć zastosowania? Otóż bardzo różne. Fireworks potrafi wyszukiwać i zastępować tekst, czcionki, kolory lub adresy URL w pojedynczych plikach lub ich całych zes­ta­wach. Co więcej, Fireworks umożliwia również wyszukiwanie kolorów niemożliwych do wyświetlenia przez przeglądarki i zamienianie ich na kolory z palety Web-Safe.

	Wszystkie potrzebne informacje o przetwarzaniu wsadowym w Fire­works znajdziesz w rozdziale 18.

Nowości Fireworks 4

Jakby na to nie patrzeć, przejście z pierwszej na drugą wersję Fireworks był dość dużym skokiem. Fireworks 2 miał już rozbudowane narzędzia rysunkowe, poprawiony interfejs i zgod­ność z różnymi formatami grafiki wektorowej oraz bitmapowej. Twórcy Fireworks 3 sku­pili się bardziej na użytkowniku niż na samym programie. Nowe funkcje umo­żli­wia­ły pogląd w oknie dokumentu, korzystanie z Live Effects i automa­ty­zo­wa­nie najczęściej wykonywanych czynności. Tworząc Fireworks 4, firma Micromedia zajęła się dopracowaniem szczegółów i wprowadziła dojrzałe i poważne narzędzie do grafiki internetowej, dające wiele przyjemności w pracy. Każdy aspekt Fireworks został przeanalizowany, zbadany, oceniony i poprawiony.

Interfejs użytkownika

Poprawienie interfejsu użytkownika może przez niektórych nie zostać zakwalifikowane ja­ko nowa „funkcja”, ale zmienia całkowicie metody codziennej pracy z programem. Znacz­ne ulepszenia, takie jak te wprowadzone w Fireworks 4, mają ogromny wpływ na po­prawę wydajności i sposób pracy.

Ulepszenia interfejsu użytkownika to:

• Macromedia Common User Interface zapewnia podobny interfejs użytkownika dla różnych aplikacji Macromedia, jak Fireworks, Dreamweaver i Flash.

• Elementy interfejsu wyglądają teraz lepiej i nie rozpraszają uwagi w pracy nad grafiką.

• Drobny program wywołujący u dołu okna dokumentu ułatwia dostęp do często używanych palet.

• Takie same kontrolki okna dokumentu w wersji Fireworks dla Windows i dla Macintosha ułatwiają życie użytkownikom korzystającym z obu platform.

• Dostępne są skróty z klawiatury (przygotowane zestawy odpowiadają innym programom graficznym), które można dostosować w szerokim zakresie do własnych potrzeb.

• Fireworks umieszcza symbol gwiazdki w pasku tytułu dokumentu, w którym nie zapisano wprowadzonych zmian.

• Pojedyncze klatki mogą być nazywane, tak jak warstwy.

• Paleta Layers umożliwia łatwy dostęp do krycia i trybu mieszania oraz maskowania typu Photoshop.

• Miniaturki pojedynczych obiektów są pokazywane wraz z nowymi warstwami w palecie Layers.

• Narzędzie Eyedropper jest aktywne natychmiast po otwarciu rozwijanego menu próbnika kolorów.

	Więcej informacji o zmianach w interfejsie użytkownika znajdziesz w ko­lejnych rozdziałach pierwszej części książki.

Tworzenie grafiki

Wraz z każdą kolejną wersją, Fireworks staje się coraz większym i lepszym narzędziem słu­żącym do edycji grafiki wektorowej i bitmapowej.

Wprowadzone poprawki to m.in.:

• Nowe narzędzie Rounded Rectangle XE "Pen" .

• Ulepszone narzędzie Pen XE "Pen" (Pió­ro) dla lepszej edycji krzywych Béziera.

• Możliwość automatycznego łączenia dwóch ścieżek przez przeciągnięcie ich punktów końcowych, jeden na drugi.

• Możliwość zmiany rozmiaru obszaru roboczego (powiększenia lub pomniejszenia), aby pomieścił wszystkie obiekty, przy użyciu polecenia Fit Canvass.

• Możliwość przesunięcia obiektów tekstowych w obrębie obszaru roboczego, przy otwartym edytorze tekstu.

• Poprawiona edycja gradientów.

• Ulepszone efekty Emboss umożliwiające przedstawienie oryginalnych obiektów, jak i wytłoczeń.

• Color Fill Life Effect (wypełnienie kolorem) szybko zmienia kolor pikseli bez zmieniania ich na stałe.

• Narzędzie Pointer (wskaźnik) umożliwia edytowanie uchwytów wypełnienia gradientu, zamiast narzędzia Bucket.

• Możliwość zmiany wyboru obwódek bez zmieniania pikseli, oraz możliwość zapisania i przywracania jednego wyboru obwódek.

• Kursory w rozmiarze pędzla, dla wskazania rozmiaru i kształtu końcówki pędzla.

• Możliwość przeciągania przez krawędź okna dokumentu w celu przewijania obszaru roboczego, aby podążał za naszym narzędziem.

• Panel informacyjny pokazujący obrót, przekrzywienie i wartość skali podczas pracy.

• Preferencje w zakresie wybierania i przeciągania kursora.

• Nowe symbole animacji ułatwiające tworzenie i edytowanie złożonych animacji.

• Nowe funkcje maskowania upraszczające tworzenie złożonych kanałów alfa.

Współpraca z Internetem

Gdy na rynku oprogramowania pojawił się Fireworks, jego możliwość generowania ko­du HTML była jak startująca rakieta. Teraz umożliwiają to także inne programy, ale Fire­works pozwala na lepszą integrację dwóch podstawowych elementów wykorzysty­wa­nych przez twórców stron WWW: grafiki i kodu HTML.

Elementy wprowadzone w celu poprawy współpracy z Internetem to:

• Ikony docelowe na plastrach mogą być przeciągane na inne plastry w celu szybkiego stworzenia elementów reagujących na najechanie myszą (rollover) lub rozdzielnych elementów reagujących na najechanie myszą (disjointed rollover).

• Symbole przycisków nie muszą korzystać ze wspólnej warstwy.

• Plastry zachodzące na siebie są eksportowane zgodnie z ich porządkiem, co zmniejsza liczbę eksportowanych obrazków.

• Set Pop-up Menu Behaviour tworzy ciekawe menu rozwijane Web.

	Więcej informacji o integracji Fireworks z Internetem znajdziesz w części V.

Optymalizacja obrazków

Dla wielu użytkowników optymalizacja obrazków jest najlepszą funkcją Fireworks. Uzy­skanie obrazka o najlepszej jakości i minimalnym rozmiarze pliku jest wszystkim, cze­go potrzebują. Fireworks 4 oferuje nowe metody zmniejszania rozmiarów plików i poz­wala na tworzenie grafiki w formatach używanych na wielu platformach.

Elementy wprowadzone w celu ulepszenia optymalizacji obrazków to:

• Selektywna kompresja JPEG, co oznacza dwa ustawienia kompresji dla jednego eksportu JPEG.

• Eksport WBMP (Wireless BitMap).

• Aktualizacja HTML może aktualizować tylko obraz lub obraz i kod HTML.

• Uproszczony proces eksportowania przy użyciu ulepszonego okna dialogowego Export i wycofaniu polecenia Export Special.

• Więcej opcji HTML Setup.

	Więcej informacji o wykorzystywaniu Fireworks jako narzędzia optyma­lizacji znajdziesz w rozdziale 15.

Zarządzanie środowiskiem pracy

Zarządzanie środowiskiem pracy ponownie zostało potraktowane ze szczególną uwagą w Fireworks 4. Do importu plików Pho­toshopa dodany został eksport plików Photoshopa, co umożliwiło stworzenie działania w obie strony pomiędzy tymi dwoma programami.

Elementy ułatwiające zarządzanie środowiskiem pracy to:

• Eksport plików Photoshopa.

• Import i eksport WBMP.

• Import obrazków EPS.

• Eksport do Macromedia Director.

• Większa integracja z Dreamweaverem.

• Importowane obrazki animowane GIF konwertowane na symbole animacji.

• Znacznie ulepszone okno dialogowe Batch Process, upraszczające automatyzację.

	Wiele informacji na temat ulepszeń dotyczących zarządzania obsza­rem roboczym znajdziesz w części VI.

Podsumowanie

Istnieje powiedzenie: „wybierz właściwe narzędzie do pracy”, a Fireworks 4 zde­cy­do­wa­nie jest właściwym narzędziem do tworzenia grafiki internetowej. W większości przy­padków jest on narzędziem, które wystarczy Ci do wykonania wszystkich zadań: two­rzenia obrazków, edycji, optymalizacji i integracji grafiki z Internetem. W prze­szło­ści, każdy projektant witryn WWW musiał poznać wiele różnych programów, aby wy­ko­nać to samo zadanie, do którego teraz wystarczy mu Fireworks. Jeśli po raz pierwszy pra­cujesz w Fireworks, musisz pamiętać o kilku sprawach:

• Fireworks 4 zastępuje cały zestaw programów potrzebnych w przeszłości każ­de­mu projektantowi grafiki internetowej. Teraz, gdy projektant musi poznać tyl­ko jeden program, więcej czasu może poświęcić na właściwą pracę.

• Fireworks 4 pozwala na pracę zarówno z obiektami wektorowymi, jak i z bit­ma­powymi obrazkami. Poza tym pozwala łączyć obiekty wektorowe z bit­ma­pa­mi, ułatwiając w ten sposób ich edycję.

• Fireworks 4 obsługuje pliki w formacie Photoshopa i wielu innych. Pozwala na­wet na wykorzystywanie filtrów zgodnych z Photoshopem jako dodatek (Xtras) lub element grupy Live Effects.

• Jedną z najważniejszych możliwości Fireworks 4 jest jego integracja z Inter­ne­tem. Program posiada dostępne w każdej chwili palety kolorów bezpiecznych dla Internetu i umożliwia generowanie kodów (standardowych lub własnych) HTML i JavaScript.

• Im dłużej będziesz projektował dla Internetu, tym prędzej uświadomisz sobie, ile pracy to wymaga. Fireworks 4 jest doskonałym narzędziem aktualizacji gra­fi­ki poprzez funkcję „znajdź i zamień” lub przetwarzanie wsadowe. Pozwala to na zautomatyzowanie żmudnej pracy z najczęściej wykorzystywanymi funk­cja­mi programu.

• Fireworks 4 wprowadza interfejs Macromedia Common User Interface, dając szersze pole do popisu użytkownikom kilku aplikacji Macromedia, takich jak Fireworks, Dreamweaver i Flash.

W kolejnym rozdziale przyjrzymy się bliżej interfejsowi użytkownika Fireworks 4 i po­le­ceniom znajdującym się w jego menu.




Rozdział 2.
Interfejs programu

W tym rozdziale:

• Środowisko Fireworks.

• Praca w oknie dokumentu.

• Poznajemy paletę narzędziową.

• Paski narzędziowe w Windows.

• Optymalizacja palet.

• Zarządzanie menu.

Fireworks został tak opracowany, aby ułatwić grafikowi pracę. Zanim Fireworks poja­wił się na rynku oprogramowania, projektanci musieli przeważnie korzystać z wielu pro­gramów do tworzenia obiektów, rasteryzacji, optymalizacji oraz tworzenia kodu HTML i JavaScript. Fireworks jest połączeniem najlepszych rozwiązań kilku pro­gra­mów (oprócz tego dodaje wiele własnych) i posiada dopracowany interfejs - łatwy w uży­ciu i oferujący wiele zaskakujących funkcji. Kiedy już odkryjesz znaczenie Fire­works, nie będziesz chciał tworzyć grafiki internetowej w żaden inny sposób.

Fireworks jest narzędziem pozwalającym na pracę zarówno z obiektami wektorowymi, jak i bitmapowymi obrazkami. Umożliwia nawet łączenie tych dwóch typów grafiki. Gdy dokument będzie już gotów do umieszczenia w Internecie, Fireworks zadziała jak most łączący Cię ze środowiskiem HTML-a i pozwoli łatwo wygenerować cały po­trzeb­ny kod.

Jak w przypadku każdego dużego programu graficznego, poznanie wszystkich narzędzi i opcji oferowanych przez Fireworks może Ci zająć trochę czasu. Nie jest to jednak spo­sób pracy większości projektantów. Być może łatwiej Ci będzie poznać nowe narzędzia pro­gramu w trakcie wykonywania określonych zadań. Dobrze by było, gdybyś prze­czy­tał cały poniższy rozdział, który omawia wszystkie elementy interfejsu Fireworks. Praw­do­po­dobnie jednak (a zwłaszcza w przypadku opisów poleceń menu znajdujących się na koń­cu rozdziału) będziesz go wykorzystywał jako podręczny przewodnik.

Środowisko Fireworks

Obojętnie, czy pracę z grafiką zaczynasz od utworzenia nowego dokumentu, czy też od ot­warcia grafiki istniejącej, będziesz musiał wykorzystywać wszystkie elementy śro­do­wis­ka programu: standardowe menu, paletę narzędziową, jedno lub kilka okien doku­men­tu i palety (rysunek 2.1). Każde okno dokumentu może zawierać tylko je­den plik Fireworks. Elementy menu, palety narzędziowej i palet oddzia­łu­ją jedynie na plik otwarty w aktywnym oknie dokumentu.

Rysunek 2.1. Środowisko Fireworks na obu platformach (Windows i MacOS) składa się z menu, palety narzędziowej, jednego lub więcej okien dokumentów i zestawu palet

Tools panel — Paleta narzędziowa

Pull-down menus — Menu rozwijane

Floating panels — Palety

Document controls — Kontrolki dokumentu

Document window — Okno dokumentu

Fireworks dla Windows (rysunek 2.2) posiada takie same elementy interfejsu jak jego od­powiednik dla MacOS oraz dodatkowo dwa paski narzędzi i zmieniający się w za­leż­noś­ci od wykonywanych operacji pasek stanu. Paski narzędzi zawierają funk­cje znajdujące się również w menu, takie jak otwieranie dokumentów lub porządkowanie obiektów.

Rysunek 2.2. Wersja Fireworks dla Windows posiada dodatkowe paski narzędzi i wykorzystuje interfejs wielu dokumentów

Main toolbar — Główny pasek narzędziowy

Fireworks (parent) window — (Nadrzędne) okno Fireworks

Status bar (changes with context) — (Kontekstowy) pasek stanu

Modify toolbar — Pasek narzędziowy Modify

W Fire­works dla Windows wszystkie dokumenty są otwierane w nadrzędnym oknie pro­gramu. Paski narzędziowe mo­gą być, w zależności od potrzeb, dokowane do nadrzędnego okna programu lub pozo­sta­wiane jako pływające.

W bieżącym rozdziale przyjrzymy się dobrze całemu środowisku Fireworks. Pamiętaj, że w każdej chwili możesz zerknąć na rysunek 2.1 lub 2.2, aby przypomnieć sobie zna­cze­nie określonego elementu interfejsu.

Okno dokumentu

Okno dokumentu XE "okno dokumentu" to miejsce, w którym skupia się cała praca nad grafiką w Fireworks. Każ­dy otwierany lub tworzony dokument znajduje się we własnym oknie, z nazwą pliku i ustawieniem powiększenia umieszczonymi w tytule okna. Jeżeli w dokumencie znajdują się niezapisane zmiany, Fireworks umieszcza znak gwiazdki obok nazwy pliku i ustawienie powiększenia. Znak gwiazdki informuje, że dokument został zmieniony — gdyż został otwarty i należy zapisać go na dysku.

Można jedno­cześ­nie otworzyć wiele dokumentów (rysunek 2.3). Wszystkie menu, panele narzędzi i palety oddziałują jedynie na plik znaj­du­ją­cy się w aktywnym oknie dokumentu.

Macromedia Common User Interface

Proces pracy nad projektem stromy WWW często wymaga korzystania z kilku aplikacji. Wielu projektantów korzysta w pracy z kombinacji Fireworks i Dreamweaver lub Fireworks i Flash. Niestety, poprzednie wersje wielu aplikacji Macromedia często używały zróżnicowanych konwencji interfejsu użytkownika, jak różne skróty klawiaturowe i różne metody ukrywania i pokazywania palet. Mówiąc krótko, firma Macromedia nie wynagradzała nam czasu poświęconego na naukę interfejsu jednej aplikacji, gdyż ucząc się drugiej należało rozpoczynać naukę od nowa. Ponadto, różne konwencje bardzo utrudniały przełączanie się między aplikacjami w trakcie jednej sesji pracy.

Wraz z wprowadzeniem Fireworks 4, Macromedia wprowadza jednolitość w interfejsie użytkownika dla swoich produktów. Niektóre ze wspólnych elementów, które można zauważyć w trakcie przełączania się pomiędzy Fireworks i Dreamweaver, to ikony na zakładkach palet, ujednolicone skróty klawiaturowe, skróty klawiaturowe zmieniane wg własnych potrzeb oraz mały program wywołujący do pokazywania lub ukrywania palet. Takie zorientowanie się na ujednolicenie interfejsu użytkownika pozwoliło firmie Macromedia na zlikwidowanie starych, nieużytecznych rozwiązań, zapewniając użytkownikowi Fireworks lepsze warunki pracy.

Rysunek 2.3. Każdy otwierany lub tworzony plik Fireworks posiada własne okno dokumentu, a w jednym czasie można otworzyć wiele dokumentów

W kadrze (obszarze roboczym) znajdującym się w oknie dokumentu mo­żesz tworzyć i edytować obiekty. Obszar roboczy jest to aktywna część dokumentu. Aby uprościć edycję na krawędziach obszaru roboczego, jest on otoczony szarym obramowaniem. Jeżeli powiększymy krawędź dokumentu, obramowanie obszaru roboczego pozwoli nam lepiej zobaczyć wykonywane przez nas czynności.

	Obramowanie obszaru roboczego jest nowością w Fireworks 4. Uprzednio, próba powiększenia dokumentu powodowała dopasowanie obszaru roboczego do obramowania okna. Teraz mamy również dostęp do samego obramowania.

Jeśli otworzysz wiele dokumentów i spowoduje to zaśmiecenie Twojego obszaru robo­cze­go, możesz na trzy sposoby organizować układ okien dokumentów:

• Wybierz z menu polecenie WindowCascade, aby rozłożyć wszystkie okna do­­kumentu po przekątnej tak, aby widoczny był pasek tytułowy każdego z nich.

• Wybierz WindowTile Horizontal, aby otwarte dokumenty rozłożyć równo­mier­nie od góry do dołu.

• Wybierz WindowTile Vertical, aby otwarte dokumenty rozłożyć równo­mier­nie od lewej do prawej.

Możesz także ukryć okna dokumentów, których aktualnie nie wykorzystujesz. Użyt­kow­nicy MacOS mogą kliknąć przycisk Windowshade, aby ukryć wszystko z wyjąt­kiem paska tytułowego okna. Użytkownicy komputerów pracujących pod kontrolą Win­dows mogą kliknąć przycisk maksymalizacji okna dokumentu, by zadokować je do nadrzęd­ne­go okna Fireworks i ukryć wszystkie pozostałe okna. Aby je odłączyć od nadrzęd­ne­go okna, wystarczy wcisnąć przycisk Przywróć okno.

Oprócz otwierania wielu okien dla różnych dokumentów, Fireworks pozwala również na otwarcie wielu okien dla tego samego dokumentu. Aby otworzyć nowy widok wy­bra­nego dokumentu, wybierz z menu polecenie WindowNew Window lub użyj skrótu klawiaturowego Ctrl+Alt+N (Command+Option+N). Nowy widok będzie miał taką samą ska­lę powiększenia jak widok oryginalny, ale możesz powiększyć grafikę w jednym z okien i pracować w nim na poziomie szczegółów, a w drugim oknie pozostawić ogól­ny wi­dok całej grafiki (rysunek 2.4).

Rysunek 2.4. Użyj polecenia New Window, aby otworzyć nowy widok tego samego obrazka. Będziesz mógł wówczas w jednym z widoków dokonywać szczegółowych modyfikacji, zaś w drugim oknie pozostawić ogólny widok całej grafiki

Kontrolki okna dokumentu

Fireworks pozwala na wiele sposobów kontrolować sposób wyświetlania dokumentów. Za­kładki znajdujące się u góry każdego okna dokumentu pozwalają podglądać grafikę przy różnych ustawieniach optymalizacji, znajdziesz również kontrolki po­więk­szenia, sterowania animacją i inne (patrz rys. 2.5).

Po kolei omówimy każdą z kontrolek okna dokumentu.

	Kontrolki okna dokumentu są obecnie podobnie rozwiązane w obu wersjach Fireworks. Użytkownicy wersji Fireworks 3 zauważą, że pasek narzędzi View Controls już nie istnieje. Te kontrolki można teraz znaleźć u dołu okna dokumentu, obok kontrolek animacji typu VCR i przycisku Exit Bitmat Mode, które uprzednio mieściły się na pasku stanu.

Rysunek 2.5. Kontrolki okna dokumentu Fireworks pozwalają zmieniać sposób wyświetlania dokumentów w oknach
Rysunek 2.6. Aby obejrzeć podgląd optymalizowanej grafiki w Fireworks, wystarczy tylko kliknąć

Do rys. 2.5

Original/Preview tabs — Zakładki Original/Preview (Oryginalny/Podgląd)

Export setting — Ustawienia eksportowania plików

Filename — Nazwa pliku

Unsaved changes indicator — Wskażnik niezapisanych zmian

Canvas — Obszar roboczy

Canvas border — Obramowanie obszaru roboczego

Animation controls — Kontrolki animacji

Exit Bitmap mode button — Wyjście z trybu edycji grafiki bitmapowej

Page preview button — Przycisk podglądu strony

Set magnification button — Przycisk powiększenia

Mini-Launcher — Mini-Launcher (Program wywoławczy)

Zakładki Original/Preview (Oryginalny/Podgląd)

Gdy otwierasz lub tworzysz dokument Fireworks, jego okno jest domyślnie ustawiane na tryb Original XE "zakładka:Original" (Oryginalny), w którym możesz dokonywać edycji obiektów. Gdy wy­bie­rzesz zakładkę innego trybu, Fireworks stworzy podgląd grafiki i wyświetli ją tak, jak będzie wyglądała po wyeksportowaniu z określonymi ustawieniami.

W każdej chwili możesz się przełączać pomiędzy trybem Original a pozostałymi. Fire­works generuje podgląd w oparciu o ustawienia określone w palecie Optimize (Opty­ma­li­zacja) (rysunek 2.6). Paletę kolorów eksportowanej grafiki możesz zdefiniować za po­mocą palety Color Table (Tabela kolorów).

Mimo to, że tryb 2-up daje możliwość wyświetlenia obok siebie widoków Original i Pre­view XE "zakładka:Preview" bieżącej grafiki, dopóki ręcznie ich nie powiększysz, będą wyświetlane o po­ło­wę mniejsze w stosunku do oryginału. Jeśli masz duży monitor, innym sposobem wy­świe­tlenia widoków obok siebie jest otwarcie nowego okna dla bieżącego dokumentu (polecenie WindowNew Window) i przestawienie go na tryb Preview.

	Więcej informacji o podglądzie i eksporcie znajdziesz w rozdziale 15.

Kontrolki animacji

Za pomocą przycisków podobnych do tych, jakie mają ma­gnetowidy mo­żesz odtwarzać animacje z wykorzystaniem tempa ustawionego w palecie Frames XE "paleta:Frames" (Klatki). Znajdziesz tam również przyciski pozwalające na prze­cho­dze­nie pomiędzy poszczególnymi klatkami animacji lub do pierwszej albo ostat­niej klatki.

	Więcej informacji o animacjach w Fireworks znajdziesz w rozdziale23.

Przycisk Exit Bitmap Mode (Wyjście z trybu edycji grafiki bitmapowej)

Po klik­nięciu przycisku „stop” możemy szybko opuścić tryb edycji grafiki bitmapowej i przejść do trybu wektorowego. Jeśli pracujesz w trybie wek­torowym, przycisk ten będzie nieaktywny (szary). Można również skorzystać z poleceń ModifyExit Bitmap Mode lub ze skrótu klawiaturowego Ctrl+Shift+E (Command+Shift+E).

Page Preview (Podgląd strony)

Przycisk Page Preview przedstawia rozmiar dokumentu w pikselach. Po jego kliknięciu, w małym okienku wyświetlana jest sze­ro­kość, wysokość i rozdzielczość grafiki. Aby usunąć to okno, wystarczy kliknąć dowolne miejsce poza jego obszarem.

Ustawienia powiększenia

Obojętnie, czy pracujesz z grafiką wektorową czy bitmapową, do dokładnej pracy po­trzeb­ne Ci będą duże zbliżenia. I odwrotnie - projektanci często muszą zmniejszyć swo­ją grafikę, aby móc porównać dwa lub więcej obrazków i sprawdzić ich zgodność lub wy­ciąć i skopiować część grafiki. Fireworks pozwala na szybkie zmiany powiększenia gra­fi­ki za pomocą skrótów klawiaturowych.

W programie jest zdeklarowany zestaw gotowych ustawień powiększenia, od 6 do 6400%. Fireworks zawsze pracuje z pikselami (nawet, jeśli tworzone są na podstawie wek­torów), więc przedefiniowane ustawienia powiększeń zapewniają najlepszy sto­su­nek rozdzielczości obrazka do rozdzielczości ekranowej. Przy naturalnej skali obrazka (100 procent) do wyświetlenia każdego piksela obrazka wykorzystywany jest jeden pik­sel ekranu. Gdy powiększysz obrazek do 200%, jeden piksel obrazka będzie wyświe­tla­ny za pomocą dwóch pikseli na ekranie. Po zmniejszeniu obrazka o połowę, jeden piksel ek­ranu będzie wyświetlał dwa piksele obrazka. Metody powiększania grafiki stosowane w Fireworks zapewniają pełen zakres ustawień przy utrzymaniu dokładnego wyglądu ob­razków.

Po kliknięciu strzałki w liście opcji Magnification XE "Magnification" (Powiększenie XE "powiększenie" ) zostaną wyświetlone wszystkie dostęp­ne ustawienia. Wybierz określone ustawienie i zwolnij przycisk myszy, aby zmienić ska­lę powiększenia. Fireworks daje także możliwość szybkich zmian powiększenia za po­mocą skrótów klawiaturowych opisanych w tabeli 2.1. Oprócz predefiniowanych war­­tości powiększenia, możesz również wykorzystać funkcję pozwalającą na dos­to­so­wa­nie rozmiarów grafiki do okna dokumentu. Fireworks powiększy lub pomniejszy gra­fi­kę tak, aby mogła być w całości wyświetlona na ekranie.

Tabela 2.1.

Skróty klawiaturowe powiększania

Powiększenie	Windows	Macintosh
100%	Ctrl+1	Command+1
50%	Ctrl+5	Command+5
200%	Ctrl+2	Command+2
400%	Ctrl+4	Command+4
800%	Ctrl+8	Command+8
3200%	Ctrl+3	Command+3
6400%	Ctrl+6	Command+6
Powiększ	Ctrl+ =	Command+ =
Pomniejsz	Ctrl+minus(-)	Command+minus(-)
Zmieść zaznaczenie	Ctrl+Alt+zero	Command+Option+zero
Zmieść wszystko	Ctrl+zero lub dwukrotne kliknięcie	Command+zero lub dwukrotne kliknięcie kursorem w kształcie
Przełącz tymczasowo na narzędzie powiększenia	Ctrl+spacja	Command+spacja

Mini-Launcher

Mini-Launcher (mały program wywoławczy) umożliwia, po kliknięciu, dostęp do często używanych palet. Osoby używające programu Macromedia Dreamweaver natychmiast go rozpoznają. Jeżeli nasze okno jest zbyt małe, nie zobaczymy Mini-Launchera w całości. W takim wypadku należy odpowiednio rozszerzyć okno.

	Mini-Launcher jest nowością w Fireworks 4 i stanowi część Macromedia Common User Interface.

Naciśnięcie jednego ze znajdujących się tam przycisków powoduje wywołanie palety, jeżeli jest nieobecna, przeniesienie jej do przodu, jeżeli jest schowana za inną, lub jej zamknięcie, jeżeli jest otwarta. Można sprawdzić co będzie wykonywał określony przycisk, wystarczy umieścić nad nim kursor myszy, a pojawi się etykietka narzędzia. Kolejne przyciski, od lewej do prawej obsługują palety: Stroke, Color Mixer, Optimize, Layers, Tool Options, Library, Styles i Behaviors. W przeciwieństwie do programu Dreamweaver nie ma tu możliwości dostosowania ich do własnych potrzeb.

	Palety są szerzej opisane w dalszej części niniejszego rozdziału.

Opcje wyświetlania

W większości przypadków projektanci pracują w Fireworks w trybie Full Display XE "Full Display" (Do­kład­ny). Wielu z nich nie zdaje sobie sprawy z tego, że dostępne są jakieś inne tryby wy­świetlania. Tryby wyświetlania można przełączać pomiędzy Full a Draft Display za pomocą polecenia Dis­play znajdującego się na pasku View. W trybie uproszczonym wszystkie obiekty wek­to­rowe są wyświetlane z obwódką o szerokości jednego piksela i bez wypełnień, zaś ob­raz­ki jako prostokąty z umieszczonym w ich środku znakiem „X”.

	W trybie Draft Display nie są wyświetlane obiekty wybrane, jak miało to miejsce w Fireworks 3.

Jeżeli mamy złożony dokument, składający się z wielu warstw zawierających wiele obiektów (rys. 2.7), wybór tego jednego obiektu, nad którym chcemy pracować, lub uchwycenie odpowiedniego układu obiektów o złożonych krawędziach lub zastosowanych filtrach obrazu, może czasami być trudne.

Rysunek 2.7. W trybie Full Display można mieć trudności z wyborem pojedynczych obiektów

Przedstawienie dokumentu w trybie Draft Display (rysunek 2.8) daje uproszczone rysunki i umożliwia wybór obiektu, zazwyczaj zasłoniętego przez inne w trybie Full Display.

Rysunek 2.8. W trybie Draft Display widać tylko zarysy obiektów

Poznajemy paletę narzędziową

Wszystkie narzędzia Fireworks służące do rysowania i edycji można znaleźć w palecie na­rzędziowej. Większość z nich pracuje równocześnie z grafiką wektorową, jak i bit­ma­po­wą, choć czasami z niewielkimi różnicami. Na przykład, gumka przy pracy z obiek­ta­mi wektorowymi jest zamieniana na nóż.

W celu wybrania narzędzia należy kliknąć jego ikonę w palecie Tools. Kursor zmieni kształt, prezentując wybrane narzędzie. W danym momencie może być aktywne tylko jedno narzędzie. Z narzędzi można korzystać po kliknięciu w obszarze roboczym. Niektóre narzędzia wymagają kliknięcia i przeciągnięcia, np. skorzystanie z narzędzia Marquee. Jeżeli przeciągniemy poza widoczny obszar roboczy, okno dokumentu automatycznie podąża za kursorem.

	Przewijanie za pomocą narzędzia jest nowością w Fireworks 4.

Narzędzia o zbliżonym działaniu, takie jak Lasso, Polygon Lasso (Wielokątne lasso) i Magic Wand (Różdżka) są połączone w grupy i dostępne z poziomu jednego przy­cisku. Grupa narzędzi jest oznaczana małym symbolem strzałki umieszczonym w dol­nym prawym rogu przycisku. Kliknięcie i przytrzymanie przycisku powoduje roz­wi­nięcie grupy przycisków. Następnie możesz wybrać z grupy jedno z narzędzi, prze­su­wa­jąc nad nie kursor i zwalniając przycisk myszy.

Na rysunku 2.9 przedstawiona jest pa­leta XE "pa­leta narzędziowa" z rozwiniętymi wszystkimi grupami narzędzi.

Rysunek 2.9. W palecie narzędziowej znajduje się 38 narzędzi do rysowania i edycji obiektów graficznych oraz internetowych

Set stroke ... default — Ustaw standardowe kolory obrysu i wypełnienia

No stroke or fill color — Brak koloru obrysu i wypełnienia

Hide slices — Ukryj plastry

Stroke color well — Próbka koloru obrysu

Fill color well — Próbka koloru wypełnienia

Swap ... colors — Zamień kolory obrysu i wypełnienia

Show slices — Pokaż plastry

Wszystkie narzędzia mają własne skróty klawiaturowe. Jak przystało na program za­wie­ra­jący w sobie narzędzia służące do tworzenia grafiki zarówno wektorowej, jak i bit­ma­po­wej, te jednoklawiszowe skróty są odpowiednikami skrótów dla narzędzi bitmapo­wych wykorzystywanych w Photoshopie i narzędzi wektorowych FreeHanda. Jeśli dwa lub wię­cej narzędzi korzysta z takiego samego skrótu (na przykład M dla narzędzi Mar­quee i Oval Marquee), po każdym wciśnięciu skrótu narzędzia są przełączane pomię­dzy so­bą. Na przykład wciskanie litery R powoduje przełączanie pomiędzy narzę­dzia­mi kształtu. W tabeli 2.2 za­mieszczone zostały ikony przycisków wszystkich narzędzi, ich skróty kla­wiaturowe i krót­kie opisy działania. Bardziej szczegółowe informacje na temat po­szczególnych na­rzę­dzi będziesz mógł uzyskać w kolejnych rozdziałach książki podczas wykonywania okre­ślonych zadań.

	Narzędzie Rounded Rectangle jest nowym dodatkiem wśród narzędzi Fireworks 4. Nowe lub przeniesione narzędzia zostały wyróżnione po­gru­bionym tekstem.

Tabela 2.2.

Narzędzia Fireworks

Przycisk	Nazwa	Skrót	Opis
	Pointer - Wskaźnik	V lub zero	Zaznacza i przesuwa obiekty
	Select Behind - Zaznaczanie ukrytych obiektów	V lub zero	Zaznacza i przesuwa obiekty znajdujące się za innymi obiektami
	Export Area - Eksport obszaru	J	Eksportuje wybrany fragment dokumentu
	Subselection - Zaznaczanie podobiektów	A lub 1	Wybiera obiekty znajdujące się w grupach lub węzły ścieżek
	Marquee - Zaznaczenie prostokątne	M	Zaznacza prostokątny fragment bitmapowego obiektu
	Oval Marquee - Zaznaczenie owalne	M	Zaznacza eliptyczny fragment bitmapowego obiektu
	Crop - Kadrowanie	C	Zwiększa lub zmniejsza rozmiar obszaru roboczego
	Lasso	L	Zaznacza narysowany odręcznie obszar bitmapowego obiektu
	Polygon Lasso - Wielokątne lasso	L	Zaznacza wielokątny fragment bitmapowego obiektu
	Magic Wand -Różdżka	W	Wybiera obszary o zbliżonych kolorach znajdujące się w obiekcie bitmapowym
	Line - Linia	N	Rysuje linie proste
	Pen - Pióro	P	Dodaje węzły do ścieżek
	Rectangle - Prostokąt	R	Rysuje prostokąty, prostokąty z zaokrąglonymi narożnikami i kwadraty
	Rounded Rectangle - Prostokąt z zaokrągleniem	R	Rysuje prostokąty z zaokrągleniem 30 procent
	Ellipse - Elipsa	R	Rysuje elipsy i koła
	Polygon - Wielokąt	R	Rysuje wielokąty i gwiazdy
	Text - Tekst	T	Wstawia obiekty tekstowe
	Pencil - Ołówek	Y	Rysuje obrysy o dowolnych kształtach i grubości jednego piksela
	Brush - Pędzel	B	Rysuje obrysy korzystając z ustawień zdefiniowanych w palecie Stroke
	Redraw Path - Modyfikacja ścieżki	B	Zmienia kształt wybranego fragmentu ścieżki
	Scale - Skalowanie	Q	Skaluje i obraca obiekt
	Skew - Przekrzywienie	Q	Przechyla, obraca i zmienia perspektywę obiektu
	Distort - Zniekształcenie	Q	Obraca i zmienia kształt obiektu
	Freeform - Dowolne kształty	F	Wyciąga lub wpycha ścieżki za pomocą kursora o zmiennych wymiarach
	Reshape Area - Zmiana kształtu	F	Zmienia kształt wybranych obszarów obiektu za pomocą kursora o zmiennych wymiarach
	Path Srubber (+) - Zwiększenie nacisku ścieżki	F	Zwiększa ustawienia obrysu kontrolowane przez prędkość przesuwania kursora lub pióra albo nacisk na tablet graficzny
	Path Srubber (-) - Zmniejszenie nacisku ścieżki	F	Zmniejsza ustawienia obrysu kontrolowane przez prędkość przesuwania kursora lub pióra albo nacisk na tablet graficzny
	Eyedropper - Kroplomierz	I	Pobiera kolory z dowolnego miejsca ekranu i zastosowuje je do aktywnej próbki kolorów
	Paint Bucket - Wiadro z farbą	K	Wypełnia zaznaczony obszar za pomocą jednolitego koloru, gradientu, desenia lub tekstury oraz pozwala na dostosowanie wypełnienia
	Eraser - Gumka	E	Usuwa piksele z obiektu bitmapowego; w trybie wektorowym przedstawia nóż i przycina ścieżki w obiektach wektorowych
	Rubber Stamp - Stempel	S	Powiela wybraną część obrazka
	Rectangle Hotspot - Prostokątny obszar aktywny	U	Rysuje prostokątny obszar aktywny wykorzystywany w mapie obrazka
	Circle Hotspot - Eliptyczny obszar aktywny	U	Rysuje eliptyczny obszar aktywny wykorzystywany w mapie obrazka
	Polygon Hotspot - Wielokątny obszar aktywny	U	Rysuje wielokątny obszar aktywny wykorzystywany w mapie obrazka
	Slice - Plaster	G	Rysuje prostokątny plaster
	Polygon Slice - Wielokątny plaster	G	Rysuje wielokątny plaster
	Hand - Rączka	H lub przytrzymanie spacji	Przesuwa widok dokumentu
	Zoom - Powiększenie	Z	Zwiększa lub zmniejsza powiększenie o jeden poziom

Niektóre narzędzia mają skróty klawiaturowe pozwalające tymczasowo za­stąpić nimi aktywne narzędzie. Na przykład, wciśnij i przytrzymaj klawisz Ctrl (Com­­mand), aby tymczasowo uaktywnić narzędzie Pointer (Wskaźnik). Możesz także przytrzymać wciśnięty klawisz Ctrl (Command) i spa­cję, aby tymczasowo uaktywnić narzędzie Zoom (Powiększenie). Przy­trzymanie samej spacji powoduje włączenie narzędzia Hand (Rą­czka).

Paski narzędziowe (tylko Windows)

Jedni nienawidzą pasków narzędzi, inni je kochają. Tak czy owak - są one elementem więk­szości aplikacji w systemie Windows i mile widzianym przez niektórych użyt­kow­ni­ków dodatkiem do Fireworks dla Windows.

Dwa paski narzędzi w Fireworks to: Main (Główny) i Modify (Obiekt). W pasku Main znajdują się najczęściej wykorzystywane polecenia menu File (Plik) i Edit (Edycja). Pasek Modify zawiera funkcje znajdujące się również w menu Modify, takie jak grupowanie, wyrównywanie i obracanie obiektów.

Domyślnie paski narzędziowe są dokowane do głównego okna programu, ale można je prze­suwać w dowolne miejsca okna Fireworks lub wykorzystywać jako pływające pa­le­ty. Aby „odczepić” pasek narzędziowy, kliknij go i przeciągnij. Aby zadokować pasek, prze­ciągnij go w pobliże okna Fireworks, aż zostanie przyciągnięty do swojego poło­że­nia lub kliknij dwukrotnie jego pasek tytułowy.

Fireworks dla Windows posiada także kontekstowy pasek stanu, znajdujący się u dołu ok­na programu. Przyjrzymy mu się bliżej w jednym z kolejnych podrozdziałów.

Pasek narzędziowy Main XE "pasek narzędziowy:Main"

Na głównym pasku narzędziowym (rysunek 2.10) znajduje się zestaw przy­cis­ków uruchamiających najczęściej wykorzystywane funkcje programu. Pasek ten umo­żliwia wykonywanie kilku kluczowych operacji na plikach, takich jak tworzenie no­wego dokumentu, otwarcie lub zapisanie istniejącego dokumentu oraz eksportowanie i impor­towanie obrazków. Wszystkie te operacje można wykonać za pomocą jednego klik­nię­cia myszą. Na pasku Main znajdują się również często używane polecenia edy­cyj­ne
- Undo (Cofnij), Redo (Ponów), Cut (Wytnij), Copy (Kopiuj) i Paste (Wklej). Opis wszystkich przycisków znajdujących się na głównym pas­ku narzędziowym znajdziesz w tabeli 2.3.

Rysunek 2.10. Główny pasek narzędziowy pozwala użytkownikom Windows na uruchamianie wielu poleceń za pomocą jednego kliknięcia myszą

Pasek narzędziowy Modify

Pasek narzędziowy Modify XE "pasek narzędziowy:Modify" (rysunek 2.11) oferuje szybki dostęp do czterech głównych ty­pów modyfikacji obiektów:

• Grupowanie. Grupuje dwa lub więcej obiektów, aby łatwiej można było nimi ma­nipulować. Dostępne są również przyciski służące do rozgrupowywania i dzie­lenia kombinowanych obiektów.

• Rozmieszczanie. Umieszcza obiekty przed lub za innymi obiektami. Można je rów­nież umieszczać na samym wierzchu lub na samym spodzie stosu obiek­tów.

• Wyrównywanie. Wyrównuje obiekty na jeden z ośmiu sposobów, m.in. wy­środ­kowuje pionowo lub poziomo.

• Obracanie. Odbija obiekty poziomo lub pionowo albo obraca je o 90 stopni zgo­d­nie lub przeciwnie do ruchu wskazówek zegara.

Rysunek 2.11. Za pomocą tego paska można grupować, rozmieszczać lub obracać wybrane obiekty

Align pop-up — Menu rozwijane Align (Wyrównanie)

Tabela 2.3.

Główny pasek narzędziowy

Przycisk	Nazwa	Opis
	New - Nowy	Tworzy nowy dokument
	Open - Otwórz	Otwiera istniejący dokument
	Save - Zapisz	Zapisuje bieżący dokument
	Import - Importuj	Importuje plik do bieżącego dokumentu
	Export - Eksportuj	Eksportuje bieżący dokument
	Print - Drukuj	Drukuje bieżący dokument
	Undo - Cofnij	Cofa ostatnio wykonaną akcję
	Redo - Ponów	Ponawia ostatnią akcję, która została cofnięta
	Cut - Wytnij	Wycina wybrane obiekty i umieszcza je w schowku
	Copy - Kopiuj	Kopiuje zaznaczone obiekty do schowka
	Paste - Wklej	Wkleja zawartość schowka do bieżącego dokumentu

Przycisk Align XE "Align" (Wyrównanie) zamiast bezpośrednio wywoływać jakieś polecenie (jak po­zostałe przyciski znajdujące się w pasku Modify), powoduje otwarcie menu roz­wi­ja­ne­go zawierającego zestaw przycisków służących do wyrównywania obiektów. W Fire­works po­le­cenia wyrównania (zarówno te znajdujące się w menu rozwijanym paska na­rzę­dzio­we­go, jak i te z podmenu ModifyAlign) działają na obszarze prostokąta otaczającego za­znaczone obiekty (a nie, jak mógłbyś się spodziewać, w zakresie całego obszaru ro­bo­cze­go). Przykładowo - jeśli zaznaczysz koło znajdujące się po lewej stronie kadru i obra­zek bitmapowy po prawej stronie, po kliknięciu przycisku Align Left (Wyrównaj do lewej) obrazek bitmapowy zostanie wyrównany do lewej krawędzi koła, gdyż jest ono najbardziej w lewo wysuniętym obiektem zaznaczenia. Wszystkie przyciski znajdu­ją­ce się w pasku narzędziowym Modify zostały opisane w tabeli 2.4.

Tabela 2.4.

Pasek narzędziowy Modify

Przycisk	Nazwa	Opis
	Group - Grupuj	Grupuje zaznaczone obiekty
	Ungroup - Rozgrupuj	Rozdziela grupę obiektów
	Join - Połącz	łączy ścieżki dwóch obiektów wektorowych
	Split - Podziel	Rozdziela dwie uprzednio połączone ścieżki obiektów wektorowych
	Bring Front - Przesuń na wierzch	Przesuwa zaznaczony obiekt na wierzch pozostałych obiektów
	Bring Forward - Przesuń do przodu	Przesuwa zaznaczony obiekt o jeden poziom do góry
	Send Backward - Przesuń do tyłu	Przesuwa zaznaczony obiekt o jeden poziom w dół
	Send to Back - Przesuń na spód	Przesuwa zaznaczony obiekt na spód pozostałych obiektów
	Align Left - Wyrównaj do lewej	Wyrównuje zaznaczone obiekty do lewej krawędzi zaznaczenia
	Center Vertical Axis - Wyśrodkuj pionowo	Wyśrodkowuje w pionie zaznaczone obiekty
	Align Right - Wyrównaj do prawej	Wyrównuje zaznaczone obiekty do prawej krawędzi zaznaczenia
	Align Top - Wyrównaj do góry	Wyrównuje zaznaczone obiekty do górnej krawędzi zaznaczenia
	Center Horizontal Axis - Wyśrodkuj poziomo	Wyśrodkowuje w poziomie zaznaczone obiekty
	Align Bottom - Wyrównaj do dołu	Wyrównuje zaznaczone obiekty do dolnej krawędzi zaznaczenia
	Distribute Widths - Rozłóż w poziomie	Równomiernie rozkłada zaznaczone obiekty w poziomie
	Distribute Heights - Rozłóż w pionie	Równomiernie rozkłada zaznaczone obiekty w pionie
	Rotate 90º CCW - Obróć o 90ºw lewo	Obraca zaznaczony obiekt o 90º w lewo
	Rotate 90º CW - Obróć o 90ºw prawo	Obraca zaznaczony obiekt o 90º w prawo
	Flip Horizontal - Odbij poziomo	Odbija poziomo zaznaczony obiekt
	Flip Vertical - Odbij pionowo	Odbija pionowo zaznaczony obiekt

Więcej o wyrównywaniu obiektów przeczytasz w rozdziale 13.

Pasek stanu

• Pasek stanu (rysunek 2.12) składa się z dwóch części. Wskaźnik zaznaczenia wyświetla typ zaznaczonego obiektu. Jeżeli pracujesz w trybie bitmapowym, pasek stanu przedstawia również typ obiektu lub wybrany obiekt. Wskaźnik Opis wyświetla wskazówki dotyczące narzędzia, które zostało wybrane lub nad którym znajduje się kursor.

Rysunek 2.12. Na pasku stanu wyświetlane są informacje o zaznaczonych obiektach i wskazówki dotyczące korzystania z aktywnych narzędzi

Description — Opis

Selection indicator — Wskaźnik zaznaczenia

	Przycisk wyjścia z trybu edycji grafiki bitmapowej (Exit Bitmap Mo­de) i kontrolki animacji, umieszczone na pasku stanu w Fireworks 3, znajdują się teraz w oknie dokumentu i zostały opisane wcześniej w tym rozdziale.

Zarządzanie paletami

Palety mają ogromny wpływ na funkcjonalność Fireworks. W programie do­stęp­nych jest 20 różnych palet pozwalających modyfikować wszystkie parametry gra­fi­ki: od obrysów do behawiorów JavaScript. Wyświetlanie i ukrywanie poszczególnych palet po­lega na wybieraniu ich nazw z menu Window lub wciśnięciu odpowiedniego skrótu kla­wiaturowego.

Mimo to, że palet jest naprawdę dużo, efekt nie jest aż tak przytłaczający, gdyż palety są łączone ze sobą w grupy. Gdy paleta jest zadokowana w grupie, a Ty chcesz ją uak­tyw­nić wystarczy, że klikniesz jej zakładkę.

Domyślnie palety Fireworks są połączone ze sobą w cztery różne grupy, ale możesz to zmie­niać w zależności od indywidualnych potrzeb. Jeśli pracujesz na dwóch moni­to­rach, każdą z palet możesz wyświetlić oddzielnie, aby mieć do nich na­tych­miastowy dostęp. Z drugiej strony - można zaoszczędzić wiele miejsca w obszarze robo­czym łącząc wszystkie palety w jedną dużą grupę i pozostawiając widoczne wszys­tkie ich zakładki. Najlepsze dla większości użytkowników będzie jednak rozwiązanie po­średnie: niektóre palety zadokowane, inne nie i najczęściej wykorzystywane palety zaw­sze widoczne.

Im dłużej będziesz pracował w Fireworks, tym prędzej znajdziesz konfigurację palet naj­lepszą dla Twoich zastosowań. Wszystkie palety umieszczam zawsze po prawej stro­nie ekranu, zaś lewej strony używam jako obszaru roboczego. Gdy znajdziesz już opty­mal­ną dla siebie konfigurację palet, możesz ją zapisać jako Panel Layout Set (Usta­wie­nia pa­let) i później się do niej odwoływać.

Grupowanie i przesuwanie palet

Grupowanie i rozgrupowywanie palet to bardzo prosty proces. Aby oddzielić paletę od gru­py, kliknij jej zakładkę i przeciągnij poza grupę. Podczas przeciągania będziesz wi­dział na ekranie kontur palety. Zwolnij przycisk myszy, aby umieścić paletę na ekranie.

Grupowanie palet również opiera się na technice „przeciągnij i upuść”. Przeciągnij za­kład­kę palety, aż pojawi się jej kontur. Gdy będziesz przesuwał kursor nad różnymi pa­le­tami, zarys przesuwanej palety będzie przyciągany do konturów innych palet. Zwolnij przycisk myszy a zakładka przeciągniętej palety zostanie umieszczona na prawo od za­kła­dek już istniejących w grupie.

Oprócz grupowania palety można również przyciągać do obwódek okna dokumentu lub in­nych palet. Przyciąganie takie pozwala projektantom na szybkie zmie­nia­nie po­łożeń palet i ich łatwe rozmieszczanie. Jest jeszcze jeden szczegół: po przy­ciąg­nięciu palet do krawędzi, obszar roboczy jest większy i może zostać lepiej wyko­rzys­tany do pracy.

Palety można łatwo rozmieszczać na ekranie. Wystarczy kliknąć pasek ty­tu­ło­wy i przeciągnąć paletę w nowe położenie. Równie prosta jest zmiana rozmiarów i kształ­tów palet. W Windows umieść kursor nad krawędzią dowolnej pa­le­ty aż zostanie zamieniony na podwójną strzałkę i przeciągnij krawędź, aby zmienić roz­miar lub kształt palety. W MacOS, przeciągnij ikonę skalowania znajdującą się w pra­wym dolnym rogu palety, aby zmienić jej rozmiar lub kształt. Każda paleta ma swój roz­miar minimalny, przy którym nie może być dalej zmniejszana.

Układy palet (Panel Layout Sets)

Gdy już znajdziesz optymalną dla własnych potrzeb konfigurację palet, Fire­works umożliwia zapisanie jej jako Panel Layout Set XE "Panel Layout Set" .

Aby zapisać konfigurację palet jako Panel Layout Set:

1. Rozmieść palety w takiej konfiguracji, w jakiej chcesz je zapisać.

2. Wybierz z menu polecenie CommandsPanel Layout. Zostanie otwarte okno dia­logowe JavaScript.

	Otwierane jest okno dialogowe JavaScript, gdyż wszystkie pozycje znajdujące się w menu Commands Fireworks są tworzone na pod­sta­wie kodów HTML i JavaScript. Więcej informacji o menu Com­mand znajdziesz w rozdziale 19.

3. Wpisz nazwę nowego układu palet i kliknij OK.

Praca z dwoma monitorami Fireworks pozwala na pracę z dwoma monitorami na MacOS i w sys­te­mach Windows, które obsługują taką funkcję. Konfiguracje monitorów moż­na określać w sekcji Moni­tors (lub Monitors and Sound) panelu ste­rowania (ang. Control Panel) na MacOS lub w sekcji Ekran panelu ste­rowania w Windows. Najlepszym rozwiązaniem w przypadku wy­ko­rzys­tywania dwóch monitorów jest praca na jednym z nich i roz­miesz­cze­nie palet na drugim. Taka metoda sprawdza się szcze­gól­nie w przypadku, gdy masz duży i mały monitor z przeznaczeniem odpo­wie­d­nio na pracę i przechowywanie palet. Inną korzyścią wynikającą z używania dwóch monitorów jest moż­li­wość podglądu swo­jej pracy przy innych ustawieniach rozdzielczości i głę­bi kolorów niż te, które zazwyczaj wykorzystujesz w pracy. Więk­szość projektantów i grafików pracuje przy wysokich usta­wieniach roz­dziel­czości (np. 1600×1024) i głębi kolorów (np. 32 bity), zaś inter­nauci mają przeważnie monitory zdolne pracować z rozdzielczością jedynie 800×600 i przy róż­nych głębiach kolorów. Pracuj więc na jednym mo­ni­torze, a na innym oglądaj swoją pracę w przeglądarce internetowej. Po­winieneś tak dopasować ustawienia monitora służącego do pod­glą­du, abyś mógł oglądać swoją pracę przy różnych rozdzielczościach i głę­biach kolorów. Częste oglądanie pomoże Ci uchronić się przed róż­nymi niespo­dziankami i niepotrzebnymi poprawkami w przyszłości.

Konfiguracja palet jest zapisywana jako nowy układ palet i umieszczana w pod­menu CommandsPanel Layout Sets.

Aby zaznaczyć określony układ palet, wybierz CommandsPanel Layout Sets i na­stęp­nie nazwę układu.

Jeśli chcesz zachować bieżącą konfigurację palet, zrób to przed wybraniem polecenia Panel Layout Set. Wybranie Panel Layout Set spowoduje zastąpienie bieżącego ustawienia palet, a zmiany tej nie można cofnąć w prosty sposób.

Ukrywanie i wyświetlanie palet

Palety są bardzo przydatne do wykonywania przeróżnych modyfikacji do­ku­men­tów, ale mogą także zabierać wiele powierzchni obszaru roboczego. W czasie pracy z dużymi obrazkami przy powiększeniu 100% przeważnie ukrywam większość palet, aby lepiej widzieć i manipulować obrazkiem. Ukrywanie i przywracanie wszystkich pa­let to operacja polegająca na wciśnięciu jednego klawisza. Po wciśnięciu klawisza Tab wszys­tkie palety są ukrywane lub - jeśli aktualnie są ukryte - wszystkie palety są wy­świetlane.

Mimo że używanie klawisza Tab jest bardzo wygodne, masz do dyspozycji wiele in­nych metod ukrywania i wyświetlania palet:

• Wybierz z menu polecenie ViewHide Panels XE "Hide Panels" , aby ukryć lub wyświetlić palety.

• Użyj skrótu klawiaturowego: F4.

	Aby stworzyć własny skrót, w oparciu o inny klawisz lub kombinację klawiszy, wybierz EditKeyboard Shortcuts XE "Hide Panels" .

Więcej informacji na temat skrótów klawiaturowych znajdziesz w rozdziale 3.

Minimalizacja

Minimalizacja jest alternatywą dla ukrywania palet. Jest to standardowa funkcja sys­te­mu MacOS 8/9, ale można ją znaleźć w paletach Fireworks zarówno w Mac­OS, jak i w Windows. Dwukrotne kliknięcie paska tytułowego palety spo­woduje jej ukrycie jej. Pozostanie tylko ten pasek. Gdy ponownie klikniesz dwa ra­zy pasek tytułowy, zostanie wyświetlona cała paleta. Użytkownicy MacOS do mini­ma­li­za­cji palet mogą wykorzystywać także przyciski Windowshade znajdujące się w ich pas­kach tytułowych.

Podstawowe elementy palet

Każda paleta jest przeznaczona do innych zadań, ale wszystkie one mają ta­kie same elementy interfejsu. Wiele znajdujących się w nich funkcji, na przykład - su­wa­ki i lis­ty opcji, użytkownicy większości programów komputerowych już znają, po­dob­nie jak próbki kolorów, które można znaleźć także w innych programach graficznych. Na ry­sunku 2.13 przedstawionych jest kilka palet z opisami różnych elementów ich in­ter­fejsu.

Rysunek 2.13. Oto przykłady paneli, które znajdziesz w Fireworks

Multi-purpose button — Przycisk wielozadaniowy

Check box — Pole wyboru

Option list — Lista opcji

Text box — Pole tekstowe

Pop-up menu button — Przycisk menu rozwijanego

Pop-up menu — Menu rozwijane

Tabs — Zakładki

Color well — Próbka koloru

Slider — Suwak

Numeric slider — Suwak numeryczny

Help button — Przycisk pomocy

Disclosure triangle — Ikona odsłonięcia

Show/hide column — Pokaż/ukryj kolumnę

Edit/lock column — Edytuj/zablokuj kolumnę

Delete button — Przycisk Delete (Usuń)

Undo marker — Znacznik Undo (Cofnij)

Save button — Przycisk Save (Zapisz)

Oto przegląd elementów wspólnych dla interfejsów większości palet Fireworks:

• Zakładki. Są one wyświetlane w grupach palet.

• Rozwijane menu. Wszystkie palety, z wyjątkiem palet Tool Op­tions (Opcje narzędzia) i Tools (Narzędzia), mają wiele różnych opcji, które można wybierać za po­mocą rozwijanego menu (przycisk w kształcie strzałki w prawo), znaj­du­ją­ce­go się w prawym górnym rogu palety.

• Przycisk pomocy. We wszystkich paletach, za wyjątkiem palety Tools, znajduje się przycisk kontekstowej po­mocy. Powoduje on otwarcie pliku pomocy Using Fireworks na stronie, na której znajduje się opis dotyczący bieżącej operacji.

• Listy opcji. Przy dokonywaniu wyborów opcji w wielu przypadkach można wy­korzystywać listy opcji. Wystarczy kliknąć przycisk takiej listy, aby wy­świe­tlić wszystkie dostępne opcje. W niektórych sytuacjach - na przykład w przy­padku tekstur i deseni - w listach umieszczone są reprezentacje graficzne wy­branej opcji razem z jej opisem tekstowym. Funkcja ta pozwala na szybkie od­nalezienie szukanych elementów.

	W Windows można wcisnąć klawisz pierwszej litery wpisu znajdu­ją­ce­go się w liście opcji, aby przejść bezpośrednio do niego. Jeśli kilka wpi­sów rozpoczyna się tą samą literą, można ją wciskać wielokrotnie, aby przemieszczać się pomiędzy poszczególnymi opcjami.

• Próbki koloru. Wybór kolorów w Fireworks jest realizowany za pomocą pró­bek wyświetlających aktualnie wybrany bieżący kolor. Klikając próbkę koloru, możesz otworzyć próbnik, w którym aktywna bę­dzie próbka bieżącego koloru. We wszystkich próbnikach znajduje się kro­plo­mierz (Eyedropper) poz­walający na pobieranie kolorów z dowolnego miejsca ekranu oraz przy­cisk Palette (Paleta), służący do otwierania systemowego próbnika kolo­rów. W więk­szości próbników kolorów Fireworks znajduje się również przy­cisk No Co­lor pozwalający na usunięcie zaznaczeń kolorów.

• Suwaki numeryczne. Wszystkie elementy wymagające podania wartości nu­me­rycznych (procentowych, szesnastkowych lub zwykłych) używają rozwi­ja­nych suwaków. Po kliknięciu przycisku strzałki znajdującego się obok wartości nu­merycznej, definiującej na przykład grubość obrysu, pojawia się suwak. Jego prze­ciąganie wywoła zwiększanie lub zmniejszanie wartości numerycznej w po­­lu tekstowym. Po uzyskaniu pożądanej wartości należy zwolnić przycisk my­szy. Możliwe jest także wpisanie odpowiedniej wartości bezpośrednio w po­le tekstowe.

• Przycisk rozszerzenia palety. Kilka rozwijanych palet: Stroke (Obrys), Fill (Wy­pełnienie) i Effect (Efekty), posiada dodatkową sekcję z podglądem, którą moż­na otworzyć za pomocą rozszerzającej strzałki. Jest to mały, biały trójkąt znaj­dujący się w lewym dolnym rogu palety, który działa jak dwustanowy włącz­nik. Po pierwszym kliknięciu w palecie wyświetlana jest sek­cja podglądu, natomiast ponowne kliknięcie strzałki spowoduje przywrócenie po­przedniego rozmiaru palety.

• Pola tekstowe. Wartości parametrów można wprowadzać bezpośrednio w polu teks­towym, gdyż w Fireworks obok każdego suwaka znajduje się kores­pon­du­ją­ce z nim pole tekstowe. Można je wykorzystać do szybkiego wpisania war­toś­ci numerycznej co zastępuje przeciąganie suwaka za pomocą myszy.

• Pola wyboru. Niektóre opcje można włączać i wyłączać poprzez wstawianie lub usuwanie znaczników w odpowiadających im polach wyboru.

Paleta Optimize

Paleta Optimize XE "paleta:Optimize" umożliwia określanie ustawień wykorzystywanych przy eksportowaniu bie­żącego dokumentu. Można w niej wybrać typ pliku i specyficzne dla niego para­me­try, na przykład Quality (Jakość) dla obrazków JPEG oraz paletę dla obrazka zapisy­wa­ne w formacie GIF. Opcje dostępne w palecie Optimize zmieniają się w zależności od wy­bra­nego formatu pliku.

Rozwijane menu palety Optimize zawiera polecenia pozwalające na dostosowanie usta­wień eksportu. Zostały one opisane w tabeli 2.5.

Tabela 2.5.

Polecenia rozwijanego menu palety Optimize

Opcja	Opis
Save Settings - Zapisz ustawienia	Zapisuje bieżące ustawienia eksportu
Delete Settings - Usuń ustawienia	Usuwa bieżące zapisane ustawienia eksportu
Optimize to Size - Optymalizuj do rozmiaru	Optymalizuje bieżący dokument tak, aby eksportowany plik miał określony rozmiar fizyczny
Export Wizard - Kreator eksportu	Uruchamia kreatora, który prowadzi użytkownika przez cały proces eksportu dokumentu
Remove Unused Colors - Usuń nieużywane kolory	Włącza lub wyłącza automatyczne usuwanie nieużywanych kolorów z palety eksportowanej grafiki, wyświetlanej w palecie Color Table
Interlaced - Z przeplotem	Włącza przeplot w formatach plików potrafiących obsługiwać tę opcję
Progressive JPEG - Progresywny JPEG	Włącza lub wyłącza opcję progresywnego wyświetlania obrazków w formacie JPEG
Sharpen JPEG Edges - Wyostrz krawędzie obrazka JPEG	Włącza wyostrzanie krawędzi w eksportowanych obrazkach JPEG

Na rysunku 2.14 przedstawiona została paleta Optimize z wybraną opcją GIF WebSnap 128.

Rysunek 2.14. Paleta Optimize jest miejscem, w którym możesz określić wszystkie opcje eksportu dokumentu

Więcej informacji o palecie Optimize znajdziesz w rozdziale 15.

Paleta Object

Paleta Object XE "inspektor:Object" udostępnia kilka różnych interfejsów, w zależności od typu zaznaczonych elementów. Każdy z interfejsów udostępnia z kolei opcje odpowiednie dla dokonanego wyboru, jak np. ustawienie Roundness (Zaokrąglenie) dla narożników prostokąta, które pojawia się dopiero po wyborze prostokątów. Rysunek 2.15 przedstawia cztery przykłady palety Object.

Rysunek 2.15. W zależności od typu zaznaczonego obiektu, paleta Object udostępnia różne opcje

W pasku tytułowym palety Object wyświetlany jest typ zaznaczonego obiektu. Po­niż­sza lista jest zestawieniem wszystkich możliwych typów zaznaczeń:

• No Selection (Brak zaznaczenia). Nie został wybrany żaden obiekt.

• Path (Ścieżka). Po zaznaczeniu obiektu wektorowego, w palecie Object wyświetlane jest słowo Path, z dwoma dodatkowymi opcjami obrysu ścieżki. Pierwsza z nich to Stroke Placement (Położenie obrysu) określająca czy kontur ma być położony na zewnątrz, wewnątrz czy też wyśrodkowany względem ścieżki. Druga opcja to Draw Fill over Stroke, po włączeniu której wypełnienie jest rysowane nad ob­rysem.

• Rectangle (Prostokąt). Po wybraniu prostokąta pojawia się paleta Rectangle Object, taka sama jak paleta Path Object, jedynym dodatkiem jest ustawienie zaokrąglenia (Roundness) narożników prostokąta.

• Bitmap (Bitmapa). Po zaznaczeniu obiektu bitmapowego, paleta Object informuje, że jest to właśnie taki obiekt

• Text (Tekst). Po zaznaczeniu obiektu tekstowego, oprócz opcji dotyczących obrysu, paleta Object pozwala także na wybranie me­tody przekształcania tekstu: Transform as Paths (Przekształć na ścieżki) lub Trans­form as Pixels (Przekształć na piksele). Obiekty tekstowe zostaną opisane w rozdziale 10.

• Text on a Path (Tekst na ścieżce). Paleta Object pracująca w trybie Text on a Path jest podobna do palety dla tekstu. Ma ona tylko jedną dodatkową op­cję - pozwala ustawić liczbę pikseli, o jaką tekst zostanie przesunięty wzglę­dem opisującej go ścieżki.

• Bitmap Mask and Vector Mask (Maska bitmapowa i maska wektorowa). Po zaznaczeniu obiektu z maską bitmapową można wybrać, czy zastosować maskę przy użyciu kanału alfa, czy aktualny widok przekszatałcić na skalę szarości. Maski wektorowe mają dodatkowe opcje, o których przeczytasz w rozdziale 13.

• Graphic Symbol, Animation Symbol i Button Symbol (Symbol graficzny, symbol animacji i symbol przycisku). Umożliwiają określenie, czy przy sekwencjonowaniu symbolu zmieniane będą jego ścież­ki lub elementy bitmapowe. Symbole przycisków posiadają dodatkowe op­cje, takie jak tekst przycisku (Button Text). Paleta Object dla animacji zawiera szereg specyficznych opcji dla odpowiedniego dostrojenia animacji. Więcej informacji o symbolach znaj­dziesz w rozdziale 17.

• Hotspot (Obszar aktywny). Za pomocą palety Object można definiować więk­szość ustawień obszarów aktywnych działających jako obiekty inter­ne­to­we: adresy URL, znaczniki <alt> i cele (ang. target). W palecie można usta­wiać również kolory i kształty (Rectangle - prostokąt, Oval - owal lub Poly­gon - wielokąt) obszarów aktywnych. Więcej o zastosowaniach obszarów ak­tywnych znajdziesz w rozdziale 20.

• Slice (Plaster). Po zaznaczeniu plastra, oprócz informacji dotyczących In­ter­ne­tu (adresy URL, znaczniki <alt> i cele), za pomocą palety Object można de­finiować ustawienia eksportu, kolory i konwencje nazywania plastrów. Wska­zówki dotyczące wykorzystywania plastrów jako ważnego narzędzia Fire­works znajdziesz w rozdziale 19.

Większość zaznaczonych obiektów można modyfikować za pomocą poleceń znajdu­ją­cych się w rozwijanym menu palety Object, opisanych w tabeli 2.6. Polecenia te umo­żliwiają nawet konwersję obszarów aktywnych na plastry i odwrotnie.

Tabela 2.6.

Polecenia rozwijanego menu palety Object

Opcja	Opis
Copy to Hotspot - Kopiuj do obszaru aktywnego	Kopiuje obiekt do warstwy internetowej (Web Layer) jako obszar aktywny
Copy to Slice - Kopiuj do plastra	Kopiuje obiekt do warstwy internetowej (Web Layer) jako plaster

Paleta Stroke XE "paleta:Stroke"

Każdy obiekt utworzony za pomocą jednego z narzędzi wektorowych: Pen (Pióro), Brush (Pędzel), Rectangle (Prostokąt), Ellipse (Elipsa), Line (Linia) lub Text (Tekst) jest po­czątkowo budowany ze ścieżki, czyli konturu obiektu. Gdy ścieżka jest widoczna, mó­wimy o niej, że jest obrysowana. W Fireworks, obrys może prosty (kontur o gru­boś­ci 1 piksela stworzony narzędziem Pencil) lub bardzo złożony (np. Confetti). Wszystkie usta­­wienia ścieżek można kontrolować z poziomu palety Stroke - podstawowego narzę­dzia każdego artysty grafika.

Fireworks posiada wiele wbudowanych ustawień obrysów, które można określać za po­mo­cą palety Stroke (rysunek 2.16). W palecie tej można również modyfikować istnie­ją­ce ustawienia i zapisać je jako nowy obrys. Obrysy są definiowane za pomocą sied­miu naj­waż­niejszych atrybutów:

Rysunek 2.16. Paleta Stroke pozwala definiować wygląd konturów obiektów

• Stroke category (Kategoria obrysu). W Fireworks dostępnych jest 11 kategorii ob­rysów: Pencil (Ołówek), Basic (Podstawowy), Airbrush (Aerograf), Calli­gra­phy (Kaligraficzny), Charcoal (Węgiel), Crayon (Kredka), Felt Tip (Pisak), Oil (Olej), Watercolor (Akwarela), Random (Losowy) i Unnatural (Nienaturalny). Aby ukryć ścieżkę, wybierz opcję None (Żaden).

• Specific stroke (Nazwa obrysu). Dla każdej kategorii dostępny jest inny zestaw ob­rysów. Gdy zmodyfikujesz obrys, zmienisz jego nazwę lub zapiszesz nowy ob­rys, wszystkie te zmiany zostaną odzwierciedlone w liście opcji obrysu.

• Stroke color (Kolor obrysu). Po kliknięciu przycisku ze strzałką znajdującego się obok próbki koloru zostanie wyświetlony próbnik kolorów i uaktywniony kroplomierz (Eyedropper), z których moż­na skorzystać, aby wybrać kolor z próbnika lub z dowolnego miejsca na ekranie. Aby otworzyć systemowy prób­nik kolorów, należy kliknąć przycisk Palette (Paleta).

• Stroke edge (Zmiękczenie krawędzi). Użyj suwaka do zmiękczenia lub wy­os­trzenia krawędzi obrysu. Im wyżej znajduje się suwak, tym większe będą kra­­wędzie obrysu. I odwrotnie - gdy suwak znajduje się na samym dole, kra­wę­dzie nie zostaną w ogóle zmiękczone.

• Stroke size (Grubość obrysu). Suwak rozmiaru obrysu określa jego wartość mie­rzo­ną w pikselach. Przeciąganie suwaka w górę skali zwiększa grubość obrysu. To samo zadanie można wykonać, wprowadzając wartość grubości obrysu (od 1 do 100) bezpośrednio w pole tekstowe. W palecie Stroke wyświetlany jest dy­namiczny podgląd obrysu o wybranych parametrach.

• Stroke texture (Tekstura obrysu). Oprócz koloru, grubości i zmiękczenia kra­wę­dzi, do obrysu można także zastosować teksturę. W Fireworks wbudo­wa­nych jest 26 różnych tekstur i istnieje możliwość tworzenia własnych.

• Degree of stroke texture (Natężenie tekstury obrysu). Po wybraniu tekstury - poprzez prze­su­nięcie suwaka lub wpisanie wartości procentowej w odpowiednie pole teks­to­we - musisz określić intensywność tekstury zastosowanej do obrysu. Natę­że­nie jest definiowane poprzez stopień krycia tekstury nakładanej na obrys.

Wybranie obiektu spowoduje automatyczne zastosowanie na nim zmian dokonanych za pomocą palety Stroke.

Za pomocą poleceń znajdujących się w rozwijanym menu palety Stroke (tabela 2.7) mo­żesz zarządzać bieżącymi obrysami i tworzyć nowe.

Tabela 2.7.

Polecenia rozwijanego menu palety Stroke

Opcja		Opis
Save Stroke As - Zapisz obrys jako		Zapisuje bieżące ustawienia obrysu pod nową nazwą
Edit Stroke - Edytuj obrys		Otwiera okno dialogowe Edit Stroke
Rename Stroke - Zmień nazwę obrysu		Zmienia nazwę bieżących ustawień obrysu
Delete Stroke - Usuń obrys		Usuwa bieżący obrys z menu
		Obrysy zostały szczegółowo opisane w rozdziale 8.

Paleta Fill

Podczas gdy paleta Stroke zajmuje się konturami obiektów, paleta Fill XE "paleta:Fill" (Wypełnienie) jest odpowiedzialna za ich wnętrza. Obiekty mogą być wypełniane jednolitym kolorem, gra­dientami, deseniami lub ditheringiem internetowym (ang. web dither). Do wszys­tkich wypełnień można stosować tekstury o zmiennym nasyceniu (ustawianym za po­mo­cą suwaka). Co więcej, tekstury te mogą być nawet przezroczyste.

Po wybraniu typu wypełnienia w palecie Fill (rysunek 2.17), możesz mu nadać okre­ślo­ny kolor, deseń, krawędzie lub teksturę. Oto lista opcji dostępnych w palecie Fill:

Rysunek 2.17. W palecie Fill znajduje się wiele opcji pozwalających modyfikować wnętrza kształtów wektorowych

• Fill category (Kategoria wypełnienia). Do wyboru są następujące kategorie wy­pełnień: Solid (Jednolite), Web Dither (Dwukolorowy deseń), Pattern (De­seń) lub Gradient. Dostępnych jest wiele różnych typów gradientów: Linear (Li­niowy), Radial (Radialny), Ellipse (Eliptyczny), Rectangle (Prostokątny), Co­ne (Stożkowy), Starburst (Wybuch gwiazdy), Bars (Paskowy), Ripples (Okrę­gi), Waves (Fale), Satin (Satyna) i Folds (Fałdy).

• Specific pattern or gradient color scheme (Schematy kolorów wypełnień deseniowych i gra­dientowych). Jeśli wybierzesz wypełnienie Pattern lub jeden z gradientów, zos­tanie wyświetlona lista zawierająca opcje każdego typu wypełnienia.

• Fill edge (Krawędź wypełnienia). Krawędzie wypełnień mogą być ostre, wy­gładzane lub zmiękczane.

• Degree of feathering (Stopień zmiękczenia). Jeśli wypełnienie posiada zmięk­cza­ne krawędzie, poprzez przeciąganie suwaka lub wpisanie wartości (w pik­se­lach) w odpowiednie pole tekstowe możesz ustalić stopień tego zmiękczenia.

• Fill texture (Tekstura wypełnienia). Dla wypełnień dostępne są takie same tek­stu­ry, jakie można ustawić dla obrysów.

• Degree of texture (Natężenie tekstury). Aby tekstura była widoczna, musisz zwięk­szyć jej natężenie za pomocą suwaka lub poprzez wpisanie wartości w od­po­wiednie pole tekstowe. Im wyższa wartość, tym tekstura jest lepiej wi­doczna.

• Transparency of texture (Przezroczystość tekstury). Po zaznaczeniu pola wyboru Tran­sparency, jaśniejsze obszary tekstury staną się przezroczyste.

Wypełnienia gradientowe posiadają wiele różnych opcji pozwalających na tworzenie i mo­dyfikowanie własnych wzorów użytkownika. W tabeli 2.8 zostały opisane polecenia znajdujące się w rozwijanym menu palety Fill.

Tabela 2.8.

Polecenia rozwijanego menu palety Fill

Opcja		Opis
Save Gradient As - Zapisz gradient jako		Zapisuje bieżące ustawienia gradientu pod nową nazwą
Edit Gradient - Edytuj gradient		Otwiera okno dialogowe Edit Gradient
Rename Gradient - Zmień nazwę gradientu		Zmienia nazwę bieżących ustawień gradientu
Delete Gradient - Usuń gradient		Usuwa bieżący gradient z menu
		Jeśli chcesz więcej wiedzieć o wypełnieniach, zerknij do rozdziału 11.

Paleta Effect XE "paleta:Effect"

W początkach Internetu, aby stworzyć efekt specjalny, taki jak przycisk z cieniami i fa­zo­wanymi krawędziami, trzeba było wykonać wiele nużących czynności w programie gra­ficznym w rodzaju Photoshopa. Obecnie Fireworks umożliwia bardzo szybkie i łat­we stosowanie przeróżnych efektów za pomocą palety Effect. Jeszcze lepsze jest to, że efek­ty Fireworks są „żywe”, co oznacza, że automatycznie dostosowują się do roz­ma­i­tych modyfikacji obiektów. W palecie Effect można również zmieniać parametry już zastosowanego efektu.

Wszystkie efekty Fireworks zostały podzielone na dwie grupy i umieszczone w liście znaj­dującej się w palecie Effect. Pierwsza grupa to wbudowane efekty Fireworks. Druga gru­pa to zgodne z Photoshopem filtry graficzne znajdujące się w folderze Xtras pro­gra­mu Fireworks lub innym folderze określonym w preferencjach programu.

Po wybraniu propozycji z listy znajdującej się w palecie Effect, zostanie ona zasto­so­wa­na do aktualnie zaznaczonego obiektu i dodana do listy aktywnych efektów. Obok efektów po­danych na liście znajdują się pola wyboru. Możesz je zaznaczać lub usuwać za­zna­cze­nia, co spowoduje odpowiednio włączenie lub wyłączenie efektu.

Po kliknięciu przycisku „i”, znajdującego się obok nazwy efektu, będziesz mógł zmie­nić jego parametry. Wszystkie filtry zgodne z Photoshopem mają własne okna dialo­go­we. W przypadku większości wbudowanych efektów Fireworks zostanie otwarte małe okno z ustawieniami efektu. Aby pozbyć się okienka, wystarczy kliknąć w dowolnym miej­scu ekranu poza nim. Przykładem efektu posiadającego rozwijane okno edycyjne jest Raised Emboss (rysunek 2.18).

Rysunek 2.18. Ustawienia niektórych modułów filtrów Live Effects są wyświetlane w dość niezwykłych rozwijanych oknach edycyjnych, takie jak okno efektu Raised Emboss

Po utworzeniu określonego efektu można go zapisać i wykorzystywać później z pozio­mu poleceń znajdujących się w rozwijanym menu palety (tabela 2.9).

Tabela 2.9.

Polecenia rozwijanego menu palety Effect

Opcja		Opis
Save defaults - Zapisz jako domyślne		Zapisuje bieżącą konfigurację danego efektu jako domyślne ustawienia nowych efektów
Save Effect As - Zapisz efekt jako		Zapisuje bieżącego ustawienia efektu pod nową nazwą
Rename Effect - Zmień nazwę efektu		Zmienia nazwę bieżących ustawień efektu
Delete Effect - Usuń efekt		Usuwa bieżący efekt z menu
All on - Włącz wszystkie		Włącza wszystkie aktywne efekty znajdujące się w palecie Effect
All off - Wyłącz wszystkie		Wyłącza wszystkie aktywne efekty znajdujące się w palecie Effect
Locate Plug-ins - Zlokalizuj plug-iny		Wyświetla okno dialogowe, w którym można zdefiniować folder z plug-inami Photoshopa
		Moduły filtrów Live Effects umożliwiają bardzo szybkie dodawanie serii efektów do gra­fiki. Więcej o efektach i szczegółowe informacje o tym, jak więk­szość z nich uruchamiać z poziomu palety Effect znajdziesz w rozdziale 12.

Paleta Color Table

Podczas pracy z 8-bitowymi obrazkami, na przykład GIF-ami, w palecie Color Table (ry­sunek 2.19) wyświetlana jest bieżąca paleta kolorów wykorzystywana przy eks­por­cie grafiki. Paleta Color Table XE "paleta:Color Table" jest narzędziem bardzo przydatnym w minimalizacji roz­mia­rów plików obrazków eksportowanych w formacie GIF. Pozwala zredukować liczbę kolorów w ich paletach.

Rysunek 2.19. W palecie Color Table zawsze znajduje się paleta kolorów bieżącego dokumentu

Paleta Color Table posiada rozbudowane rozwijane menu, opisane szczegółowo w ta­beli 2.10.

Paleta Swatches

Podczas gdy paleta Color Mixer pozwala na definiowanie pełnego spektrum kolorów, pa­leta Swatches XE "pa­leta:Swatches" zapewnia większą kontrolę nad poszczególnymi kolorami palety. Jak wska­zuje jej nazwa, paleta Swatches zawiera zbiór próbek kolorów (rysunek 2.20). Aby wybrać jakiś kolor, wystarczy kliknąć reprezentującą go próbkę.

Tabela 2.10.

Polecenia rozwijanego menu palety Color Table

Opcja	Opis
Rebuild Color Table - Odbuduj paletę kolorów	Uaktualnia paletę kolorów do zmian dokumentu
Add Color - Dodaj kolor	Otwiera systemowy próbnik kolorów, za pomocą którego możesz ręcznie dodać kolor do palety
Edit Color - Edytuj kolor	Otwiera systemowy próbnik kolorów, w którym możesz zmienić bieżący kolor na inny
Delete Color - Usuń kolor	Usuwa zaznaczony kolor (kolory) z palety
Replace Palette Entry - Zastąp pozycję palety	Otwiera systemowy próbnik kolorów, za pomocą którego możesz zastąpić zaznaczoną pozycję palety innym kolorem
Snap to Web Safe - Zamień na bezpieczny dla Internetu	Zamienia zaznaczony kolor (kolory) na bezpieczny dla Internetu
Transparent - Przezroczysty	Czyni zaznaczony kolor przezroczystym
Lock Color - Zablokuj kolor	Blokuje zaznaczony kolor tak, aby nie można go było edytować
Unlock All Colors - Odblokuj wszystkie kolory	Odblokowuje wszystkie zablokowane kolory
Sort by Luminance - Sortuj względem jasności	Sortuje kolory względem ich jasności
Sort by Popularity - Sortuj względem „popularności”	Sortuje kolory od najbardziej do najmniej używanego
Unsorted - Brak sortowania	Pozostawia kolory nieposortowane
Show Swatch Feedback - Pokaż sprzężenie próbek	Wyświetla ikony wskazujące, czy kolor jest zablokowany, przezroczysty lub posiada inne atrybuty
Remove Edit - Cofnij zmiany	Przywraca takie wartości koloru, jakie miał przed edycją
Remove All Edits - Cofnij wszystkie zmiany	Przywraca wszystkim kolorom takie wartości, jakie miały przed edycją
Load Palette - Załaduj paletę	ładuje wcześniej zapisaną paletę
Save Palette - Zapisz paletę	Zapisuje bieżącą paletę

Rysunek 2.20. Paletę Swatches można wykorzystywać do zarządzania paletami kolorów grafiki
		Jeśli po sortowaniu lub modyfikacjach próbek chciałbyś przywrócić ory­ginalne ustawienia palety, wybierz ją ponownie z rozwijanego menu pa­lety Swatches.

Główne zastosowanie palety Swatches jest ukryte w jej rozwijanym menu: zarządzanie pa­letami kolorów. Za pomocą znajdujących się tam poleceń możesz włączać stan­dar­do­we palety kolorów (takie jak palety systemowe Windows lub Macintosh), za­pi­sy­wać i ładować własne palety lub modyfikować paletę, która zostanie wykorzystana przy eks­porcie obrazka. Szczególnie przydatne jest polecenie Add Swatches (Dodaj próbki), któ­re umożliwia ładowanie palet zapisanych w Photoshopie i wydobywanie informacji o kolorach z plików w formacie GIF. W tabeli 2.11 opisane zostały wszystkie polecenia znaj­dujące się w rozwijanym menu.

Tabela 2.11.

Polecenia rozwijanego menu palety Swatches

Opcja	Opis
Add Swatches - Dodaj próbki	Importuje palety kolorów zapisane w formacie .aco lub plikach GIF
Replace Swatches - Wymień próbki	Wymienia bieżącą paletę za pomocą innego zestawu próbek
Save Swatches - Zapisz próbki	Zapisuje bieżący zestaw próbek
Clear Swatches - Usuń próbki	Usuwa wszystkie próbki z palety
Macintosh System	Wczytuje próbki z systemowej palety Macintosha
Windows System	Wczytuje próbki z systemowej palety Windows
Grayscale - Skala szarości	Wczytuje próbki z palety skali szarości
Current Export Palette - Bieżąca paleta eksportu	Wczytuje próbki z bieżącej palety eksportu
Sort by Color - Sortuj względem koloru	Sortuje próbki pod względem ich kolorów

Paleta Color Mixer XE "paleta:Color Mixer"

Projektanci grafiki internetowej różnie zaczynali swoją karierę: niektórzy - od two­rze­nia tradycyjnej grafiki komputerowej, inni koncentrowali się na poligrafii, a wielu z nich zajmowało się jedynie grafiką dla Internetu. Paleta Color Mixer pozwala na wybór mo­delu kolorów, który jest Ci najbliższy i najbardziej odpowiedni dla Twojego stylu pracy.

Mikser kolorów (rysunek 2.21) oferuje trzy możliwości wyboru kolorów:

Rysunek 2.21. Kolor obrysu i wypełnienia możesz zdefiniować za pomocą próbek, spektrum kolorów lub suwaków znajdujących się w palecie Color Mixer

• Stroke and Fill color wells — Próbki kolorów obrysu i wypełnienia. Kliknij próbkę koloru, aby otworzyć roz­wijany próbnik, a następnie systemowy próbnik kolorów za pomocą przy­cisku Palette.

• Color ramp — Spektrum kolorów. Spektrum to prostokąt z podglądem kolorów wy­stę­pu­ją­cych w danym modelu. Aby wybrać jakiś kolor, wystarczy kliknąć w wybra­nym miejscu spektrum.

• Color components sliders — Suwaki składowych koloru. Podobnie jak spektrum kolorów, suwaki skła­do­wych koloru zmieniają się w zależności od wybranego modelu. W czterech z pię­ciu modeli kolorów: RGB, Hexadecimal (Szesnastkowy), CMY i HSB wy­świe­tlane są trzy różne suwaki, zaś w modelu Grayscale (Skala szarości) tylko je­den - K (czarny).

Podobnie jak w palecie narzędziowej, w palecie Color Mixer także znajduje się przycisk Default Colors, służący do przywracania standardowych kolorów obrysu i wypełnienia oraz przycisk Swap, wykorzystywany do zamieniania tych kolorów. Model kolorów mo­żesz wybrać z rozwijanego menu palety (tabela 2.12).

Tabela 2.12.

Polecenia rozwijanego menu palety Color Mixer

Opcja	Opis
RGB	Wyświetla w mikserze kolory z modelu RGB (Red - czerwony, Green - zielony i Blue - niebieski)
Hexadecimal - Szesnastkowy	Wyświetla w mikserze kolory z modelu RGB za pomocą ich wartości szesnastkowych. Jest to metoda powszechnie wykorzystywana w HTML-u
CMY	Wyświetla w mikserze kolory z modelu CMY (Cyan - niebieskozielony, Magenta - purpurowy i Yellow - żółty)
HSB	Wyświetla w mikserze kolory z modelu HSB (Hue - barwa, Saturation - nasycenie i Brightness - jasność)
Grayscale - Skala szarości	Wyświetla w mikserze kolory z 256-stopniowej skali szarości

Każdy projektant musi doskonale znać możliwości stosowania kolo­rów i czyhające na niego pułapki. Więcej informacji o palecie Color Mixer znajdziesz w rozdziale 7.

Paleta Tool Options XE "paleta:Tool Options"

Większość narzędzi znajdujących się w palecie narzędziowej Fireworks posiada do­dat­ko­we opcje, które można konfigurować za pomocą palety Tool Options.

Istnieją dwa spo­soby na wyświetlenie palety Tool Options z opcjami określonego narzędzia:

• Otwórz paletę klikając jej zakładkę lub wybierając z menu polecenie Win­dowTool Options, a następnie wybierz narzędzie z palety narzędziowej.

• Kliknij dwukrotnie narzędzie w palecie narzędziowej.

Podobnie jak w przypadku palety Object, opcje dostępne w palecie Tool Options uza­leż­nio­ne są od typu aktualnie zaznaczonego obiektu. Niektóre narzędzia - na przykład Eraser (Gumka) (rysunek 2.22) - posiadają wiele różnych opcji. Kilka innych: Hand (Rą­czka), Zoom (Powiększenie), Line (Linia), Pen (Pióro), Ellipse (Elipsa), Brush (Pę­dzel) i narzędzia internetowe nie mają żadnych opcji. Każde z narzędzi Fireworks zo­sta­nie szczegółowo opisane w podrozdziale poświęconym kolejnym narzędziom.

Rysunek 2.22. Po dwukrotnym kliknięciu narzędzia Eraser, w palecie Tool Options wyświetlanych jest kilka jego opcji
		Paleta Tool Options to jedyna paleta nieposiadająca własnego roz­wi­ja­nego menu.

Paleta Layers XE "paleta:Layers"

Warstwy w plikach Fireworks umożliwiają tworzenie bardzo skomplikowanych grafik, a także są zgodne z warstwami zapisywanymi w plikach Photoshopa. Warstwy w Fireworks przypominają foldery zawierające wiele obiektów, gdzie każdy obiekt posiada własny numer porządkowy. Warstwy również mają własne numery porządkowe i mogą być umieszczane nad lub pod innymi warstwami. Co więcej - każda war­stwa może zostać ukryta, a to ułatwia edycję skomplikowanych grafik, lub za­blo­ko­wa­na, co chroni przed jej przypadkowymi zmianami. Warstwy mogą być dzielone przez wie­le różnych klatek, umożliwiając tym samym dodawanie statycznych elementów do każ­dej z klatek animacji.

Wszystkie obiekty internetowe, takie jak plastry i obszary aktywne, są przechowywane na warstwie internetowej (Web Layer), która może być ukrywana i blokowana. Istnieje moż­liwość zmiany pozycji tej warstwy w stosie, ale jej usunięcie nie wchodzi w grę. War­stwa internetowa jest zawsze współużytkowana przez wszystkie klatki pliku.

„Centrum dowodzenia” warstwami znajduje się w palecie Layers (rysunek 2.23). W liś­cie warstw umieszczone są nazwy wszystkich warstw, miniaturki ich zawartości oraz kolumny Expand/Collapse (Rozwiń/Zwiń), Show/Hide (Po­każ/Ukryj) i Lock/Unlock (Zablokuj/Odblokuj). Przyciski New/Duplicate Layer i Delete Selection umo­ż­li­wiają odpowiednio tworzenie i usuwanie warstw. Przycisk Add Mask (Dodaj maskę) dodaje maskę do wybranego obiektu lub warstwy. Przycisk New Bitmap Image (Nowy obrazek bitmapowy) tworzy pusty obiekt bitmapowy jako nowy obiekt na warstwie.

Rysunek 2.23. Obiekty znajdujące się w warstwach mogą być ukrywane lub blokowane za pomocą jednego kliknięcia myszą w palecie Layers

Przydatnym elementem środowiska zarządzania warstwami w Fireworks jest rozwijane menu palety Layers, opisane w tabeli 2.13.

Tabela 2.13.

Polecenia rozwijanego menu palety Layers

Opcja	Opis
New Image - Nowy obrazek	Tworzy nowy, pusty obiekt bitmapowy
New Layer - Nowa warstwa	Dodaje nową warstwę i umieszcza ją nad wszystkimi pozostałymi warstwami bieżącego obrazka
Duplicate Layer - Duplikuj warstwę	Podwaja bieżącą warstwę
Share this Layer - Współużytkowanie warstwy	Pozwala na współużytkowanie obiektów znajdujących się na warstwie przez wszystkie klatki dokumentu
Single Layer Editing - Edycja pojedynczej warstwy	Ogranicza możliwość edycji tylko do bieżącej warstwy
Delete Layer - Usuń warstwę	Usuwa bieżącą warstwę
Hide All - Ukryj wszystkie	Ukrywa wszystkie warstwy dokumentu
Show All - Pokaż wszystkie	Wyświetla wszystkie warstwy bieżącego dokumentu
Lock All - Zablokuj wszystkie	Uniemożliwia edycję wszystkich warstw
Unlock All - Odblokuj wszystkie	Przywraca możliwość edycji uprzednio zablokowanych warstw
Add Mask - Dodaj maskę	Dodaje maskę do wybranego obiektu
Edit Mask - Edytuj maskę	Uruchamia tryb edycji maski, w związku z czym w oknie dokumentu może być modyfikowana maska aktualnie wybranego obiektu
Disable Mask - Wyłącz maskę	Blokuje maskę aktualnie wybranego obiektu
Delete Mask - Usuń maskę	Usuwa maskę aktualnie wybranego obiektu
Thumbnail Options - Opcje miniatur	Otwiera okno dialogowe Thumbnail Options, które umożliwia określenie rozmiarów miniaturki

Paleta Frames XE "paleta:Frames"

Paleta Frames jest w Fireworks używana głównie do tworzenia elementów reagujących na zdarzenia myszy (tzw. rollovers) i animacji. W elementach reagujących na zdarzenia my­szy każda klatka reprezentuje inny stan danego elementu. Przy tworzeniu takich ele­men­tów można wykorzystać do czterech różnych klatek. By utworzyć animowanego
GIF-a, każda klatka Fireworks powinna reprezentować jedną klatkę animacji. W ani­ma­cjach można wykorzystywać dowolne ilości klatek, choć lepiej jest ograniczyć się do mi­nimalnej liczby klatek, aby utrzymać niewielki rozmiar pliku.

Domyślnie czas trwania każdej klatki wynosi 7 milisekund. Kliknij dwukrotnie usta­wie­nie czasu trwania klatki w palecie Frames, aby otworzyć rozwijane okno edycyjne, któ­re jest podobne do okna wyświetlanego w palecie Effect. Po dwukrotnym kliknięciu nazwy klatki możemy dokonywać edycji w innym rozwijanym oknie dialogowym.

Paleta Frames (rysunek 2.24), podobnie jak paleta Layers, posiada dobrze widoczną lis­tę wszystkich klatek dokumentu.

Rysunek 2.24. Paleta Frames jest miejscem, w którym można tworzyć elementy reagujące na zdarzenia myszy i animowane GIF-y

Jeszcze bardziej zaawansowaną kontrolę nad interakcjami tworzonym z wykorzy­sta­niem klatek daje rozwijane menu palety Frames (tabela 2.14).

Paleta History XE "paleta:History"

Paleta History (rysunek 2.25) umożliwia precyzyjną kontrolę nad wielostopniowym po­le­ceniem Fireworks - Undo (Cofnij). Kolejne posunięcia, nazywane „krokami” są wska­zy­wane w palecie znacznikiem cofania (Undo Marker). W palecie History jest wyświe­tla­na taka liczba kroków polecenia Undo, jaka zostanie ustawiona w preferencjach Fireworks.

Tabela 2.14.

Polecenia rozwijanego menu palety Frames

Opcja			Opis
Add Frames - Dodaj klatki			Otwiera okno dialogowe Add Frames
Duplicate Frame - Duplikuj klatkę			Duplikuje bieżącą klatkę
Delete Frames - Usuń klatki			Usuwa bieżącą klatkę
Copy to Frames - Kopiuj do klatek			Kopiuje zaznaczone obiekty do klatki lub zakresu klatek
Distribute to Frames - Rozłóż na klatki			Rozmieszcza obiekty w różnych klatkach na podstawie ich pozycji w stosie
Auto Crop - Przycinanie			Ustawia metodę usuwania klatek na Auto Crop
Auto Difference - Różnica			Ustawia metodę usuwania klatek na Auto Difference
Properties - Właściwości			Otwiera rozwijane okno edycyjne bieżącej klatki
Rysunek 2.25. W palecie History przechowywany jest zapis wykonywanych czynności, które można cofnąć, powtórzyć lub zapisać jako polecenie
		W Fireworks można ustawić maksymalnie 1 009 kroków po­lecenia Undo.

Możliwość zapisywania i odtwarzania poszczególnych posunięć czyni paletę History czymś więcej niż tylko rozbudowanym poleceniem Undo. Możliwość zapisania wyko­na­nych kroków jako polecenie pozwala na zautomatyzowanie prawie wszystkich czyn­noś­ci wykonywanych w Fireworks. Jeśli pracujesz z projektem, w którym musisz pod­dać takiej samej edycji wiele różnych obrazków, wystarczy, że zmodyfikujesz tylko jeden z nich i zapiszesz swoje kroki jako polecenie, a będziesz mógł zastosować je do wszys­tkich pozostałych obrazków.

Tabela 2.15 zawiera opisy wszystkich poleceń dostępnych w rozwijanym menu pa­lety History.

Tabela 2.15.

Polecenia rozwijanego menu palety History

Opcja	Opis
Replay Selected Steps - Powtórz zaznaczone kroki	Powtarza zaznaczone kroki
Copy Steps - Kopiuj kroki	Kopiuje zaznaczone kroki do schowka
Save as Command - Zapisz jako polecenie	Zapisuje zaznaczone kroki jako polecenie
Clear History - Wyczyść historię	Usuwa wszystkie kroki

Paleta Info

Podczas tworzenia złożonej grafiki często konieczne się staje sprawdzenie rozmiarów i po­łożeń poszczególnych obiektów. Paleta Info umożliwia nie tylko przegląd tych atry­bu­tów, ale pozwala również na precyzyjne ich modyfikowanie poprzez bezpośrednie wpi­sywanie ich wartości. Dodatkowo, paleta Info XE "paleta:Info" (rysunek 2.26) wyświetla współ­rzęd­ne położenia kur­sora i aktualizowane w czasie rzeczywistym wartości kolorów, nad któ­ry­mi się znajduje. Podczas używania narzędzia Transform paleta Info informuje o takich danych jak np. kąt obrotu, co pozwala na dokładniejsze przekształcenie.

Rysunek 2.26. W palecie Info wyświetlane są informacje na temat rozmiarów i położeń obiektów
		Po zmianie wartości w palecie Info należy pamiętać o wciśnięciu klawisza En­ter (Return). Do przechodzenia pomiędzy wartościami w palecie Info można korzystać z klawisza TAB, ale wprowadzone wartości zaczną obowiązywać dopiero po wciśnięciu klawisza En­ter (Return).

Za pomocą rozwijanego menu palety Info (tabela 2.16) można zmieniać model kolorów i system miar.

Tabela 2.16.

Polecenia rozwijanego menu palety Info

Opcja	Opis
Hexadecimal - Szesnastkowy	Zmienia tryb wyświetlania kolorów na szesnastkowy model RGB (Red - czerwony, Green - zielony i Blue - niebieski)
RGB	Zmienia tryb wyświetlania kolorów na model RGB

Tabela 2.16.

Polecenia rozwijanego menu palety Info (ciąg dalszy)

Opcja	Opis
CMY	Zmienia tryb wyświetlania kolorów na model CMY (Cyan - niebieskozielony, Magenta - purpurowy, Yellow - żółty)
HSB	Zmienia tryb wyświetlania kolorów na model HSB (Hue - barwa, Saturation - nasycenie i Brightness - jasność)
Pixels - Piksele	Zmienia jednostkę miary na piksele
Inches - Cale	Zmienia jednostkę miary na cale
Centimeters - Centymetry	Zmienia jednostkę miary na centymetry
Scale Attributes - Skalowanie atrybutów	Pozwala na skalowanie atrybutów obiektu

Paleta Behaviors XE "inspektor:Behaviors"

Jedną z kluczowych funkcji Fireworks, odróżniających go od innych programów gra­ficz­nych jest możliwość generowania wraz z obrazkami kodów HTML i JavaScript, któ­re są odpowiedzialne za ich wygląd na stronie WWW. Kod sprawia, że obrazki są w sta­nie wykonywać jakieś akcje, takie jak zmiany kolorów lub kształtu, gdy użyt­kow­nik umieści nad nimi kursor. Kody są w Fireworks nazywane behawiorami. Każdy be­ha­wior składa się z dwóch części: akcji (ang. action) definiującej, co musi się wyda­rzyć, aby zostało uruchomione określone zdarzenie (ang. event).

Do działania behawiorów niezbędne są obiekty internetowe: plastry i obszary aktywne. Po zaznaczeniu obiektu internetowego, możesz przydzielić do niego behawior za po­mo­cą przycisku Add Action (Dodaj akcję) (znak plus), znajdującego się w palecie Be­ha­vior. W Fireworks predefiniowanych jest pięć grup behawiorów: Simple Rollover (Prosty rollover), Swap Image (Zamień obrazek), Set Nav Bar Image (Ustaw obrazek paska na­wi­gacyjnego), Set Pop-Up Menu (Ustaw menu rozwijane) i Set Text of Status Bar (Ustaw tekst w pasku stanu).

Wszystkie behawiory przydzielone do obiektów internetowych są wyświetlane w palecie Behavior (rysunek 2.27). W pierwszej kolumnie wyświetlane są zdarzenia, ta­kie jak OnMouseOver lub OnClick, zaś w drugiej - odpowiadające im akcje. W trze­ciej kolumnie - Info wyświetlany jest identyfikator behawiora. Aby usunąć wybrany be­ha­wior, zaznacz go i kliknij przycisk Remove Action (Usuń akcję) (znak minus). Zazna­czo­­ny behawior (lub wszystkie behawiory przydzielone do obiektów internetowych) mo­żesz także usunąć za pomocą poleceń znajdujących się w rozwijanym menu inspek­to­ra (tabela 2.17).

		Behawiory oferują wiele możliwości w Fireworks. Jeśli chcesz się do­wie­dzieć o nich czegoś więcej, zerknij do rozdziału 21.
Rysunek 2.27. Użyj palety Behaviors do generowania kodów HTML i JavaScript za pomocą jednego kliknięcia myszą

Tabela 2.17.

Polecenia rozwijanego menu palety Behaviors

Opcja	Opis
Edit - Edytuj	Otwiera okno dialogowe zaznaczonego behawiora
Delete - Usuń	Usuwa zaznaczony behawior z obiektu
Delete All - Usuń wszystkie	Usuwa wszystkie behawiory przydzielone do obiektu
Show All - Pokaż wszystkie	Wyświetla wszystkie behawiory w grupie
Ungroup - Rozgrupuj	Rozdziela grupę behawiorów

Paleta URL XE "paleta:URL"

Adresy URL są siłą napędową Internetu. Gdy URL (Uniform Resource Locator - Uje­dno­licony wskaźnik do zasobów, nazywany łączem) zostanie przydzielony do obrazka znaj­dującego się na stronie WWW, użytkownik po kliknięciu obrazka zostanie prze­nie­sio­ny do innej sekcji bieżącego dokumentu, innej strony WWW lub komputera znajdu­ją­cego się po drugiej stronie świata. Z racji swojej potęgi adresy URL mogą być trudne w zarządzaniu; jeden błąd literowy w skomplikowanym łańcuchu znaków może spowo­do­wać zerwanie całego łącza.

Paleta URL (rysunek 2.28) znacznie ułatwia zarządzanie adresami URL. Wyświetlane są w niej wszystkie adresy użyte do tej pory w bieżącym dokumencie lub załadowane z zew­nętrznego pliku. Żeby przydzielić adres do obiektu, wystarczy wybrać go w liście pa­lety URL. Co więcej - możesz zachować listę hiperłączy dla określonej witryny WWW tak, abyś nie musiał za każdym razem wpisywać ich ręcznie. Jeśłi chcesz dodać ad­res URL do biblioteki, kliknij przycisk Add (znak plus).

Rysunek 2.28. Za pomocą palety URL można łatwo przydzielać łącza do obiektów internetowych

Większość narzędzi umożliwiających zarządzanie łączami w Fireworks można wywołać za pomocą poleceń znajdujących się w rozwijanym menu palety URL (tabela 2.18).

Tabela 2.18.

Polecenia rozwijanego menu palety URL

Opcja	Opis
Add Used URLs to Library - Dodaj wykorzystane adresy URL do biblioteki	Dodaje listę bieżących adresów URL do biblioteki
Clear Unused URLs - Usuń niewykorzystane URL-e	Usuwa z bieżącej listy wszystkie nieużywane adresy URL
Add URL - Dodaj URL	Dodaje nowy adres URL do biblioteki
Edit URL - Edytuj URL	Otwiera okno dialogowe Edit URL
Delete URL - Usuń URL	Usuwa zaznaczony adres URL z biblioteki
New URL Library - Nowa biblioteka URL-i	Tworzy nową bibliotekę adresów URL
Import URLs - Importuj URL-e	ładuje nowy zestaw adresów URL z poprzednio zapisanej biblioteki, zakładek przeglądarki lub dokumentu HTML
Export URLs - Eksportuj URL-e	Zapisuje bieżącą bibliotekę adresów URL

Paleta Styles XE "paleta:Styles"

Jeśli kiedykolwiek spędziłeś wiele godzin na dostosowywaniu obrysów, wypełnień i efek­tów obiektu, a następnie musiałeś takie same ustawienia zastosować do wszys­tkich elementów znajdujących się w witrynie WWW, na pewno docenisz możliwości, ja­kie daje Ci paleta Styles.

Style Fireworks to zbiory atrybutów, które mogą być zastosowywane do dowolnych obiek­tów. Wiele takich ustawień (przyciski graficzne i tekst) znajduje się w palecie Styles, a jeszcze więcej znajdziesz na CD-ROM-ie Fireworks. Aby je zastosować, naj­pierw zaznacz obiekt i wybierz styl z palety. Możesz zaznaczyć wiele obiektów (na przy­kład przyciski znajdujące się w pasku nawigacyjnym) i jednym kliknięciem myszy zasto­sować do nich ten sam styl. Style pozwalają na zaoszczędzenie czasu i są dos­ko­na­łym sposobem na zapewnienie spójnego wyglądu wszystkich elementów graficznych.

W palecie Styles (rysunek 2.29) znajduje się wiele ikon, a każda z nich reprezentuje in­ny styl. W stylu można zdefiniować następujące atrybuty: typ i kolor wypełnienia oraz ob­rysu, efekt, czcionkę, kolor i rozmiar tekstu. Oprócz predefiniowanych styli Fire­works możesz także zapisywać własne ustawienia atrybutów. Wystarczy w tym celu za­zna­czyć obiekt z odpowiednimi atrybutami i kliknąć przycisk New Style (Nowy styl) w pa­lecie Styles. Taką samą operację można wykonać za pomocą polecenia New Style z roz­wijanego menu palety. W tabeli 2.19 znajduje się kompletne zestawienie poleceń roz­wijanego menu palety Styles.

Rysunek 2.29. Paleta Styles pozwala zautomatyzować proces tworzenia grafik o spójnym wyglądzie

Tabela 2.19.

Polecenia rozwijanego menu palety Styles

Opcja		Opis
New Style - Nowy styl		Tworzy nowy styl w oparciu o atrybuty zaznaczonego obiektu
Edit Style - Edytuj styl		Otwiera okno dialogowe Edit Style
Delete Style - Usuń styl		Usuwa zaznaczony styl lub style
Import Styles - Importuj style		Ładuje nowy zestaw stylów po stylu aktualnie zaznaczonym w palecie
Export Styles - Eksportuj style		Zapisuje zaznaczony styl lub style
Reset Styles - Resetuj style		Przywraca domyślną konfigurację stylów
Large Icons - Duże ikony		Wyświetla dwukrotnie większe niż normalnie ikony dostępnych stylów
		Więcej o tworzeniu i zastosowywaniu stylów przeczytasz w rozdziale 16.

Paleta Library XE "paleta:Library"

W palecie Library przechowywane są biblioteki - kolekcje symboli, które mogą być do­wol­nie zapisywane i ponownie otwierane. Symbole można modyfikować bezpośrednio w biblio­te­ce. Przeciągnięcie symbolu z palety Library do okna dokumentu powoduje stworzenie in­stan­cji symbolu. Instancja to kopia symbolu, która utrzymuje połączenie z oryginałem i dzie­dziczy wszystkie jego modyfikacje. Instancje można porównać do skrótów do pli­ków w systemie Windows lub aliasów w MacOS (oznaczonych strzałką skierowaną w dół). Mogą być animowane, sekwencjonowane i edytowane jako grupa obiektów. Sym­bole można zapisywać w bibliotece i wykorzystywać później w wielu różnych do­ku­mentach.

W tabeli 2.20 opisane zostały polecenia znajdujące się w rozwijanym menu palety Lib­ra­ry, przedstawionej na rysunku 2.30.

Rysunek 2.30. Paleta Library umożliwia przechowywanie symboli w bibliotekach

Tabela 2.20.

Polecenia rozwijanego menu palety Library

Opcja	Opis
New Symbol - Nowy symbol	Tworzy nowy symbol
Duplicate - Duplikuj	Duplikuje bieżący symbol
Delete - Usuń	Usuwa bieżący symbol z biblioteki
Edit Symbol - Edytuj symbol	Otwiera bieżący symbol we własnym oknie edycyjnym
Properties - Właściwości	Wyświetla okno dialogowe Symbol Properties dla bieżącego symbolu
Selected Unused Items - Zaznacz nieużywane pozycje	Zaznacza nieużywane symbole w bibliotece
Update - Aktualizuj	Aktualizuje symbole podczas importowania ich z innych bibliotek
Play - Odtwarzaj	Odtwarza kolejno wszystkie klatki animacji przycisku
Import Symbols - Importuj symbole	Importuje symbole z wcześniej zapisanej biblioteki
Export Symbols - Eksportuj symbole	Eksportuje symbole do wcześniej zapisanej biblioteki

Paleta Find and Replace XE "paleta:Find and Replace"

Załóżmy, że ukończyłeś tworzenie grafiki na ważną witrynę internetową, zawierającą mnós­two znaków graficznych firm i nagle odebrałeś telefon od klienta informującego Cię, że firma została właśnie przejęta i zamiast Super Kurier nazywa się Ekstra Kurier. - Czy mógłby Pan zmienić na jutro wszystkie grafiki w witrynie?

Obiekty Fireworks są edytowalne w każdej chwili, a paleta Find and Replace (rysunek 2.31) pozwala na szybkie aktualizowanie całych zestawów grafik internetowych. Mo­żesz zmieniać grafikę znajdującą się w wybranym obszarze, w pliku, klatce lub serii pli­ków. Ale paleta Find and Replace pozwala na wprowadzenie poprawek nie tylko do teks­tu, gdyż umożliwia także swobodną modyfikację czcionek, kolorów i adresów URL. Wolno Ci nawet zamieniać wszystkie kolory grafiki na bezpieczne dla Internetu.

Rysunek 2.31. Musisz dokonać globalnych zmian tekstu, czcionki, kolorów lub URL? Paleta Find and Replace umożliwia wykonanie tego zadania w bardzo krótkim czasie

Funkcja Find and Replace pracuje wspólnie z paletą Project Log (Dziennik projektu), w któ­rym zapisywane są wszystkie zmiany dokumentów.

Za pomocą poleceń znaj­du­ją­cych się w rozwijanym menu palety Find and Replace (tabela 2.21) można ustawić zapis do dziennika projektu oraz opcje zamiany w ope­racjach wykonywanych na wielu plikach.

Tabela 2.21.

Polecenia rozwijanego menu palety Find and Replace

Opcja		Opis
Add Files to Project Log - Dodaj pliki do dziennika projektu		Zapisuje do dziennika projektu zmiany wykonane za pomocą funkcji Find and Replace
Replace Option - Opcje zamiany		Wyświetla opcje dla operacji Find and Replace wykonywanych na wielu plikach
		Dokładne poznanie funkcji Find and Replace umożliwi Ci znaczne pod­niesienie wydajności swojej pracy. Więcej informacji znajdziesz w rozdziale 18.

Paleta Project Log XE "paleta:Project Log" (Dziennik projektu)

Narzędzia automatyzacji w Fireworks, takie jak Find and Replace oraz Batch Pro­cessing (Przetwarzanie wsadowe) są bardzo potężne, ale będziesz potrzebował jeszcze me­tody śledzenia wielu zmian wykonywanych za pomocą tych narzędzi. Każda mo­dy­fikacja zapisywana jest do palety Project Log (rysunek 2.32). Zadaniem tej palety jest nie tylko przyjmowanie potwierdzeń dokonanych zmian, ale także umożliwienie użyt­kownikowi otwierania zmodyfikowanych plików.

Oprócz tworzenia list dokumentów modyfikowanych w czasie automatycznych procesów, pa­le­tę Project Log można wykorzystać do zapisywania szeregu plików, które zostały zamk­nię­te ręcznie i mogą być otwierane. Za pomocą polecenia Add Files to Log z rozwi­ja­ne­go menu palety (tabela 2.22) można uzyskiwać dostęp do plików bez ich bezpośredniego ot­wierania. Rozwijane menu pozwala również na szybkie modyfikowanie plików znaj­du­jących się w palecie Project Log i ich ponowne eksportowanie z użyciem ostatnich usta­wień.

Rysunek 2.32. Wykorzystaj dziennik projektu do zarządzania operacjami Find and Replace oraz Batch Processing

Tabela 2.22.

Polecenia rozwijanego menu palety Project Log

Opcja		Opis
Export Again - Eksportuj ponownie		Eksportuje pliki zaznaczone w dzienniku projektu z użyciem ostatnich ustawień
Add Files to Log - Dodaj pliki do dziennika		Dodaje pliki graficzne do dziennika projektu bez ich otwierania
Clear Selection - Usuń zaznaczone		Usuwa wybrane pliki z dziennika projektu
Clear All - Usuń wszystkie		Usuwa wszystkie pliki z dziennika projektu
		Więcej informacji o możliwościach palety Project Log znajdziesz w roz­dziale 18.

Menu

Wiele poleceń i opcji dostępnych w różnych paletach Fireworks można znaleźć również w menu programu. Znajdziesz tam także wiele funkcji niedostępnych nigdzie indziej. Po­niższy podrozdział jest przewodnikiem po wszystkich menu Fireworks i ich skrótach kla­wiaturowych. Użytkownicy Windows nie zobaczą wszystkich menu Fireworks, do­pó­ki nie otworzą okna dokumentu.

	W poniżej zamieszczonych tabelach polecenia wyróżnione wytłuszczoną czcionką są nowe lub zostały prze­niesione w inne miejsce menu w Fireworks 4.

Menu File XE "menu:File"

Standardem stało się umieszczanie poleceń wykonujących podstawowe operacje na pli­kach (tworzenie, zapisywanie i drukowanie) w menu File. Fireworks nie odbiega od tego schematu. Do menu dołączone są jednak dodatkowe polecenia importu i eksportu. W tabeli 2.23 znajdują się opisy wszystkich poleceń menu File.

Tabela 2.23.

Polecenia menu File

Polecenie	Opis	Windows	MacOS
New - Nowy	Wyświetla okno dialogowe New Document (Nowy dokument) umożliwiające stworzenie nowego dokumentu	Ctrl+N	Command+N
Open - Otwórz	Wyświetla okno dialogowe Open (Otwórz) umożliwiające otwarcie istniejącego dokumentu	Ctrl+O	Command+O
ScanTwain Acquire	Wyświetla interfejs źródła Twain, na przykład skanera, jeśli jest dostępny i został wybrany, który umożliwia pobranie obrazka	Brak	Brak
ScanTwain Select (SkanujWybierz źródło Twain)	Wyświetla okno dialogowe Select Source, które umożliwia wybranie źródła, z jakiego ma zostać pobrany obrazek	Brak	Brak
ScanYour Photoshop Acquire Plug-ins (Tylko na MacOS)	Wyświetla listę zainstalowanych plug-inów Photoshopa. Zwykle każdy plug-in pozwala na pobranie obrazka z odpowiadającego mu urządzenia	Brak	Brak
Close (Zamknij)	Zamyka bieżący dokument	Ctrl+W	Command+W
Save (Zapisz)	Zapisuje dokument lub, jeśli dokument nie posiada jeszcze nazwy, otwiera okno dialogowe Save As (Zapisz jako)	Ctrl+S	Command+S
Save As (Zapisz jako)	Wyświetla okno dialogowe Save As umożliwiające zapisanie dokumentu	Ctrl+Shift+S	Command+Shift+S
Save a Copy (Zapisz kopię)	Wyświetla okno dialogowe Save Copy As umożliwiające zapisanie kopii dokumentu	Brak	Brak
Update HTML (Aktualizuj HTML)	Umieszcza lub aktualizuje kod HTML Fireworks w innym pliku HTML znajdującym się na tym samym komputerze	Brak	Brak
Revert (Przywróć)	Zastępuje bieżący dokument jego ostatnio zapisaną wersją	Brak	Brak
Import (Importuj)	Wyświetla okno dialogowe Import umożliwiające zaimportowanie pliku do dowolnego otwartego dokumentu	Ctrl+R	Command+R

Tabela 2.23.

Polecenia menu File (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Export (Eksportuj)	Wyświetla okno dialogowe Export umożliwiające wyeksportowanie dokumentu w formacie określonym w palecie Optimize	Ctrl+Shift+R	Command+Shift+R
Export Preview (Podgląd eksportu)	Przed wyeksportowaniem dokumentu wyświetla okno dialogowe Export Preview	Ctrl+Shift+X	Command+Shift+X
Export Wizard (Kreator eksportu)	Otwiera kreatora eksportu, który krok po kroku prowadzi użytkownika przez cały proces eksportowania pliku	Brak	Brak

Tabela 2.23.

Polecenia menu File (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Batch Process (Przetwarzanie wsadowe)	Wyświetla okno dialogowe Batch Process umożliwiające przetwarzanie wielu plików graficznych	Brak	Brak
Run Script (Uruchom skrypt)	Wyświetla okno dialogowe Open umożliwiające uruchomienie skryptu	Brak	Brak
Preview in Browser Preview in Primary Browser (Otwórz w głównej przeglądarce)	Otwiera podgląd dokumentu w głównej przeglądarce internetowej	F12	F12
Preview in Browser Preview in Secondary Browser (Otwórz w drugorzędnej przeglądarce)	Otwiera podgląd dokumentu w drugorzędnej przeglądarce internetowej	Shift+F12	Shift+F12
Preview in BrowserSet Primary Browser (Wybierz główną przeglądarkę)	Wyświetla okno dialogowe Locate Browser (Znajdź przeglądarkę) umożliwiające wybranie głównej przeglądarki internetowej	Brak	Brak
Preview in BrowserSet Secondary Browser (Wybierz drugorzędną przeglądarkę)	Wyświetla okno dialogowe Locate Browser (Znajdź przeglądarkę) umożliwiające wybranie drugorzędnej przeglądarki internetowej	brak	Brak
Page Setup (Ustawienia strony)	Wyświetla okno dialogowe Page Setup (dla drukowania)	brak	Brak
Print (Drukuj)	Wyświetla okno dialogowe Print umożliwiające drukowanie dokumentu	Ctrl+P	Command+P
HTML Setup (Ustawienia HTML)	Wyświetla okno dialogowe HTML Setup	brak	Brak
Recent Files (Ostatnio otwarte pliki) (tylko Windows)	Wyświetla listę czterech ostatnio otwartych plików. Wybierz nazwę z listy, aby ponownie otworzyć dowolny plik.	brak	Brak
Exit (Quit) (Wyjdź)	Zamyka Fireworks	Ctrl+Q	Command+Q

Menu Edit XE "menu:Edit"

Jak sama nazwa wskazuje, w menu Edit znajdują się standardowe polecenia edycyjne, ta­kie jak Undo (Cofnij), Cut (Wytnij), Copy (Kopiuj) i Paste (Wklej) oraz wiele poleceń spe­cy­ficznych dla grafiki Fireworks, na przykład Paste Inside (Wklej do) i Crop Document (Kadruj dokument). W tabeli 2.24 opisane są wszystkie polecenia menu Edit.

Tabela 2.24.

Polecenia menu Edit

Polecenie	Opis	Windows	MacOS
Undo (Cofnij)	Cofa ostatnio wykonaną operację. Liczbę kroków polecenia Undo można określić w preferencjach programu.	Ctrl+Z	Command+Z
Redo (Ponów)	Przywraca ostatnią operację cofniętą poleceniem Undo	Ctrl+Y	Command+Y
Cut (Wytnij)	Przenosi bieżące zaznaczenie do schowka systemowego	Ctrl+X	Command+X
Copy (Kopiuj)	Kopiuje bieżące zaznaczenie do schowka systemowego	Ctrl+C	Command+C
Copy as Vectors (Kopiuj jako wektory)	Kopiuje obiekty wektorowe Fireworks z bieżącego zaznaczenia do schowka systemowego jako dane wektorowe	brak	brak
Copy HTML Code (Kopiuj kod HTML)	Otwiera kreatora Copy HTML Code, który prowadzi użytkownika przez cały proces eksportowania obrazków i kopiowania kodu HTML. Kod może być później importowany do edytorów HTML, takich jak Macromedia Dreamweaver	Ctrl+Alt+C	Command+Option+C
Paste (Wklej)	Wkleja zawartość schowka systemowego w miejscu kursora	Ctrl+V	Command+V
Clear (Usuń)	Usuwa zaznaczone obiekty z dokumentu	Backspace	Delete
Paste as Mask (Wklej jako maskę)	Kopiuje zawartość schowka w postaci maski	Brak	Brak
Paste Inside (Wklej do)	Wkleja zawartość schowka systemowego do zaznaczonej, zamkniętej ścieżki	Ctrl+Shift+V	Command+Shift+V
Paste Attributes (Wklej atrybuty)	Kopiuje atrybuty Fireworks z zawartości schowka do zaznaczonego obiektu	Ctrl+Alt +Shift+V	Command+Option +Shift+V
Select All (Zaznacz wszystko)	Zaznacza wszystkie obiekty w dokumencie w trybie wektorowym lub wszystkie piksele w obiekcie bitmapowym w trybie bitmapowym	Ctrl+A	Command+A
Select Similar (Zaznacz podobne)	Zaznacza piksele o kolorach podobnych do kolorów aktualnego zaznaczenia w trybie bitmapowym	Brak	Brak
Superselect (Zaznacz grupę)	Zaznacza całą grupę, do której należy bieżące zaznaczenie	Brak	Brak
Subselect (Zaznaczanie bezpośrednie)	Zaznacza pojedyncze obiekty w grupie	Brak	Brak
Deselect (Usuń zaznaczenie)	Usuwa zaznaczenia wszystkich obiektów lub pikseli	Ctrl+D	Command+D

Tabela 2.24.

Polecenia menu Edit (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Duplicate (Duplikuj)	Tworzy kopię zaznaczonych obiektów, która jest lekko przesuwana w stosunku do obiektów oryginalnych	Ctrl+Alt+D	Command +Option+D
Clone (Klonuj)	Tworzy kopię zaznaczonych obiektów położoną dokładnie nad oryginalnymi obiektami	Ctrl+Shift+D	Command+Shift+D
Find and Replace (Znajdź i zamień)	Wyświetla okno dialogowe Find and Replace	Ctrl+F	Command+F
Crop Selected Bitmap (Kadruj zaznaczoną bitmapę)	Wyświetla uchwyty kadrowania wokół zaznaczonych obiektów bitmapowych	Ctrl+Alt+C	Command +Option+C
Crop Document (Kadruj dokument)	Powoduje wybranie narzędzia Crop (Kadrowanie)	Brak	Brak
Preferences (Preferencje)	Wyświetla okno dialogowe Preferences	Brak	Brak
Keyboard Shortcuts (Skróty klawiaturowe)	Wyświetla okno dialogowe Keyboard Shortcuts przed przystąpieniem do modyfikowania skrótów klawiaturowych	Brak	Brak

Menu View XE "menu:View"

Polecenia menu View (tabela 2.25) pozwalają na sterowanie widokami dokumentów w trak­cie tworzenia grafiki. Oprócz wielu poleceń sterujących skalą powiększenia, w me­nu View znajduje się kilka poleceń służących do wyświetlania pomocniczych ele­men­tów obszaru roboczego, takich jak Rulers (Linijki), Grids (Siatka) i Guides (Pro­wad­nice). Znajdziesz tam również kilka funkcji umożliwiających obejrzenie grafiki bez żad­nych elementów „zaśmiecających” ekran.

Tabela 2.25.

Polecenia menu View

Polecenie	Opis	Windows	MacOS
Zoom In (Powiększ)	Zwiększa o jeden poziom stopień powiększenia dokumentu	Ctrl+ =	Command+ =
Zoom Out (Pomniejsz)	Zmniejsza o jeden poziom stopień powiększenia dokumentu	Ctrl+minus	Command+minus
Magnification6% (Powiększenie6%)	Ustawia poziom powiększenia dokumentu na 6%	brak	brak
Magnification12%	Ustawia poziom powiększenia dokumentu na 12%	brak	brak
Magnification25%	Ustawia poziom powiększenia dokumentu na 25%	brak	brak
Magnification50%	Ustawia poziom powiększenia dokumentu na 50%	Ctrl+5	Command+5
Magnification100%	Ustawia poziom powiększenia dokumentu na 100%	Ctrl+1	Command+1
Magnification200%	Ustawia poziom powiększenia dokumentu na 200%	Ctrl+2	Command+2
Magnification400%	Ustawia poziom powiększenia dokumentu na 400%	Ctrl+4	Command+4
Magnification800%	Ustawia poziom powiększenia dokumentu na 800%	Ctrl+8	Command+8
Magnification1600%	Ustawia poziom powiększenia dokumentu na 1600%	brak	brak
Magnification3200%	Ustawia poziom powiększenia dokumentu na 3200%	Ctrl+3	Command+3
Magnification64000%	Ustawia poziom powiększenia dokumentu na 6400%	Ctrl+6	Command+6

Tabela 2.25.

Polecenia menu View (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Fit Selection (Zmieść zaznaczenie)	Tak ustawia stopień powiększenia dokumentu, aby widoczne były wszystkie zaznaczone obiekty	Ctrl+Alt+zero	Command+Option+zero
Fit All (Zmieść wszystko)	Tak ustawia stopień powiększenia dokumentu, aby widoczne były wszystkie obiekty	Ctrl+zero	Command+zero
Full Display (Widok dokładny)	Włącza tryb Full Display	Ctrl+K	Command+K
Macintosh Gamma (Gamma Macintosha - tylko w Windows)	Włącza wyświetlanie dokumentu symulujące typowe ustawienie korekcji gamma MacOS	brak	brak
Windows Gamma (Gamma Windows - tylko w MacOS)	Włącza wyświetlanie dokumentu symulujące typowe ustawienie gammy Windows	brak	brak
Hide Selection (Ukryj zaznaczenie)	Ukrywa zaznaczone obiekty	Ctrl+L	Command+L
Show All (Pokaż wszystko)	Wyświetla wszystkie ukryte obiekty	Ctrl+Shift+L	Command +Shift+L
Rulers (Linijki)	Wyświetla lub ukrywa linijki	Ctrl+Alt+R	Command +Option+R
GridShow Grid (SiatkaPokaż siatkę)	Wyświetla lub ukrywa siatkę dokumentu	Ctrl+Alt+G	Command +Option+G
GridSnap to Grid (SiatkaPrzyciągaj do siatki)	Włącza lub wyłącza przyciąganie obiektów do siatki	Ctrl+Alt+Shift+G	Command+Option+Shift +G
GridEdit Grid (SiatkaEdytuj siatkę)	Wyświetla okno dialogowe Edit Grid	Brak	Brak
GuidesShow Guides (ProwadnicePokaż prowadnice)	Wyświetla lub ukrywa prowadnice	Ctrl+średnik	Command+średnik
GuidesLock Guides (ProwadniceZablokuj prowadnice)	Zablokowuje lub odblokowuje prowadnice, aby można było je edytować i przesuwać	Ctrl+Alt+średnik	Command+Option+średnik
GuidesSnap to Guides (ProwadnicePrzyciągaj do prowadnic)	Włącza lub wyłącza przyciąganie do prowadnic	Ctrl+Shift+średnik	Command+Shift +średnik
GuidesEdit Guides (ProwadniceEdytuj prowadnice)	Wyświetla okno Edit Guides	Brak	Brak
Slice Guides (Prowadnice plastrów)	Wyświetla lub ukrywa prowadnice plastrów	Ctrl+Alt+Shift +średnik	Command+Option+Shift+średnik
Slice Overlay (Nakładka plastra)	Wyświetla lub ukrywa nakładkę plastra	Brak	Brak
Hide Edges (Ukryj krawędzie)	Włącza lub wyłącza wyświetlanie zaznaczonych obwódek	F9	F9
Hide Panels (Ukryj palety)	Wyświetla lub ukrywa wszystkie otwarte palety	F4	F4

Tabela 2.25.

Polecenia menu View (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Status Bar (Pasek stanu - tylko w Windows)	Wyświetla lub ukrywa pasek stanu	brak	brak

Menu Insert XE "menu:Insert"

W menu Insert (tabela 2.26) znajdują się polecenia umożliwiające wstawianie przy­cis­ków, symboli, obszarów aktywnych, warstw, klatek i wielu innych obiektów.

Tabela 2.26.

Polecenia menu Insert

Polecenie	Opis	Windows	Macintosh
New Button (Nowy przycisk)	Wyświetla okno dialogowe Button Editor, w którym możesz utworzyć nowy przycisk	brak	brak
New Symbol (Nowy symbol)	Wyświetla okno dialogowe Symbol Properties, w którym możesz określić właściwości nowego przycisku	Ctrl+F8	Command+F8
Convert to Symbol (Konwertuj na symbol)	Wyświetla okno dialogowe Symbol Properties, w którym możesz okreslić właściwości obiektu konwertowanego na symbol	F8	F8
LibrariesLibraries (BibliotekiBiblioteki)	Wyświetla listę bibliotek znajdujących się w folderze Libraries. Wybierz nazwę biblioteki, aby wyświetlić okno dialogowe Import Symbols umożliwiające zaimportowanie symbolu z biblioteki	brak	brak
Animations (Animacje)	Przykładowe animacje znajdujące się w Fireworks	brak	brak

Tabela 2.26.

Polecenia menu Insert (ciąg dalszy)

Polecenie	Opis	Windows	Macintosh
Bullets (Znaki wypunktowania)	Przykładowe znaki wypunktowania dostępne w Fireworks	brak	brak
Buttons (Przyciski)	Przykładowe przyciski dostępne w Fireworks	brak	brak
Themes (Motywy graficzne)	Przykładowe motywy graficzne znajdujące się w Fireworks	brak	brak
LibrariesOther (BibliotekiInne)	Wyświetla okno dialogowe Open umożliwiające zaimportowanie biblioteki	brak	brak
Hotspot (obszar aktywny)	Wstawia obszar aktywny	Ctrl+Shift+U	Command +Shift+U
Slice (Plaster)	Wstawia plaster	Alt+Shift+U	Option+Shift+U
Pop-up Menu (Menu rozwijane)	Wyświetla okno dialogowe Set Pop-up Menu	brak	brak
Image (Obrazek)	Wyświetla okno dialogowe Import umożliwiającego zaimportowanie obrazka do dokumentu	brak	brak
Empty Bitmap (Pusta bitmapa)	Wstawia do dokumentu pusty obiekt bitmapowy	brak	brak
Layer (Warstwa)	Tworzy nową warstwę	brak	brak
Frame (Klatka)	Tworzy nową klatkę	brak	brak

Menu Modify XE "menu:Modify"

Po stworzeniu podstawowych obiektów, niewątpliwie tyle samo - a może i więcej
- cza­su spędzisz na ich modyfikowaniu i doprowadzeniu, by wyglądały tak, jak za­mie­rza­łeś. Menu Modify zawiera wiele różnych poleceń służących do modyfikowania obiek­tów (tabela 2.27).

Tabela 2.27.

Polecenia Menu Modify

Polecenie	Opis	Windows	MacOS
Image Size (Wielkość obrazka)	Wyświetla okno dialogowe Image Size umożliwiające zmianę wielkości bitmapy	brak	brak
Canvas Size (Wielkość obszaru roboczego)	Wyświetla okno dialogowe Change Canvas umożliwiające zmianę wielkości obszaru roboczego	brak	brak

Tabela 2.27.

Polecenia Menu Modify (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Canvas Color (Kolor obszaru roboczego)	Wyświetla okno dialogowe Canvas Color umożliwiające zmianę koloru tła obszaru roboczego	brak	brak
Trim Canvas (Przytnij obszar roboczy)	Dopasowuje wielkość obszaru roboczego do znajdujących się w nim obiektów	Ctrl+Alt+T	Command+Option+T
Fit Canvas (Dopasuj obszar roboczy)	Zmniejsza lub rozszerza wielkość obszaru roboczego względem znajdujących się w nim obiektów	Ctrl+Alt+F	Command+Option+F
Rotate CanvasRotate 180^º (Obróć obszar roboczy Obróć o 180^º)	Obraca obszar roboczy o 180^º	brak	brak
Rotate CanvasRotate 90^º CW (Obróć obszar roboczy Obróć o 90^ºw prawo)	Obraca obszar roboczy o 90^ºw prawo	brak	brak
Rotate CanvasRotate 90^º CCW (Obróć obszar roboczyObróć o 90^ºw lewo)	Obraca obszar roboczy o 90^ºw lewo	brak	brak
AnimateAnimate Selection (AnimacjaAnimacja wyboru)	Wyświetla okno dialogowe Animate przed stworzeniem symbolu animacji	Alt+Shift+F8	Option+Shift+F8
AnimateSettings (AnimacjaUstawienia)	Wyświetla okno dialogowe Animate dla wybranych symboli animacji	brak	brak
AnimateRemove Animation (AnimacjaUsuń animację)	Zmienia symbol animacji w symbol graficzny, usuwając animację	brak	brak
SymbolEdit Symbol (SymbolEdytuj symbol)	Otwiera symbol we własnym obszarze roboczym, gdzie można poddać go edycji	brak	brak
SymbolTween Instances (SymbolSekwencjonuj instancje)	Wyświetla okno dialogowe Tween Instances, w którym można utworzyć sekwencję pomiędzy dwoma zaznaczonymi instancjami symbolu	Ctrl+Alt+Shift+A	Command+Option +Shift+A
SymbolBreak Apart (SymbolRozerwij)	Zrywa połączenie pomiędzy zaznaczonym symbolem a jego instancjami	brak	brak
Edit Bitmap (Edytuj bitmapę)	Przełącza na tryb bitmapowy	Ctrl+E	Command+E
Exit Bitmap Mode (Wyjdź z trybu bitmapowego)	Powoduje wyjście z trybu edycji grafiki bitmapowej	Ctrl+Shift+E	Command+Shift+E

Tabela 2.27.

Polecenia Menu Modify (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
MarqueSelect Similar (ZaznaczenieZaznacz podobne)	Zaznacza piksele o kolorach podobnych do kolorów aktualnego zaznaczenia	Brak	brak
MarqueSelect Inverse (ZaznaczenieOdwróć zaznaczenie)	Zaznacza wszystkie nie wybrane piksele i usuwa zaznaczenie pikseli, które były do tej pory zaznaczone w trybie bitmapowym	Ctrl+Shift+I	Command+Shift+I
MarqueFeather (ZaznaczenieZmiękczanie)	Wyświetla okno dialogowe Feather Selection umożliwiające zmiękczenie krawędzi zaznaczenia w trybie edycji grafiki bitmapowej	brak	brak
MarqueExpand (ZaznaczenieRozszerz)	Wyświetla okno dialogowe Expand Selection umożliwiające rozszerzenie bieżącego zaznaczenia w trybie bitmapowym	brak	brak
MarqueContract (ZaznaczenieZawęź)	Wyświetla okno dialogowe Contract Selection umożliwiające zawężenie bieżącego zaznaczenia w trybie bitmapowym	brak	brak
MarqueBorder (ZaznaczenieBrzeg)	Wyświetla okno dialogowe Select Border umożliwiające zaznaczenie brzegu o zadanej szerokości wokół bieżącego zaznaczenia	brak	brak
MarqueSmooth (ZaznaczenieWygładzanie)	Wyświetla okno dialogowe Smooth Selection umożliwiające wygładzenie bieżącego zaznaczenia w trybie bitmapowym	brak	brak
MarqueSave Selection (ZaznaczenieZapisz wybór)	Zapisuje bieżące ustawienia zaznaczenia dla późniejszego wykorzystania	brak	brak
MarqueRestore Selection (ZaznaczeniePrzywróć wybór)	Przywraca zapisane ustawienia zaznaczenia	brak	brak
MaskReveal All (MaskaPokaż wszystko)	Pokazuje obiekt wraz z maską podczas edycji maski	brak	brak
MaskHide All (MaskaUkryj wszystko)	Pokazuje tylko maskę podczas edycji maski	brak	brak
MaskPaste as Mask (MaskaWklej jako maskę)	Kopiuje zawartość schowka w postaci maski	brak	brak
MaskGroup as Mask (MaskaGrupuj jako maskę)	Grupuje jeden lub więcej zaznaczonych obiektów i używa górnego obiektu jako maski alfa	brak	brak
MaskReveal Selection (MaskaPokaż wybór)	Pokazuje obszar określony przez zaznaczone piksele	brak	brak
MaskHide Selection (MaskaUkryj wybór)	Ukrywa obszar określony przez zaznaczone piksele	brak	brak
MaskDisable Mask (MaskaWyłącz maskę)	Wyłącza maskę zaznaczonego obiektu	brak	brak
MaskDelete Mask (MaskaUsuń maskę)	Usuwa maskę zaznaczonego obiektu	brak	brak
Selective JPEGSave Selection as JPEG Mask (Selektywne wyświetlanie JPEGZapisz wybór jako maskę JPEG)	Zapisuje zaznaczenie w postaci maski selektywnego wyświetlania JPEG	brak	brak
Selective JPEGSettings (Selektywne wyświetlanie JPEGUstawienia)	Wyświetla okno dialogowe Selective JPEG Settings	brak	brak
Selective JPEGRestore JPEG Mask as Selection (Selektywne wyświetlanie JPEGPrzywróć wybór w postaci maski JPEG)	Tworzy zaznaczenie odpowiadające masce selektywnego wyświetlania JPEG	brak	brak
Selective JPEGRemove JPEG Mask (Selektywne wyświetlanie JPEGUsuń maskę JPEG)	Usuwa maskę selektywnego wyświetlania JPEG	brak	brak
Convert to Bitmap (Skonwertuj na bitmapę)	Konwertuje zaznaczony obiekt (obiekty) na pojedynczy obiekt bitmapowy	Ctrl+Alt+Shift+Z	Command+Option+Shift+Z
Flatten Layers (Spłaszcz warstwy)	Spłaszcza widzialne warstwy na jedną warstwę, usuwając warstwy ukryte	brak	brak
TransformFree Transform (PrzekształćPrzekształć dowolnie)	Włącza lub wyłącza uchwyty służące do przekształcania obiektu	brak	brak
TransformScale (PrzekształćSkaluj)	Włącza uchwyty transformacji służące do skalowania i obracania obiektów	brak	brak
TranformSkew (PrzekształćPrzekrzyw)	Włącza uchwyty transformacji służące do przechylania, zmiany perspektywy i obracania obiektów	brak	brak
TransformDistort (PrzekształćZniekształć)	Włącza uchwyty transformacji służące do zniekształcania i obracania obiektów	brak	brak
TransformNumeric Transform (Przekształć Przekształć numerycznie)	Wyświetla okno dialogowe Numeric Transform	Ctrl+Shift+T	Command+Shift+T
TransformRotate 180^° (PrzekształćObróć o 180^°)	Obraca obiekt o 180^°	brak	brak
TransformRotate 90^º CW (PrzekształćObróć o 90^° w prawo)	Obraca obiekt o 90^° w prawo	Ctrl+9	Command+9
TransformRotate 90^° CCW (PrzekształćObróć o 90^° w lewo)	Obraca obiekt o 90^° w lewo	Ctrl+7	Command+7
TransformFlip Horizontal (PrzekształćOdbij poziomo)	Odbija obiekty poziomo	brak	brak
TransformFlip Vertical (PrzekształćOdbij pionowo)	Odbija obiekty pionowo	brak	brak

Tabela 2.27.

Polecenia Menu Modify (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
TransformRemove Transformations (PrzekształćUsuń przekształcenia)	Usuwa wszystkie przekształcenia z obiektu	brak	brak
ArrangeBring to Front (KolejnośćPrzesuń na wierzch)	Przesuwa obiekty na wierzch warstwy	Ctrl+Shift+Up	Command+Shift+Up
ArrangeBring Forward (KolejnośćPrzesuń do przodu)	Przesuwa obiekt o jeden poziom w górę w stosie obiektów	Ctrl+Up	Command+Up
ArrangeSend Backward (KolejnośćPrzesuń do tyłu)	Przesuwa obiekt o jeden poziom w dół w stosie obiektów	Ctrl+Down	Command+Down
ArrangeSend to Back (KolejnośćPrzesuń na spód)	Przesuwa obiekty na spód warstwy	Ctrl+Shift+Down	Command+ Shift+Down
AlignLeft (WyrównanieDo lewej)	Wyrównuje zaznaczone obiekty do lewej krawędzi zaznaczenia	Ctrl+Alt+1	Command+Option+1
AlignCenter Vertical (WyrównanieWyśrodkuj w pionie)	Wyrównuje zaznaczone obiekty do osi pionowej zaznaczenia	Ctrl+Alt+2	Command+Option+2
AlignRight (WyrównanieDo prawej)	Wyrównuje zaznaczone obiekty do prawej krawędzi zaznaczenia	Ctrl+Alt+3	Command+Option+3
AlignTop (WyrównanieDo góry)	Wyrównuje zaznaczone obiekty do górnej krawędzi zaznaczenia	Ctrl+Alt+4	Command+Option+4
AlignCenter Horizontal (WyrównanieWyśrodkuj w poziomie)	Wyrównuje zaznaczone obiekty do osi poziomej zaznaczenia	Ctrl+Alt+5	Command+Option+5
AlignBottom (WyrównanieDo dołu)	Wyrównuje zaznaczone obiekty do dolnej krawędzi zaznaczenia	Ctrl+Alt+6	Command+Option+6
AlignDistribute Widths (WyrównanieRozłóż w poziomie)	Równomiernie rozkłada zaznaczone obiekty w poziomie	Ctrl+Alt+7	Command+Option+7
AlignDistribute Heights (WyrównanieRozłóż w pionie)	Równomiernie rozkłada zaznaczone obiekty w pionie	Ctrl+Alt+9	Command+Option+9
Join (Połącz)	łączy dwie lub więcej zaznaczonych ścieżek lub punktów końcowych	Ctrl+J	Command+J

Tabela 2.27.

Polecenia Menu Modify (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Split (Rozłącz)	Rozdziela obiekt na ścieżki składowe	Ctrl+Shift+J	Command+Shift+J
CombineUnion (ŁączenieSuma logiczna)	łączy dwie lub więcej zaznaczonych zamkniętych ścieżek w pojedynczy obiekt	brak	brak
CombineIntersect (ŁączenieCzęść wspólna)	łączy nakładające się na siebie części dwóch lub więcej zaznaczonych zamkniętych ścieżek	brak	brak
CombinePunch (ŁączenieOdjęcie spodu)	Łączy dwie lub więcej zaznaczonych zamkniętych ścieżek poprzez wycięcie „dziury” w dolnym obiekcie przez obiekt znajdujący się u góry	brak	brak
CombineCrop (ŁączenieKadrowanie)	Łączy dwie lub więcej zaznaczonych zamkniętych ścieżek poprzez wykadrowanie dolnych obiektów przez obiekt znajdujący się na wierzchu	brak	brak
Alter PathSimplify (Modyfikacja ścieżkiUprość)	Wyświetla okno dialogowe Simplify umożliwiające usunięcie niektórych węzłów ścieżki z zachowaniem jej kształtu	brak	brak
Alter PathExpand Stroke (Modyfikacja ścieżki Rozszerz obrys)	Wyświetla okno dialogowe Expand	Brak	brak
Alter PathInset Path (Modyfikacja ścieżki Rozszerz/Zawęź ścieżkę)	Wyświetla okno dialogowe Inset umożliwiające rozszerzenie lub zawężenie jednej lub wielu zamkniętych ścieżek	Brak	brak
Alter PathHard Fill (Modyfikacja ścieżkiOstre wypełnienie)	Usuwa wygładzanie (antialiasing) i zmiękczanie z krawędzi zaznaczenia	brak	brak
Alter PathAnti-alias Fill (Modyfikacja ścieżki Wygładzone wypełnienie)	Wygładza krawędzie zaznaczenia	brak	brak
Alter PathFeather Fill (Modyfikacja ścieżki Zmiękczone wypełnienie)	Zmiękcza krawędzie zaznaczenia	brak	brak
Group (Grupuj)	Grupuje jeden lub więcej zaznaczonych obiektów	Ctrl+G	Command+G

Tabela 2.27.

Polecenia Menu Modify (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Ungroup (Rozgrupuj)	Rozdziela grupę lub grupę maski	Ctrl+Shift+G	Command+Shift+G

Menu Text XE "menu:Text"

W tradycyjnych programach graficznych tekst spełnia małą, ale istotną rolę. W pro­gra­mach do tworzenia grafiki internetowej, takich jak Fireworks, tekst staje się bardzo waż­nym elementem, gdyż grafika jest jedynym sposobem umieszczania na stronach WWW tekstu o wyszukanym formatowaniu. W menu Text (tabela 2.28) znajduje się wie­le poleceń i skrótów klawiaturowych umożliwiających manipulowanie tekstem bez ko­nieczności otwierania edytora tekstu (Text Editor).

Tabela 2.28.

Polecenia menu Text

Polecenie	Opis	Windows	MacOS
FontYour Font List (CzcionkaLista Twoich czcionek)	Zmienia czcionkę w wybranym obiekcie tekstowym lub - jeśli nie jest zaznaczony żaden obiekt tekstowy - wybiera domyślną czcionkę dla tekstu	brak	brak
SizeOther (RozmiarInny)	Wyświetla okno dialogowe Text Size	brak	brak
Size8 to 120 (Rozmiar8 do 120)	Zmienia rozmiar czcionki w wybranym obiekcie tekstowym lub - jeśli nie jest zaznaczony żaden obiekt tekstowy - wybiera domyślny rozmiar czcionki dla tekstu	brak	brak
StylePlain (StylUsuń style)	Usuwa pogrubienie, kursywę i podkreślenie z zaznaczonego tekstu	brak	brak
StyleBold (StylPogrubienie)	Nadaje pogrubienie do zaznaczonego tekstu	Ctrl+B	Command+B
StyleItalic (StylKursywa)	Formatuje zaznaczony tekst za pomocą kursywy	Ctrl+I	Command+I

Tabela 2.28.

Polecenia menu Text (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
StyleUnderline (StylPodkreślenie)	Podkreśla zaznaczony tekst	brak	brak
AlignLeft (WyrównanieDo lewej)	Wyrównuje zaznaczony tekst do lewej	Ctrl+Alt +Shift+L	Command+Option +Shift+L
AlignCenter Horizontally (WyrównanieWyśrodkuj poziomo)	Wyśrodkowuje zaznaczony tekst	Ctrl+Alt +Shift+C	Command+Option +Shift+C
AlignRight (WyrównanieDo prawej)	Wyrównuje zaznaczony tekst do prawej	Ctrl+Alt +Shift+R	Command+Option +Shift+R
AlignJustified (WyrównanieWyjustuj)	Justuje zaznaczony tekst	Ctrl+Alt +Shift+J	Command+Option +Shift+J
AlignStretched (WyrównanieRozciągnij)	Wymusza justowanie zaznaczonego tekstu	Ctrl+Alt +Shift+S	Command+Option +Shift+S
AlignTop (WyrównanieDo góry)	Wyrównuje pionowo tekst do górnej krawędzi bloku tekstowego	brak	brak
AlignCenter Vertically (WyrównanieDo środka pionowo)	Wyrównuje pionowo tekst do środka bloku tekstowego	brak	brak
AlignBottom (WyrównanieDo dołu)	Wyrównuje pionowo tekst do dolnej krawędzi bloku tekstowego	brak	brak
AlignJustified Vertically (WyrównanieJustuj pionowo)	Justuje pionowo tekst do górnej i dolnej krawędzi bloku tekstowego	brak	brak
AlignStretched Vertically (WyrównanieRozciągnij pionowo)	Wymusza pionowe justowanie tekstu do dolnej i górnej krawędzi bloku tekstowego	brak	brak
Editor (Edytor)	Wyświetla okno dialogowe Text Editor	brak	brak
Attach to Path (Przydziel do ścieżki)	Przydziela wybrany blok tekstowy do zaznaczonej ścieżki	Ctrl+Shift+Y	Command+Shift+Y
Detach from Path (Oddziel od ścieżki)	Oddziela blok tekstowy od ścieżki, do której został wcześniej przydzielony	brak	brak
OrientationRotate Around Path (OrientacjaObróć wokół ścieżki)	Zmienia orientację tekstu tak, aby dolne krawędzie znaków znajdowały się jak najbliżej ścieżki	brak	brak

Tabela 2.28.

Polecenia menu Text (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
OrientationVertical (OrientacjaPionowo)	Zmienia orientację tekstu tak, aby boczne krawędzie znaków znajdowały się jak najbliżej ścieżki	brak	brak
OrientationSkew Vertical (OrientacjaPrzechyl pionowo)	Przechyla pionowo tekst przydzielony do ścieżki	brak	brak
OrientationSkew Horizontal (OrientacjaPrzechyl poziomo)	Przechyla poziomo tekst przydzielony do ścieżki	brak	brak
Reverse Direction (Zmień kierunek)	Zmienia kierunek przepływu tekstu przydzielonego do ścieżki	brak	brak
Convert to Paths (Przekształć na krzywe)	Przekształca obiekty tekstowe na wektorowe	Ctrl+Shift+P	Command+Shift+P

Menu Commands XE "menu:Commands"

Polecenia menu Commands umożliwiają użyt­kow­nikom rozszerzanie podstawowych funkcji programu i są względnie proste w two­rze­niu, gdyż pisane są w języku JavaScript. W tabeli 2.29 opisane są wszystkie pole­ce­nia znajdujące się w menu Commands Fireworks.

Tabela 2.29.

Polecenia menu Commands

Polecenie	Opis	Windows	MacOS
Edit Command List (Edytuj listę poleceń)	Wyświetla okno dialogowe Edit Command List	brak	brak
CreativeConvert to Grayscale (Kreacja Konwertuj na skalę szarości)	Konwertuje zaznaczenie na skalę szarości	brak	brak

Tabela 2.29.

Polecenia menu Commands (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
CreativeConvert to Sepia Tone (KreacjaKonwertuj na sepię)	Konwertuje zaznaczenie na sepię	brak	brak
CreativeCreate Picture Frame (KreacjaUtwórz ramkę)	Tworzy drewnianą ramkę wokół bieżącego dokumentu	brak	brak
DocumentCenter in Document (Dokument Wyśrodkuj w dokumencie)	Umieszcza zaznaczenie w środku dokumentu	brak	brak
DocumentDistribute to Layers (DokumentRozmieszcz na warstwach)	Rozmieszcza zaznaczone obiekty w dokumencie, każdy na własnej warstwie	brak	brak
DocumentHide Other Layers (DokumentUkryj pozostałe warstwy)	Ukrywa wszystkie warstwy z wyjątkiem bieżącej	brak	brak
DocumentLock Other Layers (Dokument Zablokuj pozostałe warstwy)	Blokuje wszystkie warstwy oprócz bieżącej	brak	brak
DocumentReverse All Frames (Dokument Odwróć wszystkie klatki)	Odwraca kolejność wszystkich klatek dokumentu	brak	brak
DocumentReverse Frame Range (DokumentOdwróć zakres klatek)	Odwraca kolejność zakresu klatek dokumentu	brak	brak
Panel Layout Sets 1024×768/1280x1024/800×600/Your Panel Layout Sets (Konfiguracja palet 1024×768/1280x1024/800×600/Twoje ustawienia palet)	Przykładowe ustawienia palet dostosowane do różnych rozdzielczości ekranowych oraz lista konfiguracji palet stworzonych za pomocą CommandsPanel Layout	brak	brak
Panel Layout (Konfiguracja palet)	Wyświetla okno dialogowe, w którym możesz zapisać pod nową nazwą konfigurację palet. Nazwa tej konfiguracji będzie później wyświetlana w podmenu CommandsPanel Layout Sets	brak	Brak
Reset Warning Dialogs (Zresetuj okna ostrzeżeń)	Sprowadza do ustawień domyślnych wszystkie okna dialogowe ostrzeżeń zawierające napis „Don't show this again”	brak	brak
WebCreate Shared Palette (InternetUtwórz wspólną paletę)	Tworzy paletę zawierającą kolory wykorzystywane w wielu plikach	brak	Brak
WebSelect Blank Alt Tags (InternetWybierz puste znaczniki <alt>)	Wybiera wszystkie obszary aktywne i plastry, w których nie określono zastępczego tekstu	brak	brak
WebSet Alt Tags (InternetUstaw znaczniki <alt>)	Wyświetla okno dialogowe, w którym można wprowadzić zastępczy tekst dla obszarów aktywnych i plastrów znajdujących się w dokumencie	brak	Brak

Menu Xtras XE "menu:Xtras"

W języku użytkowników aplikacji firmy Macromedia, dodatek Xtra to procedura plug-in roz­sze­rza­jąca możliwości programu. Przeważnie są to filtry graficzne. Jak możesz zobaczyć w ta­­beli 2.30, w Fireworks znajdują się cztery grupy wbudowanych filtrów oraz trzy do­datkowe filtry Eye Candy 4000 umieszczone pod nazwą Eye Candy 4000 LE. Fireworks potrafi od­czytywać większość filtrów i pluginów Photoshopa, możesz więc znacznie zwiększyć licz­bę dostępnych dodatków Xtra. W tym celu należy usta­wić dodatkowy folder plug-inów Photoshopa w preferencjach programu.

	Każdy znajdujący się w Fireworks jest filtrem bitmapowym, dla­te­go też zastosowanie dodatku Xtra do obiektu wektorowego spowoduje jego kon­wersję na obiekt bitmapowy. Wiele dodatków Xtras dostępnych jest rów­nież w palecie Effect jako moduły filtrów Live Effects, które pracują zarówno z obiektami bitmapowymi, jak i obiektami wektorowymi, nie zmniejszając zarazem możliwości ich edycji.

Tabela 2.30.

Polecenia menu Xtras

Polecenie	Opis	Windows	MacOS
Repeat Xtra (Powtórz Xtra)	Ponownie wykonuje ostatnio wykorzystane Xtra	Ctrl+Alt+Shift+X	Command +Option+Shift+X
Adjust ColorAuto Levels (Dopasuj Auto-poziomy)	Automatycznie dopasowuje poziomy tonalne zaznaczenia	brak	brak
Adjust Color Brightness/Contrast (DopasujJasność /Kontrast)	Wyświetla okno dialogowe Brightness/Contrast, w którym można dostosować poziom jasności i/lub kontrastu zaznaczenia	brak	brak
Adjust ColorCurves (DopasujKrzywe)	Wyświetla okno dialogowe Curves umożliwiające dostosowanie krzywych koloru zaznaczenia	brak	brak
Adjust Color Hue/Saturation (DopasujBarwa /Nasycenie)	Wyświetla okno dialogowe Hue/Saturation umożliwiające dostosowanie poziomów barw i nasycenia zaznaczenia	brak	brak
Adjust ColorInvert (DopasujOdwrotność)	Zmienia każdy kolor zaznaczenia na jego matematyczną odwrotność	Ctrl+Alt+Shift+I	Command+Option+Shift+I
Adjust ColorLevels (DopasujPoziomy)	Wyświetla okno dialogowe Levels, w którym możesz dostosować poziomy tonalne zaznaczenia	brak	brak
BlurBlur (RozmycieRozmyj)	Rozmywa zaznaczenie	brak	brak

Tabela 2.30.

Polecenia menu Xtras (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
BlurBlur More (RozmycieRozmyj bardziej)	Rozmywa zaznaczenie z większym promieniem rozmycia niż polecenie Blur	brak	brak
BlurGaussian Blur (RozmycieRozmyj gaussowsko)	Wyświetla okno dialogowe Gaussian Blur umożliwiające rozmycie gaussowskie zaznaczenia	brak	brak
OtherConvert to Alpha (InneKonwertuj na alfa)	Konwertuje zaznaczony obrazek na maskę alfa	brak	brak
OtherFind Edges (InneZnajdź krawędzie)	Wyszukuje krawędzie w zaznaczeniu	brak	brak
SharpenSharpen (WyostrzanieWyostrz)	Wyostrza zaznaczenie	brak	brak
SharpenSharpen More (Wystrzanie Wyostrz bardziej)	Wyostrza zaznaczenie bardziej niż polecenie Sharp	brak	brak
SharpenUnsharp Mask (WyostrzanieMaska wyostrzająca)	Wyświetla okno dialogowe Unsharp Mask, w którym możesz ustawić parametry wyostrzania zaznaczenia	brak	brak
Eye Candy 4000 LEBevel Boss (Faza)	Wyświetla okno dialogowe filtru Eye Candy 4000 Bevel Boss	brak	brak
Eye Candy 4000 LEMarble (Marmur)	Wyświetla okno dialogowe filtru Eye Candy 4000 Marble
Eye Candy 4000 LEMotion Trail (Poruszenie)	Wyświetla okno dialogowe filtru Eye Candy 4000 Motion Trail	brak	brak

Menu Window XE "menu:Window"

W menu Window (tabela 2.31) znajdują się polecenia dające dostęp do wszystkich palet i pasków narzędziowych Fireworks. Ponadto znajdziesz tam kilka po­le­ceń pomagających pracować równocześnie z wieloma dokumentami lub ze zwielo­krot­ny­mi wersjami tego samego dokumentu.

Tabela 2.31.

Polecenia menu Window

Polecenie	Opis	Windows	MacOS
New Window (Nowe okno)	Tworzy kopię bieżącego okna dokumentu	Ctrl+Alt+N	Command +Option+N
ToolbarsMain (Paski narzędziGłówny - tylko w Windows)	Wyświetla lub ukrywa pasek narzędzi Main	brak	brak

Tabela 2.31.

Polecenia menu Window (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
ToolbarsModify (Paski narzędziObiekt - tylko w Windows)	Wyświetla lub ukrywa pasek narzędzi Modify	brak	brak
Tools (Narzędzia)	Wyświetla lub ukrywa paletę Tools	brak	brak
Stroke (Obrys)	Wyświetla lub ukrywa paletę Stroke	Ctrl+Alt+F4	Command +Option+F4
Fill (Wypełnienie)	Wyświetla lub ukrywa paletę Fill	Ctrl+Alt+F7	Command +Option+F7
Effect (Efekty)	Wyświetla lub ukrywa paletę Effect	Alt+F7	Option+F7
Info	Wyświetla lub ukrywa paletę Info	Alt+Shift+F12	Option+ Shift+F12
Optimize (Optymalizacja)	Wyświetla lub ukrywa paletę Optimize	brak	brak
Object (Obiekt)	Wyświetla lub ukrywa paletę Object	Alt+F2	Option+F2
Behaviors (Behawiory)	Wyświetla lub ukrywa paletę Behaviors	Shift+F3	Shift+F3
Color Mixer (Mikser kolorów)	Wyświetla lub ukrywa paletę Color Mixer	Shift+F9	Shift+F9
Swatches (Próbki)	Wyświetla lub ukrywa paletę Swatches	Ctrl+F9	Command+F9
Color Table (Tabela kolorów)	Wyświetla lub ukrywa paletę Color Table	brak	brak
Tool Options (Opcje narzędzia)	Wyświetla lub ukrywa paletę Tool Options	Ctrl+Alt+O	Command +Option+O
Layers (Warstwy)	Wyświetla lub ukrywa paletę Layers	F2	F2
Frames (Klatki)	Wyświetla lub ukrywa paletę Frames	Shift+F2	Shift+F2
History (Historia)	Wyświetla lub ukrywa paletę History	Shift+F10	Shift+F10
Styles (Style)	Wyświetla lub ukrywa paletę Styles	Shift+F11	Shift+F11
Library (Biblioteka)	Wyświetla lub ukrywa paletę Library	F11	F11
URL	Wyświetla lub ukrywa paletę URL	Alt+Shift+F10	Option+Shift+F10

Tabela 2.31.

Polecenia menu Window (ciąg dalszy)

Polecenie	Opis	Windows	MacOS
Find and Replace (Znajdź i zamień)	Wyświetla lub ukrywa paletę Find and Replace	Ctrl+F	Command+F
Project Log (Dziennik projektu)	Wyświetla lub ukrywa paletę Project Log	brak	brak
Cascade (Kaskada)	Układa kaskadowo wszystkie okna dokumentów	brak	brak
Tile Horizontal (Rozmieść w poziomie)	Poziomo rozmieszcza wszystkie okna dokumentów	brak	brak
Tile Vertical (Rozmieść w pionie)	Pionowo rozmieszcza wszystkie okna dokumentów	brak	brak
Your Open Documents List (Lista otwartych dokumentów)	Zawiera zestawienie wszystkich aktualnie otwartych okien dokumentów	brak	brak

Menu Help XE "menu:Help"

Każdy prędzej lub później potrzebuje pomocy, a zwłaszcza gdy pracuje w programie tak rozbudowanym jak Fireworks. Z menu Help można uzyskać szybki dostęp do mo­du­łu pomocy Using Fireworks (Korzystanie z Fireworks), różnych źródeł pomocy w In­ter­ne­cie i wielu przewodników wyjaśniających podstawowe funkcje programu.

Na stronach internetowych firmy Macromedia i programu Fireworks zamieszczonym jest wiele pomocnych informacji. Jeśli napotkasz jakiś problem techniczny, rozwiązania po­winieneś szukać najpierw w umożliwiającej wyszukiwanie sekcji TechNotes, gdzie uzy­skasz wyjaśnienia dotyczące każdego aspektu pracy w Fireworks. W sekcji Support znaj­dziesz łącza do wielu przydatnych przewodników, artykułów o tworzeniu grafiki inter­netowej i wywiadów z najlepszymi twórcami grafiki w Fireworks.

Jednym z najważniejszych źródeł informacji jest grupa dyskusyjna Fireworks, obsłu­gi­wa­na przez firmę Macromedia. Grupa ta, znajdująca się pod adresem: news://forums /macromedia.com/macromedia.fireworks, jest miejscem spotkań wielu użyt­kowników programu Fireworks. Można tam znaleźć wiele interesujących porad za­rów­no dla pro­fe­sjonalistów, jak i początkujących użytkowników. Pamiętaj, że jeśli po­trze­­bujesz szyb­kie­go rozwiązania problemu związanego z grafiką, a nie wiesz, jak wy­ko­nać jakąś czynność i szukasz ludzi, u których mógłbyś sprawdzić działanie swojej gra­fiki w róż­nych systemach operacyjnych i przeglądarkach internetowych, to wszystkie te i wiele innych problemów pomoże Ci rozwiązać grupa dyskusyjna Fire­works.

W tabeli 2.32 opisane zostały wszystkie polecenia znajdujące się w menu Help.

Tabela 2.32.

Polecenia menu Help

Polecenie		Opis	Windows	MacOS
About Balloon Help (O pomocy w dymkach - tylko w MacOS)		Opisuje pomoc w dymkach	brak	brak
Show Balloons (Pokaż dymki - tylko w MacOS)		Włącza lub wyłącza pomoc w dymkach	brak	brak
Welcome (Witamy)		Wyświetla okno dialogowe umożliwiające wybór pliku What's New (Nowości), Tutorial (Samouczek) i Lessons	brak	brak
Using Fireworks (Korzystanie z Fireworks)		Ot\wiera pomoc on-line w przeglądarce internetowej	F1	help/Command+/
Lessons (Lekcje)		Otwiera pliki z przykładowymi lekcjami	brak	brak
Fireworks Support Center (Centrum pomocy Fireworks)		Otwiera połączenie z witryną internetową Fireworks Support Center	brak	brak
Register Fireworks (Zarejestruj Fireworks)		Otwiera połączenie z Internetem w celu zarejestrowania w Macromedia twojej kopii Fireworks	brak	brak
About Fireworks (Fireworks - informacje... - tylko w Windows)		Wyświetla okno dialogowe About Fireworks	brak	brak
		Użytkownicy MacOS mogą otworzyć okno dialogowe About Fireworks wy­bierając z menu Apple polecenie About Fireworks.

Podsumowanie

W przypadku programu o tak bogatym zestawie funkcji jak Fireworks, dobrze jest mieć choć ogólną wiedzę na temat jego możliwości. Interfejs użytkownika Fireworks jest bar­dzo elastyczny i można go łatwo dostosowywać do własnych potrzeb. Im lepiej poz­nasz możliwości programu, tym szybciej będziesz mógł wypracować własny styl pracy. Gdy będziesz się przyglądał interfejsowi Fireworks, pamiętaj o następujących rzeczach:

• Pod pewnymi względami Fireworks posiada kombinacje narzędzi pocho­dzą­cych z kilku różnych typów aplikacji: edytorów grafiki bitmapowej, progra­mów wektorowych, programów optymalizacji grafiki i edytora HTML.

• Macromedia Common User Interface usprawnia działanie interfejsu Fireworks i upraszcza poruszanie się pomiędzy różnymi aplikacjami Fireworks.

• Wszystkie narzędzia znajdujące się w palecie narzędziowej Fireworks można uak­tywniać za pomocą jednoliterowego skrótu klawiaturowego. Przykładowo
  - wciś­nięcie znaku V spowoduje uaktywnienie narzędzia Select Behind (Wskaźnik), a zna­ku Z - narzędzia Zoom (Powiększenie).

• Możesz dostosowywać swój obszar roboczy w Fireworks poprzez grupo­wa­nie, określane jako dokowanie, palet. Konfigurację palet można następnie zapisać jako Panel Layout Set.

• Wiele narzędzi posiada specjalne opcje, które stają się dostępne po dwu­krot­nym kliknięciu ich przycisków na palecie Tools lub wybraniu narzędzia i otwarciu palety Tool Options.

W następnym rozdziale dowiesz się, jak można dostosować środowisko Fireworks do włas­nego stylu pracy.




Rozdział 3.
Dostosowywanie środowiska pracy

W tym rozdziale:

• Ustawianie głównych opcji programu.

• Połączenia z zewnętrznymi zasobami.

• Ustawienia preferencji importu plików Photoshopa.

• Preferencje generowania kodu HTML.

• Drukowanie dokumentów Fireworks

• Własne skróty klawiaturowe

Nigdy nie znajdziesz dwóch takich samych pracowni artystycznych. A zresztą, dlaczego miał­byś to robić? Tworzenie - obojętnie, czy jest to malarstwo, projekty do druku, czy też grafika internetowa - jest dziedziną, wymagającą od każdego artysty komfortowego, do­pasowanego do indywidualnych potrzeb środowiska pracy. Fireworks bierze to pod uwa­gę i posiada wiele preferencji pomagających w projektowaniu własnego obszaru ro­boczego - od importowania istniejących obrazków, poprzez edycję grafiki, po wszelkie moż­liwe metody eksportowania końcowego produktu. W tym rozdziale opisane zostaną op­cje programu umożliwiające dostosowanie Fireworks do własnego stylu pracy.

Ustawianie preferencji

Większość opcji - ale nie wszystkie - pozwalających na dostosowywanie Fireworks do włas­nych potrzeb znajduje się w oknie dialogowym Preferences XE "Preferences" (Preferencje). Mimo że mo­żesz ustawiać te preferencje w dowolnej chwili, zasadniczo są one wykorzystywane do określenia działania programu pomiędzy poszczególnymi sesjami. W rezultacie zmia­­ny wielu funkcji są uwzględniane dopiero po ponownym uruchomieniu Fireworks.

Aby otworzyć okno umożliwiające ustawianie wielu preferencji programu, wybierz z me­nu polecenie EditPreferences, a zostanie wyświetlone okno dialogowe Prefe­ren­ces z otwartym panelem. Dostępnych jest tu pięć zakładek (opisywane w kolejnych pod­roz­dzia­łach): General (Ogólne), Editing (Edycja), Launch and Edit (Uruchom i edytuj), Folders (Katalogi) i Import. W Windows moż­na przechodzić pomiędzy panelami za pomocą ich zakładek, a w MacOS, by przejść do innego panelu, musisz wybrać pożądaną opcję z listy.

	Fireworks posiada dodatkowy typ preferencji: konfigurację i rozmie­sz­cze­­nie okien. Przeciągając zakładki tych okien w różne miejsca obszaru roboczego, możesz utworzyć własny układ okien, takich jak Layers, Frames, Styles, Effect itd. Więcej infor­ma­cji o dostosowywaniu tego elementu środowiska programu znajdziesz w rozdziale 2.

Ogólne preferencje programu

Panel General (Ogólne) okna dialogowego Preferences (rysunek 3.1) jest podzielony na trzy części: Undo Steps (Liczba poziomów polecenia Undo), Color Defaults (Do­myśl­ne kolory) i Interpolation (Interpolacja).

Rysunek 3.1. W panelu General okna dialogowego Preferences możesz ustawić liczbę poziomów polecenia Undo, zmienić domyślne kolory i zdefiniować domyślną metodę interpolacji grafiki
		Zrzuty ekranowe okna dialogowego Preferences, przedstawione na ry­sun­kach od 3.1 do 3.6 prezentują domyślnie, predefiniowane usta­wienia programu. Jeśli kiedykolwiek będziesz zastanawiał się, ja­kie były domyślne ustawienia określonej preferencji, odpowiedź znaj­dziesz właśnie na tych rysunkach.

Określanie liczby poziomów cofania operacji

Możliwość cofania operacji - zmiany kolorów czcionki, obrotu obrazka, czy też usu­nię­cia obiektu - jest bardzo ważna w programach graficznych. Niektóre aplikacje graficzne gwa­rantują jedynie cofnięcie ostatniej operacji, zaś Fireworks pozwala nie tylko anu­lo­wa­nie wielu poleceń, ale także na zarządzanie ostatnio wykonanymi operacjami z po­zio­mu nowej palety History (Historia). Przechowywanie zapisu wykonanych operacji, któ­re mogą być w każdej chwili cofnięte, wymaga oczywiście określonych zasobów pa­mię­ci operacyjnej. Zamiast gromadzić zapis nieograniczonej ilości poziomów polecenia Undo (co możne spowodować znaczne obciążenie komputera), Fireworks umożliwia okre­ślenie ich liczby. Trzeba więc znaleźć kompromis pomiędzy funkcjonalnością a wy­­dajnością pracy programu.

	Więcej informacji o palecie Fireworks - History - znajdziesz w rozdziale 19.

Domyślnie Fireworks przechowuje zapis dwudziestu ostatnio wykonanych operacji. Mo­żesz to zmienić poprzez wpisanie nowej wartości parametru Undo Steps XE "Undo Steps" . Ilość pa­mię­ci potrzebnej do przechowania zapisu danej operacji jest uzależniona od jej typu. Przy­kładowo - obrót obrazka o wymiarach 500×600 pikseli wymaga o wiele więcej pa­mię­ci niż zmiana koloru linii.

Po zmianie wartości parametru Undo Steps, ustawienia zostaną uwzględnione zarów­no w poleceniu EditUndo, jak i palecie History dopiero po ponownym uruchomieniu pro­gramu.

Domyślne kolory

Mimo że projektanci grafiki internetowej mogą wybierać spośród pełnej palety ko­lo­rów, w Fireworks domyślnie predefiniowane są trzy podstawowe kolory:

• Brush (Pędzel): Domyślny kolor pędzla jest stosowany do wszystkich ścieżek ry­sowanych lub obrysowywanych za pomocą dowolnego narzędzia rysun­ko­we­go: Pencil (Ołówek), Pen (Pióro), Brush (Pędzel) lub Rectangle (Prostokąt).

• Fill (Wypełnienie): Domyślny kolor wypełnienia jest stosowany do wszystkich obiek­tów, dla których w palecie Fill został określony jednolity (Solid) typ wy­pełnienia.

• Highlight (Wyróżnienie): Fireworks tymczasowo zmienia kolor obwódki obiek­tu, aby pokazać, jaki obiekt jest aktualnie zaznaczony. Właśnie wówczas sto­sowany jest kolor zdefiniowany w sekcji Highlight. Po usunięciu zazna­cze­nia obiektu (lub wybraniu innego), kolor wyróżnienia jest usuwany.

Zmiany domyślnych ustawień można wprowadzać w sekcji Color Defaults okna dia­lo­go­wego Preferences. Aby zmienić barwę pędzla, wypełnienia lub wyróżnienia, kliknij jed­ną ze strzałek znajdujących się obok próbek kolorów. Zostanie wyświetlony próbnik Fire­works. Możesz wybrać jeden z wyświetlonych odcieni lub użyć narzędzia Eyedropper (Kroplomierz) do wybrania dowolnego koloru z ekranu mo­ni­tora. Jeśli chcesz uzyskać dostęp do większej gamy barw, kliknij przycisk Palette, aby wyświetlić systemowy próbnik kolorów.

Kolory narzędzia i wypełnienia możesz modyfikować za pomocą odpowiednich próbek znaj­dujących się w palecie narzędziowej, mikserze kolorów i wielu innych oknach pro­gra­mu. Barwę wyróżnienia (Highlight) można zmieniać jedynie w preferencjach Fire­works. Wszystkie zmiany zostaną automatycznie uwzględnione natychmiast po zam­knię­ciu ok­na dialogowego Preferences.

	Jeśli dla jakiegoś obiektu wybierzesz wypełnienie gradientowe dowol­ne­go typu (na przykład Linear, Radial lub Cone), ale nie określisz kom­binacji barw, Fireworks do stworzenia gradientu wykorzysta bie­żą­ce kolory narzędzia i wypełnienia.

Domyślne ustawienia interpolacji

Przy skalowaniu obrazka Fireworks analizuje oryginalny obrazek i na tej podstawie two­rzy nowy obiekt składający się z większej lub mniejszej ilości pikseli. Proces ten nazy­wany jest interpolacją. Fireworks oferuje cztery metody interpolacji: dwusześ­cien­na (ang. bicubic), dwuliniowa (ang. bilinear), miękka (ang. soft) i metodą najbliższego są­siada (ang. nearest neighbor). Przy skalowaniu obrazka możesz wybrać jedną z tych metod, zaś w oknie dialogowym Image Size jako domyślna przyjmowana jest metoda in­terpolacji zdefiniowana w preferencjach programu. W większości przypadków naj­lep­sze efekty daje dwusześcienna (domyślna). Proponuję pozostawienie jej jako domyślnej i zmienianie tylko w szczególnych przypadkach.

	Więcej informacji o metodach interpolacji i skalowaniu obrazków znaj­dziesz w rozdziale 6.

Preferencje edycji

W panelu Editing XE "Editing" (Edycja) okna dialogowego Preferences (rysunek 3.2) można dostosować do własnych potrzeb sposób funkcjonowania kursorów narzędzi. Znajdują się tu także opcje przydatne w pracy z obrazkami bitmapowymi.

Rysunek 3.2. W panelu Editing preferencji Fireworks możesz dostosować środowisko programu do własnego stylu pracy

Precyzyjne kursory

Po wybraniu określonego narzędzia rysunkowego lub selekcji, kursor domyślnie przyj­mu­je kształt tego narzędzia. I tak, gdy wybierzesz narzędzie Pencil, kursor przyjmie kształt ołówka. Opcja Precise Cursors XE "Precise Cursors" (Precyzyjne kursory) pozwala tak ustawić kur­so­ry wszystkich narzędzi, aby zawsze miały one kształt cienkiego krzyżyka.

Wybranie opcji Precise Cursors powoduje wykorzystanie cienkiego krzyżyka jako kształ­tu kursora dla następujących narzędzi:

• Wszystkie narzędzia selekcji: Marquee (zaznaczenie prostokątne i eliptyczne), Lasso, Polygon Lasso (Wielokątne lasso) i Magic Wand (Różdżka).

• Narzędzia rysunkowe: Line (Linia), Pen (Pióro), Rectangle (Prostokąt), Ellipse (Elipsa), Polygon (Wielokąt), Pencil (Ołówek) i Brush (Pędzel).

• Narzędzia modyfikacji, takie jak Eraser (Gumka) i Paint Bucket (Wiadro z farbą).

• Wszystkie narzędzia internetowe: Hotspot Rectangles, Circle i Polygons (Obszar aktywny: prostokątny, okrą­gły i wielokątny) i Slice (Plaster).

Precyzyjne kursory są szczególnie przydatne w pracy ze szczegółami, gdyż kursory w kształ­cie narzędzia mogłyby ograniczać pole widzenia projektanta, co pokazano na ry­sunku 3.3.

		Zamiast uaktywniać opcję Precise Cursors w preferencjach programu, mo­żesz ją włączać i wyłączać także za pomocą klawisza Caps Lock. Jeśli standardowe kursory nie przeszkadzają Ci za bardzo w pracy, pro­ponuję pozostawienie opcji Precise Cursors wyłączonej i ko­rzys­ta­nie z klawisza Caps Lock w razie konieczności użycia precyzyjnego kur­sora.
Rysunek 3.3. Korzystaj z precyzyjnych kursorów w pracy z dużymi powiększeniami, gdy standardowe kursory mogłyby ograniczać widoczność

Pencil tool precise cursor — Precyzyjny kursor narzędzia Pencil

Usuwanie obiektów przy kadrowaniu

Opcja Delete Objects when Cropping (Usuń obiekty przy kadro­wa­niu) określa, czy ścieżka lub obiekt bitmapowy znajdujący się poza kadrowanym ob­sza­rem powinny zostać usunięte. Można również wybrać ustawienie, w którym kadrowanie będzie oznaczać po prostu przeskalowanie obszaru roboczego i pozostawienie wszystkich obiektów. Jeśli więc preferujesz taki sposób pracy, usuń zazna­cze­nie opcji w oknie preferencji.

Kursory Brush-Size Painting

Zgodnie z ustawieniem domyślnym, Fireworks zwiększa rozmiar kursora tak, aby pasował do rozmiaru malowanego obrysu. Na przykład, malowanie przy użyciu narzędzia Brush i ustawieniu Size na 20 przedstawia kursor dwa razy większy niż przy ustawieniu Size na 10. Aby malować przy użyciu kursora standardowej wielkości, należy wyłączyć tę opcję.

	Kursory Brush-Size są nowością w Fireworks 4.

Opcje obrazków bitmapowych

Opcje znajdujące się w sekcji When Editing Images (Podczas edycji obrazków) panelu Edi­ting odnoszą się jedynie do obrazków bitmapowych.

Fireworks jest programem, w którym można tworzyć i edytować zarówno obiekty bit­ma­powe, jak i wektorowe, więc zaznaczony obrazek jest najczęściej tylko częścią całe­go dokumentu. Po zaznaczeniu opcji Expand to Fill Document (Powiększ do rozmiaru do­ku­mentu), gdy włączysz tryb edycji grafiki bitmapowej, aktualnie zaznaczony element zos­tanie zwiększony do rozmiarów całego dokumentu i otoczony ramką zaznaczenia. Poz­wala to na modyfikowanie obrazka powiększonego w stosunku do oryginalnych roz­miarów. Jeśli masz na przykład obrazek bitmapowy o wymiarach 100×100 pikseli w doku­mencie o wymiarach 500×500, po wejściu w tryb edycji grafiki bitmapowej ob­ra­zek zostanie tymczasowo rozszerzony do wymiarów 500×500 pikseli. Możesz go wów­czas swobodnie modyfikować i nie martwić się, że pracujesz gdzieś poza kadrem. Gdy wokół grafiki o wymiarach 100×100 pikseli w trybie bitmapowym stworzysz ob­wód­kę o grubości 10 pikseli, obrazek zostanie rozszerzony do rozmiaru 120×120 pikseli.

Przy otwieraniu dokumentu zawierającego jedynie pojedynczy obiekt bitmapowy, Fire­works automatycznie przejdzie w tryb edycji grafiki bitmapowej. Aby program pozostał w trybie wektorowym bez względu na typ obiektów znajdujących się w dokumencie, usuń zaznaczenie opcji Open in Bitmap Edit Mode w preferencjach programu.

Polecenie Hide Edges (Ukryj krawędzie) znajdujące się w menu View zwykle powoduje ukry­cie obwódek zaznaczonych obiektów. Odnosi się to zarówno do ramek selekcji wo­kół obrazków bitmapowych, jak i „maszerujących mrówek” wokół zaznaczeń tworzo­nych w trybie grafiki bitmapowej oraz do niebieskich linii otaczających obiekty wek­to­ro­we. Gdy w preferencjach zaznaczona zostanie opcja Turn Off „Hide Edges”, polecenie Hide Edges będzie działało jedynie tymczasowo. Stworzenie dowolnego zaznaczenia spo­wo­duje ponowne wyświetlenie krawędzi. Innymi słowy - wydanie polecenia Hide Edges, będzie oznaczało „ukryj krawędzie do czasu utworzenia nowego zaznaczenia”. Po usunięciu zaznaczenia opcji Turn Off „Hide Edges”, wydanie tego polecenia spo­wo­du­je ukrycie krawędzi do czasu ponownego wybrania tego samego polecenia z menu. W czasie pracy z programem zauważyłem, że przy krawędziach ukrytych przez cały czas łatwo można stracić orientację i dlatego przeważnie zaznaczam opcję Turn Off „Hide Edges”.

Usunięcie zaznaczenia z pola opcji Display Striped Border (Wyświetl bez obwódek) zupełnie wyłącza ramki zaznaczenia otaczające obrazek w trybie bitmapowym.

	Opcja Display Striped Border jest nowością w Fireworks 4.

Ustawienia preferencji Pick (Wybierz) i Snap (Przyciągnij)

Chociaż zazwyczaj chcielibyśmy mieć pewną rękę przy pracy, a także korzystać z narzędzi Fireworks z dokładnością „co do piksela”, w rzeczywistości „rozmyta” dokładność często jest bardziej wydajna. Chybienie o jeden piksel podczas wybierania obiektu i w konsekwencji nie zaznaczenie go potrafi być denerwujące. Ustawienie Pick określa jak blisko obiektu musi być kursor, aby go zaznaczyć.

	Ustawienia preferencji Pick i Snap są nowością w Fireworks 4.

Ustawienie preferencji Snap określa jak blisko linii siatki lub prowadnicy musi być obiekt, aby został przyciągnięty. Tu również niewielki brak dokładności może zwiększyć wydajność.

Ustawienia domyślne dla obu tych opcji wynoszą pięć. Warto samemu sprawdzić, jakie wartości będą nam najbardziej odpowiadać.

Preferencje Launch and Edit (Uruchom i edytuj)

Projektanci grafiki internetowej bardzo często edytują lub optymalizują pliki graficzne, któ­re zostały już umieszczone w dokumencie HTML. Taki obrazek może być zbyt sze­ro­ki lub wysoki, a najczęściej ma zbyt duży rozmiar fizyczny pliku. Często edytory HTML, takie jak Macromedia Dreamweaver lub Adobe GoLive, umożliwiają zdefi­nio­wa­nie zewnętrznych edytorów plików graficznych znajdujących się na stronach HTML. Oczy­wiście, doskonałym wyborem jest wówczas Fireworks.

Przy otwieraniu z zewnętrznej aplikacji pliku graficznego do edycji w Fireworks, pro­gram zapyta Cię, czy chcesz modyfikować plik GIF, JPEG lub PNG umieszczony na stro­nie, czy też jako format źródłowy edycji chcesz wykorzystać format PNG Fire­works. Preferowane jest korzystanie z oryginalnego formatu PNG Fireworks (jeśli taki jest dostępny), ponieważ pozwala on na utrzymanie możliwie najwyższej jakości oraz do­starczenie informacji o obiektach wektorowych i edytowalnych obiektach teks­towych.

W zakładce Launch and Edit XE "Fireworks Source Files" okna pre­fe­ren­cji Fireworks (rysunek 3.4) możesz określić, czy zawsze ma być wykorzystywany format PNG Fire­works, czy też nigdy nie ma on być używany, a nawet to, że Fireworks zawsze ma Cię o to zapytać. Podobne preferencje możesz zdefiniować również dla optymalizacji obraz­ków w Fireworks. Zostaną one wykorzystane po użyciu polecenia Dreamweavera - Optimize Image in Fireworks (Optymalizuj obrazek w Fireworks).

Rysunek 3.4. W panelu Launch and Edit XE "Fireworks Source Files" okna pre­fe­ren­cji Fireworks można dostosować sposób wzajemnego oddziaływania Fireworks z innymi aplikacjami

Preferencje folderów

Jedną z zalet programów komputerowych jest możliwość rozszerzania ich funk­cjo­nal­noś­ci. W panelu Folders XE "Folders" (Foldery) okna dialogowego Preferences (rysunek 3.5) można okre­ślać dostęp do dodatkowych zasobów dla Fireworks.

Rysunek 3.5. W panelu Folders okna preferencji programu można definiować dostęp do dodatkowych zasobów

Dodatki

W sekcji Additional Materials XE "Additional Materials" (Dodatki) panelu Folders można zdefiniować trzy typy roz­szerzeń programu:

• Photoshop Plug-Ins (Plug-iny Photoshopa). Fireworks umożliwia dodawanie fil­trów graficznych działających z obrazkami bitmapowymi. Fireworks pracuje z plug-inami zgodnymi z Photoshopem, jak Alien Skin Eye Candy i Kai's Power Tools. Filtry można przechowywać w folderze Configuration/Xtras wewnątrz folderu programu Fireworks lub wewnątrz innego określonego tu folderu.

	Folder programu można zazwyczaj znaleźć w folderze C:\Program Files\Macromedia\Fireworks 4 — dla komputerów korzystających z Windows, lub w folderze Macintosh HD: Aplications:Macromedia Fireworks 4 — dla Macintoshy.

• A second Texture folder (Dodatkowe tekstury). Tekstury to obrazki nakładane na inne obrazki w celu uzyskania różnych powierzchni. Tekstury zazwyczaj są przechowywane w folderze Configuration/Textures wewnątrz macierzystego folderu programu Fireworks. Po wybraniu innego folderu Fireworks będzie korzystał z tekstur obu folderów.

• A second Patterns folder (Dodatkowe desenie). Desenie to pojedyncze obrazki, które są wielo­krot­nie powtarzane, aby całkowicie wypełnić zaznaczony obszar. Znajdź desenie w folderze Configuration/Patterns wewnątrz macierzystego folderu programu Fireworks i określ tu dodatkowy folder.

Przeważnie projektanci wykorzystują foldery z dodatkami, aby dołączyć do Fireworks za­soby dostępne w innych programach, takich jak Photoshop. Fireworks posiada własne fol­dery z plug-inami (nazywanymi Xtras), teksturami oraz deseniami i dodatkowo poz­wa­la na rozszerzanie swoich możliwości za pomocą materiałów dostępnych w innych pro­gramach. Umożliwia to zwiększanie wydajności i efektywności pracy w Fireworks.

Kliknij przycisk Browse (Przeglądaj) znajdujący się obok pola Photoshop Plug-Ins, Tex­tu­res lub Patterns, na twardym dysku odnaleziony zostanie folder zawierający plug-iny, teks­tury lub desenie, które chcesz wykorzystywać w Fireworks. Aby wprowadzone zmia­ny zostały uwzględnione w programie, musisz zamknąć okno dialogowe Preferen­ces i ponownie uruchomić Fireworks.

	Tekstury i wzorki są doskonałym sposobem na wzbogacenie grafiki. Więcej informacji o wykorzystywaniu tych elementów w Fireworks znaj­dziesz w rozdziale 11. Jeśli chciałbyś się dowiedzieć, jak do Fireworks dołączać plug-iny Photoshopa, zerknij do rozdziału 12.

Dyski magazynujące

Ostatnia opcja znajdująca się w panelu Folders pozwala na zdefiniowanie dodatkowej prze­strzeni dyskowej dla Fireworks. W tym celu wykorzystywane są dyski magazy­nu­ją­ce XE "dyski magazy­nu­ją­ce" (ang. scratch disk XE "scratch disk" ). Trzeba pamiętać, że obróbka grafiki wymaga dużych ilości pamięci ope­racyjnej. Gdy Fireworks musi wykonać operację wymagającą więcej pamięci niż jest dostępne w Twoim komputerze, jako tymczasowa pamięć operacyjna wykorzys­ty­wa­na jest wolna przestrzeń twardego dysku. Jako główny dysk magazynujący Fire­works domyślnie wykorzystuje tę partycję dysku, na której jest zainstalowany. Jeśli w kom­puterze pracującym w systemie Windows dostępna jest inna partycja twardego dys­ku (oznaczona przeważnie literą D), Fireworks wykorzystuje ją jako drugi dysk maga­zynujący. W MacOS, dopóki nie wybierzesz nazwy innego dysku, drugi dysk ma­ga­zynujący będzie ustawiony na None (Żaden). Gdy masz taką możliwość, najlepszym roz­wiązaniem jest ustawianie dysków magazynujących na partycjach innych niż ta, na któ­rej zainstalowany jest system operacyjny i aplikacje. Partycja ta jest przeważnie in­ten­sywnie wykorzystywana przez uruchomione programy i procesy systemowe. Naj­le­piej jako dysk magazynujący ustawić taką partycję twardego dysku, na której znaj­du­je się wiele wolnego miejsca.

Defragmentacja twardego dysku jest procesem łączącym fragmenty pli­ków i wolnych obszarów dysku w ciągłe łańcuchy. Operacja ta poz­wa­la na poprawienie wydajności twardych dysków, gdyż powiększa wol­ne obszary, które mogą być wykorzystywane przez Fireworks do szyb­kiej wymiany danych. Defragmentację można przeprowadzić na przy­kład za pomocą programu Norton Speed Disk, wchodzącego w skład pa­kie­tu Norton Utilities, dostępnego zarówno dla Windows, jak i dla Mac­OS. Niektóre wersje systemu Windows posiadają własny program na­rzędziowy - Disk Defragmenter (Defragmentator dysków).

Preferencje importu

Photoshop jest programem do obróbki grafiki bitmapowej o wysokiej pozycji na rynku apli­kacji graficznych. Jeden z jego największych atutów to możliwość tworzenia obra­zów z wieloma warstwami posiadającymi różne parametry przezroczystości. Fireworks cał­kiem nieźle radzi sobie z importem plików Photoshopa 3, 4 i 5. Pozwala na za­cho­wa­nie warstw i możliwości edycji tekstu. Opcje importu można definiować osobno przy im­por­towaniu każdego dokumentu Photoshopa lub określić ich domyślne ustawienia w pa­nelu Import preferencji Fireworks (rysunek 3.6). Pozwala to zaoszczędzić wiele cza­su i uchronić się przed problemami.

Opcja Convert to Fireworks Objects XE "Maintain Layers" (Konwertuj na obiekty Fireworks) jest domyślnie zaznaczona i powoduje, że każ­da warstwa dokumentu Photoshopa staje się importowanym obiektem Fireworks. Po zaznaczeniu opcji Share Layer Between Frames (Podziel warstwy pomiędzy klatki) Fireworks roz­łoży warstwy dokumentu Photoshopa na wszystkie klatki pliku Fireworks. Możesz rów­nież wybrać opcję Convert to Frames (Konwertuj na klatki) jeśli chcesz, aby kolejne war­stwy dokumentu Photoshopa zostały zamienione na kolejne klatki dokumentu Fire­works.

Rysunek 3.6. W panelu Import okna dialogowego Preferences możesz zdefiniować domyślne opcje importu dokumentów Photoshopa do Fireworks

Jeśli nie będziesz chciał edytować tekstu znajdującego się w dokumencie Photoshopa lub nie masz używanych w nim czcionek, w sekcji Text (Tekst) zaznacz opcję Maintain Ap­pearance (Utrzymaj wygląd). Tekst zostanie wówczas zaimportowany jako inte­gral­ny element obrazka, ale nie będziesz mógł go edytować w Fireworks.

Po zaznaczeniu opcji Use Flat Composite Image (Spłaszcz obrazek), importo­wa­ny obra­zek zostanie spłaszczony do pojedynczej warstwy. Jest to operacja podobna do spłaszczania warstw dokumentu edytowanego w programie Photoshop.

Ustawienia HTML

Pliki Fireworks i te, które są tworzone w programach do składu komputerowego mają jed­ną wspólną cechę: oba typy plików są przeznaczone do publikacji. Pliki tworzone w pro­gramach do składu są przeznaczone do dystrybucji w formie drukowanej, zaś Fire­works generuje pliki gotowe do publikacji w Internecie. Fireworks umożliwia gene­ro­wanie różnych typów kodów HTML, a co za tym idzie, pozwala na definiowanie róż­nych właściwości dotyczących tworzenia tych kodów. Polecenie HTML Setup XE "HTML Properties" można traktować jak „Ustawienie drukarki” dla HTML.

	Polecenie HTML Setup w Fireworks 2 występowało pod nazwą Do­cu­ment Properties, a w Fireworks 3 pod nazwą HTML Properties.

Polecenie HTML Setup XE "HTML Properties" (Ustawienie HTML) umożliwia określanie opcji dla kodów doty­czą­cych plastrów i map obrazków. W dużym skrócie można powiedzieć, że plastrowanie po­lega na dzieleniu obrazków na mniejsze części rozmieszczane w tabelach HTML, zaś mapa obrazka to grafika zawierająca jeden lub więcej obszarów aktywnych. Ustawienia de­finiowane za pomocą polecenia HTML Setup mogą zostać wykorzystane tylko w jed­nym pliku lub zostać przyjęte jako domyślne ustawienia dla wszystkich do­ku­men­tów. Wybierz z menu polecenie FileHTML Setup, aby ustawić te parametry.

Opcje ogólne

W pierwszej zakładce okna dialogowego HTML Setup (rysunek 3.7) ustalamy rzeczywisty kod, który tworzymy w Fireworks. Należy wybrać styl HTML odpowiadający edytorowi, z listy zawierającej Macromedia Dreamweaver, Adobe GoLive i Microsoft FrontPage. Można również wybrać opcję ogólną, odpowiednią dla każdego edytora.

Opcja Extension (Rozszerzenie) pozwala na wybranie domyślnego rozszerzenia pliku dla tworzonego HTML. Zgodnie z ustawieniem domyślnym, Fireworks korzysta z rozszerzenia „.htm”. Można zmienić je na „.html”, aby odpowiadało serwerowi internetowemu, albo na inne rozszerzenie np. „.shtml”, najbardziej odpowiadające naszej pracy.

Rysunek 3.7. Zakładka General w oknie dialogowym HTML Setup umożliwia dopasowanie stylów HTML

Opcja Include HTML Comments (Umieść komentarze HTML) informuje Fireworks, czy mają być wprowadzane komentarze do HTML. Sami decydujemy, czy komentarze wstawiane przez Fireworks są nam potrzebne, czy nie. Ja osobiście wolę nie wpisywać komentarzy Fireworks i podawać własne komentarze w edytowanych kodach.

Po zaznaczeniu opcji Lowercase File Name (Nazwa pliku małą literą) utworzony HTML będzie miał nazwę pliku pisaną małymi literami, odpowiednią do przesłania w sieci WWW.

W zakładce General okna dialogowego HTML Setup w wersji Macintosh istnieje dodatkowa opcja. File Creator (Kreator pliku) pozwala określić tzw. kod Macintosh Creator Code, jaki powinien mieć utworzony dokument HTML. Ten kod determinuje, przy użyciu jakiej aplikacji ma być otwierany plik. Do wyboru mamy Dreamweaver, GoLive, BBEdit oraz dwie najpopularniejsze przeglądarki. Można również wybrać opcję Other (Inne) i skorzystać z okna dialogowego Open w celu odszukania pliku.

	Wszystkie opcje na zakładce General w oknie dialogowym HTML Setup są nowością w Fireworks 4.

Opcje tabel

Tabele stanowią ważny element prawie każdej strony HTML. Tworzą one strukturę układu strony i często łączą poszczególne plastry w zwartą całość. Zakładka Table (Tabela) w oknie dialogowym HTML Setup (rysunek 3.8) umożliwia określenie sposobu, w jaki Fireworks ma tworzyć tabele.

Rysunek 3.8. Zakładka Table w oknie dialogowym HTML Setup umożliwia wstawianie odstępów i koloru komórek.

Korzystanie z odstępów

Życie wymusiło stosowanie w Internecie jednopikselowych obrazków. Są one ko­niecz­ne przy wykorzystywaniu wielu plastrowanych obrazków. Przy plastrowaniu obrazka, każ­da z jego części jest umieszczana w oddzielnej komórce tabeli HTML. Niektóre przeglą­dar­ki internetowe źle ją interpretują gdy któraś z komórek pozostanie niewypełniona. Wów­czas grafika umieszczona w tabeli wygląda mało atrakcyjnie. Fireworks rozwią­zu­je ten problem poprzez umieszczanie po każdej kolumnie i rzędzie tabeli jednopik­se­lo­wych obrazków (rysunek 3.9), co pozwala bez względu na rodzaj używanej prze­glą­dar­ki - wyświetlać grafikę dokładnie tak, jak została zaprojektowana.

Opcje odstępów

Jednopikselowe obrazki mogą być wykorzystywane na kilka różnych sposobów. Ot­wórz listę rozwijaną Table i wybierz jedną z dostępnych opcji:

• Nested Tables - No Spacers: Fireworks próbuje utrzymać właściwy wygląd gra­fiki poprzez zagnieżdżanie tabel. Wykorzystując tę opcję upewnij się, czy koń­cowy plik będzie dobrze wyświetlany we wszystkich przeglądarkach i czy nie będą Ci jednak potrzebne jednopikselowe obrazki.

Rysunek 3.9. Otwarcie wygenerowanej w Fireworks tabeli w Dreamweaverze i zwiększenie odstępów pomiędzy komórkami umożliwia wyświetlenie dodatkowych komórek zawierających jednopikselowe obrazki u góry i po prawej stronie tabeli. Zwróć uwagę na inspektora Property. Zobaczysz, że jednopikselowy GIF został przeskalowany do rozmiarów 30×8 pikseli

Original Fireworks generated table — Oryginalna tabela generowana z Fireworks

One-pixel spacer — Jednopikselowy obrazek

Table with cell padding increased — Tabela o zwiększonych odstępach między komórkami

Properties of the selected spacer image — Właściwości zaznaczonego jednopikselowego obrazka

• Single Table - No Spacers: Tworzy pojedynczą tabelę bez jednopikselowych obraz­ków. Jak w przypadku poprzedniej opcji, musisz upewnić się co do po­praw­nego wyświetlania końcowego pliku.

• 1-Pixel Transparent Spacer: Domyślnie wybrana opcja, która powoduje umie­szcza­nie wokół obrazka jednopikselowych obrazków. Wykorzystywany jest tyl­ko jeden plik - przezroczysty GIF o wymiarach 1×1 piksel i nazwie spacer.gif. Je­go rozmiar fizyczny to 43 bajty. Plik spacer.gif jest w miarę potrzeb prze­ska­lo­wy­wany i wielokrotnie wykorzystywany w przeglądarce.

Można tu również określić, jak Fireworks ma traktować puste komórki tabel. Zazwyczaj pozostawiamy ustawienia domyślne, a program wypełnia każdą pustą komórkę tabeli jednopikselowym obrazkiem, kolor tła natomiast ustawia na kolor obszaru roboczego. Możemy również zdecydować się na umieszczenie nieprzerwanych odstępów w pustych komórkach tabeli. Po wybraniu tej opcji należy jednak sprawdzić jej funkcjonowanie we wszystkich używanych przeglądarkach.

Opcje specyficzne dla dokumentu

Ostania zakładka okna dialogowego HTML Setup, pokazana na rys. 3.10, zawiera opcje dotyczące tylko bieżącego dokumentu i określające nazwę pojedynczych obrazków plastrów. Duża ilość opcji w polu File Names (Nazwy plików) pozwala na stworzenie idealnej struktury nazwy pliku.

Kiedy Fireworks tworzy plastry, każda z części staje się osobnym plikiem obrazka, który musi zostać zapisany pod własną nazwą. Zamiast pytać projektanta o nazwę każdej eksportowanej części, program automatycznie tworzy nazwę pliku. Konwencja nazewnictwa obejmuje kilka identyfikatorów, jak nazwa dokumentu lub słowo „slice” z różnymi konwencjami numerowania. Moim zdaniem, najlepiej najpierw ustawić wszystkie opcje z listy Slices na None. Następnie, zaczynając od lewej górnej strony, tworzyć odpowiednią nazwę pliku, wybierając opcje i patrząc w jaki sposób wpływa to na przedstawianą przez Fireworks przykładową nazwę pliku.

Rysunek 3.10. Zakładka Document Specific w oknie dialogowym HTML Setup, w której wprowadzamy nazwy dzielonych obrazków

	Opcje plastrowania w HTML Setup są teraz pełniejsze i umożliwiają stworzenie odpowiedniej nazwy dla eksportowanego pliku.

Lista opcji Slices

Poniżej przedstawiono dostępne kombinacje listy opcji Slices w zakładce Document Specific okna dialogowego HTML Setup:

• None: wyłącza wpływ określonych list opcji na końcową nazwę pliku

	Pozostawienie wszystkich ustawień list opcji File Names na ustawieniu None skutecznie wyłącza eksportowanie plastrów, niezależnie od innych ustawień Fireworks. Należy przynajmniej jedną listę opcji ustawić zgodnie z konwencją nazewnictwa.

• doc.name: dodaje nazwę bieżącego dokumentu do końcowej nazwy pliku

• „slice”: dodaje słowo „slice” do ostatecznej nazwy pliku

• Slice # (1, 2, 3 ...): w końcowej nazwie pliku dodaje kolejną liczbę dla każdego plastra

• Slice # (01, 02, 03 ...): tak jak poprzednio, ale zero poprzedza liczby mniejsze od 10

	Wprowadzanie numeru plastra z poprzedzającym go zerem tworzy nazwę pliku odpowiednio sortowaną w Macintosh Finder lub w Windows Explorer. Bez wprowadzania poprzedzającego zera lista plików jest sortowana w następujący sposób: slice1.gif, „slice10.gif”', „slice2.gif” itd.

• Slice # (A, B, C ...): w końcowej nazwie pliku dodaje kolejną dużą literę dla każdego plastra

• Slice # (a, b, c ...): tak jak poprzednio, ale dodawane litery są małe

• Row Column (r3_c2, r4_c7 ...): dodaje numer wiersza i kolumny tabeli HTML użytej do wyświetlania plastrów. Numery wierszy są poprzedzone literą „r”, a kolumn literą „c”. Na przykład, plaster w wierszu 1, kolumna 1 będzie nazwany „r1_c1”

• Underscore/Period/Space/Hyphen: Dodaje odpowiednio podkreślenie, kropkę, spację lub dywiz do ostatecznej nazwy pliku.

Zarówno numeryczne, jak i alfabetyczne schematy nazewnictwa funkcjonują tak samo, jako że nazywają obiekty w tabeli HTML. Obiekty są nazywane wiersz po wierszu, od lewej do prawej, jak przedstawiono na rys. 3.11.

Rysunek 3.11. Rysunek przedstawia kolejność plastrowania przez Fireworks, od góry do dołu i od lewej do prawej

Selected slice — Wybrany plaster

Name for selected slice — Nazwa dla wybranego plastra

	Plastrowanie jest jedną z najbogatszych właściwości Fireworks. Pełny opis plastrowania znajdziesz w rozdziale 20.

Dodawanie informacji specyficznych dla ramek

Dwie listy opcji Frames umożliwiają dodawanie informacji specyficznych dla ramek do nazwy pliku plastra. Dostępne są poniższe opcje:

• None: wyłącza wpływ określonych list opcji na końcową nazwę pliku

• Frame # (f1, f2, f3 ...): dodaje do ostatecznej nazwy pliku literę „f” (ramka), po której występuje kolejna liczba dla każdej ramki

• Frame # (1, 2, 3 ...): w końcowej nazwie pliku dodaje kolejną liczbę dla każdej ramki

• Rollover (over, down, overdown): Opisuje funkcję rollover ramki i dodaje ten opis do ostatecznej nazwy pliku

• Abbreviated (o, d, od): tak, jak poprzednio, ale ze skróconym opisem ramek rollover

• Underscore/Period/Space/Hyphen: Dodaje odpowiednio podkreślenie, kropkę, spację lub dywiz do ostatecznej nazwy pliku.

Tu również należy zwracać uwagę na przykładowe nazwy plików podczas pracy z listami opcji File Names. Po kilku próbach możesz stworzyć czytelne i jednoznaczne nazwy plików, co uprości późniejsze rozpoznawanie poszczególnych plastrów.

W polu Alternate Image Description (Tekst zastępczy dla obrazka) można wprowadzić tekst wyświetlany w etykietkach tekstowych, pojawiających się po umieszczeniu kursora nad dowolnym miejscem mapy obrazu. Tekst zastępczy pozwala na przeglądanie z wykorzystaniem tylko tekstu i upraszcza przeglądanie użytkownikom, których komputery odczytują teksty zastępcze dla obrazków. Wprowadzany tutaj tekst jest przedstawiany w palecie Object, dla każdego plastra. Chociaż wprowadzanie określonego tekstu zastępczego dla większości obrazków jest dobrym pomysłem, wprowadzenie wartości domyślnej może uprościć operację.

W celu skorzystania z funkcji paska nawigacyjnego (Nav Bar) na stronach bez ramek HTML, należy zaznaczyć pole Multiple Nav Bar HTML Pages.

	Więcej informacji o korzystaniu z pasków Nav Bar znaj­dziesz w rozdziale 21.

Kiedy nie używa się plastrów

Podczas plastrowania obrazków nie zawsze udaje się zakryć plastrami wszystkie ob­sza­ry strony. Mimo że w większości przypadków na plastry przekształcana jest cała gra­fi­ka, możesz również zapisać jako plastry jedynie ściśle określone obszary dokumentu. Jeżeli tak chcesz zrobić, usuń zaznaczenie z opcji Include Areas without Slices (Włącz obszary bez plastrów).

Spróbuję wytłumaczyć to na przykładzie. Załóżmy, że projektant używa jednego ob­sza­ru roboczego do stworzenia wielu podobnych elementów graficznych, które będą wyko­rzys­tywane na różnych stronach WWW. Jeśli opcja Export Undefined Slices XE "Export Undefined Slices" (Eksportuj nie­zdefiniowane plastry) będzie zaznaczona (domyślnie), cała grafika zostanie wyeks­por­towana jako pojedyncza tabela z poszczególnymi elementami rozmieszczanymi rów­no­miernie względem innych elementów. Elementy te nie będą mogły być jednak uży­wa­ne na różnych stronach WWW. Jeśli opcja Export Undefined Slices nie będzie zaznaczona, plas­try będą eksportowane jako oddzielne pliki i nazywane zgodnie z konwencjami opi­sy­wanymi w jednym z poprzednich podrozdziałów.

Na koniec, zakładka Document Specific okna dialogowego HTML Setup udostępnia przycisk opcji Set Default, który przywraca wszystkie ustawienia domyślne opcji Document Specific. Zawsze można powrócić do ustawień pierwotnych i rozpocząć pracę od nowa.

Opcje drukowania

Mimo że Fireworks jest programem głównie zorientowanym na tworzenie grafiki do publikacji w Internecie, czasami konieczne jest również jej drukowanie. Dość często projektanci mu­szą przedstawiać swoje pomysły klientom lub innym projektantom i czasami poka­zu­ją im wówczas wydruki swoich prac.

Funkcja Print (Drukuj) Fireworks jest prosta w użyciu i korzysta ze standardowych usta­wień systemów Windows oraz MacOS. Polecenie FilePage Setup otwiera stan­dar­do­we okno dialogowe (rysunek 3.12), w którym można określić rozmiar i źródło papieru, orien­tację wydruku i marginesy. Kliknięcie przycisku Printer (Drukarka) powoduje ot­war­cie standardowego okna dialogowego z opcjami drukarki.

Gdy będziesz gotów wy­dru­kować wybrany obrazek, wybierz z menu polecenie File Print i w otwartym oknie dia­logowym określ liczbę kopii i inne parametry wydruku.

Przy drukowaniu zaznaczonego obrazka w Fireworks, grafika jest umieszczana na środ­ku strony i drukowana w predefiniowanej rozdzielczości. Po wybraniu polecenia ModifyIma­ge Size, w oknie dialogowym Image Size możesz wprowadzić nowe wartości roz­dziel­czości i rozmiaru drukowania grafiki.

Rysunek 3.12. Wykorzystaj okno dialogowe Page Setup do ustalenia rozmiaru i orientacji papieru przed drukowaniem z Fireworks
		Jeśli często potrzebujesz drukowanych wersji swoich projektów in­ter­ne­towych, doskonałym programem do ich generowania jest Adobe Acro­bat 4. Jedno z jego narzędzi - Web Capture - umożliwia prze­chwy­tywanie pojedynczych stron lub całych witryn WWW z lokalnego kom­putera albo Internetu i zapisywanie ich jako pliki w formacie PDF. Go­towe pliki posiadają nawet łącza obsługujące nawigację wewnątrz ścią­gniętych witryn.

Ustawianie własnych skrótów klawiaturowych

Skróty klawiaturowe są najprawdopodobniej najbardziej osobistymi ze wszystkich ustawień preferencji. Jeżeli grafiki komputerowej uczyłeś się na programie Photoshop, prawdopodobnie weszły Ci w krew pewne skróty klawiaturowe i uczenie się nowych w Fireworks przyniosłoby efekty odwrotne od zamierzonych. Jeżeli z kolei głównie używasz Macromedia Flash, nie będziesz chciał korzystać z odmiennych skrótów, aby uzyskać dostęp do podobnych funkcji w Fireworks. Możemy jednak wprowadzić własne skróty klawiaturowe.

	Własne skróty klawiaturowe są nowością w Fireworks 4. Zmienione zostały także ustawienia domyślne skrótów klawiaturowych w Fireworks, tak aby odpowiadały interfejsowi Macromedia Common User Interface, dzięki czemu skróty klawiaturowe są takie same w różnych aplikacjach Macromedia.

Skróty klawiaturowe w Fireworks — a także w innych aplikacjach Macromedia używających Macromedia Common User Interface — są określone przez zapisany zestaw skrótów. W Fireworks zaczynamy od zestawu skrótów wspólnych dla Macromedia. Jeżeli zaczynamy od programu Fireworks lub jeżeli nie mamy własnych upodobań w tym zakresie, korzystajmy z tego zestawu podczas uczenia się programu Fireworks, gdyż równocześnie przygotowujemy się do pracy z innymi aplikacjami Macromedia.

Oprócz ustawionego domyślnie zestawu skrótów wspólnych dla Macromedia, Fireworks udostępnia cztery inne, imitujące skróty klawiaturowe ustawione domyślnie w innych popularnych aplikacjach graficznych: Fireworks 3, Photoshop, FreeHand i Illustrator. Taki wybór jest bardzo dogodny dla osób, które już znają skróty z jednej z tych aplikacji.

Zestawy skrótów klawiaturowych w Fireworks określamy w oknie dialogowym Keyboard Shortcuts (rysunek 3.13), otwieranym przez wybranie EditKeyboard Shortcuts. Można tworzyć lub usuwać zestawy, modyfikować zapisane zestawy lub nawet eksportować zestawy jako odnośniki HTML.

Rysunek 3.13. Zestawy skrótów klawiaturowych określamy w oknie dialogowym Keyboard Shortcuts

Zmiana bieżącego zestawu skrótów

Aby zmienić bieżący zestaw skrótów, należy:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Wybrać inny zestaw z listy Current Set (Bieżący zestaw)

3. Kliknąć OK.

Nowo wybrany zestaw skrótów klawiaturowych jest od razu aktywny.

Własne skróty klawiaturowe

Własne skróty klawiaturowe pozwalają nam na zaoszczędzenie czasu i kłopotów, niezależnie od tego, czy często korzystamy ze skrótów, czy tylko chcemy zmienić jeden czy dwa skróty, które nam nie odpowiadają. Pierwszym krokiem jest stworzenie duplikatu zestawu ustawień domyślnych i następnie zmodyfikowanie go do własnych potrzeb.

Zestaw skrótów składa się z trzech typów skrótów, które można modyfikować:

• Menu commands (Polecenia menu): Kombinacja klawiszy odpowiadająca poleceniu menu, np. FileSave. Polecenie menu musi zawierać albo klawisz funkcyjny (F1-F12), albo klawisz modyfikacji Ctrl (Command) i może zawierać inne klawisze modyfikacji.

	Klawisze modyfikacji w komputerach z Windows to Shift, Ctrl i Alt. MacOs korzysta z klawiszy modyfikacji Shift, Command, Option i Control.

• Tools (Narzędzia): Klawisz pojedynczej litery lub numeryczny, który uaktywnia określone narzędzie. Nie można korzystać z klawiszy modyfikacji.

• Miscellaneous (Różne): Funkcje, takie jak przemieszczanie obiektu o kilka pikseli w lewo lub prawo. Skróty te również oparte są na tych samych zasadach co menu polecenia (opisane powyżej), ale nie mają odpowiadającego im polecenia menu.

Każde polecenie, narzędzie czy pozycja z kategorii Miscellaneous może mieć przydzielonych wiele skrótów klawiaturowych, co pozwala na zachowanie ustawionych domyślnie poleceń klawiszy i dodanie dodatkowych do danej pozycji, lub na dostęp do określonego polecenia przy użyciu całej listy skrótów klawiaturowych.

Tworzenie własnego zestawu skrótów klawiaturowych

W celu stworzenia własnego zestawu skrótów klawiaturowych dla polecenia menu, narzędzia lub pozycji z kategorii różne, należy wykonać poniższe czynności:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Z listy Current Set wybrać zestaw, który najbardziej odpowiada naszym potrzebom. Jeżeli, na przykład, odpowiada nam zestaw Macromedia Standard, a zmienić chcemy tylko kilka poleceń, wybieramy zestaw Macromedia Standard jako podstawę naszego własnego zestawu.

3. Kliknąć przycisk Duplicate Set (Duplikuj zestaw). Program otworzy okno dialogowe Duplicate Set.

4. Wprowadzić nazwę naszego nowego zestawu.

5. Kliknąć OK.

Fireworks tworzy duplikat bieżącego zestawu skrótów klawiaturowych i nadaje mu własną nazwę.

Modyfikowanie własnego zestawu skrótów klawiaturowych

Aby zmodyfikować własny zestaw skrótów klawiaturowych, należy:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Sprawdzić, czy nasz własny zestaw skrótów, który chcemy modyfikować jest zestawem bieżącym. Jeżeli nie, należy wybrać go z listy Current Set.

3. Wybrać typ skrótu, który chcemy modyfikować — Menu Commands, Tools lub Miscellaneous — z listy opcji Commands (Polecenia).

Wszystkie możliwe kombinacje skrótów klawiaturowych odpowiednie dla modyfikowanego przez nas rodzaju skrótu są przedstawiane na liście Commands.

4. Z listy Commands wybrać polecenie, którego skrót chcemy modyfikować.

Jeżeli polecenie posiada już skrót klawiaturowy, jest on wyświetlany na liście Shortcuts (Skróty).

5. Jeżeli chcemy dodać do plecenia nowy skrót, klikamy przycisk Add New Shortcut (Dodaj nowy skrót).

6. Z listy Shortcuts wybieramy skrót, który chcemy modyfikować.

7. Jeżeli chcemy usunąć skrót klawiaturowy, klikamy przycisk Delete Key Shortcut (Usuń skrót klawiaturowy).

8. Aby zastąpić wybrany skrót klawiaturowy należy kliknąć w polu tekstowym Press Key (Naciśnij klawisz) i nacisnąć nowy skrót.

Nowy skrót klawiaturowy pojawi się w polu tekstowym Press Key.

Jeżeli nowy skrót będzie kolidował z istniejącym, Fireworks wyświetli ostrzeżenie poniżej pola Press Key. Na przykład, jeżeli zechcemy przydzielić skrót Ctrl+E (Command+E) do FileExport, program ostrzeże, że jest on już przydzielony do polecenia Edit Bitmap.

9. Kliknąć Change (Zmień), aby uaktualnić skrót klawiaturowy.

Jeżeli nowy skrót klawiaturowy koliduje z istniejącym, Fireworks wyświetli okno dialogowe z ostrzeżeniem. Po kliknięciu Reassign (Przydziel na nowo), skasowany zostanie poprzedni zapis i wprowadzony zostanie nasz nowy.

10. Kliknąć OK.

Zmiana nazwy zestawu skrótów

Aby zmienić nazwę zestawu skrótów, należy wykonać poniższe czynności:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Sprawdzić, czy nasz własny zestaw skrótów, który chcemy modyfikować jest zestawem bieżącym. Jeżeli nie, należy wybrać go z listy Current Set.

3. Kliknąć przycisk Rename Set (Zmień nazwę zestawu).

	Przesuń kursor myszy nad przyciskami w oknie dialogowym Keyboard Shortcuts, aby zobaczyć etykietki opisujące każdą z funkcji.

Fireworks otworzy okno dialogowe Rename Set.

4. Wprowadzić nową nazwę dla zestawu skrótów i kliknąć OK.

Program zmieni nazwę bieżącego zestawu skrótów klawiaturowych.

5. Kliknąć OK.

Usuwanie zestawu skrótów

Aby usunąć zestaw skrótów, należy:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Kliknąć przycisk Delete Set (Usuń zestaw).

Program wywoła okno dialogowe Delete Set (rysunek 3.14).

3. Wybrać z listy zestaw skrótów, który chcemy usunąć.

	Zestawy ustawień domyślnych nie pojawiają się w oknie dialogowym Delete Set i nie można ich usunąć.

4. Kliknąć Delete (Usuń), aby usunąć wybrany zestaw, lub Cancel (Anuluj), aby zamknąć okno dialogowe Delete Set bez usuwania zestawu skrótów.

5. Po zakończeniu kliknąć OK w oknie dialogowym Keyboard Shortcuts.

Rysunek 3.14. W oknie dialogowym Delete Set wybieramy zestaw, który ma zostać usunięty

Tworzenie odnośnika klawisza skrótu

W programie Fireworks możemy stworzyć plik HTML, który określa szczegóły zawartości zestawu skrótów klawiaturowych, sformatowanych w postaci tabeli HTML. Tworzenie odnośnika klawisza skrótu ułatwia naukę nowych skrótów klawiaturowych czy też sprawdzenie zawartości określonego zestawu w celu dostosowania go do własnych potrzeb.

W celu stworzenia odnośnika klawisza skrótu HTML, należy:

1. Wybrać EditKeyboard Shortcuts, aby otworzyć okno dialogowe Keyboard Shortcuts.

2. Kliknąć przycisk Export Set as HTML (Eksportuj zestaw jako HTML).

Program otworzy okno dialogowe Save (Zapisz).

3. Wybrać folder i określić nazwę dla pliku HTML, a następnie kliknąć Save.

Fireworks eksportuje plik HTML z naszym skrótem klawiaturowym. Można teraz wydrukować plik HTML lub przeglądnąć go w przeglądarce.

Podsumowanie

Ustawienie preferencji pozwala pracować nie tylko komfortowo, ale także bardziej wy­daj­nie. Fireworks umożliwia kontrolowanie wielu aspektów procesu tworzenia grafiki, pro­dukcji, a nawet drukowania. Poniżej znajduje się kilka przydatnych wskazówek do­ty­czących ustawiania preferencji Fireworks:

• Większość preferencji programu możesz określić po wybraniu z menu po­le­ce­nia FilePreferences.

• Ustawienia niektórych preferencji, na przykład folderów zawierających plug-iny Photoshopa, tekstury i desenie wymaga ponownego uruchomienia programu.

• Za pomocą klawisza Caps Lock możesz włączać i wyłączać wyświetlanie pre­cy­zyjnych kursorów, ale tylko wówczas, gdy nieaktywna będzie opcja Precise Cur­sors znajdująca się w panelu Editing okna preferencji programu.

• Okno dialogowe HTML Setup jest podobne do Print Setup dla HTML.

• Każdy tworzony lub otwierany dokument posiada zestaw własnych preferencji, któ­re mają wpływ na kod HTML generowany dla plastrów i map obrazków.

• Fireworks umożliwia tworzenie i modyfikację Twoich własnych skrótów klawiaturowych i zawiera zestawy odpowiadające powszechnie używanym aplikacjom graficznym.

W następnym rozdziale nauczysz się budować nowe obszary robocze, w których bę­dziesz tworzył grafikę internetową, oraz otwierać i modyfikować istniejące dokumenty.




Rozdział 4.
Definiowanie właściwości dokumentów

W tym rozdziale:

• Przygotowywanie nowych obszarów roboczych.

• Otwieranie istniejących obrazków.

• Importowanie wielu plików.

• Zapisywanie pracy.

• Dostosowywanie rozmiaru i koloru obszaru roboczego.

Malarze posługujący się farbami olejnymi odprawiają niemal rytuał przed przystą­pie­niem do malowania. Mimo że artyści internetowi nie muszą naciągać i gruntować swo­ich płó­cien, okre­ślenie pewnych ustawień przed rozpoczęciem pracy pozwoli im zao­szczę­dzić wie­le czasu w jej kolejnych etapach. Jedną z największych zalet elektronicznych ilustra­cji w ogóle, a w Fireworks w szczególności, jest możliwość modyfikacji ich dowolnych elementów na każdym etapie pracy.

W tym rozdziale opisane są wszystkie zagadnienia związane z przygotowaniem obszaru ro­boczego w Fireworks. Dowiesz się jak duży powinien być i jakie elementy możesz w nim umieścić. Znajdziesz tu również wskazówki dotyczące otwierania, zapisywania i za­mykania dokumentów Fireworks. Nauczysz się także modyfikować obszar roboczy na dowolnym etapie procesu tworzenia grafiki.

Tworzenie nowych dokumentów

Zanim przystąpisz do pracy, powinieneś się zastanowić, co właściwie chcesz stworzyć. Im dokładniej będziesz wiedział, jaki efekt końcowy chcesz osiągnąć, tym mniej zmian bę­dziesz musiał wprowadzać w czasie pracy. Nie mówię, że obędzie się bez prób i błę­dów, ale wstępny plan pozwoli Ci zaoszczędzić wiele czasu i ustrzec się problemów w przyszłości.

Dwa podejścia

Podstawowe pytanie, na które musisz sobie odpowiedzieć przed wybraniem z menu po­le­cenia FileNew brzmi: jak podejść do tworzenia wielu plików graficznych, z których skła­da się przeważnie witryna WWW? Są dwie odpowiedzi:

• Utwórz kilka małych obrazków w wielu dokumentach Fireworks i połącz je póź­niej na stronie WWW w innej aplikacji (na przykład Dreamweaver).

• Stwórz jeden obszar roboczy Fireworks z kompletnym projektem strony WWW, zawierającym elementy nawigacyjne, tekst i obrazki.

Zanim zacząłem pracować w Fireworks, projekty witryn WWW tworzyłem w pro­gra­mie Macromedia FreeHand, a następnie kopiowałem poszczególne elementy do oddziel­nych dokumentów Photoshopa, w którym je retuszowałem i nadawałem im ostateczny wy­gląd. Później zmieniłem styl pracy i zastąpiłem Photohopa programem Fireworks. Każ­dy obrazek przeznaczony na stronę WWW przechowywałem w oddzielnym doku­men­cie Fireworks (rysunek 4.1).

Rysunek 4.1. Tradycyjnie, każda grafika tworzona jest w oddzielnym dokumencie

Jednak w przypadku większości projektów najlepszym rozwiązaniem jest stworzenie jed­nego, dużego obszaru roboczego (rysunek 4.2) i utworzenie w nim projektu całej stro­ny. Można go tworzyć od zera lub połączyć nowe elementy z importowanymi. Fire­works umoż­liwia rysowanie, stosowanie filtrów i efektów, plastrowanie, określanie hi­per­łączy, pozosta­wienie miejsca na tekst HTML i wyeksportowanie całości jako kodu HTML lub JavaScript wraz z obrazkami w formacie GIF lub JPEG. Jeśli w którymś mo­mencie zechcesz zrobić to z pojedynczą warstwą lub plasterem, Fireworks wykona za­danie bez problemów.

		W kolorowej wkładce znajdziesz przykład projektu kompletnej strony WWW, stworzonego w jednym dokumencie.
Rysunek 4.2. W jednym dokumencie Fireworks możesz zaprojektować i stworzyć kompletną stronę WWW

Wybór metody tworzenia jest oczywiście uzależniony od indywidualnych preferencji każ­dego projektanta. Osobiście preferuję rozwiązanie z jednym obszarem roboczym. Fire­works jest doskonałym programem do tworzenia grafik internetowych i daje Ci do dys­pozycji pełen zestaw potrzebnych do tego narzędzi.

Opcje obszaru roboczego

Obszar roboczy XE "obszar roboczy" w Fireworks to tło widzialnego obszaru dokumentu. Możesz sterować czte­rema podstawowymi elementami obszaru roboczego:

• Szerokością. Poziomy rozmiar dokumentu mierzony w pikselach, calach lub cen­tymetrach.

• Wysokością. Pionowy rozmiar dokumentu mierzony w pikselach, calach lub cen­tymetrach.

• Rozdzielczością. Parametr wykorzystywany w druku, który jest mierzony w pun­ktach na cal lub centymetr. Bywa używany przez Fireworks, wtedy gdy nie określisz rozmiaru dokumentu w pikselach, do przeliczania cali lub cen­tymetrów na piksele.

• Kolorem obszaru roboczego. Kolor tła, na którym pracujesz. Może nim być rów­nież przezroczystość.

Szerokość i wysokość XE "obszar roboczy:szerokość i wysokość"

Mimo że czasami może wydawać się inaczej, grafika internetowa ma zawsze kształt pro­stokąta. Szerokość i wysokość dokumentu determinują nie tylko rozmiar dokumentu, ale również jego kształt. Teoretycznie nie ma żadnych ograniczeń rozmiarów obrazka, ale projektant musi brać pod uwagę rozmiar pliku. Istnieje tu prosta zależność: im więk­szy obrazek, tym większy rozmiar fizyczny pliku. Przeważnie rozmiary obrazków po­da­wa­ne są w pikselach. Piksele to czerwone, zielone i niebieskie punkty, z których składa się ekran monitora komputerowego. Od czasu do czasu, dobrze jest przełączyć się na in­ny sys­tem miar, na przykład dostępne w Fireworks cale lub centymetry. Internet jednak jest środowiskiem zorientowanym na piksele i najczęściej będziesz wykorzystywał właś­nie taką jednostkę miary.

Jeśli tworzysz projekt kompletnej strony WWW w jednym dokumencie Fireworks, ty­po­wa strona ma 600 pikseli szerokości i 800 pikseli wysokości. Może być wówczas swo­bodnie oglądana w każdej rozdzielczości, a przy małych rozdzielczościach ekra­no­wych wymaga jedynie niewielkiego przewijania (około dwóch ekranów). Innym roz­wią­za­niem jest stworzenie strony dopasowanej do wyświetlania w rozdzielczości 800×600 pik­seli przy oknie przeglądarki zajmującym cały ekran monitora. Jeśli stworzysz obszar ro­boczy o wymiarach 760×400 pikseli (pozostawiając miejsce na paski narzędzi prze­glą­darki), użytkownik nie będzie musiał korzystać z przewijania, aby zobaczyć całą stro­nę w maksymalnie powiększonym oknie przeglądarki.

Nie obawiaj się tworzenia obszarów roboczych o nieco większych wy­mia­rach niż te, które są Ci w rzeczywistości potrzebne. Przekonałem się, że nieco większe pole manewru przydaje się przy rysowaniu, zwłasz­cza za pomocą piórka i tabletu. Przed narysowaniem czego­kol­wiek w obszarze roboczym, możesz wówczas wypróbować obrysy w tym dodatkowym obszarze. Po zakończeniu pracy, usuń je i wybierz z menu polecenie ModifyTrim Canvas, aby szybko pozbyć się niepo­trzeb­nych obszarów i przygotować dokument do wyeksportowania.

Rozdzielczość XE "obszar roboczy:rozdzielczość"

Nawet jeśli rozmiary obszaru roboczego podajesz w calach lub centymetrach, nadal jest on elementem internetowym (ekranowym) złożonym z pikseli. Opcja Resolution defi­niu­je sposób przekształcania punktów na cale przez Fireworks. Jeśli nadasz obszarowi ro­bo­czemu wymiary 8.5 na 11 cali, żeby wydrukować go na standardowym papierze lis­towym w rozdzielczości 150 dpi (dots per inch - punkty na cal), powinieneś wpisać w polu Resolution XE "obszar roboczy:Resolution" wartość 150, aby dokument został dobrze wydrukowany.

Jeżeli wykorzystujesz Fireworks jedynie do tworzenia obrazków, które będą wy­świe­tla­ne na ekranie (jak większość z nas), mam dla Ciebie dobrą wiadomość: możesz pozostawić w polu Resolution domyślną wartość 72 i mierzyć w pikselach obszar roboczy oraz wszys­tkie znajdujące się w nim obiekty. Wolno Ci kompletnie zignorować to ustawie­nie i pracować z wszystkimi dokumentami w rozdzielczości 72 ppi.

	Więcej informacji o rozdzielczości ekranowej i rozdzielczości w druku znajdziesz w rozdziale 14.

Dlaczego 72? Ekran monitora komputera Macintosh ma wymiary 512×342 piksele lub 7.1×4.5 cali. Wymiary te są aktualne dla wszystkich monitorów pra­cujących z rozdzielczością 72 dpi. Jeśli chcesz, aby jakiś element wy­świetlany na ekranie miał szerokość jednego cala (na przykład cala na li­nijce w programie graficznym), na Macintosh powinieneś nadać mu szero­kość 72 pikseli. Konwencja 72 pikseli wzięła się także stąd, że w jed­nym calu mieszczą się 72 punkty (standardowa jednostka typogra­ficz­na), więc jeden piksel reprezentuje dokładnie jeden punkt. Obecnie ist­nieje zbyt wiele różnych roz­dzielczości wyświetlania i wymiarów mo­ni­torów komputerowych, aby opracować jedno­litą jednostkę miary, więc standardowym ustawieniem rozdzielczości nadal pozostaje 72 dpi. System Windows i niektóre pracujące w nim aplikacje korzystają z roz­dzielczo­ści 96 dpi, ale Fireworks na obu plat­formach używa stan­dardu 72 dpi. Określ szerokość i wysokość widzialnego obszaru ekranu, a nas­tęp­nie po­dziel te wy­miary przez wartość rozdzielczości ekranowej. Ekran z widzialnym obszarem o wymia­rach 12×9 cali, pracujący w roz­dziel­czoś­ci 1024×768 ma rozdzielczość 85 dpi. Wyświetlany na takim ekra­nie obiekt o wymiarach 85×85 pikseli będzie kwadratem o boku jed­nego cala.

Kolor obszaru roboczego

Kolor XE "obszar roboczy:kolor" obszaru roboczego jest w Fireworks bardzo ważną, ale też i bardzo elastyczną właś­ciwością. Podczas tworzenia grafiki internetowej, kolor obszaru roboczego musi być przeważnie taki sam, jak kolor tła strony WWW. Nie musisz go dostosować przy two­rzeniu nowej strony od razu, ale pozwoliłoby Ci to zaoszczędzić wiele czasu w póź­niej­szej pracy. Wystarczy go określić w oknie dialogowym otwieranym za pomocą po­le­cenia menu ModifyCanvas Color XE "obszar roboczy:Canvas Color" .

Masz do wybory trzy opcje dotyczące barw obszaru roboczego: White (Biały), Tran­spa­rent (Przezroczysty) i Custom (Własny). Biały nie jest domyślnym kolorem wszystkich prze­glądarek internetowych, ale jest często wybierany jako barwa tła w programach do two­rzenia stron WWW i powszechnie stosowany w Internecie. Przezroczystość nie jest oczy­wiście kolorem - jest jego brakiem. Wiele stron internetowych wykorzystuje jako tła różne desenie lub obrazki, ale projektanci coraz częściej nadają przezroczystość tyl­ko wybranym fragmentom, dzięki którym są widoczne wybrane obszary grafiki. Gra­fi­ka (która zawsze ma kształt prostokąta) wygląda wtedy, jakby miała nieregularne kształ­ty. Fireworks oferuje dużo rozmaitych metod produkowania grafiki z przezro­czys­tym tłem, ale wielu projektantów i tak woli pracować na przezroczystym obszarze ro­boczym.

Trzecia opcja - Custom Color - umożliwia zdefiniowanie dowolnego koloru obszaru ro­bo­czego. Po wybraniu przycisku opcji Custom Color możliwe jest wybranie dowolnego odcienia z palety 216 kolorów bezpiecznych dla Internetu, które są wyświetlane w taki sam spo­sób w większości przeglądarek w Windows i w MacOS pracujących z 8-bitową głębią ko­lorów. Odpowiedni odcień możesz wybrać również z systemowego próbnika kolorów lub wykorzystać kroplomierz i pobrać go z dowolnego miejsca ekranu. Opcja Custom Color przydaje się zwłaszcza wtedy, gdy chcesz dostosować kolor obszaru roboczego gra­fiki do koloru tła strony WWW.

Poznanie zasad wykorzystywania kolorów w Internecie jest kluczową sprawą dla każdego projektanta grafiki internetowej. Więcej informacji o korzystaniu z kolorów w Fireworks znajdziesz w rozdziale 7.

Tworzenie nowego dokumentu

Aby utworzyć nowy dokument:

4. Wybierz z menu polecenie FileNew lub użyj skrótu klawiaturowego Ctrl+N (Command+N). Użytkownicy systemu Windows mogą także kliknąć przycisk New znajdujący się w głównym pasku narzędzi. Zostanie otwarte okno dialo­go­we New Document (Nowy dokument) (rysunek 4.3).

Rysunek 4.3. W oknie dialogowym New Document ustaw wymiary swojego dokumentu, rozdzielczość w druku i kolor obszaru roboczego

5. Aby zmienić szerokość obszaru roboczego, wpisz nową wartość w polu teks­towym Width.

	Wciśnij klawisz Tab, aby przejść do pola tekstowego Height.

6. Aby zmienić wysokość obszaru roboczego, wpisz nową wartość w polu teks­to­wym Height.

7. Aby zdefiniować nową rozdzielczość obszaru roboczego, wpisz wartość w po­lu Resolution. Domyślna rozdzielczość dokumentów Fireworks to 72 ppi (pixel per inch - piksele na cal). Jeśli nie będzie to konieczne, nie zmieniaj wartości roz­dzielczości.

8. Aby zmienić jednostkę miary używaną do definiowania szerokości, wysokości i rozdzielczości dokumentów, kliknij przycisk ze strzałką znajdujący się obok od­powiedniej listy opcji. Dla szerokości i wysokości masz do wyboru: Pixels (Pik­sele), Inches (Cale) lub Centimeters (Centymetry), zaś rozdzielczość moż­na mierzyć w pikselach na cal (Pixels/Inch) lub pikselach na centymetr (Pixels/cm).

Po zmianie jednostek miary dla szerokości i wysokości dokumentu, Fire­works automatycznie przekonwertuje wszystkie istniejące war­tości. Przykładowo - jeśli nowy obszar roboczy ma przy rozdzielczości 72 pikseli na cal 144 piksele szerokości, a Ty zmienisz jednostkę mia­ry szerokości na cale, Fireworks zamieni 144 piksele na 2 cale. Obo­jętnie, jaką jednostkę miary wybierzesz, Fireworks zawsze w oknie dia­logowym po prawej stronie pól tekstowych z wymiarami dokumentu bę­dzie wyświetlał ich wartości w pikselach poprzedzone znakami W (width - szerokość) i H (height - wysokość).

9. W sekcji Canvas Color wybierz kolor obszaru roboczego. Do wyboru masz op­cje: White (Biały), Transparent (Przezroczysty) i Custom (Własny).

10. Aby wybrać własny kolor obszaru roboczego, kliknij strzałkę znajdującą się obok próbki koloru i wybierz pożądany kolor z rozwijanej palety.

11. Aby mieć wybór spomiędzy większej ilości kolorów (spoza palety 216 ko­lo­rów bezpiecznych dla przeglądarki), kliknij przycisk Palette lub dwukrotnie klik­nij próbki, aby otworzyć systemowy próbnik kolorów.

12. Gdy skończysz definiowanie parametrów nowego dokumentu, kliknij przycisk OK.

Okno dialogowe New Document zapamięta ustawienia i przyjmie je ja­ko domyślne, gdy będziesz tworzył kolejny nowy dokument. Jest tylko je­den wyjątek. Gdy wytniesz lub skopiujesz grafikę do schowka i wy­bie­rzesz w Fireworks polecenie FileNew, w oknie dialogowym będą wy­świetlone wymiary obrazka znajdującego się w schowku. Funkcja ta ułat­wia wklejanie istniejących obrazków do nowych plików Fireworks.

Otwieranie istniejących obrazków

Dokumenty Fireworks można podzielić na dwie odrębne kategorie w zależności od te­go, czy rozpoczynasz pracę w Fireworks od zera, czy też importujesz prace wykonane w in­nych programach, aby jedynie przygotować je do wykorzystania w Internecie. Fire­works jest doskonałym narzędziem do optymalizacji grafiki internetowej i równie częs­to bę­dziesz go wykorzystywał do tworzenia nowych plików, jak i otwierania istniejących obrazków.

	Do przenoszenia obrazków pomiędzy aplikacjami wykorzystuj bez­strat­ne formaty plików, takie jak PNG i TIFF. Formaty GIF i JPEG są nieod­po­­wiednie do zachowywania głównych kopii obrazków, ponieważ w cza­sie kompresji do jak najmniejszych rozmiarów pliku odrzucają one nie­które informacje, powodując w ten sposób utratę jakości gra­fiki.

Otwarcie pliku PNG odbywa się tak samo jak otwieranie dokumentów Fireworks. Otwar­cie innego typu pliku powoduje utworzenie nowego dokumentu Fireworks, który mu­si zostać zapisany pod nową nazwą jako dokument w formacie PNG. W razie po­trze­by z dokumentu Fireworks możesz eksportować pliki w formatach GIF, JPEG lub innych.

Formaty plików

Każdy, kto zetknął się z grafiką komputerową wie zapewne, że różne programy kom­pu­te­rowe i różne systemy operacyjne zapisują pliki we własnych formatach. Wiele z nich moż­na otwierać w Fireworks. W przypadku formatów plików tworzonych w zaawan­so­wa­nych aplikacjach graficznych, takich jak Photoshop, Fireworks pozwala na zacho­wa­nie jak największej ilości specjalnych komponentów grafiki, na przykład warstw i edy­to­wal­nego tekstu. Można nawet otwierać pliki w formatach ASCII lub RTF i importować z nich tekst do Fireworks.

	Przy próbie otwarcia plików utworzonych w programie Macromedia FreeHand, Adobe Illustrator lub CorelDRAW, Fireworks wyświetla okno dialogowe ze specjalnymi opcjami pliku. W rozdziale 14. opisane jest okno dialogowe Vector File Options (Opcje grafiki wektorowej).

Aby otworzyć istniejący plik w Fireworks:

1. Wybierz z menu polecenie FileOpen XE "Open" lub użyj skrótu klawiaturowego Ctrl+O (Command+O). Użytkownicy systemu Windows mogą również kliknąć przy­cisk Open (Otwórz) znajdujący się w głównym pasku narzędzi. Zostanie ot­war­­te okno dialogowe Open (rysunek 4.4).

Rysunek 4.4. W oknie dialogowym Open możesz obejrzeć pliki przed ich otwarciem w Fireworks

13. Zaznacz wybrany plik w oknie dialogowym Open. Fireworks dokona iden­ty­fi­ka­cji pliku i dla określonych typów plików wyświetli ich miniatury w sekcji Pre­view (Podgląd) okna dialogowego.

14. Aby otworzyć kopię grafiki, zaznacz opcję Open as „Untitled” (Otwórz jako „Bez tytułu”).

W tabeli 4.1 opisane zostały formaty plików obsługiwane przez Fireworks.

Tabela 4.1.

Obsługiwane formaty plików

Format		Rozszerzenie pliku	Kod typu używany w MacOS	Opis i uwagi
Format Fireworks		.png	PNGf	Plik w formacie PNG zawierający informacje, które mogą być odczytywane jedynie przez Fireworks, na przykład obiekty wektorowe. Format wybierany domyślnie dla plików Fireworks 3 i 4.
Fireworks 2.0		.png	PNGf	Aktualizowane natychmiast po otwarciu. Nie mogą być zapisywane i ponownie otwierane w Fireworks 2.
Fireworks 1.0		.png	PNGf	Aktualizowane natychmiast po otwarciu. Nie mogą być zapisywane i ponownie otwierane w Fireworks 1. Tło grafiki jest umieszczane na osobnej warstwie.
Portable Network Graphic		.png	PNGf	Standardowy dokument PNG nie zawierający dodatkowych informacji dla Fireworks
Dokument Photoshopa		.psd	8BPS	Tylko w wersji 3.0 i późniejszych. Zachowane zostają warstwy, edytowalny tekst i efekty warstw
Dokument FreeHanda		.fh7 lub .fh8	AGD3	Format grafiki wektorowej tworzonej w programie FreeHand 7 lub 8
Document Illustratora 7		.ai	UMsk	Format grafiki wektorowej tworzonej w programie Illustrator 7
Document CorelDRAW 8		.cdr	CDR8	Aby format grafiki wektorowej CorelDRAW mógł zostać otwarty w Fireworks, musi być zapisany bez kompresji obiektów i bitmap
GIF		.gif	GIFf	Graphic Interchange File Format. Może być statyczny lub animowany. Każda klatka animowanego GIF-a jest umieszczana w osobnej klatce dokumentu Fireworks
JPEG		.jpg lub .jpeg lub .jpe	JPEG	Unikaj importowania obrazków w formacie JPEG z powodu ich stratnej kompresji i niskiej jakości
Targa		.tga	TPIC	Format graficzny często wykorzystywany w systemach Unixowych
WBMP		.wbmp	WBMP	Format bitmapy bezprzewodowej, używany w urządzeniach bezprzewodowych
EPS		.eps	UMsk	Zamknięty format PostScript. Grafiki wektorowe są rastrowane.
TIFF		.tif lub .tiff	TIFF	Tag Image File Format. Format o wysokiej jakości obrazu i bezstratnej kompresji, podobnej do tej, która jest stosowana w formacie PNG
Tekst ASCII		.txt	TEXT	Zwykły tekst
Rich Text Format		.rtf	RTF	Format tekstu firmy Microsoft, który może być eksportowany wraz ze stylami z programu Word.
Bitmapa Microsoftu		.bmp	BMP	Standardowy format grafiki w Windows 3+
PICT (tylko MacOS)		.pct lub .pict lub .p	PICT	Standardowy format grafiki w systemie MacOS 1-9. Jest kombinacją grafiki bitmapowej i wektorowej. Fireworks zamienia wszystkie obiekty wektorowe na bitmapy
		Użytkownicy Windows: Jeśli chcesz ograniczyć wyświetlanie plików tyl­ko do określonych formatów, kliknij strzałkę znajdującą się obok listy roz­wijanej Files of Type (Typy plików) i wybierz żądany format. Aby wy­świetlić wszystkie pliki, wybierz z listy rozwijanej Files of Type opcję All Files (*.*) lub wpisz gwiazdkę w polu tekstowym File Name (Nazwa pli­ku). Gdy zamierzasz wyświetlić pliki zgodne z Fireworks, wybierz z lis­ty Files of Type opcję All Readable Files.

15. Kliknij OK. Fireworks otworzy plik i dopasuje stopień jego powiększenia tak, aby wyświetlony został cały obrazek.

		Pliki można otwierać w Fireworks także za pomocą techniki „prze­ciąg­nij i upuść”. W Windows przeciągnij zgodny plik graficzny na ikonę apli­kacji Fireworks, na jej skrót lub do otwartego dokumentu. W sys­te­mie Mac możesz przeciągać pliki graficzne na aplikację Fire­works, jej od­nośnik lub na ikonę Fireworks znajdującą się w Prze­łączniku Apli­ka­cji (Application Switcher) — MacOS 8, 9 lub MacOS X (dokowanie).
Otwieranie plików Photoshopa Fireworks pozwala bez problemu otwierać i pracować z plikami Pho­to­shopa. Gdy ot­wie­­rasz lub importujesz plik Photoshopa, Fireworks wy­świe­tli okno dialogowe umo­żli­wia­jące dostosowanie parametrów kon­wer­sji pliku. Domyślnie Fire­works zachowuje war­stwy i edytowalny tekst Pho­t­oshopa, ale jeśli nie bę­dziesz chciał edytować obrazka w Fireworks, mo­żesz go spłaszczyć (usunąć warstwy). Maski znajdujące się w pli­kach Pho­toshopa są konwertowane na grupy maski (Mask Group), zaś efekty warstw Pho­to­sho­pa na edytowalne Live Effects.

Otwieranie wielu plików

Rzadko się zdarza, aby na stronie WWW znajdował się tylko jeden obrazek. Większość stron internetowych składa się z wielu obiektów graficznych i czasami zachodzi ko­nie­czność równoczesnej pracy nad wszystkimi grafikami. Za pomocą polecenia Open (Otwórz) możesz jednocześnie załadować do Fireworks dużo roz­ma­i­tych plików. Przytrzymaj wciśnięty klawisz Ctrl (Shift) podczas klikania kolejnych plików w oknie dialogowym Open. Gdy będziesz gotowy, kliknij Open, a Fireworks otworzy i wyświetli wszystkie pliki w oknach ułożonych kaskadowo.

Użytkownicy MacOS mogą otwierać wiele dokumentów Fireworks rów­nież poprzez wybranie grupy plików w Finderze i albo przez dwukrotne kliknięcie my­szą, albo przez wybranie FileOpen (lub Command+O). Pliki obrazków, które nie posiadają kodu Fireworks Creator po­win­ny być zaznaczane w Finderze i przeciągane na ikonę aplikacji Fire­works.

Zaletą możliwości otwierania wielu obrazków jest możliwość XE "Open Multiple" tworzenia ani­macji przez łączenie wszystkich dokumentów. Gdy w oknie dialogowym Open wybierzesz opcję Open as Animation XE "Open as Animation" (Otwórz jako animację), Fireworks umieści każdy wybrany plik w pojedynczej grafice, ale w osobnych klatkach. Następnie mo­żesz obejrzeć animację z wykorzystaniem kontrolek Fireworks lub w oknie dialo­go­wym Export dostosować tempo odtwarzania animacji.

Aby otworzyć kilka plików jednocześnie:

2. Wybierz z menu polecenie FileOpen lub użyj skrótu klawiaturowego Ctrl+O (Command+O), a zostanie otwarte okno dialogowe Open (rysunek 4.5).

Rysunek 4.5. Możesz zaznaczyć kilka plików przytrzymując wciśnięty klawisz Ctrl (Command) podczas klikania ich nazw

16. Odszukaj folder zawierający obrazki, które chcesz otworzyć.

17. Aby dodać ciągły zakres plików, zaznacz pierwszy z nich, wciśnij i przy­trzy­maj klawisz Shift i kliknij ostatni plik z zakresu.

18. Aby wybrać wiele plików nie le­żą­cych obok siebie, klikaj je kolejno z wciśniętym klawiszem Ctrl.

19. Aby otworzyć wszystkie pliki znajdujące się w bieżącym katalogu, kliknij Ctrl + A (Command + A).

	Wszystkie pliki znajdujące się w wybranym katalogu możesz otworzyć tak­że poprzez ich przeciągnięcie i upuszczenie nad ikoną Fireworks. Fire­works otworzy wszystkie pliki znajdujące się w wybranym katalogu i wszystkich podkatalogach.
	W MacOS upuszczenie foldera z plikami na ikonie Fireworks spowo­du­je również otwarcie wszystkich plików w programie, ale Fireworks zaw­sze zakończy cały proces z błędem. Mimo że błąd ten wydaje się nie­szko­dliwy, istnieje proste rozwiązanie. Wystarczy otworzyć folder, za­zna­czyć wszystkie pliki za pomocą skrótu Ctrl+A i przeciągnąć je na iko­nę Fireworks (lub dwukrotnie kliknąć, jeśli posiadają kod Fireworks Creator).

20. Aby umieścić zaznaczone obrazki w serii klatek, wybierz opcję Open as Ani­ma­tion (Otwórz jako animację). Każdy obrazek zostanie umieszczony w osob­nej klatce tego samego dokumentu w kolejności, w jakiej pliki zostały umie­szczo­ne w liście.

21. Aby usunąć wybrany plik z listy, wciśnij i przytrzymaj klawisz Ctrl (Command) i kliknij ten plik.

22. Kliknij przycisk Open, aby otworzyć obrazki.

Zapisywanie plików

Każdego, kto profesjonalnie zajmuje się grafiką komputerową nęka ten sam koszmar
- wszys­tkie niezapisane obrazki, którym poświęcił wiele czasu i skrupulatnej pracy zo­sta­ją utracone w wyniku zawieszenia się komputera. Zapisywanie plików jest bardzo waż­ne w każdym programie graficznym, a w Fireworks staje się sprawą najwyższej wa­gi. Aby słowa „wszystko jest w każdej chwili edytowalne” były prawdziwe, grafika musi zos­tać zapisana w standardowym formacie Fireworks - PNG. Program oferuje rozbu­do­wa­ny moduł eksportu pozwalający zapisywać pliki w każdym z formatów wyko­rzys­ty­wa­nych w Internecie. Jeśli jednak plik Fireworks zostanie wyeksportowany jako GIF

lub JPEG, utracona zostanie możliwość jego edycji. Tekst nie będzie mógł być edyto­wa­ny jako tekst, obiekty wektorowe zostaną przekształcone na bitmapy, efekty zostaną zablokowane itd.

Aby utrzymać pełen zakres funkcji Fireworks, przed eksportem trzeba zapisać plik w for­macie PNG. W tym celu należy wykorzystać standardowe polecenie menu File Save XE "Save" lub skrót klawiaturowy Ctrl+S (Command+S). Użytkownicy Windows mogą rów­nież posłużyć się przyciskiem Save znajdującym się w głównym pasku narzędzi. Jeśli do pierwszego zapisania pliku użyjesz jednej z wymienionych metod, auto­ma­tycz­nie zostanie otwarte okno dialogowe Save (rysunek 4.6).

Rysunek 4.6. Aby utrzymać możliwość edycji pliku, oprócz wyeksportowania grafiki w formacie GIF, JPEG lub innym, powinieneś zapisać plik w źródłowym formacie Fireworks - PNG
		Więcej szczegółów na temat eksportowania plików znajdziesz w roz­dziale 15.

Każdy kolejny zapis pliku spowoduje zastąpienie jego poprzedniej wersji. Jeśli chciał­byś zachować wiele wersji tego samego pliku, możesz skorzystać z dwóch poleceń Fire­works: Save As XE "Save As" (Zapisz jako) i Save a Copy XE "Save a Copy" (Zapisz kopię). Polecenie Save As poz­wa­la zapisać plik pod inną nazwą, zaś polecenie Save a Copy umożliwia zachowanie zapa­so­wej kopii pliku w innym katalogu (kopię również można zapisać pod nową nazwą). Wy­bierz z menu polecenie FileSave As lub FileSave a Copy, aby otworzyć okno dia­logowe Save. Wpisz nową nazwę pliku lub wybierz nowy folder (i wpisz nową naz­wę pliku) i kliknij przycisk Save.

Zamykanie plików

Gdy zakończysz pracę nad dokumentem - ale nadal chcesz pracować w Fireworks
- mo­żesz zamknąć bieżący plik na jeden z niżej wymienionych sposobów:

• Wybierz z menu polecenie FileClose XE "Close" .

• Użyj skrótu klawiaturowego Ctrl+W (Command+W) lub Ctrl+F4 (tylko w Win­dows).

• Kliknij przycisk Zamknij (krzyżyk) okna dokumentu.

Jeśli dokument nie został zapisany od czasu ostatniej modyfikacji, Fireworks zapyta Cię, czy chcesz zapisać plik przed jego zamknięciem. Dokumenty, które nie zostały zapisane można rozpoznać po znaku gwiazdki (*) (rysunek 4.7), jaki program umieszcza na pasku tytułowym okna dokumentu, w którym zmiany nie zostały zapisane. Okna dokumentów, w których nie pojawi się znak gwiazdki na pasku tytułowym są dokładnie takie same, jak pliki zapisane na dysku.

Rysunek 4.7. Znak gwiazdki pozwala natychmiast rozpoznać dokumenty, w których nie zapisano zmian

Dirty dot asterisk — Znak gwiazdki

	Fireworks wyświetla znak gwiazdki na pasku tytułowym dokumentów, w których nie zapisano zmian. Tę samą właściwość odnaleźć w programie Macromedia Dreamweaver.

Przywracanie ostatnio zapisanej wersji pliku

Wielką zaletą grafiki komputerowej jest możliwość wypróbowania wielu różnych roz­wią­zań bez obawy utraty wcześniejszych pomysłów. Jestem entuzjastą polecenia Revert XE "Revert" (Przy­wróć), które pozwala na dokonanie kompletnych modyfikacji grafiki i przy­wró­ce­nie jej ostatnio zachowanej wersji za pomocą jednego polecenia. Polecenia Revert, Un­do, Save a Copy oraz paleta History pozwalają na bezpieczne eksperymentowanie podczas pracy.

Polecenie Revert jest bardzo proste w użyciu. Gdy dokonasz jakichś zmian grafiki i ze­chcesz powrócić do oryginalnej wersji, wybierz z menu polecenie FileRevert. Fire­works zapyta Cię, czy na pewno chcesz przywrócić ostatnio zapisaną wersję grafiki i, po potwierdzeniu, zamieni obrazek znajdujący się na ekranie jego oryginalną wersją.

Modyfikowanie obszaru roboczego

Chciałbyś zmienić rozmiar swojego obszaru roboczego? Kolor też? Próbujesz po­wie­dzieć, że nie jesteś doskonały i nie przewidziałeś wcześniej tych zmian? Nie martw się, nie Ty jeden. Wiele z moich obrazków przed ich ukończeniem wymagało modyfikacji do­kumentów. Nie jest to nic nadzwyczajnego. Chwała programom graficznym, a w szcze­­gólności Fireworks, za to, że są tak wyrozumiałe dla niezdecydowanych pro­jektantów.

W Fireworks łatwo zmienisz rozmiar całego obrazka wraz z obszarem roboczym albo wy­miary i kolor samego obszaru roboczego. Dozwolone jest także rozszerzenie obszaru robo­czego w określonym kierunku. Na przykład za pomocą wizualnego narzędzia Crop lub numerycznego polecenia ModifyCanvas Size możesz tak powiększyć obszar robo­czy, aby został poszerzony w prawo.

Zmienianie rozmiaru obszaru roboczego

Czasami zdarza się, że obszar roboczy ma dokładnie takie wymiary, że mieści wszys­tkie znajdujące się w nim obiekty, ale musisz dodać kolejny obiekt lub dodać do ist­nie­ją­cego obiektu efekt Glow (Blask) lub podobny. Zaczyna wówczas brakować miejsca. Cza­sem może być wręcz przeciwnie - obszar roboczy jest o wiele za duży i musisz go zmniej­szyć, aby dopasować do znajdującej się w nim grafiki. W obu sytuacjach Fire­works wybawi Cię z opresji.

Fireworks oferuje trzy metody zmiany wymiarów obszaru roboczego: numeryczną (z wy­korzystaniem poleceń menu), wizualną (za pomocą narzędzia Crop) i przycięcie do wymiarów grafiki.

Numeryczne definiowanie rozmiarów obszaru roboczego

Bardzo często zdarza mi się, że chcę dodać do obiektu cień i zdaję sobie wówczas spra­wę, że będę musiał powiększyć obszar roboczy o kilka pikseli w prawo i w dół. W Fire­works obszar roboczy może być rozszerzany w jednym z ośmiu kierunków. Modyfikowany jest jedynie jego rozmiar. Wszystkie właściwości obiektów - z wyjątkiem położenia wzglę­dem obszaru roboczego - pozostają niezmienione.

Bardzo ważne przy zmianie wymiarów obszaru roboczego jest jego położenie (ang. anchor). Położenie to - nazywane również zakotwiczeniem - (ustalane w oknie dia­lo­go­wym Canvas Size) determinuje sposób modyfikowania obszaru roboczego w celu do­pa­sowania go do nowych wymiarów. Domyślnie zakotwiczenie jest umieszczane w środ­ku obszaru roboczego. Na przykład, jeśli zakotwiczenie będzie umieszczone w śro­d­ku obszaru roboczego, a jego wymiary zostaną zwiększone o 100 pikseli w po­zio­mie i tyle samo w pionie, po każdej stronie obszaru roboczego zostanie dodane po 50 pik­seli. Jeśli przy tych samych wartościach zakotwiczenie będzie umieszczone w le­wym górnym rogu obszaru roboczego, zostanie on powiększony o 100 pikseli w prawo i tyle samo w dół. Zakotwiczenie zatem określa, po której stronie starego obszaru ro­bo­cze­go powinny zostać utworzone nowe obszary.

Aby numerycznie zmienić wymiary obszaru roboczego:

3. Wybierz z menu polecenie ModifyCanvas Size. Zostanie otwarte okno dia­lo­go­we Canvas Size (rysunek 4.8).

Rysunek 4.8. Aby zmienić wymiary obszaru roboczego, w oknie dialogowym Canvas Size wpisz nowe wymiary i określ położenie zakotwiczenia

4. Aby zmienić szerokość obszaru roboczego, wpisz nową wartość w pole teks­to­we znajdujące się obok poziomej strzałki z dwoma grotami.

5. Aby zmienić wysokość obszaru roboczego, wpisz nową wartość w pole teks­to­we znajdujące się obok pionowej strzałki z dwoma grotami.

	W sekcji Current Size (Bieżące wymiary) okna dialogowego Fireworks zaw­sze wyświetla bieżące wymiary obszaru roboczego podawane w pik­selach.

23. Aby zmienić wymiary obszaru roboczego, podając je w calach lub cen­ty­me­trach zamiast w pikselach, wybierz pożądaną jednostkę miary z listy rozwijanej znaj­dującej się obok pola tekstowego. Po prawej stronie pól tekstowych pro­gram wyświetla wymiary obszaru roboczego mierzone w pikselach.

24. Kliknij jeden z przycisków znajdujących się w sekcji Anchor, aby zdefiniować kie­runek rozszerzania lub zmniejszania obszaru roboczego.

	Po wybraniu jednego z przycisków znajdujących się w sekcji Anchor ok­na dialogowego, do wybrania innego przycisku możesz wykorzystać kla­wisze strzałek.

25. Kliknij przycisk OK.

Korzystanie z narzędzia Crop

Numeryczne skalowanie obszaru roboczego sprawdza się doskonale, gdy chcesz do­sto­so­wać go do określonej szerokości i wysokości Twojego obrazka. Będziesz jednak mu­siał wykonać wiele prób, aby idealnie dostosować te wymiary do efektów, takich jak blask lub zewnętrzny cień. Dużą szybszą metodą skalowania obszaru roboczego jest wy­korzystanie narzędzia Crop XE "Crop" (Kadrowanie). Zasady kadrowania znane są każdemu, kto kiedykolwiek pracował z fotografiami i musiał z nich usuwać zbędne obszary. Ka­dro­wanie to inaczej obcinanie zbędnych obszarów. Oprócz zmniejszania obrazków po­przez od­cinanie fragmentów obszaru roboczego, narzędzie Crop umożliwia także roz­sze­rzanie ob­szarów roboczych.

Narzędzie Crop umożliwia narysowanie wokół obrazka prostokąta posiadającego kilka uch­wytów skalowania. Możesz je wykorzystać do zmiany wymiarów i kształtu kadro­wa­nego obszaru. Gdy uzyskasz właściwy obszar, kliknij w nim dwukrotnie, aby zakoń­czyć operację kadrowania. Jeżeli ramkę kadrowania rozciągniesz poza krawędzie ob­sza­ru roboczego, po dwukrotnym kliknięciu zostanie on rozszerzony do nowych wymiarów.

Narzędzie Crop znajduje się w palecie Fireworks Tools, na dole, jako trzecie po lewej. Można również skorzystać ze skrótu klawia­tu­rowego, naciskając C.

	Narzędzie Crop ma teraz swoje własne miejsce w palecie Fireworks Tools, na dole, jako trzecie po lewej. Dla przypomnienia, w Fireworks 3 znajdowało się ono w grupie Marquee, a w Fireworks 2 — w grupie Pointer.

Wykorzystanie narzędzia Crop do rozszerzania obszaru roboczego (rysunek 4.9) wy­ma­ga dodatkowych działań. Gdy używasz tego narzędzia po raz pierwszy zauważysz, że Fireworks przyciąga ramkę kadrowania do krawędzi obszaru roboczego.

Rysunek 4.9. Narzędzie Crop pozwala w prosty sposób dodać nowe obszary po prawej stronie i u dołu dokumentu Fireworks

Większość pro­jektantów wykorzystuje narzędzie Crop do zmniejszania obszarów roboczych, więc w większości przypadków przyciąganie takie jest wygodne dla użyt­kownika. Aby roz­sze­rzyć ramkę kadrowania, musisz przeciągnąć jej dowolny uchwyt w nowe położenie poza obszarem roboczym.

Zmiana wymiarów obszaru roboczego dla pojedynczego obrazka

Jeśli dokument zawiera tylko jeden obrazek bitmapowy, pewne będziesz chciał tak zmie­nić wielkość obszaru roboczego obrazka, aby dopasować go do docelowej strony WWW. Fireworks pozwala na dopasowanie tych wymiarów za pomocą polecenia Ima­ge Size, będziesz mógł wykorzystywać zarówno bezwzględne wartości podawane w pikse­lach, jak i wartości procentowe. Dzięki automatycznemu dostosowywaniu wymiarów ob­szaru ro­bo­czego, możesz pracować z pojedynczymi obrazkami tak samo, jak w Pho­toshopie.

Wolno Ci zachować oryginalne proporcje grafiki albo rozciągnąć ją lub ścisnąć w do­wol­nym kierunku. Polecenie Image Size pozwala również na ponowne próbkowanie obraz­ka po jego przeskalowaniu. Ponowne próbkowanie (ang. resampling XE "resampling" ) jest pro­ce­sem polegającym na dodawaniu lub usuwaniu pikseli ze skalowanego obrazka. Zmiana wy­miarów grafiki, a zwłaszcza jej powiększanie zawsze sprawdza się lepiej z obiektami wek­torowymi niż bitmapowymi. Fireworks pozwala na wybór metody interpolacji po­ma­gającej zachować dobry wygląd skalowanych obrazków.

Fireworks umożliwia niezależne od siebie zmianę wymiarów obrazka na ekranie i jego wy­miarów w druku (poprzez zmianę rozdzielczości w druku). W ten sposób możesz za­cho­wać oryginalne wymiary obrazka na ekranie i drukować go z większą lub mniejszą roz­dzielczością. Jednak zmiana rozdzielczości w druku spowoduje proporcjonalną zmia­nę wymiarów reprezentacji obrazka na ekranie. Przykładowo - obrazek znajdujący się w górnej części rysunku 4.10 ma wymiary 1440×657 pikseli (stopień jego powięk­sze­nia w Fireworks wynosi 25%), a jego rozmiary w druku to 20×9 cali przy rozdziel­czoś­ci 72 ppi. Obrazek znajdujący się na dole został przeskalowany poprzez zmniej­sze­nie rozdzielczości o 1/4 (czyli do 18 ppi) i ma wymiary 360×164 pikseli. Oba obrazki będą mia­ły takie same rozmiary w druku, ale obrazek o mniejszej rozdzielczości będzie miał czte­ry razy mniej szczegółów.

	Jeśli wykorzystujesz Fireworks wyłącznie do tworzenia grafiki inter­ne­to­wej (jak większość z nas), nie zmieniaj ustawień jego rozdzielczości w druku (Print Size) i skaluj obrazki z wykorzystaniem sekcji Pixel Di­men­sion okna dialogowego Image Size.

Aby zmienić wymiary obrazka:

6. Wybierz z menu polecenie ModifyImage Size XE "Image Size" , a zostanie otwarte okno dialo­go­we Image Size (rysunek 4.11).

Rysunek 4.10. Dolny obrazek (w powiększeniu 100%) został przeskalowany do 1/4 wymiarów oryginalnego obrazka (w powiększeniu 25%)
Rysunek 4.11. Użyj polecenia Image Size, aby proporcjonalnie powiększyć lub zmniejszyć grafikę

26. Aby proporcjonalnie zmienić wymiary obrazka, wpisz nową wartość w pole tek­stowe szerokości (obok poziomej strzałki z dwoma grotami) lub wysokości (obok pionowej strzałki z dwoma grotami).

27. Aby zmienić wymiary obrazka za pomocą wartości procentowych zamiast pik­se­li, kliknij listę znajdującą się obok pola tekstowego szerokości lub wysokości i wybierz z niej pozycję Percent.

28. Aby zmienić wielkość obrazka poprzez zmodyfikowanie jego wymiarów w dru­ku, wprowadź nowe wartości w pola szerokości i wysokości znajdujące się w sekcji Print Size.

	Jeśli zaznaczona jest opcja Constrain Proportions (Zachowaj pro­por­cje), zmiana szerokości spowoduje zmianę wysokości obrazka i od­wrotnie.
	Najlepiej jest zaznaczyć najpierw całą wartość znajdującą się w polu teks­towym i dopiero wówczas wpisać nową. Jeśli będzie usuwał po­szcze­gólne cyfry za pomocą klawisza Backspace, po usunięciu os­tat­niej Fireworks wyświetli ostrzeżenie mówiące, że wpisałeś niewłaś­ci­wą wartość, mniejszą od 1 piksela.

29. Aby zmienić wymiary obrazka w druku za pomocą wartości procentowych lub cen­tymetrów zamiast cali, kliknij listę rozwijaną znajdującą się obok pola teks­to­wego szerokości lub wysokości w sekcji Print Size i wybierz z niej pożądaną jed­nostkę miary.

30. Aby zmienić rozdzielczość obrazka w druku, wpisz nową wartość w polu teks­to­wym Resolution.

31. Aby umożliwić nieproporcjonalne skalowanie obrazka, usuń zaznaczenie opcji Maintain Proportions.

32. Aby zmienić wymiary obrazka w druku - ale utrzymać jego wymiary ekra­no­we - usuń zaznaczenie opcji Resample Image (Próbkuj ponownie) i wpisz no­we war­tości w pola tekstowe szerokości i wysokości w sekcji Print Size. Po usu­nię­ciu zaznaczenia opcji Resample Image, sekcja Pixel Dimension okna dia­lo­go­wego staje się nieaktywna.

33. Z listy znajdującej się w prawym dolnym rogu okna dialogowego wybierz me­to­dę interpolacji. Domyślnie ustawiona jest metoda Bicubic (Dwusześcienna), która jest najlepsza dla większości obrazków.

	Kompletny opis różnych metod interpolacji oferowanych przez Fireworks znajdziesz w rozdziale 6.

34. Kliknij przycisk OK.

Przycinanie obszaru roboczego

Jaka jest najszybsza metoda zmniejszania obszaru roboczego, aby dopasować go do okre­ślonych obiektów? Oczywiście przycinanie. Jeśli kiedykolwiek przycinałeś kla­sycz­ne zdjęcie za pomocą ostrego noża lub gilotyny, wiesz, że jest to radykalna i szybka ope­racja. Polecenie Trim Canvas XE "Trim Canvas" (Przytnij obszar roboczy) działa jeszcze szybciej. Po­mniej­sza ono obszar roboczy z czterech stron jednocześnie i nie pozostawia zbędnych skrawków.

Potęga polecenia Trim Canvas polega na tym, że jest ono w pełni automatyczne - nie mu­sisz nawet zaznaczać żadnych obiektów, aby dostosować do nich obszar roboczy. Co wię­cej funkcja ta uwzględnia także wszystkie „miękkie” krawędzie, takie jak blaski czy cie­nie, więc nie musisz się martwić, że przez przypadek odetniesz potrzebne fragmenty gra­fiki. Polecenie to można z powodzeniem stosować wraz z innymi narzędziami słu­żą­cy­mi do zmiany wymiarów obszaru roboczego, takich jak Crop (Kadrowanie) czy Can­vas Size (Wielkość obszaru roboczego). Zmień zatem wymiary obszaru roboczego tak, aby był większy niż to konieczne, wykonaj potrzebne zmiany i wybierz z menu polecenie ModifyTrim Canvas. No i proszę! Krawędzie obszaru roboczego przylegają dokładnie do znajdującej się w nim grafiki.

	Polecenie Trim Canvas może tylko zmniejszać wymiary obszaru robo­cze­go. Nie potrafi go natomiast powiększyć, gdy niektóre fragmenty gra­fiki wychodzą poza jego krawędzie.

Wybór nowego koloru obszaru roboczego

Chociaż kolor obszaru roboczego ustalasz już przy tworzeniu dokumentu, nie oznacza to, że w przyszłości nie będziesz mógł użyć innego. Możesz go zmieniać za pomocą po­le­cenia ModifyCanvas Color. Wywołanie tego polecenia spowoduje otwarcie okna dia­lo­gowego Canvas Color (rysunek 4.12), które jest kopią sekcji Canvas Color (Kolor ob­szaru roboczego) okna dialogowego New Document.

Rysunek 4.12. Rozwijany próbnik kolorów jest doskonałym narzędziem do szybkiego wybierania internetowego koloru dla obszaru roboczego

Masz trzy opcje do wyboru: White (Biały), Transparent (Przezroczysty) i Custom (Własny). Kliknięcie strzałki znaj­du­jącej się obok próbki koloru spowoduje otwarcie próbnika 216 kolorów bezpiecznych dla Internetu. Gdy klikniesz znajdujący się tam przycisk Palette, będziesz mógł wybrać do­wolny odcień z systemowego próbnika kolorów.

	Jeśli otworzysz dokument Photoshopa lub Fireworks 1.0, utworzona zo­stanie warstwa Background wypełniona jednolitym kolorem. Możesz ukryć tę warstwę, klikając ikonę Show/Hide Layer (Pokaż/Ukryj war­stwę) znajdującą się obok jej nazwy w palecie Layers. Będziesz mógł wów­czas zobaczyć rzeczywisty kolor obszaru roboczego.

Obracanie obszaru roboczego

Gdy obracasz obiekty za pomocą narzędzi z grupy Transform (Przekształcanie), obszar ro­boczy cały czas pozostaje w tym samym miejscu. Jeśli obszar roboczy nie jest kwa­dra­tem, obrócenie grupy obiektów o 90 stopni może spowodować ich umieszczenie po­za jego granicami. Zamiast obracać obiekty, możesz obrócić cały obszar roboczy. Wybierz z menu polecenie ModifyRotate Canvas, a następnie jedną z dostępnych opcji: Rotate 180^º (Obróć o 180^º), Rotate 90^º CW (Obróć 90^º w prawo) lub Rotate 90^º CCW (Obróć 90^º w lewo).

Podsumowanie

Definiowanie własności dokumentu jest podstawą pracy w Fireworks. Obojętnie czy za­­czynasz od stworzenia zupełnie nowego dokumentu, czy też od otwarcia istniejącego pli­ku, Fireworks dostarczy Ci wszystkich narzędzi potrzebnych do zbudowania solid­nych podstaw i zmodyfikowania ich w razie konieczności. Przy definiowaniu własności do­kumentów, powinieneś pamiętać o następujących rzeczach:

• Im lepiej opracujesz sobie strategię tworzenia grafiki i zaprojektujesz obszar ro­boczy, tym mniej czasu spędzisz na późniejszych modyfikacjach.

• Przy tworzeniu nowych dokumentów, Fireworks pozwala na zdefiniowanie wy­sokości, szerokości, rozdzielczości w druku i koloru obszaru roboczego.

• Fireworks potrafi otwierać wiele różnych formatów plików, wliczając te naj­częś­ciej stosowane, takie jak pliki TIFF, FreeHanda i Photoshopa.

• Możesz otwierać wiele plików jedno­cześnie.

• Aby wykorzystać jak najwięcej możliwości Fireworks, co najmniej jedną wer­sję pliku zawsze zapisuj w jego formacie źródłowym - PNG.

• Wielkość obszaru roboczego możesz modyfikować za pomocą jednej z trzech me­tod: Canvas Size (Wielkość obszaru roboczego), narzędzia Crop (Ka­dro­wa­nie) lub Trim Canvas (Przytnij obszar roboczy).

• W każdej chwili możesz obrócić obszar roboczy lub zmienić jego kolor.

W kolejnym rozdziale zaczniesz poznawać najważniejsze elementy grafiki tworzonej w Fire­works - obiekty.




Część II
Praca z narzędziami




Rozdział 5.
Tworzenie obiektów wektorowych

W tym rozdziale:

• Podstawowe pojęcia dotyczące obiektów wektorowych.

• Tworzenie kształtów geometrycznych.

• Swobodne rysowanie za pomocą narzędzi Pencil i Brush.

• Tworzenie krzywych Béziera.

Obiekty wektorowe są najważniejszymi elementami w Fireworks. Nie zrozum mnie źle: wszystkie in­ne elementy - obiekty bitmapowe, efekty i wiele innych - również są istotne, ale to właśnie obiek­ty wektorowe zapewniają Fireworks taką elastyczność, precyzję i możliwość edycji na do­wol­nym etapie pracy. Odróżniają one Fireworks od innych współczesnych programów gra­ficz­nych, takich jak Adobe Photoshop lub ImageReady.

Zapewne domyślasz się, że wiele narzędzi i funkcji Fireworks skupionych zostało właś­nie na tworzeniu obiektów wektorowych. Ten rozdział opisuje podstawowe operacje, któ­re możesz na nich wykonać: tworzenie prostych geometrycznych kształtów, linii o do­­wolnych kształtach i rysunków. Nauczysz się także tworzyć obiekty najtrudniejsze, ale przynoszące najwięcej satysfakcji - krzywe Béziera.

Obiekty wektorowe w Fireworks

Obiekt XE "obiekt" wektorowy to w języku Fireworks - swobodna grafika XE "ścieżka" wektorowa. Grafiki wektorowe są również zwane ścieżkami lub, po prostu, rysunkami. W odróżnieniu od gra­fik bitmapowych, które do stworzenia obrazka używają rzędów pikseli, obiekty wektorowe wykorzystują li­nie, a właściwie ich opisy matematyczne. Zamiast nanosić na ekran grupy pikseli, grafika wek­torowa mówi „narysuj linię łączącą punkt o współrzędnych (X, Y) z punktem o współ­rzędnych (A, B) albo „narysuj okrąg o środku w punkcie o współrzędnych (C, D) i średnicy 4 cm”. Oczywiście, instrukcji takich nie będziesz widział na ekranie, gdyż są ukryte w algorytmach tworzących grafikę. Są one jednak elementem umożli­wia­jącym wielu programom wektorowym, takim jak FreeHand i Adobe Illustrator, ska­lo­wanie grafiki z jednoczesnym utrzymaniem jej wysokiej jakości.

Struktura obiektów wektorowych Fireworks jest oparta na wektorach, ale ich powłoki (obrys, wypeł­nie­nie) są tworzone z pikseli. Takie działanie może wydawać się dość sprzeczne, ale jest tym, co czyni Fireworks gwiazdą wśród programów graficznych. Ilekroć zmo­dy­fi­ku­jesz jakiś obiekt wektorowy - na przykład pochylisz prostokąt - Fireworks najpierw zastosuje zmia­ny do jego ścieżki wektorowej, a następnie zaktualizuje jego powłokę składającą się z pikseli. To tak, jakby obrazek tancerki w czasopiśmie nagle ożył, przeskoczył na dru­gą stronę sceny i ponownie stał się zwykłym obrazkiem.

Ścieżki

Podstawowymi elementami obiektów wektorowych są ścieżki XE "ścieżka" (ang. paths XE "path" ). Są to linie łączące ze sobą dwa różne punkty. Gdy narysujesz nieregularną linię za pomocą narzędzia Pencil (Ołó­wek) lub gwiazdę za pomocą narzędzia Polygon (Wielokąt), kontur utworzonego obiek­tu jest właśnie ścieżką. Chociaż Fireworks wyróżnia ścieżki wybrane do edytowania, same ścieżki są niewidoczne i nie pojawiają się w eksportowanym obrazku (rysunek 5.1).

Stosowanie obrysów

Aby ścieżka stała się widzialna, musisz zastosować do niej obrys XE "obrys" (ang. stroke XE "stroke" ). Naj­szyb­szą metodą jest zaznaczenie obiektu i wybranie koloru za pomocą próbki koloru Stroke, znajdującej się w palecie narzędziowej i mikserze kolorów. Spowoduje to za­sto­so­wanie do obiektu konturu typu Pencil o szerokości jednego piksela z wygładzonymi kra­wędziami. Obrysy mogą się różnić kategorią, kolorem, szerokością i teksturą. Kilka ich przykładów przedstawia rysunek 5.2. Zauważ, że niezależnie od atrybutów obrys zaw­sze ma taki sam kształt jak ścieżka obiektu wektorowego, do której został zastosowany.

Rysunek 5.1. Do tej ścieżki nie zastosowano obrysu ani wypełnienia i widoczna jest tylko po wybraniu jej do edytowania. Podgląd po prawej pokazuje, że w wersji ostatecznej sama ścieżka jest niewidoczna w Fireworks
		Jedną z cech czyniących Fireworks tak dobrym programem graficznym jest obszerny zestaw różnych obrysów. Więcej przeczytasz o nich w rozdziale 8.
Rysunek 5.2. Ta sama ścieżka z różnymi obrysami

None — Żaden

Pencil — Ołówek

Air Brush — Aerograf

Unnatural — Nienaturalny

Ścieżki otwarte i zamknięte

Istnieją dwa typy ścieżek: otwarte i zamknięte. Różnica pomiędzy nimi jest prosta: zam­knię­ta ścieżka łączy dwa punkty końcowe (początek i koniec linii), zaś ścieżka otwarta ich nie łączy. Zamknięte ścieżki definiują różne kształty: standardowe, takie jak koła lub wielokąty lub niestandardowe, takie jak odręczne rysunki. Podczas gdy ob­rys tworzy kontur ścieżki, wypełnienie (ang. fill) czyni widocznym wnętrze ścieżki. Po­dobnie jak obrysy, wypełnienia mogą mieć wiele różnych typów, kolorów i tekstur. Ja­ko wypełnień można również używać deseni (ang. patterns) zapisanych w plikach PNG. Wolno Ci nawet modyfikować stopień rozmycia krawędzi wypełnienia. Jak zo­sta­ło pokazane na rysunku 5.3, wypełnienie zawsze dostosowuje się do wnętrza ścież­ki.

Rysunek 5.3. Obiekty mogą być wypełniane jednolitym kolorem, gradientem lub deseniem

Selected with no fill — Zaznaczony do wypełnienia

Solid fill — Wypełniony jednym kolorem

Paterrn fill — Wypełniony wzorkiem

Gradirnt fill — Wypełniony gradientem

Mimo że wypełnienia są najczęściej stosowane do zamkniętych ście­żek wektorowych, można je z powodzeniem stosować także do ścieżek otwartych, choć rezultaty nie są już wówczas tak łatwe do przewidzenia. W takich sy­tuacjach przyda Ci się doskonała cecha grafiki komputerowej - wy­próbuj wypełnienie i jeśli Ci się nie spodoba - usuń je.

Punkt środkowy

Wszystkie obiekty Fireworks mają jedną wspólną cechę - punkt środkowy XE "punkt środkowy" . W przypadku obiektów wektorowych jest to nie­wi­dzialny punkt znajdujący się w środku każdej ścieżki. Jeżeli ścieżka jest otwarta, punkt środkowy znajduje się na linii, jeśli ścieżka jest zamknięta - w środku obiektu. Punk­ty środkowe obiektów wykorzystywane są przy ich obracaniu. Po wyświetleniu uch­wytów transformacji możesz również zmienić położenie punktu środkowego, aby obra­cać obiekt względem innej osi lub zmienić sposób wyrównywania go względem in­nych obiektów.

	Więcej informacji o obracaniu obiektów znajdziesz w rozdziale 9.

Kierunek

Ostatnią rzeczą, jaką powinieneś wiedzieć o obiektach wektorowych jest to, że ich ścieżki posiadają okre­ślony kierunek. Wydaje się to bardziej oczywiste w przypadku obiektów takich jak li­nie, które są rysowane od jednego punktu do drugiego, ale sprawdza się również dla pro­stokątów i elips. Zwykle, Fireworks rysuje obiekty wektorowe w kierunku zgodnym z ruchem wska­zówek zegara, rozpoczynając od górnego lewego wierzchołka prostokąta lub kwa­dra­tu i od punktu położonego w środku obwodu po lewej stronie elipsy lub koła (ry­su­nek 5.4). Kierunek ścieżki jest istotnym parametrem przy przydzielaniu tekstu do ścież­ki, na przykład - owijania hasła reklamowego wokół okręgu. Fireworks posiada kilka na­rzę­dzi do modyfikowania kierunku ścieżek.

Rysunek 5.4. Kierunek ścieżki określa sposób przydzielania do niej obiektów tekstowych

Kształty

Większość dokumentów Fireworks składa się z wielu obiektów wektorowych o różnych kształtach, ko­lo­rach, rozmiarach i atrybutach. Rysowanie kształtów wydaje się dość proste, ale żeby w krót­kim czasie uzyskać jak najlepszy efekt, musisz poznać zasady tworzenia wszys­tkich podstawowych elementów.

Fireworks posiada narzędzia do tworzenia kilku podstawowych geometrycznych kształ­tów: prostokątów, elips i wielokątów oraz bardziej złożonych struktur i linii o swobod­nych kształtach. Zasady działania tych narzędzi powinny być znane każdemu, kto już wcześ­niej pracował w innych programach wektorowych. W tym rozdziale jednak są zawar­te również wskazówki dla zupełnych nowicjuszy. I nawet jeśli nigdy wcześniej nie używałeś komputera do rysowania, po przeczytaniu tego rozdziału będziesz doskonale znał wszys­tkie podstawowe narzędzia rysunkowe Fireworks.

	Jeśli masz dostęp do tabletu graficznego, nie obawiaj się używać go. Za pomocą piórka i tabletu rysowanie jest o wiele łatwiejsze niż za po­mo­cą myszy.

Najszybszą metodą tworzenia projektów stron WWW, a zwłaszcza często spotykanych przy­cisków nawigacyjnych, jest wykorzystanie narzędzi Fireworks do tworzenia kształ­tów geometrycznych. Na pierwszy rzut oka są to jedynie cztery proste narzędzia: Rectan­gle (Prostokąt), Rounded Rectangle (Prostokąt z zaokrągleniem), Ellipse (Elipsa) i Polygon (Wielokąt), ale posiadają one wiele opcji poz­wa­la­jących na tworzenie bardzo zróżnicowanych obiektów.

	Warto skorzystać z panelu Info podczas rysowania czy edytowania obiektów wektorowych. Panel Info podaje informacje o szerokości i wysokości rysowanych obiektów w pikselach, co ułatwia tworzenie np. kwadratu 50x50 pikseli. Informuje również o pozycji obiektów, nad którymi pracujemy, w obszarze roboczym.

Prostokąty i kwadraty

Definicja prostokąta w moim słowniku brzmi „figura geometryczna posiadająca cztery bo­ki i cztery kąty proste”. Przez projektantów prostokąt jest postrzegany jako pod­sta­wo­wy „klocek” używany w projektowaniu grafiki, który może być wyświetlany w gra­ni­cach prostokątnego okna przeglądarki internetowej. Narzędzia Rectangle XE "Rectangle" (Prostokąt) i Rounded Rectangle (Prostokąt z zaokrągleniem) są proste w użyciu i oferują wiele przydatnych opcji.

Funkcje obydwu narzędzi Rectangle są takie same. Wszystko co można zrobić z jednym, można również zrobić z drugim. Jedyna różnica polega na tym, że prostokąt narysowany przy użyciu narzędzia Rounded Rectangle ma zaokrąglone narożniki, a narzędzie Rectangle XE "Rectangle" tworzy prostokąt o kątach prostych.

Tworzenie prostokątów

Podobnie jak w przypadku większości innych programów rysunkowych, Fireworks two­rzy prostokąty z wykorzystaniem metody „kliknij i przeciągnij”. Aby narysować tę fi­gu­rę w Fireworks:

7. Wybierz narzędzie Rectangle z palety narzędziowej lub wciśnij klawisz R.

8. Kliknij myszą, aby stworzyć pierwszy wierzchołek prostokąta i przeciągnij do miej­sca, w którym chcesz umieścić przeciwległy wierzchołek (rysunek 5.5). W czasie przeciągania myszą Fireworks będzie wyświetlał podgląd konturu pow­­stającego kształtu.

Rysunek 5.5. Najpierw kliknij narzędziem Rectangle, aby stworzyć początkowy wierzchołek prostokąta, a następnie przeciągnij myszą w dowolnym kierunku (reprezentowanym na rysunku za pomocą strzałki)

Starting point — Punkt początkowy

35. Zwolnij przycisk myszy, gdy prostokąt uzyska pożądane rozmiary i kształt. Je­śli wcześniej został określony jakiś obrys lub wypełnienie, atrybuty te zostaną za­stosowane po zwolnieniu przycisku myszy.

Klawisze modyfikujące

Wraz z narzędziem Rectangle lub Rounded Rectangle można wykorzystywać dwa klawisze modyfikujące XE "klawisze modyfikujące" (mo­dy­fikatory): Shift i Alt (Option). Zmieniają one tryb działania narzędzia.

• Aby narysować kwadrat: Jeśli w czasie rysowania narzędziem Rectangle wciś­niesz klawisz Shift, będziesz mógł narysować kwadrat. W przeciwieństwie do innych programów graficznych, nie musisz wciskać klawisza Shift przed roz­poczęciem rysowania. Wciśnięcie Shift na dowolnym etapie rysowania spo­wo­duje wydłużenie przez Fireworks krótszych boków prostokąta tak, aby do­pa­sować je do dłuższych boków i utworzyć kwadrat.

• Aby rysować od środka prostokąta: Aby rysowanie prostokąta rozpocząć od je­go środka zamiast od wierzchołka, wciśnij w czasie przeciągania myszą kla­wisz Alt (Option). Po wciśnięciu tego modyfikatora, Fireworks traktuje od­le­głość od wierzchołka prostokąta do pozycji kursora jako promień, a nie jako śred­nicę kształtu. Podobnie jak w przypadku klawisza Shift, klawisz Alt (Op­tion) możesz wcisnąć na dowolnym etapie rysowania (rysunek 5.6).

Rysunek 5.6. Wciśnięcie klawisza Alt (Option) umożliwia rysowanie kształtów od środka

Starting point — Punkt początkowy

Możesz oczywiście użyć również kombinacji obu klawiszy: Shift i Alt (Op­tion), aby rysować kwadraty od środka.

W czasie rysowania prostokąta, w palecie Info możesz sprawdzać współrzędne jego po­ło­żenia. W jednej z sekcji tej palety wyświetlane są aktualne wartości szerokości (W) i wy­sokości (H) kształtu, zaś w innej współrzędne lewego górnego wierzchołka pros­to­ką­ta (nawet, jeśli jest rysowany od środka).

Tworzenie zaokrąglonych narożników

Kwadraty i koła to podstawowe kształty, które są bardzo użyteczne dla projektantów. Fireworks oferuje dodatkowo wygodny i przydatny kształt, jakim jest coś pośredniego — Rounded Rectangle (Prostokąt z zaokrągleniem). Prostokąty tworzone za pomocą narzędzia Rectangle mają kąty proste, natomiast narzędzie Rounded Rectangle tworzy prostokąty o narożnikach zaokrąglonych. Najbardziej typowym zastosowaniem dla takich prostokątów jest tworzenie bardziej estetycznych przycisków. Zaokrąglone narożniki kwadratów i prostokątów mogą być również przydatne przy tworzeniu ładniejszej grafiki.

Narzędzie Rounded Rectangle jest nowością w Fireworks 4, która ułatwia tworzenie użytecznych i wygodnych kształtów prostokątów z zaokrąglonymi narożnikami.

Chociaż nie można określić stopnia zaokrąglenia tworzonego przez narzędzie Rounded Rectangle, można jednak, dla już stworzonych prostokątów, zmieniać ustawienia Roundness dostępne z palety Object (Obiekt) po wybraniu Rectangle. Paletę Object można wyświetlić, wybierając WindowObject lub korzystając ze skrótu klawiaturowego Alt+F2 (Option+F2).

W palecie Object, wpisując wartość w polu tekstowym Roundness lub przeciągając su­wak Roundness możesz zdefiniować stopień zaokrąglenia narożników prostokąta. Za­okrą­glenie narożników podawane jest w wartościach procentowych: 0 oznacza zwykły pros­tokąt o kątach prostych, zaś wartość 100 tworzy całkowicie zaokrąglony prostokąt, czyli okrąg. Jak po­kazano na rysunku 5.7, im większa wartość parametru Roundness, tym bardziej za­okrą­gla­ne są narożniki prostokąta.

Postaram się teraz wytłumaczyć, jak Fireworks wykorzystuje wartości procentowe po­da­wane w polu Roundness do zaokrąglania narożników.

Rysunek 5.7. Wybieramy prostokąt i korzystamy z parametru Roundness, aby zdefiniować stopień zaokrąglenia narożników prostokąta lub kwadratu

30% (default) — 30% (ustawienie domyślne)

Roundness setting — Ustawienie Roundness (Zaokrąglenie)

Załóżmy, że rysujesz prostokąt o sze­rokości 100 i wysokości 50 pikseli, a zaokrąglenie jego narożników ustawisz na 50%, jak pokazano na rysunku 5.8.

Rysunek 5.8. Fireworks rysuje zaokrąglone narożniki prostokąta na podstawie podanych wartości procentowych

Standard rectangle — Zwykły prostokąt

Arc points for corner — Punkty końcowe łuku tworzącego zaokrąglenie narożników

Rounded rectangle — Prostokąt z zaokraglonymi narożnikami

Fireworks roz­po­czyna rysowanie narożników w odle­głości 50 pikseli od górnej kra­wę­dzi (50% ze 100 pikseli to 50 pikseli) i 25 pikseli od bocznych krawędzi prostokąta (50% z 50 pikseli to 25 pikseli). Powstaje w ten spo­sób łuk tworzący zaokrąglenie narożników. Jeśli utworzysz elipsę o średnicy poziomej wy­noszącej 50 pikseli i średni­cy pionowej 25 pikseli, powinna ona dokładnie pasować do zaokrąglonych narożników prostokąta.

Elipsy i okręgi

Elipsy i okręgi są tworzone w Fireworks w ten sam sposób, jak prostokąty i kwadraty. Klik­nięcie myszą powoduje ustalenie punktu początkowego, a następnie tworzy kształt w czasie przeciągania. Nawet klawisze modyfikujące Shift i Alt (Option) działają tak sa­mo, jak w przypadku prostokątów. Pomiędzy narzędziem Ellipse XE "Ellipse" a narzędziami Rectangle istnieją dwie zasadnicze różnice. Po pierwsze - oczywistym jest, że dla elips nie ma funkcji poz­walającej zaokrąglać narożniki, gdyż same w sobie są one zaokrąglone. Po drugie (róż­nica mniej wyraźna, ale godna uwagi) - punkt początkowy elipsy lub okręgu nigdy nie pojawia się na ścieżce obiektu. Ma to znaczenie dla początkujących grafików, któ­rzy będą próbowali umieścić elipsę w określonym położeniu.

Wykorzystywanie ramki ograniczającej obiektu

Przy rysowaniu elipsy, Fireworks używa pomocniczej ramki ograniczającej (rysunek 5.9). Punkt początkowy takiej ramki działa jak pierwszy narożnik, zaś punkt końcowy
- jak przeciwległy. Analogicznie do przypadku prostokąta, po wciśnięciu klawisza Alt (Op­tion) jako punkt początkowy używany jest środek obiektu. W obu sytuacjach, za­rów­no punkt początkowy, jak i końcowy nie są położone na ścieżce elipsy. W czasie prze­cią­gania powstaje prostokąt, a po zwolnieniu myszy Fireworks umieszcza elipsę wew­nątrz wyznaczonego prostokąta.

Rysunek 5.9. Podczas rysowania okręgów lub elips za pomocą narzędzia Ellipse, Fireworks tworzy pomocniczą ramkę ograniczającą, reprezentowaną prostokątem zbudowanym z przerywanej linii

Starting point — Punkt początkowy

Bounding box — Ramka ograniczająca

Ellipse — Elipsa

Ending point — Punkt końcowy

Znajomość zasad działania ramek ograniczających przydaje się zwła­sz­cza przy wyrównywaniu elips o różnych wymiarach. Polecenie Align i przy­ciąganie obiektów do siatki dokumentu wykorzystują ramki ogra­ni­czające zamiast rzeczywistych ścieżek.

Rysowanie elipsy lub okręgu

Jeśli chcesz narysować elipsę lub okrąg:

9. Wybierz narzędzie Ellipse. Gdy jest ono niewidoczne, klik­nij i przytrzymaj narzędzie Rectangle, Rounded Rectangle lub Polygon. Zostanie rozwinięta grupa narzędzi, z której będziesz mógł wybrać Ellipse.

	Możesz również wciskać klawisz R, aż zostanie wybrane narzędzie El­li­p­se. Skrót klawiaturowy R przełącza narzędzia pomiędzy kształtami.

36. Kliknij, aby ustalić punkt początkowy. Przeciągając go do przeciwległego wierz­choł­ka, utworzysz elipsę. W trakcie przeciągania myszą Fireworks będzie wy­świe­tlał podgląd konturu kształtu.

37. Zwolnij przycisk, gdy elipsa uzyska pożądany rozmiar i kształt. Jeśli wcześniej zos­tał określony jakiś obrys lub wypełnienie, atrybuty te zostaną zastosowane po zwolnieniu przycisku myszy.

38. Aby narysować okrąg, wciśnij w trakcie rysowania elipsy klawisz Shift.

39. Aby rysować elipsę lub okrąg od środka, wciśnij klawisz Alt (Option) w trakcie prze­ciągania.

W celu narysowania idealnego koła lub kwadratu, zaczynając od ich środka, należy użyć kombinacji klawisza Alt (Option) i klawisza modyfikacji Shift.

Wielokąty i gwiazdy

Narzędzie Polygon XE "Polygon" tworzy obiekty składające się z wielu równych boków i kątów. Tech­niczny termin określający taki rodzaj figury geometrycznej to wielokąt rów­no­bocz­ny. Fireworks umożliwia tworzenie wielokątów posiadających od 3 do 25 boków. Na­rzę­dzie Polygon można wykorzystywać także do tworzenia specjalnego rodzaju wielo­ką­tów - gwiazd. Gwiazda tworzona w Fireworks może mieć od 3 do 25 węzłów (czyli od 6 do 50 boków). Co więcej, Fireworks umożliwia określenie kątów pomiędzy bokami gwiaz­dy lub pozostawienie tych obliczeń programowi.

Technika „przeciągnij i rysuj”

Podobnie, jak w przypadku prostokątów i elips, wielokąty również mogą być tworzone za pomocą techniki „przeciągnij i rysuj”. Kliknij myszą, aby ustalić położenie począ­tko­we­go punktu. Przeciągając go narysujesz kształt. Na tym jednak kończą się podo­bień­stwa w tworzeniu tych obiektów. W wielokątach punktem początkowym może być je­dy­nie śro­dek obiektu. Nie można wykorzystywać klawiszy modyfikujących pozwalających zmie­nić położenie punktu początkowego. Podczas rysowania pierwszego wielokąta zau­wa­żysz także, że możesz łatwo ustawiać wymiary i obrót kształtu. Przeciąganie wskaź­ni­ka od punktu początkowego powoduje zwiększanie wielokąta. Przeciąganie od lewej do prawej i odwrotnie obraca wielokąt względem jego środka.

Rysowanie wielokątów

Aby narysować wielokąt:

10. Wciśnij i przytrzymaj przycisk Rectangle, Rounded Rectangle lub Ellipse i z rozwi­ja­nej grupy wybierz narzędzie Polygon (Wielokąt). Możesz także użyć skrótu kla­wiaturowego R.

11. Aby ustawić liczbę boków wielokąta:

• Wybierz z menu polecenie WindowTool Options lub kliknij dwukrotnie na­rzędzie Polygon w palecie narzędziowej, aby otworzyć paletę Tool Op­tions (rysunek 5.10).

Rysunek 5.10. Wielokąty tworzone w Fireworks mogą mieć maksymalnie 25 boków. Jednak każdy wielokąt foremny posiadający więcej niż 15 boków zaczyna wyglądać jak okrąg

• Upewnij się, że w palecie Tool Options w liście rozwijanej Shape wybrana jest opcja Polygon (a nie Star).

• Wpisz liczbę boków w polu tekstowym Sides lub ustaw ją za pomocą su­wa­ka Sides.

40. Kliknij i przytrzymaj przycisk myszy w miejscu, w którym chcesz umieścić śro­dek wielokąta, a następnie przeciągnij, aby utworzyć kształt. Fireworks w trak­cie przeciągania będzie wyświetlał podgląd tworzonego kształtu.

41. Przesuwając mysz z lewej strony na prawą lub odwrotnie, możesz odpo­wied­nio obrócić wielokąt.

42. Po ustaleniu kształtu, rozmiaru i obrotu wielokąta zwolnij przycisk myszy. Fire­works narysuje wielokąt przy użyciu bieżących ustawień obrysu i wypeł­nienia.

Odległość pomiędzy punktem początkowym a punktem, w którym zwolnisz przycisk my­szy jest interpretowana przez Fireworks jako promień mierzony od środka do każ­de­go węzła wielokąta. Na rysunku 5.10 możesz zobaczyć, że zmiana liczby boków umo­żli­wia tworzenie wielu różnych kształtów.

Wciśnięcie klawisza Shift pozwala na ograniczenie kąta obrotu wielokąta do wielo­krot­noś­ci 45º. Ponieważ jednak każdy tworzony wielokąt ma początkowo wszystkie boki i ką­ty równe, zaobserwujesz jedynie różne odmiany każdego typu wielokąta. Gdy bę­dziesz rysował sześciokąt i za pomocą klawisza Shift ograniczysz kąt jego obrotu, zaob­ser­wujesz jedynie trzy wielokąty obrócone pod różnymi kątami, choć w rzeczywistości mo­­żesz utworzyć osiem modyfikacji tego kształtu (w pełnym kącie 360º mieści się osiem wielokrotności kąta 45º).

	W przypadku większości wielokątów, możesz je tak rysować, aby dol­na krawędź kształtu była równoległa do dolnej krawędzi obszaru ro­bo­cze­go. Wystarczy w tym celu dopasować kąt obrotu wielokąta, wyko­rzys­tując do tego klawisz modyfikujący Shift.

Automatyczne kąty

Mimo że dla wielokąta możesz zdefiniować nawet 25 boków, wielokąty o większej ilości boków niż 15 mają już wygląd zbliżony do okręgu. Inaczej jest w przypadku gwiazd, za pomocą których (przy odpowiednich ustawieniach kątów) można tworzyć do­skonale wyglądające grafiki składające się z wielu boków. Fireworks umożliwia au­to­matyczne albo ręczne definiowanie kątów wybranego kształtu. Gdy zaznaczona jest op­cja Automatic Angles (Automatyczne kąty), Fireworks w czasie rysowania automatycznie usta­wia przeciwległe ramiona gwiazdy. W przypadku pięcioramiennej gwiazdy (ry­su­nek 5.11), wyrównane zostaną jej ramiona - lewe i prawe.

Rysunek 5.11. Przy zaznaczonej opcji Automatic Angle, przeciwległe ramiona gwiazdy są automatycznie wyrównywane

Five-pointed star — Gwiazda pięcioramienna

Jak można zauważyć na rysunku 5.11, automatycznie ustawiane kąty po zdefiniowaniu wie­lu boków mogą powodować tworzenie wielokątów o nieostrych wierzchołkach. Two­rzone w takich kształtach kąty nazywane są rozwartymi. Kąt rozwarty to kąt więk­szy niż 90⁰. Przeciwieństwem kąta rozwartego jest kąt ostry. Kąty ostre powodują two­rze­nie wielokątów o ostrych wierzchołkach (rysunek 5.12). Aby stworzyć gwiazdę o os­trych kątach, musisz wprowadzić odpowiednią wartość w polu Angle.

Rysunek 5.12. Aby utworzyć gwiazdę o ostrych wierzchołkach, wybierz opcję Star z listy rozwijanej Shape znajdującej się w palecie Tool Options i wpisz małą wartość parametru Angle

Tworzenie gwiazdy

Aby utworzyć gwiazdę w Fireworks:

12. Tak samo jak przy rysowaniu wielokąta, kliknij i przytrzymaj przycisk Rectan­gle, Rounded Rectangle lub Ellipse w palecie narzędziowej i z rozwijanej grupy wybierz narzędzie Polygon. Mo­żesz również przyciskać klawisz skrótu R, aż pojawi się narzędzie Polygon.

Precyzyjne ustawianie wymiarów i położenia kształtów Jak każdy inny typ grafiki, tak i internetowa jest połączeniem kreacji ar­ty­stycznej i pre­cyzji. Dla wielu projektów, obrazek nie jest ukoń­czo­ny, dopóki znajdujące się na nim obiekty nie zostaną właściwie roz­miesz­czone. Inter­fejs Fireworks pozwala na bardzo intuicyjne rysowanie za po­mocą myszy lub tabletu graficznego, ale oferuje również funkcje umo­żliwiające numeryczne dostosowanie wymiarów i położeń obiek­tów po­przez paletę Info. Zwykle wykorzystuję paletę Info do podglądania wymiarów lub współ­rzęd­nych X i Y obiektów. Czasem jednak muszę stworzyć prostokąt o pre­cyzyjnie usta­lonych parame­trach, dajmy na to - o szerokości 205 pikseli i wysokości 166 pikseli położony 20 pikseli od lewej i 35 pik­seli od dolnej krawędzi ob­szaru roboczego. W Fireworks mo­żesz wstęp­nie naszkicować kształt, a później numerycznie dostosować jego wymiary i położenie. Wartości repre­zentujące wymiary i współ­rzęd­ne położenia ramki ogranicza­jącej obiektu można wprowadzać do czterech pól tekstowych znajdujących się w pale­cie Info. Jeżeli obiekt bę­dzie na przykład okręgiem lub trójkątem, w palecie Info wyświe­tla­ne będą wartości wysokości i szerokości prostokąta opisanego na obiekcie. Aby określić nowe wymiary i położenie obiektu: Zaznacz obiekt, który chcesz zmodyfikować. Kliknij dwukrotnie wartość w palecie Info, którą chcesz zmienić. Do wyboru są: W (width - szerokość) H (height - wysokość) X (położenie w poziomie) Y (położenie w pionie) Wpisz nową wartość. Zatwierdź wprowadzone dane poprzez wciśnięcie klawisza Enter (Return) - nie Tab. Fireworks zmodyfikuje zaznaczony obiekt. Aby zmienić inną wartość, powtórz kroki od 2 do 4. Pamiętaj, że oprócz funkcji palety Info istnieje w Fireworks wiele innych narzędzi poz­walających na wyrównywanie i przekształcanie obiektów.

1. Wybierz z menu polecenie WindowTool Options lub kliknij dwukrotnie na­rzę­dzie Polygon, aby otworzyć paletę Tool Options.

46. W palecie Tool Options wybierz opcję Star z rozwijanej listy Shape.

47. Aby zmienić liczbę wierzchołków gwiazdy, wpisz nową wartość w polu teks­to­wym Sides lub przeciągnij suwak Sides.

48. Aby zmienić kąty pomiędzy ramionami gwiazdy, wpisz wartość w polu teks­to­wym Angle lub przeciągnij suwak Angle.

Niskie wartości parametru Angle powodują tworzenie ostrych wie­rz­choł­ków gwiazdy i odwrotnie, im wyższe wartości parametru Angle, tym mniej ostre wierzchołki gwiazdy.

49. Jeśli chcesz wykorzystać predefiniowane w Fireworks wartości kątów gwiaz­dy, zaznacz opcję Automatic.

50. Kliknij w obszarze roboczym, aby zdefiniować punkt środkowy i przeciągnij, że­by ustalić pożądane rozmiary i kąt obrotu gwiazdy.

51. Zwolnij przycisk myszy. Jak w przypadku innych kształtów, Fireworks za­sto­su­je do gwiazdy bieżące parametry obrysu, wypełnienia i efektów.

Rysowanie linii i ścieżek
o dowolnych kształtach

Narzędzia do tworzenia ścieżek Fireworks różnią się od siebie głównie tym, że poz­wa­la­ją na tworzenie różnych wektorowych struktur. Z jednej strony istnieje narzędzie Line XE "Line" (Li­nia), które rysuje jedynie linie proste, zaś po drugiej stronie mamy narzędzia Pencil XE "Pencil" (Ołó­wek) i Brush XE "Brush" (Pędzel) służące do „odręcznego” rysowania. Narzędziem pośrednim jest Pen XE "Pen" (Pióro), które umożliwia tworzenie precyzyjnych krzywych.

Podobnie jak w przypadku kształtów geometrycznych, ścieżki są niewidoczne, dopóki nie zastosujesz do nich określonego obrysu. Ścieżka jest zam­knięta, gdy połączone zostaną dwa definiujące ją punkty. Gdy podczas rysowania ścież­ki punkty początkowy i końcowy znajdą się na tyle blisko siebie, że będą mogły zos­tać połączone, zmieni się kształt kursora. W przeciwieństwie do większości pro­gra­mów wektorowych, Fireworks pozwala na stosowanie wypełnień zarówno do ścieżek ot­wartych, jak i zamkniętych (lecz w przypadku ścieżki otwartej wynik zastosowania wy­pełnienia może nie być całkiem zgodny z intencją twórcy - przyp. red.).

Linie XE "linie" proste

Najprostszym narzędziem w całej palecie narzędziowej Fireworks jest prawdopodobnie Li­ne (Linia). Kliknij, aby ustalić początkowy punkt linii. Przeciągnij w dowolnym kie­run­ku i zwolnij przycisk myszy, ustalisz punkt końcowy. Dwa punkty i łącząca je linia - to wszystko, co pozwala utworzyć narzędzie Line. Proste linie są z definicji ścieżkami ot­wartymi, zatem mogą wyświetlać jedynie obrysy i nie uwzględniają ustawień wy­peł­nie­nia. Do ścieżek tworzonych za pomocą narzędzia Line można stosować efekty i style (ry­sunek 5.13).

Rysunek 5.13. Narzędzie Line rysuje linie proste, do których można stosować obrysy, a nawet efekty

Selected line — Zaznaczona linia

Basic stroke — Obrys Basic (Podstawowy)

Air Brush stroke — Obrys Air Brush (Aerograf)

With effect applied — Zastosowany efekt

With Style applied — Zastosowany styl

Aby użyć narzędzia Line:

15. Wybierz narzędzie Line lub użyj skrótu klawiaturowego N.

16. Umieść kursor w miejscu, w którym chcesz wstawić początkowy punkt linii, a na­stępnie kliknij i przeciągnij. Możesz wcisnąć klawisz Shift, aby rysować li­nie o kącie nachylenia ograniczonym do wielokrotności 45º.

Wciśnięcie klawisza Shift w trakcie rysowania przy użyciu narzędzia Line pozwala tylko na rysowanie idealnych linii pionowych lub poziomych. Wiele narzędzi do rysowania korzysta z klawisza modyfikującego Shift, w celu ułatwienia rysowania typowych kształtów.

17. Zwolnij przycisk myszy, gdy linia uzyska pożądaną długość i nachylenie.

Odręczne rysowanie za pomocą narzędzi Pencil i Brush

Pencil XE "Pencil" (Ołówek) i Brush XE "Brush" (Pędzel) także są narzędziami typu „przeciągnij i rysuj”, ale nie ma­ją ograniczeń, jakie narzucają inne. Za ich pomocą możesz narysować wszystko, co jes­teś w stanie odwzorować z użyciem myszy lub tabletu graficznego. W czasie prze­su­wa­nia kursora po ekranie, Fireworks śledzi te ruchy i rysuje krzywe. Pamiętaj, że zaw­sze będą to obiekty wektorowe (a nie bitmapowe) i jeśli narysujesz dokładnie prostą linię, Fire­works do jej odwzorowania użyje jedynie dwóch punktów. Wszystkie punkty tworzące krzy­wą mogą być edytowane: przesuwane, usuwane lub dodawane. Do wprowadzanych zmian dynamicznie dostosowany będzie kształt całej krzywej.

	Fireworks potrafi śledzić nie tylko kierunek przesuwania kursora po ekranie. Uwzględniana jest również prędkość przesuwania kursora. Może ona być zaznaczana przy wyświetlaniu niektórych typów obry­sów, takich jak Watercolor (Akwarele) i Charcoal (Węgiel). Więcej in­for­macji o obrysach znajdziesz w rozdziale 8.

Odręczne rysowanie za pomocą myszy nie jest prostym zadaniem i wielu artystów stara się go unikać. Osobiście preferuję tablet graficzny i przy każdej okazji polecam go in­nym grafikom. W przypadku skomplikowanych obrazków, takich jak ten na rysunku 5.14, doskonale sprawdza się narzędzie Brush. Wybranie jednego z obrysów uwzglę­dnia­jących nacisk na tablet graficzny lub prędkość przesuwania myszy umożliwia na­śla­dowanie wyglądu rysunków tworzonych piórkiem lub ołówkiem.

Rysunek 5.14. Odręczne rysowanie najlepiej jest wykonać za pomocą tabletu graficznego z wykorzystaniem narzędzia Brush z włączoną opcją pozwalającą uwzględnić nacisk na tablet

Paths with Calligraphy Quill Stroke — Scieżki z obrysem kaligraficznym Quill (Gęsie pióro)

Selected paths only — Scieżki tylko zaznaczone

Automatyczne stosowanie obrysów

Główna różnica pomiędzy narzędziami do odręcznego rysowania a wszystkimi pozo­sta­ły­mi narzędziami do tworzenia kształtów geometrycznych (włączając w to narzędzie Li­ne) jest taka, że narzędzia Pencil i Brush mogą automatycznie przyjmować określone ob­ry­sy, nawet jeśli żaden nie zostanie wybrany. Funkcja ta umożliwia oglądanie tworzonych ście­żek na bieżąco, a nie dopiero po wybraniu i zastosowaniu obrysu.

Ustawienia obrysu są również jedyną cechą odróżniającą od siebie narzędzia Pencil i Brush. Każda ścieżka utworzona za pomocą Pencil jest wyświetlana z wykorzystaniem ob­rysu typu Pencil o szerokości jednego piksela i „twardych” krawędziach, jak widać w pa­lecie Stroke przedstawionej na rysunku 5.15. Dzieje się tak nawet, gdy prede­fi­nio­wa­ny jest inny obrys.

Rysunek 5.15. Narzędzie Pencil umożliwia odręczne rysowanie kształtów, które zawsze korzystają z obrysu Pencil z ustawieniami pokazanymi w znajdującej się na rysunku palecie Stroke
		Jedynym wyjątkiem w predefiniowanych ustawieniach obrysu Pencil jest jego kolor. Jeśli go zmienisz, narzędzie Pencil będzie tworzyło ścież­ki w nowym kolorze.

Narzędzie Brush również używa jednopikselowego obrysu typu Pencil, ale tylko do cza­su, gdy nie wybierzesz innego ustawienia. Po wprowadzeniu nowych parametrów w palecie Stroke, będą one automatycznie stosowane do wszystkich ścieżek tworzonych za po­mo­cą narzędzia Brush.

Jak wspomniałem wcześniej, narzędzia Pencil i Brush umożliwiają tworzenie zarówno zam­kniętych, jak i otwartych ścieżek. Pamiętaj, że zamknięta ścieżka to taka, w której po­łączone są punkty początkowy i końcowy. W przypadku wielu narzędzi graficznych two­rzenie zamkniętych ścieżek jest dość trudną procedurą, ponieważ trudno jest umieś­cić jeden piksel dokładnie nad innym. Fireworks znacznie ułatwia tworzenie zam­knię­tych ścieżek. Gdy podczas rysowania ścieżki umieścisz kursor nad jej punktem po­cząt­ko­wym, wyświetlony zostanie mały, czarny kwadrat poniżej kursora, po jego prawej stronie. Jeśli zwol­nisz wówczas przycisk myszy, Fireworks zamknie ścieżkę.

Praca z narzędziami Pencil i Brush

Gdy zamierzasz użyć narzędzia Pencil lub Brush:

18. Aby rysować ołówkiem, wybierz narzędzie Pencil lub użyj skrótu klawiaturowego Y.

19. Aby rysować pędzlem, wybierz narzędzie Brush lub użyj skró­tu klawiaturowego B.

20. Kliknij i przeciągnij kursorem w obszarze roboczym. Fireworks dla narzędzia Pen­cil utworzy ścieżkę z obrysem o szerokości jednego piksela, zaś dla na­rzę­dzia Brush - ścieżkę z obrysem o parametrach ustalonych w palecie Stroke.

21. Aby rysować linie poziome lub pionowe, wciśnij w czasie przeciągania myszą kla­wisz Shift. Jeśli przeciągniesz od lewej do prawej lub odwrotnie, utworzona zos­tanie linia pozioma; jeśli przeciągniesz z góry na dół lub odwrotnie, pow­sta­nie linia pionowa.

Narzędzia Pencil i Brush mają dość osobliwą cechę. Jeśli wciśniesz klawisz Shift, aby ogra­niczyć rysowanie do poziomych i pionowych linii, a następnie zwolnisz przycisk my­szy (ale nie klawisz Shift) obok kursora narzędzia zostanie wyświetlony mały znak „+”. Gdy, cały czas trzymając wciśnięty klawisz Shift, narysujesz pędzlem kolejną linię, Fire­works połączy końcowy punkt poprzedniej linii z punktem początkowym nowej linii.

	Narzędzie Pencil ma także jedno dodatkowe zastosowanie. Podczas pracy w trybie edycji grafiki bitmapowej, narzędzie Pen­cil umożliwia zmianę kolorów pojedynczych pikseli na bieżący kolor obrysu. Więcej informacji o edycji obrazków bitmapowych znajdziesz w rozdziale 6.

Tworzenie krzywych Béziera

Pamiętasz plastykowe szablony, których używałeś w szkole do rysowania różnych okrę­gów, gwiazd i innych kształtów? Jednym z tych „innych” kształtów była prawdo­po­dob­nie nie­symetryczna linia, zwana krzywą francuską. Francuski matematyk, który wymy­ślił ten typ krzywej nazywał się Pierre Bézier. Efekty jego pracy - rozpowszechnione pod naz­wą krzywe Béziera XE "krzywe Béziera" , są podstawowym elementem grafiki wektorowej. Krzywe Béziera mogą być interpretowane zarówno w druku, poprzez język PostScript, jak i na ekra­nie w pro­gramach graficznych, takich jak FreeHand, Illustrator i oczywiście Fire­works. Po­zna­nie zasad tworzenia krzywych Béziera jest dość trudnym, ale koniecznym kro­kiem na dro­dze każdego projektanta grafiki. Są one nadzwyczaj elastyczne, naj­częś­ciej dobrze wyglądają i są warte wysiłku włożonego w ich poznanie. A więc za­czy­najmy!

Tworzenie krzywych Béziera zostało wzbogacone i uproszczone w Fireworks 4. Jeżeli korzystałeś z wcześniejszej wersji Fireworks, na pewno zauważysz, że szereg usprawnień pozwala lepiej pracować nad punktami kontrolnymi i węzłami.

Przełomowe znaczenie pomysłu Pierre'a Béziera polega na udowodnieniu, że każda li­nia (obojętnie: prosta czy krzywa) jest matematycznie opisywana w podobny sposób. Wy­obraź sobie tęczę, która zaczyna się w jednym miejscu, łukiem wchodzi w niebo i nas­tępnie w pewnej odległości wraca na ziemię. Początkowy i końcowy punkt tęczy moż­na łatwo opisać; jeśli podobną tęczę naniesiesz na papier milimetrowy, będziesz mógł odczytać współrzędne punktów. Ale co z łukiem? Załóżmy, że na niebie znajduje się element działający prawie jak magnes, który przyciąga tęczę i powoduje, że na środ­ku wygina się ona w łuk zakończony dwoma punktami: początkowym i końcowym. Bézier założył, że każdy węzeł krzywej posiada dwa takie „magnetyczne” elementy, na­zy­wane punktami kontrolnymi. Jeden z nich oddziałuje na część krzywej wchodzącą do wę­zła, zaś drugi na część wychodzącą (rysunek 5.16). W języku Béziera, punkt po któ­re­go obu stronach znajduje się krzywa nazywany jest gładkim węzłem. Punkt, z którego wy­chodzi tylko jedna krzywa nazywany jest ostrym węzłem.

Rysunek 5.16. Do zmiany kształtu krzywej używane są punkty kontrolne, określone przez położenie krzywej i punkty ostrych węzłów

Control point — Punkt kontrolny

Corner anchor point — Węzeł ostry

Curve anchor point — Węzeł gładki

Rysowanie linii za pomocą narzędzia Pen

Podstawowym narzędziem do tworzenia krzywych Béziera w Fireworks jest Pen XE "Pen" (Pió­ro), mimo że wszystkie obiekty używają tych krzywych. Ale jak krzywa Béziera może opi­sać linię prostą? Gdy punkty kontrolne zostaną umieszczone w tym samym poło­że­niu co węzły ostre, linia nie będzie do nich przyciągana i pozostanie prosta. Ołó­wek jest doskonałym narzędziem do tworzenia połączonych prostych linii. W prze­ci­wieństwie do narzędzia Line (Linia), za pomocą którego tworzy się linie proste po­przez kliknięcie i przeciągnięcie myszą, narzędzie Pen rysuje serie prostych linii w ten spo­sób, że nanosi wszystkie potrzebne punkty, a Fireworks łączy je za pomocą linii.

Aby narysować prostą linię za pomocą narzędzia Pen:

22. Wybierz narzędzie Pen lub użyj skrótu klawiaturowego P.

23. Kliknij w miejscu, w którym chcesz umieścić punkt początkowy linii.

24. Przeciągnij do miejsca, w którym chcesz umieścić końcowy punkt linii i kliknij. Fire­works utworzy linię łączącą punkt początkowy z punktem końcowym.

Aby narysować szereg prostych linii za pomocą narzędzia Pen:

1. Wybierz narzędzie Pen lub użyj skrótu klawiaturowego P.

2. Kliknij w miejscu, w którym chcesz umieścić punkt początkowy linii.

3. Przeciągnij do miejsca, w którym chcesz umieścić kolejny punkt linii i albo kliknij dwukrotnie, aby zakończyć linię, albo kliknij raz, aby dodać kolejny punkt i kontynuować rysowanie. Fire­works będzie tworzyć linię pomiędzy kolejnymi punktami (rysunek 5.17).

Rysunek 5.17. Przeciągając myszą od punktu do punktu, utwórz literę Z, taką samą, jaką Zorro wycinał jednym pociągnięciem swojej szpady

52. Powtórz krok 3. tyle razy, ile będzie potrzeba, aby narysować szereg linii.

Podobnie jak w przypadku narzędzi Brush i Pencil, przeciągając narzędziem Pen do punk­tu początkowego krzywej, można stworzyć zamkniętą ścieżkę.

Tworzenie gładkich krzywych za pomocą narzędzia Pen

Tworzenie zestawów prostych linii to świetna funkcja, ale prawdziwa siła narzędzia Pen ujawnia się przy rysowaniu krzywych. Zasadniczą różnicą pomiędzy liniami pros­ty­mi a krzywymi rysowanymi narzędziem Pen jest to, że przy rysowaniu krzywych po usta­wieniu węzła przeciągasz myszą jego uchwyty kierunkowe, aby otrzymać pożą­da­ny kształt, podczas gdy rysowanie prostych linii nie wymaga żadnego przeciągania
- wy­starczy nanieść końcowe punkty odcinka.

Aby utworzyć gładką krzywą:

25. Kliknij i przeciągnij narzędziem Pen punkty kontrolne miejscu, w którym ma się zaczynać krzywa. Zostanie utworzony węzeł z uchwytami kontrolnymi, który będzie początkiem linii.

26. Wybierz lokalizację następnego węzła, kliknij, aby go dodać, a następnie przeciągnij, aby wyciągnąć uchwyty kierunkowe. Fireworks połączy te punkty ścieżką. Trzymając wciśnięty przycisk myszy, można przesuwać kursor, aby wykorzystać punkty kontrolne do do­sto­sowania kierunku krzywej. Zwolnij przycisk myszy (rysunek 5.18).

Rysunek 5.18. Przeciągając myszą, możesz utworzyć krzywą Béziera

Click and drag out handles — Kliknij i wyciągnij uchwyty kierunkowe

Click and drag out handles or double click to finish — Kliknij i wyciągnij uchwyty kierunkowe lub kliknij dwukrotnie, aby zakończyć rysowanie

27. Wybierz narzędzie Subselection (Zaznaczanie bezpośrednie) i dokładnie dopasuj krzywą, manipulując punktami kontrolnymi.

Aby przełączyć się na narzędzie Subselection, przydatne przy manipulowaniu punktami kontrolnymi, należy przytrzymać wciśnięty klawisz Ctrl (Command) podczas korzystania z narzędzia Pen. Po zwolnieniu przycisku Ctrl (Command), narzędzie Pen jest ponownie wybierane automatycznie.

Łączenie prostych linii i krzywych

Stosując zamiennie klikanie oraz klikanie i przeciąganie za pomocą narzędzia Pen, mo­żesz łączyć ze sobą linie proste i krzywe. Jako że przeciągnięcie uchwytu kierunkowego od­działuje na krzywą po obu stronach węzła, najczęściej dość trudno jest umieścić pros­tą linię bezpośrednio za krzywą. W Fireworks można wykorzystywać klawisz Alt (Option), aby ograniczyć oddziaływanie uchwytu kontrolnego tylko do bieżącej krzywej. Aby to le­piej zrozumieć, wykonaj poniższe zadania, które doprowadzą Cię do utworzenia kształ­tu przedstawionego na rysunku 5.19.

28. Wykorzystaj możliwość tworzenia prostych linii za pomocą narzędzia Pen do na­rysowania zewnętrznych krawędzi łuku. Klikaj, aby umieścić wszystkie ze­w­nętrzne punkty, rozpoczynając od lewego narożnika i przesuwając się zgod­nie z kierunkiem wskazówek zegara. Po narysowaniu wszystkich prostych li­nii, utworzony zostanie szkielet całego łuku, z wyjątkiem łuku wewnętrznego.

29. Przesuń kursor nad punkt początkowy, a zostanie wyświetlony znak wska­zu­ją­cy, że możesz zamknąć ścieżkę.

30. Wciśnij i przytrzymaj przycisk myszy, tak jak w trakcie przeciągania. Trzymając cały czas wciśnięty przycisk myszy, naciśnij klawisz Alt (Option).

31. Przeciągnij uchwyt kontrolny w kierunku przeciwnym do łuku. Jeśli klawisz Alt (Option) nie zo­stanie wciśnięty, przeciąganie punktu kontrolnego będzie oddziaływało na li­nię łączącą (po lewej stronie łuku).

32. Gdy łuk uzyska pożądany kształt, zwolnij przycisk myszy.

Rysunek 5.19. Użyj narzędzia Pen do manipulowania krzywymi i tworzenia obiektów, będących kombinacją prostych i krzywych linii

Możliwość tworzenia kombinacji krzywych i prostych linii możesz wykorzystać do ry­so­wania nierównych krzywych. W tym celu po przeciągnięciu niewielkiego odcinka krzy­wej, wciśnij klawisz Alt (Option), aby go zablokować.

Modyfikowanie kształtu krzywych

Dwa punkty kontrolne krzywych Béziera nazywane są również uchwytami kontrolnymi. Jak wskazuje ich nazwa, uchwyty mogą być chwytane i przesuwane. Zmieniając ich po­ło­żenie, możesz dostosować kształt całej krzywej. Oto kilka wskazówek dotyczących prze­suwania uchwytów kontrolnych:

• Im bliżej związanego z nim węzła krzywej znajduje się uchwyt kontrolny, tym mniejsze zakrzywienie linii.

• I odwrotnie, jeżeli uchwyt kontrolny znajduje się dalej od związanego z nim węzła krzywej, zakrzywienie linii jest większe.

• Jeśli uchwyt kontrolny zachodzi na węzeł krzywej, krzywa staje się linią prostą, zaś węzeł gładki zamieniany jest na ostry.

• Możesz konwertować linie proste na krzywe poprzez wyciąganie uchwytów kontrolnych z ich węzłów ostrych.

• Po stworzeniu węzła gładkiego, możesz ukryć w nim jeden z punktów kon­trol­nych, aby kolejny segment ścieżki był linią prostą.

Wszystkie modyfikacje uchwytów kontrolnych mogą być dokonywane po utworzeniu krzy­wej za pomocą narzędzia Subselection (Zaznaczanie bezpośrednie). Więcej infor­ma­cji o takim modyfikowaniu krzywych znajdziesz w rozdziale 9. Jednak niektóre z mo­­dyfikacji możesz wykonać w trakcie rysowania narzędziem Pen. Dwie kluczowe ope­racje dokonywane na krzywych narzędziem Pen to dodawanie i usuwanie uchwytów kontrolnych.

Dodawanie uchwytów kontrolnych do ostrych węzłów

Aby dodać uchwyt kontrolny do ostrego węzła:

33. Za pomocą narzędzia Pen narysuj ścieżkę z gładkim węzłem, a zostaną wy­świe­tlone dwa punkty kontrolne.

34. Przesuń kursor myszy nad ostatni węzeł krzywej.

53. Kliknij. Węzeł gładki zostanie zmieniony na węzeł ostry i jeden uchwyt kontrolny krzywej zostanie ukryty w węźle.

54. Aby narysować prostą linię, przesuń kursor poza węzeł krzywej i kliknij.

55. Aby narysować krzywą, przesuń kursor poza węzeł i przeciągnij, aby stworzyć uchwyty kontrolne.

Powyższa technika jest bardzo przydatna w tworzeniu kształtów fal, w których wszys­tkie krzywe mają ten sam kierunek.

Rysunek 5.20. Po ukryciu jednego uchwytu kontrolnego można kontynuować tworzenie krzywej w tym samym kierunku

Wyciąganie uchwytów kontrolnych z ostrych węzłów

Przeciwieństwem ukrywania uchwytów kontrolnych jest ich wyciąganie. W celu wyciągnięcia uchwytów kontrolnych z os­trego węzła musisz wykorzystać parę klawiszy modyfikujących: Ctrl+Alt (Com­mand+Option). Uchwyty kontrolne wyciągane są zwykle wtedy, gdy zmienisz zdanie w trak­cie rysowania ścieżki. Zamiast kontynuować tworzenie prostej linii wychodzącej z ostrego węzła, możesz narysować krzywą.

Aby w trakcie rysowania wyciągnąć uchwyty kontrolne z ostrego węzła:

35. Narysuj prostą linię za pomocą narzędzia Pen.

36. Umieść kursor nad ostatnim punktem ścieżki.

37. Wciśnij klawisze Ctrl+Alt (Command+Option), a następnie kliknij i przeciągnij uch­wyty kontrolne węzła. Po wciśnięciu klawiszy modyfikujących, kursor my­szy zostanie zamieniony na białą strzałkę.

38. Po umieszczeniu uchwytu w pożądanym położeniu zwolnij przycisk myszy.

39. Umieść kursor myszy w miejscu, w którym ma się kończyć krzywa.

40. Kontynuuj rysowanie lub dwukrotnie kliknij w ostatnim punkcie, by zakończyć two­rzenie kształtu.

Używając tej techniki należy pamiętać, aby wcisnąć klawisze modyfikujące przed roz­po­częciem przeciągania uchwytów kontrolnych. Jeśli rozpoczniesz rysowanie przed wciś­nięciem tych klawiszy, zamiast wyciągnąć uchwyty kontrolne, przesuniesz węzeł krzy­wej. Jednak takie operacje także się czasem przydają. Możesz na przykład po roz­po­częciu przeciągania wcisnąć klawisz Ctrl (Command) — zmienisz w ten sposób położenie węzła.

Używanie klawiszy modyfikujących

Podczas tworzenia krzywych Béziera w Fireworks można wykorzystywać wiele kla­wi­szy modyfikujących, które pozwalają na uzyskiwanie różnych efektów. Ich działanie opi­sane zostało w kolejnych częściach tego rozdziału, a oprócz tego zamieściłem ich ze­sta­wienie (tabela 5.1), abyś mógł szybko odszukać te, które Cię interesują.

	Wiele informacji na temat manipulowania krzywymi Béziera i innymi obiektami Fireworks znajdziesz w rozdziale 9.

Tabela 5.1.

Klawisze modyfikujące wykorzystywane w tworzeniu krzywych Béziera

Klawisze w Windows	Klawisze w MacOS	Opis
Shift	Shift	Ogranicza kąt obrotu linii prostej lub uchwytu kontrolnego do wielokrotności 45º
Ctrl	Command	Przesuwa całą krzywą albo ostry lub gładki węzeł do nowego położenia
Ctrl i dwukrotne kliknięcie	Command i dwukrotne kliknięcie	Kończy tworzenie otwartej ścieżki bez dodawania węzłów
Ctrl+Alt	Command+Option	Wyciąga uchwyty kontrolne z węzła ostrego

Podsumowanie

Kiedyś prowadziłem dwudniowe szkolenie grupy osób na temat Fireworks. Gdy do­szliś­my do omawiania obiektów wektorowych, opisywałem je jako „szkielet” grafiki Fireworks. Po ukoń­czeniu obiektu wektorowego (i zastosowaniu wypełnień oraz obrysów) nie będziesz mógł zoba­czyć jego wektorowej struktury, na której bazuje cały obrazek. Przystępując do tworzenia obiek­tów wektorowych, musisz pamiętać o kilku rzeczach:

• Podstawowymi elementami obiektów wektorowych Fireworks są ścieżki. Aby ścież­ka mogła być widoczna, musi posiadać jakiś obrys i (lub) wypełnienie.

• Podstawowe narzędzia do tworzenia kształtów geometrycznych: Rectan­gle (Prostokąt), Rounded Rectangle (Prostokąt z zaokrągleniem), Ellipse (Elipsa) i Polygon (Wielokąt) umożliwiają również ry­so­wanie kwadratów, okręgów i gwiazd.

• Narzędzie Line pozwala na tworzenie linii prostych.

• Narzędzia Pencil (Ołówek) i Brush (Pędzel) umożliwiają swobodne, niczym nie­ograniczone rysowanie w Fireworks. Ścieżki tworzone narzędziem Pencil do­myślnie posiadają obrys o szerokości jednego piksela.

• Narzędzie Pen (Pióro) służy do tworzenia krzywych Béziera. Do budowania gład­kich krzywych i połączonych z nimi linii prostych wykorzystywane są os­tre i gładkie węzły posiadające uchwyty kontrolne.

W następnym rozdziale poznamy drugie oblicze grafiki tworzonej w Fireworks: obiekty bit­mapowe.




Rozdział 6.
Praca z grafiką bitmapową

W tym rozdziale:

• Podstawowe wiadomości o grafice bitmapowej.

• Tryb edycji grafiki bitmapowej.

• Otwieranie bitmap w Fireworks.

• Skalowanie bitmap.

• Zaznaczanie elementów bitmap.

• Definiowanie obszaru rysowania.

• Praca z narzędziami bitmapowymi.

Filarem Fireworks są obiekty wektorowe, wystarczające do wykonania większości za­dań podczas tworzenia grafiki internetowej: budowania pasków nawigacyjnych, ryso­wa­nia kształtów i linii oraz wstawiania edytowalnego tekstu. Elementy te tworzone są z pre­cyzją, jaką zapewnia tworzenie wektorów i najczęściej są wykorzystywane w Fire­works do budowania projektów od przysłowiowego „zera”.

Niektóre grafiki jednak nie mogą być opracowywane jedynie w oparciu o ścieżki wek­to­rowe. Fotografie wykonywane za pomocą aparatów cyfrowych i skanerów są 100-pro­­centowymi bitmapami. Mogą one być wykorzystywane w internetowych sklepach lub galeriach sztuki zawierających obrazy w postaci cyfrowej. Umieszczenie ich na stronie WWW nie wymaga od projektanta żadnego rysowania. Zamiast tworzyć ścieżki, bę­dziesz wówczas wycinał i wklejał wyselekcjonowane piksele oraz manipulował ka­na­ła­mi alfa i trybami mieszania.

Większość pracy z obrazkami bitmapowymi w Fireworks odbywa się w trybie edycji grafiki bitmapowej. Gdy tylko użyjesz jednego z narzędzi bit­ma­po­wych, takich jak Magic Wand (Magiczna różdżka), Fireworks automatycznie wybierze tryb bitmapowy. Przejście to wydaje się niezauważalne, ale jest bardzo istotne. Mówi ono Fireworks, aby nie umieszczał pikseli w obiektach wektorowych i skupił się jedynie na samych pikselach.

Ten rozdział rozpoczyna się od wyjaśnienia sposobu, w jaki Fireworks pracuje z grafiką bit­mapową. Zbadamy dokładnie zasady działania wszystkich narzędzi pracujących je­dy­nie w trybie edycji grafiki bitmapowej oraz narzędzi używanych do tworzenia obiek­tów wektorowych, które znajdują inne zastosowania w pracy z bitmapami. Ostatecznie, do­wiesz się, jak przekształcać obiekty wektorowe na obiekty bitmapowe i poznasz korzyści, jakie mo­żesz z tego mieć.

Podstawy pracy z grafiką bitmapową w Fireworks

Oto krótki kurs doskonalenia zawodowego traktujący o obrazkach bitmapowych. Po­wi­nie­neś go przejść jedynie w przypadku, gdy dotychczas obracałeś się w świecie grafiki wek­torowej i jesteś kompletnym laikiem, jeśli chodzi o piksele. Słowo piksel XE "piksel" (ang. pixel XE "pixel" ) pochodzi od terminu element obrazu (ang. picture element) (PIX od picture i EL od element). Piksel jest najmniejszą częścią obrazka bitmapowego. W początkach gra­fi­ki komputerowej, kolor każdego piksela był zapisywany za pomocą 1 bita pamięci. Bit ten był włączony dla koloru białego, zaś wyłączony dla czarnego. Rozmieszczenie bi­tów wzdłuż osi poziomej i pionowej pozwalało na stworzenie obrazka. Edycja bitmap po­lega na dodawaniu i usuwaniu pikseli lub zmianach ich kolorów. Nawet jeśli usuwasz frag­ment obrazka, właściwie zmieniasz kolor zbędnych pikseli na kolor tła i w efekcie wy­glądają one, jakby zostały usunięte.

Aby lepiej zrozumieć różnicę pomiędzy obrazkiem bitmapowym (nazywanym również gra­fiką rastrową) i obiektem wektorowym, wyobraź sobie linię o długości 100 pikseli i sze­rokości 1 piksela. W grafice wektorowej, aby zbudować taką linię, wystarczy stwo­rzyć dwa punkty i obrys pomiędzy nimi. W grafice bitmapowej musisz utworzyć do­kład­nie 100 pikseli. Aby zmienić położenie jednego z punktów linii w grafice wekto­ro­wej, wystarczy przesunąć jeden z jej punktów końcowych. W grafice bitmapowej, musisz w ta­kim przypadku usunąć wszystkie piksele tworzące linię i utworzyć ją od początku w no­wym położeniu.

Tryb edycji grafiki bitmapowej

Jak zdążyłeś zauważyć, manipulowanie obiektami wektorowymi i obiektami bitma­po­wy­mi to dwie zupełnie różne operacje. Dlatego właśnie Fireworks może pracować w dwóch różnych trybach: trybie wektorowym, czyli edycji obiektów wektorowych (opi­sy­wa­ny w rozdziale 5.) oraz w trybie bitmapowym XE "Image Mode" , czyli edycji grafiki bitmapowej. Niektóre narzę­dzia Fireworks pracują tylko w jednym z tych trybów, zaś inne działają w obu, dając od­mien­ne rezultaty. Nie ma trybu lepszego ani gorszego; każdy z nich używany jest w in­nym celu.

Możesz ręcznie zmienić tryb pracy Fireworks na bitmapowy. Nie musisz jednak tego ro­bić, gdyż po wybraniu narzędzia bitmapowego Fireworks automatycznie przejdzie do try­bu edycji grafiki bitmapowej. Wybierz narzędzie do edycji obiektów wektorowych, roz­pocznij pracę, a program zostanie automatycznie przełączony z powrotem na tryb wektorowy. Niekiedy przejściu pomiędzy trybami towarzyszy pomocny komunikat Fire­works mówiący, że zmiana trybu jest konieczna. Jeżeli na przykład spróbujesz użyć na­rzędzia Freeform w trybie edycji grafiki bitmapowej, Fire­works wyświetli ostrzeżenie, że narzędzie to może pracować jedynie z wek­to­rami.

	W każdym oknie mówiącym o konieczności zmiany trybu znajduje się po­le wyboru „don't show again” („nie pokazuj więcej tego komuni­ka­tu”). Gdy usuniesz zaznaczenie tego pola, program nie będzie wyświe­tlał więcej takich komunikatów. Aby przywrócić prezentację komunikatów, należy wybrać polecenie Commands⇒Reset Warning Dialogs.

Każdy obiekt tworzony w Fireworks początkowo należy wyłącznie do jednej z ka­te­go­rii: składa się tylko z pikseli lub tylko ze ścieżek wektorowych. Jeśli jednak przy­kłado­wo do linii zastosujesz rozmycie, niepostrzeżenie stanie się ona zarówno obiektem wekto­ro­wym (ścieżka), jak i bitmapowym (rozmycie) i, nie zdając sobie z tego sprawy, bę­dziesz pracował na przemian w dwóch trybach.

Uruchamianie trybu edycji grafiki bitmapowej XE "tryb edycji grafiki bitmapowej"

Oprócz możliwości automatycznego wchodzenia programu w tryb edycji grafiki bitmapowej, istnieje także kilka sposobów na ręczne uruchamianie tego trybu:

• Kliknij dwukrotnie obiekt bitmapowy za pomocą narzędzia Pointer (Wskaź­nik) lub Subselection (Zaznaczanie bezpośrednie). Prawdopodobnie jest to naj­częś­ciej używana metoda przechodzenia w tryb edycji grafiki bitmapowej.

Podczas pracy w trybie edycji grafiki bitmapowej, dwukrotne kliknięcie powoduje powrót do trybu wektorowego.

• Wybierz z menu polecenie ModifyEdit Bitmap lub użyj skrótu klawia­tu­ro­we­go Ctrl+E (Command+E).

• Wybierz z menu polecenie InsertEmpty Bitmap. Zostanie utworzony nowy obiekt bitmapo­wy, w którym możesz malować za pomocą narzędzi służących do edycji pikseli.

łatwo możesz sprawdzić, czy aktualnie pracujesz w trybie edycji grafiki bitmapowej. Fireworks ofe­ru­je wiele różnych sygnałów wizualnych (rysunek 6.1). Pierwszy z nich to obwódka otaczająca ob­szar roboczy. Jeśli w preferencjach programu usuniesz zaznaczenie opcji Expand to Fill Document, obwódka będzie tworzona jedynie wokół samego obiektu bitmapowego. Po dru­gie - gdy pracujesz w trybie edycji grafiki bitmapowej, w paskach tytułowych okna doku­mentu i palety Object wyświetlane jest zdanie - Bitmap Mode. Ostatecznie, ak­tyw­ny staje się przycisk Stop (biały znak X na okrągłym, czerwonym tle, z etykietką „Exit Bitmap Mode”) znajdujący się w pasku stanu Fireworks.

	W systemie Windows obok przycisku Stop wyświetlana jest także wska­zówka „Press Stop to exit Bitmap Mode” („Kliknij przycisk Stop, aby wyjść z trybu edycji grafiki bitmapowej”).

Opuszczanie trybu edycji grafiki bitmapowej

Po opuszczeniu trybu edycji grafiki bitmapowej wszystkie zaznaczone obrazki są ota­cza­ne obwódką. W Fireworks bitmapy mogą być także modyfikowane (przemieszczane, ska­lowane, wyrównywane i zniekształcane) jako obiekty bitmapowe. W trybie wektorowym, obiekty bitmapowe zachowują się jak prostokątne obiekty wektorowe z bitmapowym wypełnieniem. Do wybranego obiektu bitmapowego możesz nawet stosować efekty, takie jak cienie.

Najbardziej oczywistym sposobem opuszczenia trybu bitmapowego i przejścia na tryb wektorowy jest kliknięcie przycisku Stop. Jednak twórcy Fireworks uwzględnili jeszcze kil­ka innym metod wychodzenia z trybu edycji grafiki bitmapowej. Oto ich lista:

• Kliknij przycisk Stop znajdujący się w pasku stanu, jak wspomniano wyżej.

• Wybierz z menu polecenie ModifyExit Bitmap Mode lub użyj skrótu klawia­tu­ro­we­go Ctrl+Shift+E (Command+Shift+E).

• Jeśli obwódka wskazująca tryb bitmapowy otacza jedynie obiekt bitmapowy (a nie całe okno dokumentu), umieszczenie kursora poza tym obiektem, spra­wi, że jego ikona zostanie zamieniona na znak Stop. Kliknij wówczas myszą, aby opuścić tryb edycji grafiki bitmapowej.

Rysunek 6.1. Fireworks na wiele sposobów informuje użytkownika o pracy w trybie edycji grafiki bitmapowej. Zwróć uwagę na etykietkę opisującą działanie przycisku Stop

Document ... message — Komunikat w pasku tytułowym dokumentu

Striped border — Obwódka

Active Stop Button — Aktywny przycisk Stop

Stop buttom tooltip — Etykietka przycisku Stop

Object ... message — Komunikat w pasku tytułowym palety Object

• Jeśli obwódka wskazująca tryb edycji grafiki bitmapowej otacza całe okno dokumentu, wy­bierz jedno z narzędzi selekcji (Marquee - Prostokątne zaznaczenie, Oval Marquee - Owalne zaznaczenie, Lasso, Polygon Lasso - Wielokątne lasso lub Magic Wand - Magiczna różdżka) i kliknij dwukrotnie poza obiektem.

Aby określić, czy obwódka ma otaczać jedynie obiekt bitmapowy, czy też całe okno do­kumentu:

56. Wybierz z menu polecenie FilePreferences.

57. Kliknij zakładkę Editing w oknie dialogowym Preferences.

58. Usuń zaznaczenie opcji Expand to Fill Document znajdującej się w sekcji When Editing Bitmaps.

59. Kliknij przycisk OK.

Zmiany zostaną uwzględnione natychmiast.

Dlaczego miałbyś chcieć, aby obwódka wskazująca tryb edycji grafiki bitmapowej ota­cza­ła więcej niż tylko samą bitmapę? Jest to wygodne, gdyż często zdarza się, że trzeba zwięk­szyć obszar bitmapy podczas edycji, aby na przykład rozmyć jej krawędzie lub stwo­rzyć nie­regularny kształt. Jeśli obwódka będzie dokładnie przylegała do krawędzi grafiki bitmapowej, nie zostanie uwzględnione miejsce na jakiekolwiek rozszerzenie. Po włączeniu opcji Ex­pand to Fill Document, do dyspozycji pozostanie Ci wiele miejsca w obszarze ro­bo­czym, a nadal będziesz edytował tylko jeden obiekt bitmapowy.

Inne funkcje trybu edycji grafiki bitmapowej

Bardzo przydatne są trzy inne opcje When Editing Bitmaps znajdujące się w palecie Editing okna preferencji Fire­works. Poniższe preferencje są zaznaczone zgodnie z ustawieniem domyślnym:

1. Open in Bitmap Mode (Otwórz w trybie edycji grafiki bitmapowej) mówi Fireworks, aby po otwarciu dokumentu nie zawierającego żadnych ście­żek wektorowych (chodzi tu o pojedynczy obrazek), automatycznie przeszedł w tryb edycji grafiki bitmapowej. Jeśli chcesz, możesz usunąć zaznaczenie tej opcji, wte­dy zawsze będziesz rozpoczynać pracę w trybie edycji grafiki wektorowej. Aby zmia­ny zostały uwzględnione, musisz ponownie uruchomić Fireworks.

2. Turn Off Hide Edges (Wyłącz ukrywanie krawędzi) anuluje polecenie ViewHide Edges podczas przechodzenia z trybu wektorowego do bitmapowego. Ułatwia to odnalezienie wybranego obiektu, ale jeżeli krawędzie przeszkadzają Ci, możesz usunąć zaznaczenie z tego pola. Zmiana zostanie natychmiast uwzględniona.

3. Display Striped Border (Wyświetl obwódkę) mówi Fireworks, aby narysował obwódkę wokół obszaru roboczego podczas pracy w trybie edycji grafiki bitmapowej. Zmiana zostanie natychmiast uwzględniona.

Otwieranie istniejących bitmap

Na pewno słyszałeś kiedyś powiedzenie - sukces w jednym procencie składa się z in­spi­racji i w dziewięćdziesięciu dziewięciu procentach z wylanego potu. W grafice in­ter­netowej powiedzenie to uległo nieznacznej zmianie: projektowanie dla Internetu opiera się w dwu­dziestu procentach na tworzeniu i w osiemdziesięciu na modyfikowaniu. Są to oczywiście moje przy­bliżone obliczenia, ale ogólnie zawsze spędzam większość dnia na modyfikowaniu gra­fiki stworzonej wcześniej przeze mnie lub innego projektanta.

Fireworks oferuje wiele metod otwierania istniejących bitmap i obsługuje wiele for­ma­tów grafiki bitmapowej. Coraz częściej większość pracy zapisywana jest w źród­ło­wym formacie Fireworks - PNG XE "PNG" , który umożliwia edycję zarówno grafiki wektorowej, jak i bitmapowej. Wiele razy byłem jednak zmuszony do wykorzystania w swoich pra­cach obrazków bitmapowych tworzonych za pomocą innych aplikacji, takich jak Photoshop.

Jak większość programów komputerowych Fireworks ładuje obrazki i inne pliki za po­mo­cą polecenia FileOpen. Wyświetla ono okno dialogowe Open XE "Open" (rysunek 6.2), które umożliwia pod­gląd wielu formatów plików: PNG, TIFF, PSD (Photoshop), FreeHand, GIF, JPEG i in­nych. Można wybrać wiele plików jednocześnie, naciskając klawisz Shift lub Ctrl (Command) podczas klikania nazw plików. W oknie Open znajduje się także bardzo przydatna funkcja Open as Animation XE "Open as Animation" (Otwórz jako animację), umożli­wia­ją­ca tworzenie animacji składających się z wielu plików rozłożonych na różne klatki do­kumentu. Aby uaktywnić pole Open as Animation, należy wybrać przynajmniej dwa pliki.

		Więcej informacji o korzystaniu z polecenia Open oraz ładowaniu plików znajdziesz w rozdziale 14.
Rysunek 6.2. Za pomocą opcji Open as Animation możesz tworzyć w Fireworks animacje składające się z sekwencji wielu plików

Skalowanie bitmap

Zmiana rozmiaru obrazka bitmapowego może wydawać się prostą operacją, ale w rze­czy­wistości jest dość skomplikowana. Fireworks po przeanalizowaniu istniejącego obraz­ka musi utworzyć obrazek o nowych wymiarach. Program wyszukuje grupy pik­se­li
i pró­buje je jak najlepiej odwzorować za pomocą większej lub mniejszej liczby pikseli. Ana­liza polegająca na odnajdywaniu wartości pośrednich na podstawie innych wartości nazy­wana jest interpolacją XE "interpolacja" .

Fireworks oferuje cztery metody interpolacji (rysunek 6.3):

Rysunek 6.3. Fireworks oferuje cztery możliwości skalowania dla różnych rodzajów obrazków

Interpolation ... list — Lista metod interpolacji

• Bicubic (Dwusześcienna). W interpolacji dwusześciennej, Fireworks do utwo­rze­nia każdego piksela wykorzystuje średnią wartości ośmiu otaczających go pik­seli znajdujących się u dołu, u góry, po lewej, po prawej i we wszystkich na­rożnikach. Ta metoda skalowania daje najlepsze rezultaty w prawie każdych wa­runkach i jest zalecana dla większości obrazków.

• Bilinear (Dwuliniowa). Metoda podobna do dwusześciennej, ale używa tylko czte­rech (dolny, górny, lewy i prawy) zamiast ośmiu sąsiednich pikseli.

• Nearest Neighbor (Najbliższy sąsiad). Algorytm „najbliższy sąsiad” przy in­ter­polacji nowych pikseli kopiuje piksele sąsiednie. W efekcie powstają obraz­ki z tzw. mozaiką, czyli widocznymi gołym okiem pikselami.

• Soft (Miękka). Metoda miękkiej interpolacji była używana już w pierwszej wer­sji Fireworks. Przy zmniejszaniu obrazków powoduje ona ich rozmywanie. Me­toda Soft jest dobrym wyborem w przypadku obrazków, które przy ska­lo­wa­niu z wykorzystaniem innych metod interpolacji powodują generowanie nie­po­żądanych efektów.

W większości przypadków wykorzystuję dwusześcienną metodę interpolacji. Na meto­dę dwuliniową i miękką decyduję się jedynie w niektórych przypadkach, zwykle gdy wy­ko­rzystuję tekst o małych rozmiarach. Nie znajduję zbyt wielu zastosowań dla mozaiki two­rzonej przy skalowaniu obrazków z wykorzystaniem metody Nearest Neighbor (Naj­bliższy sąsiad). Najlepszym sposobem na poznanie działania poszczególnych me­tod interpolacji jest eksperymentowanie.

Umieszczanie bitmapy w dokumencie

Bardzo ważnym narzędziem wykorzystywanym w projektowaniu dla Internetu jest ko­laż, czyli połączenie różnych obrazków i innych elementów graficznych. Nieważne, czy chcesz, aby obrazki zachodziły na siebie, czy też były rozmieszczane jeden obok dru­gie­go, polecenie InsertImage XE "Insert Image" (Wstaw obrazek) umożliwia wstawianie istniejących obie­k­tów w dowolne miejsca otwartego dokumentu.

Aby wstawić bitmapę do dokumentu:

41. Wybierz z menu polecenie InsertImage lub użyj skrótu klawiaturowego Ctrl+R (Command+R). Fireworks wyświetli okno dialogowe Import.

42. Odszukaj obrazek, zaznacz go i kliknij przycisk Open. Ikona kursora zostanie za­mieniona na kątownik.

43. Umieść kursor Import w miejscu, w którym powinien zostać umie­szczo­ny lewy górny róg wstawianego obrazka i kliknij. Obrazek zostanie umie­szczo­ny w dokumencie jako nowy obiekt bitmapowy i zaznaczony.

Jeśli chciałbyś zmienić położenie wstawionego obrazka, wybierz narzędzie Pointer, a na­stępnie kliknij i przeciągnij obrazek na nowe miejsce. Precyzyjne przesuwanie obiek­tów o jeden piksel w dowolnym kierunku można wykonywać za pomocą klawiszy strzałek.

	Po wciśnięciu klawisza Shift, naciśnięcie klawisza strzałki spowoduje prze­sunięcie zaznaczonego obiektu o 10 pikseli.

Umieszczanie pustych bitmap

Do tej pory dowiedziałeś się, że Fireworks potrafi otwierać pliki z grafiką bitmapową za­pisaną w wielu różnych formatach. Co jednak zrobić, gdy zechcesz w Fireworks utwo­rzyć zupełnie nowy obrazek bitmapowy? Obiekty składające się ze ścieżek wek­to­ro­wych są dużo wygodniejsze w edycji, ale niektóre zadania można wykonać jedynie po­przez zastosowanie grafiki bitmapowej. W takich sytuacjach możesz wykorzystać funk­cję Fireworks umożliwiającą tworzenie obszarów edycji obrazków bitmapowych. Wy­bierz z menu polecenie InsertEmpty Bitmap.

	Polecenie Empty Bitmap staje się szczególnie przydatne, gdy musisz na­malować duże tło za pomocą pędzla typu Air Brush (Aerograf), a nie chcesz używać narzędzia Fill (Wypełnienie). Tak wykonane tło możesz póź­niej modyfikować za pomocą dowolnych narzędzi bitmapowych, ta­kich jak Eraser (Gumka).

Po wstawieniu pustej bitmapy, Fireworks automatycznie przejdzie w tryb edycji gra­fi­ki bit­mapowej i uaktywni narzędzie Marquee XE "Marquee" (Zaznaczenie prostokątne). Jeżeli chcesz ogra­niczyć obszar rysowania, obejmij narzędziem Marquee prostokątny fragment obraz­ka. Wszystkie narzędzia będą wówczas działały tylko w wyselekcjonowanym obsza­rze. W przeciwnym przypadku, przejdź od razu do tworzenia bitmapy za pomocą do­wolnego dostępnego narzędzia. Po wyjściu z trybu edycji grafiki bitmapowej, ut­wo­rzo­ny obrazek zostanie przeskalowany do wymiarów wystarczających, aby pomieścić wszys­tkie zasto­sowane piksele. Taki automatycznie przycięty obiekt bitmapowy może być oczywiście dowolnie przemieszczany i modyfikowany jak każdy inny obiekt gra­ficz­ny Fireworks.

Stosowanie narzędzi bitmapowych

Fireworks posiada prawie tyle samo (sześć) narzędzi przeznaczonych do pracy z obraz­ka­mi bitmapowymi, co narzędzi do pracy z obiektami wektorowymi (siedem). Ogromna więk­szość ich może pracować w obu trybach; niektóre tak samo, inne w nieco różny spo­sób. Oczywiście wiedza na temat dostępnych narzędzi i ich jak najlepszego wyko­rzys­tania pomoże Ci lepiej zorganizować pracę i proces tworzenia. W tym rozdziale opi­sane zostaną narzędzia dostosowane do pracy jedynie w trybie edycji grafiki bit­mapowej.

Narzędzia bitmapowe przeznaczone są głównie do wykonywania selekcji. Ma to swoje uza­sadnienie. O wiele trudniej jest zaznaczać piksele niż ścieżki. Nawet najbardziej skom­plikowana ścieżka wektorowa może zostać zaznaczona za pomocą jednego klik­nię­cia myszą. Piksele mogą być zaznaczane względem ich położenia za pomocą na­rzę­dzi, takich jak Marquee (Zaznaczenie prostokątne) lub względem kolorów przez użycie Magic Wand (Magiczna różdżka). Bardzo często będziesz musiał skorzystać z kom­bi­na­cji obu typów narzędzi i metod, aby osiągnąć pożądane rezultaty.

Na szczęście Fireworks oferuje pełen zakres narzędzi selekcji: Pointer (Wskaźnik), Marquee (Prostokątne zaznaczenie), Oval Marquee (Owalne zaznaczenie), Lasso, Po­lygon Lasso (Wielokątne lasso) i Magic Wand (Magiczna różdżka). Każde z nich pra­cu­je w inny sposób i posiada opcje, które mogą być definiowane przez użytkownika.

Narzędzie Pointer (Wskaźnik)

Choć praktycznie narzędzie Pointer XE "Pointer" powinno zostać opisane jako narzędzie pracujące w obu trybach edycji, z prostego powodu postanowiłem opisać je właśnie w tym miej­scu. Dwukrotne kliknięcie wskaźnikiem obrazka bitmapowego jest jedną z naj­szyb­szych i najbardziej intuicyjnych metod uruchamiania trybu edycji grafiki bitmapowej. Wskaź­nik można wykorzystywać także do zmiany położenia obiektów bitmapowych w trybie edycji grafiki bitmapowej. Wystarczy w tym celu kliknąć w dowolnym miejscu obiektu i przeciągnąć go w no­we miejsce (rysunek 6.4). Należy tylko upewnić się, że żadne piksele nie są aktywne.

		Mniej oczywistym zastosowaniem narzędzia Pointer jest skalowanie obiektów bitmapowych w obu trybach: bitmapowym i wektorowym. Mo­żesz przeciągnąć ramkę otaczającą obrazek i skalować go, podobnie jak narzędziem Distortion (Zniekształcanie). Podczas skalowania obrazków można zachować ich proporcje. Aby tak skalować obrazek, wciśnij klawisz Shift, przeciągając narożnik lub ramkę. łatwiej jest ska­lować obiekty bitmapowe, ponieważ wyświetlane są uch­wyty skalowania.
Rysunek 6.4. Narzędzie Pointer można nawet w trybie edycji grafiki bitmapowej wykorzystywać do przesuwania obrazków po obszarze roboczym

Narzędzie Marquee (Zaznaczenie prostokątne)

Narzędzie Marquee XE "Marquee" to jedno z najczęściej stosowanych narzędzi selekcji i to nie tylko dla­tego, że jest domyślnie wybierane po wejściu w tryb edycji grafiki bitmapowej. Na­rzę­dzie selekcji Marquee jest podobne do narzędzia rysunkowego Rectangle (Pros­to­kąt). Przy korzystaniu z obu tych narzędzi należy kliknąć, aby ustalić jeden z wierz­choł­ków prostokąta i przeciągnąć po przekątnej do przeciwległego wierzchołka. Zazna­cze­nie pros­tokątne jednak nie rysuje kształtów na bitmapie; służy ono do tymczasowego za­zna­cze­nia obszaru obrazka, w którym wykonywane będą inne operacje, takie jak kopio­wa­nie lub wypełnianie.

Zaznaczenie prostokątne i zaznaczenie owalne

Narzędzie Marquee posiada dwie odmiany. Pierwsza z nich to prostokątne Marquee XE "Marquee:Rectangular Marquee" (Pro­stokątne zaznaczenie), które można uaktywnić po kliknięciu jego przycisku w palecie na­rzędziowej lub za pomocą skrótu klawiaturowego M. Druga odmiana to Oval Marquee XE "Marquee:Elliptical Marquee" (Owalne zaznaczenie), służąca do zaznaczania owalnych lub okrągłych ob­szarów obrazka. Po wciśnięciu klawisza Shift w trakcie ko­rzystania z narzędzia Marquee i Oval Marquee bę­dziesz mógł tworzyć kształty ograniczone do kwadratów i okręgów, jak przy używaniu narzędzi rysunkowych Rectangle (Prostokąt) i Ellipse (Eli­psa).

Aby użyć narzędzia Marquee lub Oval Marquee:

44. Do zaznaczenia prostokątnego lub kwadratowego obszaru obrazka, wybierz na­rzędzie Marquee z palety narzędziowej lub użyj skrótu klawiaturowego M.

Jeśli często tworzysz kwadraty lub okręgi, kliknij dwu­krot­nie narzędzie Marquee lub Oval Marquee, aby otwo­rzyć paletę Option i z listy Style wybierz opcję Fixed Ratio (Stałe pro­porcje). Gdy ustawisz stosunek 1:1, będziesz mógł rysować pre­cy­zyj­ne kwadraty i okręgi zamiast prostokątów i owali, bez potrzeby wciskania klawisza Shift.

45. Do zaznaczenia owalnego lub okrągłego obszaru obrazka, przytrzymaj przy­cisk narzędzia Marquee w palecie narzędziowej i z rozwijanej grupy narzędzi wy­bierz Oval Marquee. Możesz także dwukrotnie wcisnąć klawisz M.

46. Kliknij w miejscu, w którym ma się znajdować jeden z wierzchołków zazna­cze­nia i przeciągnij do przeciwległego wierzchołka. Fireworks wyświetli ak­tyw­ną linię przerywaną, nazywaną zaznaczeniem lub „masze­ru­ją­cy­mi mrówkami” (rysunek 6.5).

Rysunek 6.5. Narzędzia z grupy Marquee służą do zaznaczania prostokątnych, kwadratowych, owalnych lub okrągłych obszarów grafiki bitmapowej

Paleta Tool Options (Opcje narzędzia)

Obie odmiany narzędzia Marquee posiadają zestaw wspólnych opcji dostępnych w pa­le­cie Tool Options XE "paleta:Tool Options" . Paletę tę (rysunek 6.6) możesz wyświetlić poprzez dwukrotne klik­nię­cie narzędzia Marquee lub Oval Marquee w palecie narzędziowej lub wy­branie jednego z tych narzędzi i polecenia menu WindowTool Options. Opcje na­rzę­dzi Marquee są podzielone na dwie grupy: Style (Styl) i Edge (Krawędzie).

Rysunek 6.6. W palecie Tool Options możesz zdefiniować rozmiar i proporcje zaznaczenia tworzonego za pomocą narzędzia Marquee. Możesz także określić rodzaj krawędzi zaznaczenia: Hard (Ostre), Anti-Alias (Wygładzone) lub Feather (Rozmyte)

Style zaznaczenia

W normalnym trybie pracy narzędzia Marquee są „nieograniczone” co oznacza, że two­rzo­ne za ich pomocą zaznaczenia mogą mieć dowolne rozmiary i kształty. Czasami jednak po­trzebne jest zaznaczenie o ściśle określonych wymiarach. W palecie Tool Options dla na­rzędzia Marquee możesz zdefiniować jeden z trzech trybów pracy dla stylu:

• Normal (Normalny): Styl domyślny, umożliwia swobodne rysowanie pro­sto­kąt­nych i owalnych zaznaczeń.

• Fixed Ratio (Stałe proporcje boków): Pozwala na ustawienie stosunku sze­ro­kość do wysokość zaznaczeń tworzonych za pomocą narzędzi Marquee. Wpisz war­tość szerokości w pierwsze pole tekstowe (oznaczone poziomą podwójną strzał­ką) i wartość wysokości w drugie pole (oznaczone pionową podwójną strzał­ką). Opcja ta jest bardzo przydatna do tworzenia zaznaczeń o określonych pro­porcjach. Jeżeli na przykład wiesz, że zaznaczenie powinno być dwa razy szer­sze niż wyższe, musisz wpisać wartość 2 w pole tekstowe szerokości i 1 w pole wy­sokości. Aby utworzyć kwadratowe zaznaczenie, wpisz proporcje 1:1. Po włą­czeniu opcji Fixed Ratio dla narzędzi Marquee, będziesz mógł tworzyć zaznaczenia o różnych wymiarach, ale o ściśle określonych proporcjach boków.

• Fixed Size (Stała wielkość): Umożliwia ustawienie określonej szerokości i wy­so­kości zaznaczenia, mierzonych w pikselach. Wpisz pożądane wartości w pola tek­stowe. Po włączeniu tej opcji, będziesz mógł za pomocą narzędzia Marquee umieścić zaznaczenie o ściśle określonych wymiarach w dowolnym miejscu ob­sza­ru roboczego. Po umieszczeniu kursora nad wybranym obszarem kliknij, aby ut­worzyć zaznaczenie. Opcja Fixed Size przydaje się zwłaszcza wtedy, gdy chcesz zaznaczyć wiele obszarów o takich samych rozmiarach.

Jeśli wpiszesz wartość w jedno z pól tekstowych opcji Fixed Size, a dru­gie pozostawisz puste, Fireworks utworzy zaznaczenie o zadanej wy­sokości lub szerokości rozciągające się na cały obrazek. Jest to dos­konała metoda zaznaczania wąskich obszarów obrazka, o sze­ro­koś­ci jednego lub dwóch pikseli. Nie musisz rysować zaznaczenia, a masz pew­ność, że wyselekcjonowany zostanie cały obrazek. Technika ta lepiej dzia­ła z narzędziem Marquee niż Oval Marquee.

Typy krawędzi

Za pomocą palety Tool Options można ustawić również rodzaj krawędzi zaznaczenia. Do­myślnie tworzone zaznaczenia mają ostre krawędzie. Oznacza to, że zaznaczony zostanie do­kładnie taki obszar, jaki stworzysz za pomocą jednego z narzędzi selekcji. Dwa inne ty­py krawędzi: Anti-Alias (Wygładzone) i Feather (Rozmyte) służą do tworzenia „mięk­kich” zaznaczeń. Bardziej delikatne krawędzie tworzy opcja Anti-Alias. Po jej wybraniu wszys­tkie postrzępione krawędzie owalnego lub okrągłego zaznaczenia są wtapiane w tło. Jest to działanie podobne do anti-aliasingu obrazków bitmapowych, stosowanego w ce­lu usunięcia strzępienia krawędzi.

Wykonując zaznaczenie tła o jednolitym kolorze za pomocą narzędzia Oval Marquee, można stworzyć dobrze wyglądający obrazek bitma­po­wy przedstawiający księżyc. Za pomocą palety Tool Options ustaw typ kra­wędzi zaznaczeń tworzonych narzędziem Marquee na Anti-Alias i utwórz zaznaczenie. Następnie, za pomocą klawiszy strzałek przesuń zaznaczenie o jeden lub dwa piksele w pionie oraz w poziomie. Zostanie utwo­rzony obiekt w kształcie półksiężyca z płynnymi przejściami po­mię­dzy punktami końcowymi.

Rozmycie zaznaczenia jest bardziej zauważalne od wygładzania. Zasadniczo rozmycie moż­na porównać do wtapiania. Po wybraniu w palecie Tool Options opcji Feather, uak­tyw­nione zostanie pole tekstowe z domyślną wartością 10 pikseli. Każde rozmyte za­zna­czenie będzie wtapiać się ze wszystkich stron na jednakową liczbę pikseli. Jeżeli na przy­kład utworzysz prostokątne zaznaczenie z rozmyciem wynoszącym 2 piksele, zmo­dy­fikowane zostaną cztery rzędy pikseli - dwa wewnątrz zaznaczenia i dwa na zewnątrz. Jeśli usuniesz takie zaznaczenie, w obrazku zostanie utworzony pusty, ładnie wta­pia­ją­cy się w tło obszar, ponieważ rozmywane jest zarówno zaznaczenie, jak i otaczający je obra­zek. Jeżeli przesuniesz rozmyte zaznaczenie w inne miejsce obszaru roboczego, bę­dzie ono miało bardzo miękkie krawędzie (rysunek 6.7).

Pamiętaj, aby wcisnąć klawisz Ctrl (Command) podczas przemieszczania zaznaczenia Marquee, w celu przesunięcia zarówno zaznaczenia, jak i zawartych w nim pikseli.

Narzędzia Lasso i Polygon Lasso (Wielokątne lasso)

Nie zawsze wystarczy utworzenie prostokątnego lub owalnego zaznaczenia bitmapo­we­go obrazka. Narzędzie Lasso XE "Lasso" umożliwia wykonywanie zaznaczenia o nieregularnych kształ­tach. Jak wskazuje nazwa narzędzia - Lasso służy do „chwytania” i zaznaczania okre­ślo­­nych pikseli. Standardowe Lasso jest narzędziem działającym na zasadzie „kliknij i prze­­ciągnij”, pozwalającym na odręczne rysowanie zaznaczenia, podobnie jak narzędzia Pen­cil i Brush umożliwiają odręczne tworzenie ścieżek. Z kolei narzędzie Polygon Las­so działa podobnie do narzędzia Pen pracującego w trybie tworzenia prostych linii i umo­żliwia wykonywanie zaznaczeń składających się z serii połączonych ze sobą pros­tych odcinków.

Wszystkie zaznaczenia tworzone za pomocą lassa są, zgodnie z ich naturą, zamkniętymi ścież­kami. Podobnie jak w przypadku narzędzi rysunkowych, gdy przeciągniesz kursor w pobliże początkowego punktu zaznaczenia wykonywanego narzędziem Lasso, Fire­works wyświetli kursor wskazujący na zamknięcie ścieżki, z czarnym kwadratem (rysunek 6.8).

Rysunek 6.7. Przesunięcie rozmytego zaznaczenia spowoduje utworzenie zaznaczenia łagodnie wtapiającego się w tło i wycięcie w obrazku obszaru o rozmytych krawędziach
Rysunek 6.8. Zaznaczenie tworzone za pomocą wielokątnego lassa. Mały kwadrat oznacza, że jeszcze jedno kliknięcie zamknie ścieżkę tworzącą zaznaczenie

Closed ... cursor — Kursor narzędzia Polygon Lasso wskazujący możliwość zamknięcia ścieżki

Zaznaczenie tworzone za po­mo­cą lassa również można zamknąć po zwolnieniu przycisku my­szy; Fireworks narysuje od po­czątkowego do końcowego punktu linię tworzącą zam­knięty kształt. Podczas two­rze­nia zaznaczeń za pomocą narzędzia Polygon Lasso, aby utworzyć zamknięty kształt, mu­sisz dwukrotnie kliknąć myszą w miejscu, w którym ma się znajdować końcowy punkt zaznaczenia.

Jeśli chcesz utworzyć zaznaczenie składające się z większej liczby krzywych niż linii pros­tych, użyj narzędzia Lasso. Jeżeli zaznaczenie powinno składać się z długich pros­tych odcinków, nawet w połączeniu z krzywymi, lepiej sprawdzi się wówczas narzędzie Po­lygon Lasso, które pozwala na szybkie i dokładne rysowanie prostych linii. Wie­lo­kąt­ne lasso pozwala na rysowanie prostych linii połączonych z krzywymi.

Jeśli chcesz utworzyć zaznaczenie o nieregularnych kształtach to:

47. Aby wykorzystać narzędzie Lasso, kliknij jego ikonę w palecie narzędziowej lub użyj skrótu klawiaturowego L.

48. Posługując się narzędziem Lasso, kliknij w początkowym punkcie za­zna­cze­nia, przeciągnij, aby utworzyć pożądane zaznaczenie i zwolnij przycisk myszy.

49. Aby użyć narzędzia Polygon Lasso, kliknij i przytrzymaj narzędzie Lasso w pa­lecie narzędziowej, a następnie z rozwijanej grupy narzędzi wybierz Po­ly­gon Lasso. Możesz także dwukrotnie wcisnąć skrót klawiaturowy L.

50. Używając narzędzia Polygon Lasso, kliknij w początkowym punkcie za­zna­cze­nia, przeciągnij do kolejnego punktu ścieżki otaczającej wymagany obszar i klik­nij ponownie. Fireworks połączy wszystkie tworzone w ten sposób punk­ty za pomocą prostych odcinków.

51. Powtarzaj czynności wymienione w punkcie czwartym, aż otoczysz zazna­cze­niem cały wymagany obszar, a następnie przesuń kursor nad początkowy punkt zaznaczenia i kliknij raz lub dwa razy w dowolnym miejscu, aby Fireworks po­łączył początkowy punkt zaznaczenia z punktem końcowym.

Sam częściej tworzę zaznaczenia o nieregularnych kształtach za pomocą wielokątnego niż stan­dardowego lassa. Ale jak prawie w każdym przypadku, zależy to od indy­wi­du­al­nych preferencji użytkownika. Zaznaczanie obszarów pikseli wymaga skrupulatności, a wie­lokątne lasso według mnie pozwala na wykonywanie bardziej precyzyjnych zaznaczeń. Standardowego lassa używam do zaznaczania pojedynczych, zabłąkanych pikseli, któ­re powinny zostać usunięte i to jedynie wtedy, gdy istnieje małe prawdopo­do­bień­stwo zaznaczenia fragmentu głównego obrazka.

Za pomocą palety Tool Options można zdefiniować typ krawędzi zaznaczeń tworzonych za pomocą lassa. Podobnie jak w przypadku narzędzi z grupy Marquee, są trzy opcje do wy­boru: Hard Edge, Anti-Alias i Feather. Działają one tak samo jak zostało to opisane w podrozdziale traktującym o narzędziach Marquee.

Narzędzie Magic Wand (Magiczna różdżka)

Narzędzie Magic Wand XE "Magic Wand" działa zupełnie inaczej niż narzędzia selekcji opisywane w po­przed­nich podrozdziałach. Zamiast obejmować obszary pikseli, magiczna różdżka za­zna­cza piksele o podobnych kolorach. Narzędzie tego typu umożliwia szybkie zazna­cze­nie tła wypełnionego jednolitym kolorem lub innych obszarów.

Narzędzie Magic Wand działa na bardzo prostych zasadach. Możesz je wybrać z palety na­rzędziowej (kliknij i przytrzymaj narzędzie Lasso do czasu wyświetlenia grupy na­rzę­dzi) lub użyć skrótu klawiaturowego W. Kliknij dowolny piksel bitmapy. Zazna­czo­ny zostanie kliknięty piksel i wszystkie otaczające go piksele o podobnych kolorach.

Korzystając z narzędzi Magic Wand i Lasso przekonałem się, że ich stan­dardowe kursory mogą czasami utrudniać pracę. Trudno jest co­kol­wiek zobaczyć, gdy interesujący Cię obszar zostanie przysłonięty kur­sorem w kształcie różdżki. W każdej chwili możesz na szczęście włą­czyć wy­świe­tlanie precyzyjnych kursorów za pomocą klawisza Caps Lock.

Kluczowe sformułowanie w opisie magicznej różdżki to „piksele o podobnych ko­lo­rach”. Wiele obrazków bitmapowych, a zwłaszcza fotografii zapisanych w formacie JPEG, wykorzys­tu­je płynne przejścia kolorów nawet do odwzorowania pozornie monochromatycznych ob­szarów. Za pomocą ustawienia Tolerance (Tolerancja) znajdującego się w palecie Tool Options możesz określić, co Fireworks będzie definiował jako „podobne kolory”. To­lerancja może przybierać wartości z zakresu od 0 do 255. Im mniejsza wartość to­le­rancji, tym zaznaczanych będzie mniej kolorów i odwrotnie.

Spróbuję pokrótce omówić zasadę działania narzędzia Magic Wand i opcji Tolerance. Do­myślnie wartość tolerancji wynosi 32. Tolerancja jest zastosowywana do wartości RGB piksela zaznaczonego za pomocą magicznej różdżki. Jeśli tolerancja zostanie usta­wio­na na 50 a zaznaczony piksel będzie miał kolor o wartościach RGB: 200, 200 i 200, Fire­works uzna wszystkie piksele o wartościach RGB od 150, 150, 150 do 250, 250, 250 za podobne do zaznaczonego. Jednak nie zostaną zaznaczone piksele o takich wartościach, ale nie stykające się z wyselekcjonowanym pikselem.

Oprócz tolerancji, możesz także określić typ krawędzi zaznaczeń tworzonych za po­mo­cą magicznej różdżki. Dostępne opcje to (tak samo jak w przypadku narzędzi z grupy Marquee i Lasso): Hard Edge, Anti-Alias (domyślna) i Feather. Dokładny opis działania po­szczególnych opcji znajdziesz w podrozdziale „Narzędzie Marquee”.

Narzędzie Rubber Stamp (Stempel)

Jeśli szukasz niepowtarzalnego narzędzia wystarczy, że przyjrzysz się bliżej narzędziu Rub­ber Stamp XE "Rub­ber Stamp" (Stampel). Rubber Stamp, jako jedno z narzędzi rysunkowych pra­cu­ją­cych w trybie bitmapowym, działa jak prawdziwy stempel: pobiera wybrany fragment do­kumentu i kopiuje go w inne miejsce. Stempel pozwala na łatwe pobieranie wy­bra­nych fragmentów obrazka i umieszczanie ich w innych obszarach grafiki.

Narzędzie Rubber Stamp posiada kursor składający się z dwóch części: wskaźnika źród­ła i wskaźnika celu. Wskaźnik źródła jest umieszczany nad tym obszarem doku­men­tu, który będzie próbkowany. Wskaźnik celu określa miejsce, w którym dupli­ko­wa­ne będą próbkowane obszary. W czasie rysowania, pomiędzy obydwoma wskaźnikami ut­rzymywane są przez cały czas takie same relacje; jeśli przesuniesz wskaźnik celu w le­wo, wskaźnik źródła również zostanie przesunięty w tym samym kierunku. „Tusz” uży­wany przez narzędzie Rubber Stamp jest zmieniany wraz z każdym przesunięciem narzędzia (gdyż przesuwany jest wskaźnik źródła), możesz więc tworzyć łagodne przej­ścia (rysunek 6.9). Obsługa stempla jest nieco skomplikowana, ale czas prze­znaczony na poznanie zasady działania tego narzędzia na pewno nie pójdzie na marne.

Powiększanie i zmniejszanie selekcji Fireworks posiada bardzo rozbudowane narzędzia selekcji, ale do wy­ko­nywania złożonych zaznaczeń będziesz potrzebował więcej elastycz­noś­ci. łącząc ze sobą kilka różnych zaznaczeń lub wykorzystując jedno z na­rzę­dzi selekcji do usuwania części istniejących zaznaczeń, zys­ku­jesz o wiele więcej możliwości. Dodawanie lub usuwanie obszarów z istniejących zaznaczeń umożliwiają kla­wisze modyfikujące. Wciśnij klawisz Shift, aby dodać za­zna­cze­nie albo wciśnij klawisz Alt (Option), aby je usunąć. Ro­dzaj wykonywanej operacji będzie reprezentowany za pomocą ikony kur­sora. Po wciśnięciu klawisza Shift wyświetlony zostanie znak „+”, zaś po wciśnięciu klawisza Alt (Option) - znak „-”. Przykładowo - w czasie pracy z narzędziem Magic Wand zamiast zmie­niać wartość opcji Tolerance używam klawisza Shift, aby zaznaczać do­datkowe obszary obrazka. Początkowo, zaznaczenie utworzone za po­mocą magicznej różdżki może posiadać jeszcze pewne szczeliny, któ­re trzeba wypełnić. Wciśnięcie klawisza Shift i klikanie w tych miej­scach jest najszybszym sposobem uzupełnienia zaznaczenia (jak zostało po­kazane na poniższym rysunku). Oprócz dodawania obszarów do zaznaczenia, możesz je także usuwać. Wci­ś­nij klawisz Alt (Option) w czasie pracy z dowolnym narzędziem se­lek­cji, aby usunąć wybrane obszary zaznaczenia. Podstawową tech­ni­ką jest „wykrawanie” niepożądanych obszarów zaznaczenia. W poniższej ilu­stracji kształt obwarzanka został utworzony poprzez narysowanie okrą­głego za­znaczenia i usunięcie z niego środka z wykorzystaniem kla­wi­sza Alt (Op­tion). Następnie zastosowałem do obwarzanka Xtra, aby utwo­rzyć ramkę otaczającą twarz. Możliwość usuwania wybranych ob­szarów zaznaczenia poz­wala na tworzenie zaznaczeń o bardzo wy­szu­ka­nych kształtach.

Rysunek 6.9. Na ilustracji stempel jest wykorzystywany do utworzenia dodatkowej głowy

Aby użyć narzędzia Rubber Stamp:

52. Wybierz narządzie Rubber Stamp z palety narzędziowej lub użyj skrótu kla­wia­turowego S.

53. Kliknij obrazek bitmapowy, aby ustalić położenie wskaźnika źródła. Jeśli spróbujesz usta­wić wskaźnik źródła w obiekcie wektorowym, Fireworks wyświetli informację, że narzędzie Rubber Stamp może być wykorzystywane jedynie do pracy z obie­k­tami bitmapowymi.

54. Przesuń wskaźnik celu do miejsca, w którym chcesz skopiować próbkowany ob­­szar, a następnie kliknij i przeciągnij, aby malować stemplem. W trakcie prze­­ciągania, w miejscu wskaźnika celu kopiowane będą obszary znajdujące się pod przesuwającym się wskaźnikiem źródła.

Tryby Aligned Source i Fixed Source

Narzędzie Rubber Stamp może pracować w dwóch podstawowych trybach defi­nio­wa­nych za pomocą listy Source (Źródło), znajdującej się w palecie Tool Options. Pierwszy z nich to tryb Aligned Source XE "Aligned Source" (Niewyrównany), pozwalający na utrzymanie stałych re­la­cji pomiędzy wskaźnikami źródła i celu (nie tylko w czasie malowania). Funkcja ta przy­daje się przy kopiowaniu różnych obszarów obrazka do odległej części dokumentu z zachowaniem proporcjonalnych odstępów. Na przykład - jeżeli chcę umieścić dwoje oczu w obszarze znajdującym się nad głową osoby znajdującej się na obrazku, mogę sko­piować jedno oko za pomocą narzędzia Rubber Stamp, zwolnić przycisk myszy, prze­sunąć kursor nad drugie oko, rozpocząć przeciąganie i malować do momentu uzy­ska­nia kompletnego odwzorowania oka.

Inny tryb pracy narzędzia Rubber Stamp to Fixed Source XE "Fixed Source" (Wyrównany). W trybie tym bez względu na to, gdzie zostanie zwolniony przycisk myszy, wskaźnik źródła jest przy­­ciągany z powrotem do początkowego położenia. Tryb wyrównanego stempla umo­żli­wia kopiowanie w różnych miejscach tego samego obrazka. Gdy chcę zatem umieścić wiele par oczu wokół głowy modela, używam właśnie trybu Fixed Source.

	Wciśnij klawisz Alt (Option), aby ustawić nowe źródło próbkowania dla na­rzędzia Rubber Stamp.

Inne opcje

Mimo że narzędzie Rubber Stamp maluje jedynie piksele, możesz go używać do kopio­wa­nia dowolnej części dokumentu obojętnie, czy będzie to obrazek bitmapowy czy też obiekt wek­to­rowy. Z listy rozwijanej Sample (Próbka) wybierz opcję Image, aby kopiować tylko obra­zek lub opcję Document, by kopiować dowolny obszar dokumentu. Istnieje mała sztu­czka dotycząca korzystania z opcji Sample Document. Ponieważ Rubber Stamp jest na­rzędziem bitmapowym, nie możesz rozpocząć malowania stemplem od kliknięcia po­za obszarem obrazka (nie pozwoli na to Fireworks). Możesz jednak kliknąć obrazek, gdy chcesz ustalić położenie wskaźnika źródła i natychmiast przeciągnąć go z wciśniętym kla­wiszem Alt (Option), aby ustawić źródło próbkowania poza obszarem obrazka. Na­stęp­nie powinieneś określić położenie wskaźnika celu i rozpocząć kopiowanie obraz­ka.

W palecie z opcjami narzędzia Rubber Stamp dostępne są jeszcze dwie inne kontrolki. Su­wak Edge Softness pozwala na ustawienie ostrości krawędzi duplikowanego obraz­ka; im wyżej znajduje się suwak, tym krawędzie obrazka będą bardziej miękkie. Użyj zmięk­czania krawędzi, jeśli chcesz bardziej wtopić kopiowany obrazek w tło. Za po­mo­cą suwaka Stamp Size Slider możesz zmienić rozmiary wskaźnika źródła i wskaźnika celu. Roz­mia­ry te można regulować w zakresie od 0 do 72 pikseli. Domyślny rozmiar wskaź­ni­ków to 16 pikseli. Do rozmiaru wskaźnika wliczane są także wszelkie zmiękczenia kra­wę­dzi usta­­wione za pomocą opcji Edge Softness.

Narzędzie Eraser (Gumka)

Jak zapewne podejrzewasz, narzędzie Eraser XE "Eraser" (Gumka) usuwa piksele z obrazka, po­dob­nie jak tradycyjna gumka pozwala na usuwanie rysunków wykonywanych ołówkiem. Mo­żesz jednak nie wiedzieć, że gumka stosowana w Fireworks posiada wiele opcji umo­żliwiających uzyskiwanie bardzo różnych efektów. Narzędzie Eraser, które pracuje je­dynie z obrazkami bitmapowymi, dzieli miejsce w palecie narzędziowej ze swoim od­po­wiednikiem wektorowym - narzędziem Knife (Nóż). Jeśli chcesz wyświetlić gumkę w palecie narzędziowej, zaznacz obrazek bitmapowy, aby wejść w tryb edycji grafiki bitmapowej.

Aby użyć narzędzia Eraser:

55. Wybierz narzędzie Eraser (lub Knife) z palety narzędziowej lub użyj skrótu kla­wiaturowego E.

56. Jeśli jeszcze tego nie zrobiłeś, zaznacz obrazek, z którym chcesz pracować.

57. Kliknij i przeciągnij nad pikselami, które chcesz usunąć. Fireworks usunie wy­bra­ne piksele zgodnie z opcjami narzędzia ustalonymi w palecie Tool Options (rysunek 6.10).

Rysunek 6.10. Narzędzie Eraser usuwa piksele obrazka zgodnie z opcjami ustalonymi w palecie Tool Options

Oprócz możliwości ustawienia opcji Edge Softness i Size (używanych także w na­rzę­dziu Rubber Stamp), możesz również ustalić kształt gumki. Domyślnie, używana jest okrągła gumka, ale klikając przycisk Square Eraser możesz ją zmienić na kwadratową.

Ostatni zestaw opcji dostępnych w palecie Tool Options bardzo wzbogaca możliwości gumki. W niektórych programach graficznych, usuwanie pikseli polega właściwie na malo­wa­niu kolorem tła lub - w języku Fireworks - obszaru roboczego. Możesz również ustalić tryb pracy gumki. Do wyboru masz cztery opcje:

• Transparent (Przezroczystość).

• Fill color (Kolor wypełnienia).

• Stroke color (Kolor obrysu).

• Canvas color (Kolor obszaru roboczego).

	Jeżeli obrazek „pływa” nad obszarem roboczym i wybierzesz opcję Era­se to Transparent (Usuń do przezroczystości), będzie Ci się wy­da­wa­ło, że malujesz kolorem obszaru roboczego. Jeżeli jednak przesu­niesz obrazek nad inny obiekt zobaczysz, że usunięte obszary istotnie są przezroczyste.

Technika Fireworks:
Ograniczanie obszaru rysowania

Narzędzia selekcji służą nie tylko do modyfikacji obrazków po ich utworzeniu. Są rów­nież pomocne w projektowaniu struktury grafiki. Jeśli utworzysz zaznaczenie w obszarze ro­boczym (obojętnie, czy nad istniejącym obrazkiem czy też nad pustym obrazkiem), wszel­kie operacje zostaną ograniczone tylko do wyselekcjonowanego obszaru. Za­zna­czo­ny obszar może mieć dowolny kształt, jaki można uzyskać za pomocą jednego lub kil­ku narzędzi selekcji: Marquee (Prostokątne zaznaczenie), Oval Marquee (Owalne zaznaczenie), Lasso, Polygon Lasso (Wielokątne lasso) i Magic Wand (Magiczna róż­dżka). Na rysunku 6.11 wygładzone zaznaczenie otaczające twarze zostało odwrócona tak, aby obejmowało cały obszar dokumentu z wyjątkiem twarzy. Cały do­ku­ment został następnie pomalowany za pomocą narzędzia Paintbrush (Pędzel). Za­uważ, że pędzel może malować jedynie w obrębie zaznaczonego obszaru.

		Jeśli utworzysz jakieś zaznaczenie w dokumencie, Xtras także będą dzia­ła­ły jedynie w zaznaczonym obszarze. Na rysunku 6.11 do zaznaczo­ne­go ob­szaru zostało zastosowane Xtra Film Look, aby lekko przybrudzić tło dokumentu i uwydatnić twarze.
Rysunek 6.11. Twarze nie znajdują się w obszarze zaznaczonym, nie zostały więc pomalowane

Deselected area — Nieaktywny obszar zaznaczenia

Selected, paintable area — Obszar zaznaczony, podlegający malowaniu

Warunkiem wykorzystania tej techniki jest utworzenie zaznaczenia przed rozpoczęciem ma­lo­wania. Aktywny obszar zaznaczenia jest reprezentowany przez program za pomocą „ma­sze­rujących mrówek”.

Zaznaczanie wybranych pikseli

Narzędzia selekcji znajdujące się w palecie narzędziowej są bardzo przydatne, ale nie są je­dyną funkcją umożliwiającą tworzenie zaznaczeń w Fireworks. Selekcjonowanie obiek­tów umożliwia także kilka poleceń znajdujących się w menu Edit, a podmenu Modify⇒Marquee zawiera szereg opcji przydatnych do dokładnego dopasowywania lub nawet zapisywania i przywracania zaznaczenia.

Polecenia dla modyfikacji zaznaczeń Marquee zostały przeniesione z podmenu Edit⇒Modify Marquee do nowego podmenu Modify⇒Marquee, w którym znajdują się również polecenia dla tworzenia podobnych i odwrotnych zaznaczeń i nowe polecenia do zapisywania i przywracania zaznaczeń.

Po wykonaniu zaznaczenia, „maszerujące mrówki” funkcjonują prawie jak nowy obiekt. Można przesuwać zaznaczenie lub modyfikować jego właściwości, nie zmieniając zawartych w nim pikseli obrazka. Jeżeli chcesz przemieścić takie zaznaczenie, wciśnij klawisz Ctrl (Command) podczas jego przeciągania. Fireworks przedstawi wtedy ikonę z małymi nożyczkami, wskazując, że będziemy edytować zaznaczone piksele.

Przeciąganie zaznaczenia powoduje jego przesunięcie bez modyfikacji pikseli zawartych w obrazku. Zanim zaczniesz zmieniać obrazek, stwórz zaznaczenie i dopasuj jego lokalizację. Wciśnij klawisz Ctrl (Command) podczas przeciągania zaznaczenia, aby przesunąć zawarte w nim piksele.

Zaznaczanie wszystkich obiektów

Jeśli chcesz zaznaczyć wszystkie obiekty (bitmapowe i wektorowe) znajdujące się w bie­żącym dokumencie, wybierz z menu polecenie EditSelect All XE "Select All" . Często używam skrótu klawiaturowego tego polecenia - Ctrl+A (Command+A) razem z klawiszem De­le­te, gdy zamierzam usunąć wszystkie obiekty znajdujące się w dokumencie i rozpocząć pra­cę od nowa. Wszystkie operacje, które mają być zastosowane do całego doku­men­tu, zostaną wykonywane dopiero po wydaniu polecenia Select All.

Jeżeli wybierzesz polecenie Select All w trybie edycji grafiki bitmapowej, zaznaczony zo­stanie tylko obrazek, gdyż tryb edycji grafiki bitmapowej koncentruje się na jednym obrazku bitmapowym. Z drugiej strony - po wydaniu tego polecenia w trybie edycji gra­­fiki wektorowej zaznaczone zostaną wszystkie obiekty wektorowe i bitmapowe. Pa­mię­taj jednak, że jeśli w trybie edycji wektorowej zaznaczysz jakiś obrazek bitmapowy, nie będziesz mógł pracować z nim za pomocą narzędzi bitmapowych, takich jak Rubber Stamp, które działają jedynie na pojedynczych pikselach.

Zaznaczanie podobnych obszarów

Polecenie Select Similar XE "Select Similar" (Zaznacz podobne) jest rozszerzeniem narzędzia Magic Wand (Ma­giczna różdżka). Podczas gdy magiczna różdżka zaznacza piksele o kolorze zbli­żo­nym do koloru klikniętego piksela, znajdujące się w jego bezpośrednim sąsiedztwie, po­le­cenie Select Similar zaznacza wszystkie piksele o podobnym kolorze znajdujące się w do­kumencie obojętnie, czy sąsiadują z początkowym pikselem, czy nie. Aby użyć te­go polecenia, najpierw ustaw jego tolerancję w palecie Tool Options dla narzędzia Magic Wand, a następnie wybierz z menu EditSelect Similar lub Modify⇒Marquee⇒Select Similar.

	Jest to specyficzne polecenie i powinno być używane z rozwagą. Częs­to trudno jest przewidzieć, jakie obszary obrazka zostaną zaznaczone za jego pomocą. Powinieneś używać go wspólnie z paletą History lub z poleceniem Undo, co pozwoli na cofanie niepożądanych operacji.
	Narzędzia Superselect i Subselect pracują z grupami obiektów, dlate­go też zostaną opisane w rozdziale 13.

Usuwanie wszystkich zaznaczeń

Przeciwieństwem polecenia Select All jest polecenie Deselect XE "Deselect" . Korzystam z niego bar­dzo często, zatem skrót klawiaturowy - Ctrl+D (Command+D) znajduje się na mojej liś­cie dziesięciu skrótów do zapamiętania. Jest to bardzo proste w użyciu i przydatne pole­ce­nie. Wy­bierz z menu EditDeselect, aby usunąć wszystkie zaznaczenia obrazków bitmapowych, obie­k­tów wek­torowych lub tekstu w bieżącym dokumencie.

Odwracanie zaznaczeń

Czasami wydaje mi się, że częściej odwracam zaznaczenia niż dokonuję samych za­zna­czeń pikseli. Zwykle tło obrazka zawiera mniej kolorów niż jego obiekty pierwszo­pla­no­we, więc można je szybko zaznaczyć za pomocą narzędzia Magic Wand (Magiczna róż­dżka). Gdy już zaznaczysz tło, użyj polecenia Select Inverse XE "Select Inverse" (Odwróć zaznaczenie), aby odwrócić zaznaczenie i zaznaczyć wszystkie pozostałe elementy obrazka. Z drugiej stro­ny, jeżeli tło pełne jest różnych kolorów i kształtów, łatwiej będzie prawdopodobnie za­znaczyć elementy znajdujące się na pierwszym planie i odwrócić zaznaczenie, aby za­zna­czyć tło. Polecenie Select Inverse pomoże Ci zaoszczędzić wiele czasu i pracy.

Aby użyć polecenia Select Inverse:

58. Za pomocą dowolnych narzędzi selekcji zaznacz obiekty pierwszoplanowe.

59. Wybierz z menu polecenie Modify⇒MarqueeSelect Inverse lub użyj skrótu klawiaturo­we­go Ctrl+Shift+I (Command+Shift+I). Fireworks odwróci zaznaczenie i zaznaczy tło ob­razka (rysunek 6.12).

Rysunek 6.12. Wyselekcjonowanie elementów pierwszoplanowych i odwrócenie zaznaczenia pozwala na szybkie wyizolowanie złożonego tła

Wygładzanie istniejących selekcji

Wszystkie narzędzia selekcji znajdujące się w palecie narzędziowej posiadają opcję Feat­her. Jednak w przypadku każdego z tych narzędzi, takich jak Marquee lub Magic Wand, wygładzanie krawędzi zaznaczenia jest ustalane już w czasie tworzenia samego zaznaczenia. Co zrobić, gdy zechcesz wygładzić krawędzie już istniejącego zaznaczenia? Wystarczy, że stwo­rzysz zaznaczenie i wybierzesz z menu polecenie Modify⇒MarqueeFeather XE "Feather" , aby otworzyć okno dia­lo­gowe Feather Selection (rysunek 6.13). Wartość parametru Radius (Promień wygła­dza­nia) zostanie zastosowana do bieżącego zaznaczenia.

Rysunek 6.13. Okno dialogowe Feather Selection umożliwia wygładzenie krawędzi istniejącego zaznaczenia

Musisz pamiętać o tym, że polecenie Feather nie powoduje rozmycia krawędzi zazna­cze­nia, lecz modyfikuje kanał alfa, który definiuje zaznaczenie i przezroczystość. Aby zo­ba­czyć efekt wygładzenia krawędzi, będziesz prawdopodobnie musiał przesunąć albo wy­ciąć i wkleić zaznaczenie. Jak w przypadku wszystkich pozostałych opcji wygładzania, tutaj tak­że modyfikowane jest zarówno samo zaznaczenie, jak i znajdujący się przy nim obszar.

	Jeżeli chcesz jedynie rozmyć cały obrazek lub jego część, powinieneś wykorzystać jedno z poleceń z grupy Blur znajdujących się w menu Xtras. Więcej informacji o tych poleceniach znajdziesz w rozdziale 12.

Rozszerzanie i zawężanie zaznaczeń

Niekiedy okazuje się, że ręcznie utworzone zaznaczenie jest o kilka pikseli za małe lub za duże. Utwórz selekcję i wybierz z menu polecenie Modyfy⇒MarqueeExpand, aby otworzyć okno dialogowe Expand Selection i określić liczbę pikseli, o jaką chcesz roz­szerzyć zaznaczenie. I odwrotnie, jeśli chcesz zawęzić zaznaczenie, wybierz z menu po­lecenie Modify⇒MarqueeContract i w oknie dialogowym Contract Selection wpisz pożądaną liczbę pikseli. W obu przypadkach po wpisaniu wartości kliknij przy­cisk OK.

Dodawanie brzegu

Aby utworzyć dodatkowe zaznaczenie wokół bieżącego zaznaczenia, wybierz z menu po­le­ce­nie Modify⇒MarqueeBorder, w oknie dialogowym Select Border wpisz mie­rzo­ną w pikselach szerokość brzegu i kliknij OK. Zostanie utworzone zaznaczenie w kształ­cie ramki o zadanej szerokości wokół poprzedniego zaznaczenia.

Wygładzanie

Polecenie Smooth umożliwia wygładzanie postrzępionych krawędzi kompleksowych za­znaczeń o nieregularnych kształtach. Jest ono szczególnie przydatne przy wygła­dza­niu nieregularnych zaznaczeń tworzonych za pomocą magicznej różdżki. Utwórz za­zna­cze­nie i wybierz z menu polecenie Modify⇒MarqueeSmooth. W oknie dialo­go­wym Smooth Selection wpisz wartość promienia wygładzania (im większy promień, tym bardziej wygładzona selekcja) i kliknij OK.

Zapisywanie i przywracanie zaznaczeń

W podmenu Modify⇒Marquee znajdują się jeszcze dwa inne polecenia. Wybranie po­le­ce­nie Modify⇒MarqueeSave Selection powoduje zapisanie bieżącego zaznaczenia do swoistego schowka znajdującego się w Fireworks. Zaznaczenie jest w nim przechowywane do momentu wybrania polecenia Modify⇒MarqueeSave again, które wprowadza do schowka nowe zaznaczenie. Zapisane zaznaczenie możemy w każdej chwili przywrócić, korzystając z polecenia Modify⇒MarqueeRestore Selection.

	Możliwość zapisywania i przywracania zaznaczeń jest nowym dodatkiem w Fireworks 4.

Używanie narzędzi wektorowych do pracy z bitmapami

Bez względu na to, czy tworzysz obrazek bitmapowy od zera, czy też modyfikujesz ist­nie­jący, będziesz potrzebował dodatkowych narzędzi. W Fireworks wszystkie narzędzia do tworzenia kształtów geometrycznych: Rectangle (Prostokąt), Oval (Owal) i Po­ly­gon (Wielokąt) oraz większość narzędzi rysunkowych, takich jak Pencil (Ołówek) i Brush (Pędzel) mogą być wykorzystywane zarówno w trybie edycji grafiki wek­to­ro­wej, jak i bitmapowej. Jedyna różnica polega na tym, że tworzone elementy są łatwe w edy­cji w obiektach wektorowych, zaś trudno je modyfikować, gdy znajdują się w po­s­ta­ci obiektów bitmapowych. Czasami jednak nie masz wyboru i musisz pracować w trybie edycji gra­fiki bitmapowej. W tabeli 6.1 znajdziesz opis wykorzystywania narzędzi wek­to­ro­wych do pracy w trybie edycji grafiki bitmapowej.

Tabela 6.1.

Działanie narzędzi w trybie edycji grafiki bitmapowej

Narzędzie	Działanie
Rectangle (Prostokąt) i Square (Kwadrat)	Działają tak samo jak w trybie edycji grafiki wektorowej i używają bieżących ustawień obrysu i wypełnienia
Ellipse (Elipsa) i Circle (Okrąg)	Działają tak samo jak w trybie edycji grafiki wektorowej i używają bieżących ustawień obrysu i wypełnienia
Polygon (Wielokąt) i Star (Gwiazda)	Działają tak samo jak w trybie edycji grafiki wektorowej i używają bieżących ustawień obrysu i wypełnienia
Line (Linia)	Działa tak samo jak w trybie edycji grafiki wektorowej i używa bieżących ustawień obrysu
Pencil (Ołówek)	Działa tak samo jak w trybie edycji grafiki wektorowej i używa obrysu o szerokości jednego piksela
Brush (Pędzel)	Działa tak samo jak w trybie edycji grafiki wektorowej i używa bieżących ustawień obrysu
Pen (Pióro)	Jego wybranie powoduje wyjście z trybu edycji grafiki bitmapowej. W trybie wektorowym trzeba je wybrać ponownie
Text (Tekst)	Jego wybranie powoduje wyjście z trybu edycji grafiki bitmapowej i otwarcie okna dialogowego Text Editor

Tabela 6.1.

Działanie narzędzi w trybie edycji grafiki bitmapowej (ciąg dalszy)

Narzędzie	Działanie
Transform (Przekształcenie), Skew (Przekrzywienie) i Distort (Zniekształcenie)	Nie działają w trybie edycji grafiki bitmapowej. Możesz ich jednak używać do modyfikowania zaznaczonych obiektów bitmapowych
Freeform (Dowolne kształty), Reshape Area (Zmiana kształtu) i Path Scrubber (Zmiana nacisku ścieżki)	Nie działają w trybie edycji grafiki bitmapowej. Fireworks wyświetli ostrzeżenie, że narzędzia te mogą być używane jedynie do modyfikowania wektorów

Konwertowanie obiektów wektorowych na bitmapowe

Najlepiej jest pracować z obiektami wektorowymi, które można łatwo modyfikować, ale czasami konieczna może okazać się konwersja tych obiektów na obiekty bitmapowe. Aby wykonać takie przekształcenie, zaznacz jeden lub kilka obiektów wektorowych lub bitmapowych i wybierz z menu polecenie Modify Convert to Bitmap lub użyj skrótu klawiaturowego Ctrl+Shift+Alt+Z (Com­mand+Shift+Option+Z). Fireworks przekonwertuje ścieżkę wektorową na prostokątną ram­kę ota­cza­jącą wszystkie piksele wchodzące w skład wypełnienia, obrysu i efektów obiektu.

Jeśli zaznaczysz wiele obiektów, korzystając z polecenia Convert to Bitmap, możesz je wszys­tkie jednocześnie przekształcić na bitmapę. Utracisz jednak możliwość prze­mie­szczania poszczególnych elementów, ponieważ staną się one częścią jednego obrazka.

	Po przekształceniu obiektu wektorowego na bitmapowy, nie będziesz mógł cofnąć tej kon­wersji bez użycia pomocą polecenia Undo lub palety History. Prze­kon­wer­to­wane obiekty, które są zapisywane i przeładowywane nie mogą być w żaden sposób przywracane do poprzednich, wektorowych stanów. W czasie przekształcania obiektu wektorowego na bitmapowy Fire­works odrzuca wszystkie informacje o wektorach.

Podsumowanie

W Internecie wykorzystywane są obrazki bitmapowe, a Fireworks oferuje bogaty ze­staw narzędzi do ich tworzenia i edycji. Nie są one tak elastyczne jak obiekty wek­to­ro­we, ale ich edycja to integralna część pracy projektanta grafiki internetowej. Gdy bę­dziesz mo­dyfikował w Fireworks obrazki bitmapowe, musisz pamiętać o następują­cych rze­czach:

• Obrazki składają się z pikseli, a każdy z nich posiada określony kolor. Pod­sta­wo­we modyfikacje obrazków bitmapowych polegają na zmianach kolorów pikseli.

• W Fireworks obrazki są modyfikowane głównie w trybie edy­cji grafiki bitmapowej. Tryb ten można uruchomić poprzez dwukrotne klik­nięcie obiektu bitmapowego narzędziem Pointer (Wskaźnik) lub uaktywnienie dowol­ne­go narzędzia służącego do pracy z bitmapami, na przykład Marquee. Aby powrócić do trybu wektorowego, wystarczy dwukrotnie kliknąć bitmapę.

• Wszystkie narzędzia selekcji Fireworks - Rectangular Marquee (Prostokątne za­znaczenie), Oval Marquee (Owalne zaznaczenie), Lasso, Polygon Lasso (Wielokątne lasso) i Magic Wand (Magiczna różdżka) - posiadają wiele opcji do­stępnych w palecie Tool Options.

• Zaznaczenie w postaci „maszerujących mrówek” może być przesuwane, modyfikowane i zapisywane, i nie wpływa to na znajdujące się wewnątrz obrazka piksele.

• Tworząc zaznaczenie w obrazku bitmapowym, możesz ograniczyć obszar dzia­ła­nia narzędzi rysunkowych.

• Najważniejsze narzędzia służące do tworzenia obiektów wektorowych, takie jak Rectangle (Prostokąt), Pen (Pióro) i Brush (Pędzel) mogą być także z pew­ny­mi ograniczeniami wykorzystywane do pracy w trybie edycji grafiki bitma­powej.

W następnym rozdziale nauczysz się pracować z kolorami w Fireworks.




Rozdział 7.
Zarządzanie kolorem

W tym rozdziale:

• Podstawy pracy z kolorami w Internecie.

• Mieszanie nowych kolorów.

• Wybór palety kolorów.

• Technika Fireworks: Konwersja drukowanych kolorów.

Każdy projektant grafiki wie, jak ważnym elementem jego pracy jest kolor. Przyciąga on nie tylko oko, ale i przekazuje emocje. Jest również ważnym czynnikiem, który trze­ba brać pod uwagę w pracach komercyjnych. W Internecie, jak w każdym masowym me­dium, kolor jest również kluczowym elementem identyfikacji. Jeśli będziesz pra­co­wał nad znakiem graficznym Coca-Coli umieszczonym na stronie WWW tej firmy le­piej upewnij się, że posłużyłeś się właściwym odcieniem czerwieni.

Fireworks jest programem wykorzystywanym do produkcji grafiki przeznaczonej do wy­świetlania na ekranie. Nie znajdziesz w nim narzędzi do separacji kolorów, two­rze­nia półtonów lub kalibracji kolorów, które są używane w druku. Co więcej - Fireworks jest narzędziem do tworzenia grafiki przeznaczonej nie tylko na ekran, ale również dla In­ternetu - medium balansującego na granicy wolności i ograniczeń.

W tym rozdziale opisane zostało wykorzystanie kolorów w Internecie. Znajdziesz tu teo­retyczne podstawy pracy z kolorami (m.in. ich różne standardy) oraz ich praktyczne za­stosowania w Fireworks. Jeśli miałeś już wcześniej okazję poznać zasady zarządzania ko­lorem w innych programach komputerowych, możesz opuścić początkowe pod­roz­dzia­ły i przejść do tych, w których opisałem zagadnienia dotyczące zarządzania kolo­rem w Fireworks. Gdy jednak myślisz, że RGB to dokonały zespół muzyczny dzia­ła­ją­cy w la­tach 80. zaś termin „szesnastkowy” oznacza system katalogowania stosowany w bi­­bliotekach, koniecznie przeczytaj pierwsze podrozdziały.

Kolor w Internecie

W naturze kolor uderza w nas z całą swoją siłą, bez żadnych ograniczeń. Jednak w In­ternecie kolory muszą przejść przez wiele różnych filtrów. Najpierw powinny zostać wy­ge­nerowane przez komputer. W grafice internetowej zamiast mieszania barwników, jak od­bywa się to podczas druku, komputer w celu uzyskania pożądanego koloru miesza świa­tła: czerwone, zielone i niebieskie. Następnie zakres wykorzystywanych kolorów jest determinowany przez ustawienia systemowe, z jakich korzysta określony użytkownik. Ostatnimi fil­trami kolorów stosowanych w Internecie są przeglądarki, które występują w wielu wer­sjach i konfiguracjach.

Aby móc rozpocząć tworzenie grafiki dla Internetu, musisz poznać zasady generowania ko­lo­rów przez komputer. Najmniejszym widzialnym elementem monitora kompute­ro­we­go jest piksel. Być może pamiętasz z poprzednich rozdziałów, że angielska nazwa pik­sela - pixel jest skrótem od wyrażenia picture element (element obrazu). Każdy pik­sel obrazu jest wyświetlany za pomocą kombinacji trzech kolorów: czerwonego, zie­lo­ne­go i niebieskiego, które są używane w modelu RGB XE "model kolorów:RGB" (Red - czerwony, Green - zie­lo­ny i Blue - niebieski). Wymieszanie tych trzech barw z ich pełnymi nasyceniami daje w re­zul­tacie czystą biel.

Jeżeli wcześniej miałeś do czynienia z grafiką przeznaczoną do druku, praw­dopodobnie lepiej znasz model CMYK (Cyan - turkusowy, Ma­genta - karmazynowy, Yellow - żółty i blacK - czarny) niż RGB. Przej­ście na model RGB nie po­winno być dla Ciebie zbyt trudne. Fireworks oferuje funkcje umo­żli­wia­jące konwertowanie kolorów z jednego mo­delu na inny. Prze­czy­tasz o tym w podrozdziale „Wykorzystanie mik­sera kolorów”.

Jeśli w modelu RGB mieszanie kolorów w pełnych nasyceniach daje biel, zaś zerowe war­tości poszczególnych kolorów generują czerń, to jak tworzone są wszystkie inne ko­lo­ry? Nasycenia poszczególnych kolorów pikseli: czerwonego, zielonego i niebieskiego mo­gą występować w wielu różnych kombinacjach. Przykładowo, jeżeli ustawisz mak­sy­malną wartość czerwieni i wyłączysz zupełnie kolor zielony i niebieski, uzyskasz czys­tą czerwień. Jeśli dodasz do niej maksymalne nasycenie niebieskiego - uzyskasz ciemny fiolet. Gdyby jednak istniała tylko jedna możliwość włączania lub wyłączania po­szcze­gólnych kolorów, ich kombinacje byłyby bardzo ograniczone. Na szczęście istnie­je możliwość wykorzystywania pośrednich wartości poszczególnych kolorów.

Głębia kolorów

Liczba dostępnych kombinacji kolorów w modelu RGB nazywana jest (bitową) głębią kolorów XE "model kolorów:głębia kolorów" . Bit to najmniejszy element pamięci komputera, który może być włączany i wyłączany. Kom­puter pracujący z 1-bitową głębią kolorów potrafi wyświetlić jedynie dwa kolory: je­den kolor dla bitu włączonego i jeden dla wyłączonego. Jeżeli głębia bitowa zostanie dwu­krotnie zwiększona, liczba wyświetlanych kolorów wzrośnie do czterech.

Liczba wyświetlanych kolorów jest obliczana przez komputer poprzez podniesienie licz­by 2 do takiej potęgi, jaką wartość ma głębia bitowa. W tabeli 7.1 znajdziesz opis od­­działywania zmian głębi kolorów na zakres wyświetlanych kolorów.

Tabela 7.1.

Głębia bitowa a liczba kolorów

Głębia bitowa	Liczba kolorów	Opis
1	2	Kolor biały i czarny, reprezentujące bit włączony i wyłączony
2	4	Przy 2-bitowej głębi kolorów komputery (zazwyczaj notebooki i laptopy) wyświetlają cztery odcienie szarości
4	16	Minimalna liczba kolorów wyświetlanych przez monitory standardu VGA (Video Graphics Adapter). VGA to najpopularniejsza technologia wyświetlania stosowana w monitorach komputerowych
8	256	Większość komputerów wyprodukowanych po roku 1995 może wyświetlać 256 lub więcej kolorów
16	65 536	Często używana jest nazwa „tysiące kolorów” lub „HiColor”
24	16 777 216	Często używana jest nazwa „miliony kolorów” lub „True Color”
32	16 777 216	True Color z dodatkową, 8-bitową maską alfa

W tabeli 7.1 pominąłem niektóre wartości głębi bitowych, które są bardzo rzadko wy­ko­rzystywane w monitorach komputerowych. Zwróć uwagę, że w 32-bitowej głębi jest ty­le samo kolorów co w głębi 24-bitowej. Mimo że za pomocą 32-bitów można teo­re­tycz­nie opisać ponad 4 miliardy kolorów, ludzkie oko nie potrafi rozróżnić ich wszys­tkich. Dlatego też 32-bitowa głębia kolorów jest kombinacją głębi 24-bitowej (16,7 mi­li­ona ko­lo­rów) i nakładanej na nią 8-bitowej skali szarości (nazywanej mas­ką) definiującej prze­zro­czystość i sposób łączenia grafiki. Maska może być wykorzystana na przykład do utwo­rzenia okrągłej grafiki lub obrazka z „dziurami”, przez które będą widoczne obiek­ty znajdujące się pod spodem. Maska tego typu nazywana jest maską alfa XE "maska alfa" lub kanałem alfa XE "kanał alfa" .

Głębia bitowa jest ściśle związana z pamięcią komputera (bit jest najmniejszym ele­men­tem pamięci), więc do wyświetlenia pełnego zakresu kolorów wymagane jest zwięk­sze­nie za­sobów pamięci. Co więcej, potrzebna jest do tego nie pamięć operacyjna, ale pamięć kar­ty graficznej. Jeszcze do niedawna pamięć kart graficznych była mocno ograniczona i większość systemów mogła wyświetlać jedynie 256 kolorów (8-bitów). Zatem artyści pro­jektujący dla Internetu byli zmuszeni do pracy z tylko 256 kolorami.

	Obecnie coraz więcej komputerów podłączonych do Internetu może pra­cować z większą głębią kolorów. Z ostatnich statystyk wynika, że spośród oko­ło 7 milionów użytkowników Internetu, mniej niż 15 procent korzys­ta z systemów umożliwiających wyświetlenie tylko 256 kolorów. Nie oznacza to jednak, że już wszystkie grafiki mogą używać milionów barw. Im więcej kolorów zostanie wykorzystanych w obrazku GIF, tym
	więk­szy będzie rozmiar fizyczny pliku. Podczas projektowania grafiki na­leży pamiętać o tym, że szybkość wyświetlania grafiki w Internecie jest bardzo ważnym czynnikiem.
	Przykłady różnych ustawień głębi kolorów znajdziesz w kolorowej wkładce.

Kolory szesnastkowe

W języku Internetu - HTML-u, kolory występujące w modelu RGB podawane są za po­mocą wartości szesnastkowych (heksadecymalnych). System heksadecymalny XE "system heksadecymalny" (częs­to nazywany hex od angielskiego słowa hexadecimal XE "hexadecimal" ) jest oparty na szesnastu znakach:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Litery reprezentują wartości, które w systemie dziesiętnym musiałyby zostać przed­sta­wio­ne za pomocą dwóch cyfr: A oznacza 10, B - 11, C - 12 itd. Jeżeli chciałbyś podać war­tość wykraczającą poza szesnaście pojedynczych cyfr (innymi słowy, wyższą niż F), mu­sisz umieścić na początku jedynkę, czyli tak samo jak w systemie dziesiętnym po­da­wa­ne są liczby składające się z więcej niż jednej cyfry. Może to brzmieć trochę obco dla tych, którzy wcześniej korzystali tylko z systemu dziesiętnego, ale przyjrzyjmy się po­niż­szemu zapisowi (pamiętaj, że „10” oznacza tutaj liczbę 16):

10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20

W systemie dziesiętnym, za pomocą dwóch cyfr można określić każdą liczbę mniejszą niż 99, zaś w systemie szesnastkowym największą dwucyfrową liczbą jest FF. Mimo że obie liczby składają się z dwóch cyfr, w systemie szesnastkowym FF oznacza liczbę 255.

Zapisz liczbę szesnastkową FF jako 1515 i pomyśl, że jest to tysiąc, pięć setek i piętnaście. Gdy przyjrzysz się bliżej liczbie 99 stwierdzisz, że pierwsza dziewiątka oznacza liczbę 90, lub 9 pomnożone razy 10. A teraz przyjrzyj się liczbie szesnastkowej FF, w której pierwsze F to 15 pomnożone przez 16, co daje w rezultacie liczbę dziesiętną 240. Dru­gie F oznacza liczbę 15, więc po zsumowaniu liczba FF wynosi 255.

Wartości RGB w systemie szesnastkowym wyrażane są za pomocą trzech dwu­cy­fro­wych liczb, z których każda odpowiada jednemu z 256 poziomów kolorów — odpowiednio czerwonego, zie­lonego i niebieskiego. Przykładowo - biel w systemie RGB jest zapisywana za po­mo­cą wartości 255, 255, 255, czyli wszystkie kolory składowe mają maksymalne nasy­ce­nie. Odpowiednikiem tego zapisu w systemie szesnastkowym jest FF, FF, FF. W ję­zy­ku HTML wszystkie te wartości są wpisywane razem: FFFFFF. Wartość koloru czarnego w modelu RGB to 0, 0, 0, zaś w systemie szesnastkowym - 000000. Czerwień nato­miast ma wartości 255, 0, 0 w modelu RGB i FF0000 w systemie szesnastkowym.

Na początku zapisywanie kolorów w systemie szesnastkowym może być nieco skom­pli­ko­wane, ale zapis taki umożliwia szybkie rozpoznawanie kolorów. Najlepiej rozpocząć od rozpoznawania pewnych wzorców. Oto jeden z nich - wszystkie zapisy składające się z trzech par takich samych cyfr oznaczają odcienie szarości: 111111 oznacza naj­ciem­niejszy a EEEEEE najjaśniejszy odcień szarości.

Kolory bezpieczne dla Internetu

Jak wspomniałem wcześniej, najniższym wspólnym mianownikiem dla monitorów kom­puterowych jest 8-bitowa głębia kolorów (256 kolorów). Ale istnieje jeszcze jeden czyn­nik ograniczający kolory w Internecie - przeglądarka. Wszystkie znaczące prze­glą­dar­­ki Microsoftu i Netscape'a w obu systemach operacyjnych - Windows i MacOS - do wy­świetlania 8-bitowych obrazków używają stałej 256-kolorowej palety. Jeśli od niej odej­miemy jeszcze 40 specyficznych dla poszczególnych systemów kolorów, które różnią się w zależności od systemu ope­racyjnego (a zapewne chciałbyś, aby Twoja grafika wyglądała tak samo w każdym sys­temie operacyjnym), pozostaje paleta składająca się jedynie z 216 kolorów. Wszys­tkie odcienie należące do tej palety mogą być wyświetlane bez żadnych rozbieżności w każ­dym systemie operacyjnym (bez konieczności symulowania ich poprzez miesza­nie dwóch innych barw), nazywane są więc paletą bezpieczną dla przeglądarki lub bezpieczną dla Internetu (Web Safe Palette XE "Web Safe Palette" ).

	Interesujące jest to, że zapisane w systemie szesnastkowym kolory bez­pieczne dla Internetu są łatwo rozpoznawalne. Każdy kolor, w któ­re­go zapisie heksadecymalnym występują kombinacje cyfr 00, 33, 66, 99, CC lub FF, na przykład 0000FF, 336699 lub FFCC00, należy do palety Web Safe.

Należy wiedzieć, że paleta kolorów bezpiecznych dla Internetu powinna być stosowana w obrazkach zawierających duże obszary jednolitego koloru, takich jak ilustracje, znaki gra­ficzne i tekst nagłówkowy, czyli obrazkach tworzonych w programie komputero­wym i eksportowanych w formacie GIF. Wykorzystanie w takich obrazkach kolorów bez­piecznych dla Internetu sprawia, że obszary jednolitego koloru nie tracą spoistości. Fo­tografie są eksportowane z użyciem 24-bitowej palety (przeważnie w formacie JPEG) i w razie konieczności wyświetlane przy użyciu techniki zwanej rozpraszaniem (ang. dithering) przez przeglądarkę.

Paleta bezpiecznych kolorów jest bardzo ważnym czynnikiem w projektowaniu dla In­ter­netu, więc Fireworks umożliwia jej szerokie zastosowania i zawiera wiele funkcji poz­walających na efektywną pracę z kolorami:

• Domyślnie rozwijany próbnik kolorów, dostępny po kliknięciu dowolnej prób­ki koloru w Fireworks, jest ustawiony na kolory bezpieczne dla Internetu.

• Wciśnięcie i przytrzymanie klawisza Shift w czasie korzystania z narzędzia Eye­dropper (Kroplomierz) powoduje, że każdy próbkowany kolor jest kon­wer­to­wany na kolor bezpieczny dla Internetu.

• Paleta Find and Replace umożliwia wyszukiwanie w całym dokumencie lub na­wet wielu dokumentach jednocześnie kolorów, które nie należą do palety ko­lo­rów bezpiecznych dla Internetu i konwertowanie ich na najbliższe „bez­piecz­ne” odpowiedniki.

	Więcej informacji o korzystaniu z palety Find and Replace znajdziesz w rozdziale 18.

• W palecie Fill (Wypełnienie) znajduje się kategoria Web Dither (Rozproszenie in­ter­netowe). Jej wybranie powoduje przekonwertowanie dowolnego koloru na de­seń składający się z odcieni bezpiecznych dla Internetu, które sy­mu­lu­ją wybraną barwę.

Pracując dłużej w Fireworks lub w ogóle z grafiką internetową, na pewno bliżej poz­nasz paletę kolorów bezpiecznych dla Internetu.

Różnice pomiędzy platformami

Projektanci grafiki internetowej muszą borykać się nie tylko z ograniczeniami kolorów i róż­nicami występującymi pomiędzy wieloma dostępnymi na rynku przeglądarkami in­ter­netowymi. Powinni brać pod uwagę także różnice pomiędzy platformami Windows i Macintosh. Najważniejsze z nich występują pomiędzy ustawieniami parametru gamma.

Gamma lub - bardziej poprawnie - korekcja gamma XE "korekcja gamma" pozwala na uniknięcie wy­świe­tla­nia średnich tonów jako zbyt ciemnych. Problem ten wynika z odmiennych ustawień gam­my w różnych systemach operacyjnych. W MacOS domyślnie gamma wynosi 1.8, zaś w Windows 2.2 (gamma 2.2 wykorzystywana jest również w telewizji). Niższe war­toś­ci gammy w MacOS dobrze sprawdzają się przy symulowaniu wyglądu grafiki w dru­ku, ale przy wyświetlaniu na ekranie grafika będzie jaśniejsza niż w Windows. W re­zultacie ta sama grafika w systemie Windows będzie wyglądała na ciemniejszą niż w MacOS.

Użytkownicy MacOS, jeśli posiadają moduł ColorSync, mogą ustawić ko­rekcję gamma na 2.2, aby oglądać grafikę tak, jak będzie ona wy­glą­dała w Internecie lub w telewizji. Otwórz sekcję Monitors lub Mo­ni­tors and Sound panelu kontrolnego, kliknij przycisk Color i wykonaj wszys­tkie pojawiające się na ekranie instrukcje, aby skalibrować swój mo­nitor. Ustaw wartość parametru gamma na 2.2. Możesz również wykorzystać „macierzyste” ustawienie gamma monitora, które może być właśnie 2.2.

Wiele problemów sprawia również fakt, że użytkownicy systemów PC korzystają z bar­dzo zróżnicowanych kart graficznych i monitorów, zaś posiadacze MacOS mają za­zwy­czaj dopasowane lub nawet wbudowane systemy wyświetlania. Po przeprowadzeniu tes­tów może się okazać, że typowe ustawienia gammy w Windows mogą różnić się mię­dzy sobą o wiele bardziej niż ustawienia gammy w MacOS. Poza tym istnieje wielu

róż­nych producentów sprzętu komputerowego, więc ustawienie korekcji gamma na 2.2 nie gwarantuje, że grafika będzie właściwie wyświetlana u wszystkich użytkowników sys­temów Windows.

Jedyne rozwiązanie tego problemu, które wciąż pozostaje w fazie „już wkrótce”, to źród­łowy format Fireworks - PNG. Obrazki zapisane w formacie PNG mogą posiadać wbu­dowane wartości korekcji gamma, co pozwala na ich poprawne wyświetlanie w każ­dym systemie operacyjnym. Mimo że wyświetlanie obrazków PNG w prze­glą­dar­kach internetowych nie jest już żadną nowością, obsługę wbudowanej korekcji gamma umo­żliwia jedynie Internet Explorer dla Windows.

W przyszłości ogromny wpływ telewizji na Internet i Internetu na świat komputerów mo­że spowodować, że 2.2 stanie się standardowym ustawieniem korekcji gamma także w sys­temach MacOS. Na razie najlepszym rozwiązaniem pozostaje testowanie wyglądu gra­­fiki przy obu ustawieniach korekcji i znalezienie kompromisu, koniecznego do osią­gnię­cia rezultatów możliwych do zaakceptowania na obu platformach. W takich sy­tu­ac­jach z pomocą przychodzi Fireworks. Pozwala on na szybkie oglądanie grafiki przy róż­nych usta­wieniach gammy za pomocą poleceń Macintosh Gamma i Windows Gamma.

W Fireworks dla Windows wybierz z menu polecenie ViewMacintosh Gamma XE "Macintosh Gamma" , aby zo­baczyć, jak Twoja praca będzie wyglądała MacOS. Podobnie w Fireworks dla Mac­OS, wybierz z menu polecenie ViewWindows Gamma XE "Windows Gamma" , zobaczysz, jak ta sama grafika bę­dzie wyglądała u większości użytkowników systemów Windows.

	Dla użytkowników MacOS: Jeśli w czasie przygotowywania grafiki dla te­lewizji wykorzystujesz gamę 1.8, pamiętaj, że gamma używana w Win­dows jest taka sama jak w telewizji, więc wydanie polecenia Windows Gam­ma da identyczne rezultaty, co podgląd pracy przy ustawieniach gammy dla TV.
	W kolorowej wkładce znajdziesz rysunki ilustrujące wygląd grafiki przy różnych ustawieniach korekcji gamma.

Systemy zarządzania kolorem

Systemy zarządzania kolorem: ColorSync XE "ColorSync" (tylko dla MacOS) i Kodak CMS XE "Kodak CMS" są wyko­rzys­tywane w Photoshopie i innych aplikacjach w celu dokładnego odwzorowania ko­lo­rów grafiki na ekranie, w skanerach i drukarkach. Jeśli zaimportujesz do Fireworks obra­zek utworzony w jednej z takich aplikacji, wartości poszczególnych odcieni mogą ulec niewielkim zmianom, gdyż Fireworks nie współpracuje z żadnym systemem zarzą­dza­nia barwami.

Najprostszym sposobem zapobiegania takim zmianom jest wyłączenie systemu zarzą­dza­nia kolorem w aplikacji źródłowej przed wyeksportowaniem lub zapisaniem obraz­ka. Możesz także zaimportować obrazek do Fireworks i użyć suwaka Hue (Barwa) w oknie Xtra Hue/Saturation (Barwa/Nasycenie), aby skorygować wszystkie przesunięcia ko­lo­rów i przy­wrócić im, na przykład, wartości bezpieczne dla Internetu.

Mieszanie kolorów

Najważniejsze narzędzie służące do zarządzania kolorem w Fireworks to Color Mixer (Mik­ser kolorów), za pomocą którego można wybierać odcienie wypełnień i obrysów z peł­nego spektrum kolorów dostępnych w jednym z pięciu modeli. Możesz również zde­fi­niować barwę poprzez wprowadzenie jej wartości za pomocą suwaka lub bez­po­śred­nio w odpowiednie pola tekstowe.

Korzystanie z miksera kolorów

Aby otworzyć paletę Color Mixer XE "paleta:Color Mixer" , wybierz z menu polecenie WindowColor Mixer. Mikser kolorów (rysunek 7.1) podzielony jest na trzy główne sekcje:

Rysunek 7.1. Otwórz paletę Color Mixer, aby wybrać kolory obrysu i wypełnienia za pomocą spektrum kolorów lub suwaków

Fill color well — Próbka koloru wypełnienia

Stroke color well — Próbka koloru obrysu

Options pop-up button — Przycisk wyświetlający opcje miksera

Color sliders — Suwaki kolorów

Default colors button — Przycisk przywrócenia standardowych kolorów

Set to None button — Przycisk ustawienia None (Brak)

Swap colors button — Zamiana kolorów obrysu i wypełnienia

Color ramp — Spektrum kolorów

• Próbki kolorów: Próbki kolorów obrysu i wypełnienia wyświetlają kolory za­zna­czonego obiektu. Za pomocą przycisków znajdujących się w tej sekcji mik­se­ra można przywrócić standardowe kolory obrysu i wypełnienia lub je zamie­nić.

• Suwaki kolorów: Za pomocą suwaków można zmieniać wartości po­szcze­gólnych składowych koloru.

• Spektrum kolorów: W spektrum kolorów wyświetlane są wszystkie kolory do­stępne w określonym modelu, które można wybierać za pomocą narzędzia Eye­dropper (Kroplomierz).

Wybieranie koloru

Artyści projektujący dla Internetu mogą tworzyć grafikę od podstaw, tak jak pod­po­wia­da im wyobraźnia, albo dostosowywać lub adaptować istniejące prace. Obie metody są dobre, zaś w każdej z nich Fireworks pozwala zdefiniować odpowiednie kolory. Je­że­li preferujesz „wzrokowe” metody pracy i wybór kolorów bezpośrednio z palety, masz możliwość pobierania barw z ich pełnego spektrum, próbek kolorów bez­piecz­nych dla Internetu lub z dowolnego innego obrazka. Jeśli jednak wolisz pracować „prze­pi­sowo”, za pomocą suwaków możesz wprowadzać dokładne liczbowe wartości ko­lo­rów należących do jednego z pięciu modeli.

Spektrum kolorów

Aby wybrać kolor za pomocą spektrum kolorów:

60. Wybierz z menu polecenie WindowColor Mixer, aby otworzyć paletę Color Mixer (Mikser kolorów).

61. Wybierz próbkę koloru obrysu lub wypełnienia. Wybrana próbka zostanie wy­róż­niona obwódką.

62. Przesuń kursor nad spektrum kolorów. Narzędzie Eyedropper XE "Eyedropper" (Kroplomierz) mo­że pracować w jednym z dwóch trybów. Krzywa linia w ikonie krop­lo­mie­rza wskazuje, że pobrany zostanie kolor obrysu, zaś czarny kwadrat reprezen­tu­je pobieranie koloru wypełnienia.

	W spektrum wyświetlane są kolory należące do wybranego modelu, na przykład RGB, Hexadecimal (Szesnastkowy) lub Grayscale (Skala sza­rości). Klikając spektrum kolorów z wciśniętym klawiszem Shift, mo­żesz przełączać modele kolorów. Każde takie kliknięcie powoduje prze­łączenie spektrum kolorów kolejno na kolory bezpieczne dla Internetu, peł­ny zakres kolorów lub skalę szarości.

63. Kliknij w spektrum, aby wybrać pożądany kolor.

	Jeśli klikniesz i przeciągniesz kursorem po spektrum kolorów, auto­ma­tycznie będą aktualizowane ustawienia próbek i suwaków kolorów. Poz­wala to zobaczyć, jaki kolor zostanie wybrany po zwolnieniu przy­cis­ku myszy. Jeśli jest niewłaściwy, zaznacz w menu polecenie EditUndo, aby wrócić do poprzednich ustawień.

64. Po zwolnieniu przycisku myszy i wybraniu nowego koloru, program zak­tu­ali­zu­je ustawienia zarówno próbki, jak i suwaków kolorów. Jeśli w tym czasie za­zna­czony był jakiś obiekt, jego kolory także zostaną zmienione.

Suwaki miksera kolorów

Inną metodą wyboru koloru jest wykorzystanie suwaków znajdujących się w palecie Color Mixer. Jak w przypadku każdego innego suwaka Fireworks, możesz wpisać wartość bez­pośrednio w pole tekstowe lub przeciągnąć suwak w górę albo w dół. To, jakie su­wa­ki są dostępne w mikserze zależy od wybranego modelu kolorów. Każdy z suwaków w modelach RGB, CMY i HSB odpowiada za kolor reprezentowany przez poszcze­gól­ne litery w nazwie modelu. W modelu Hexadecimal (Szesnastkowy) wyświetlane są su­wa­ki R, G i B. W przypadku modelu Grayscale (Skala szarości) wyświetlany jest tylko je­d­en suwak - K, który jest odpowiedzialny za procentowy udział czerni.

Jeżeli nie znasz dokładnych wartości poszczególnych składowych pożądanego koloru, możesz prze­suwać suwaki i obserwować zmieniającą się próbkę. Jeśli zaznaczony będzie jakiś obiekt, po zwolnieniu przycisku myszy zmieniony zostanie kolor jego obrysu lub wy­pełnienia.

Modele kolorów

Oprócz wcześniej wspomnianych modeli kolorów: RGB i szesnastkowego, Fireworks ofe­ruje jeszcze trzy inne. Możliwość przełączania się pomiędzy różnymi modelami ko­lo­rów to bardzo ważna funkcja w projektowaniu dla Internetu. Dość często się zdarza, że projektant musi przekonwertować grafikę przeznaczoną pierwotnie dla innego nośnika. Możesz również przełączyć się na inny system kolorów, aby uzyskać dostęp do jego specyficznych możliwości. Przykładowo - przejście na model HSB pozwala na zmia­nę odcienia danego koloru poprzez modyfikację jego nasycenia.

Wszystkie modele kolorów można wybierać za pomocą menu rozwijanego po klik­nię­ciu przycisku znajdującego się w prawym górnym rogu palety Color Mixer. Z wyświe­tla­nej listy możesz wybrać potrzebny Ci model kolorów (rysunek 7.2).

Rysunek 7.2. Z menu rozwijanego palety Color Mixer wybierz jeden z pięciu modeli kolorów

Model RGB

Modelu RGB umożliwia wybranie jednego z 16,7 miliona kolorów do­stęp­nych w 24-bitowym spektrum. Nie wszystkie kolory znajdujące się w tym modelu są wy­świetlane w spektrum RGB XE "model kolorów:RGB" (przy rozdzielczości 72 pikseli na cal, na wyświetlenie wszys­tkich pikseli potrzebnych byłoby 19 000 stóp kwadratowych - musiałbyś mieć po­tężny monitor), ale za pomocą suwaków kolorów (rysunek 7.3) możesz wprowadzić od­powiednią wartość. Suwaki kolorów używają wartości od 0 do 255.

Rysunek 7.3. Podczas pracy w modelu RGB można wybrać jeden z 16,7 miliona kolorów
		Jeżeli Twój ekran nie jest w stanie wyświetlić tylu kolorów, ile jest do­stęp­nych w danym modelu (jeśli na przykład wybierzesz model RGB, a Twój monitor potrafi wyświetlić tylko 256 kolorów), w spektrum ko­lo­rów będzie wykonywane rozpraszanie (dithering). Polega ono na two­rzeniu wzorku składającego się z dwóch lub więcej kolorów, który sy­muluje inny kolor i jest wyświetlany w postaci widocznych punktów. Jed­nak mimo tego, że na ekranie pojawi się tylko symulacja, kolory wybierane za pomocą na­rzędzia Eyedropper będą miały dokładne wartości RGB.

Model Hexadecimal XE "model kolorów:Hexadecimal" (Szesnastkowy)

Gdy wybierzesz szesnastkowy model kolorów, zauważysz dwie zmiany. Obok suwa­ków znajdujących się w palecie Color Mixer wyświetlone zostaną szesnastkowe wartości kolo­rów, zaś w spektrum zobaczysz tylko kolory bezpieczne dla Internetu (rysunek 7.4).

Rysunek 7.4. Mimo że za pomocą suwaków w modelu szesnastkowym możesz wprowadzić dowolną wartość koloru z modelu RGB, w spektrum wyświetlane są jedynie kolory bezpieczne dla Internetu

W spektrum, które jest domyślnie wyświetlane po pierwszym uruchomieniu Fire­works, można zaobserwować zjawisko nazywane pasmowaniem. Występuje ono, gdy za­kres ko­lo­rów jest zbyt mały, aby mogły zostać utworzone pomiędzy nimi płyn­ne przej­ścia.

	Wszystkie wartości wprowadzane ręcznie w pola tekstowe znajdujące się obok suwaków kolorów muszą być podawane w systemie szes­nas­tkowym. Jeśli spróbujesz wprowadzić wartość wykraczającą poza sys­tem szesnastkowy, na przykład 255, Fireworks przekonwertuje tę war­tość poprzez odrzucenie pierwszej cyfry.

Model CMY XE "model kolorów:CMY"

Jak wspomniałem w jednym z poprzednich podrozdziałów, większość projektantów roz­poczynało swoją karierę w poligrafii, gdzie każdy kolor jest tworzony za pomocą czte­rech różnych farb: niebieskozielonej (Cyan), magenty (Magenta), żółtej (Yellow) i czarnej (BlacK). Są to kolory używane w modelu CMYK. Teoretycznie cały zakres kolorów mo­że zostać odwzorowany za pomocą trzech pierwszym kolorów modelu CMYK, ale w praktyce do utworzenia ciemnych kolorów potrzebny jest jeszcze czwarty kolor - czarny.

W Fireworks kolory z modelu CMY są reprezentowane za pomocą wartości z prze­dzia­łu od 0 do 255. Pod pewnymi względami model ten można rozpatrywać jako prze­ci­wień­stwo modelu RGB który jest modelem addytywnym, ponieważ musisz dodawać do sie­bie poszczególne kolory, aby uzyskać biel. Model CMY jest modelem subtraktywnym gdyż w celu uzyskania bieli, musisz odejmować od siebie kolory. Po wybraniu tego właś­nie modelu z rozwijanego menu palety Color Mixer, wyświetlone zostaną suwaki: C (Cyan), M (Magenta) i Y (Yellow) (rysunek 7.5).

Rysunek 7.5. Projektanci internetowi, którzy wcześniej pracowali z grafiką przeznaczoną do druku powinni dobrze znać model kolorów CMY

Fireworks nie jest programem służącym do przygotowywania grafiki do druku, więc ko­lory możesz określić jedynie za pomocą trzech składowych: cyjanu, magenty i żół­te­go; nie ma możliwości dodawania czerni. Niedogodność ta utrudnia konwersję kolorów z modelu CMYK na model CMY. Najlepszym rozwiązaniem jest wykorzystanie innego mo­delu kolorów, na przykład RGB lub określonego koloru z palety Pantone.

Model HSB

Skrót HSB XE "model kolorów:HSB" pochodzi od pierwszych liter angielskich słów: Hue (Barwa), Saturation (Na­sycenie) i Brightness (Jasność). Model ten jest dostępny w wielu programach kom­pu­terowych, włączając w to Photoshopa. Barwa reprezentuje grupę kolorów, jaką moż­na zaobserwować w kole kolorów. HSB jest to modelem „kołowym”, więc war­tości barwy są liczbami z zakresu od 0 do 360 stopni. Nasycenie definiuje czystość barwy i jest mie­rzo­ne w procentach. 100% nasycenie daje najczystszą barwę. Jasność także jest poda­wa­na w wartościach procentowych i określa stopień rozjaśnienia lub zaciem­nienia koloru. 0% daje czerń, zaś 100% najjaśniejszy odcień danego koloru. Po zre­dukowaniu jas­noś­ci do zera, wartości barwy i nasycenia także są ustawiane na zero. Po wybraniu pozycji HSB z menu rozwijanego palety Color Mixer, wyświetlane są trzy suwaki: H, S i B (rysunek 7.6).

Rysunek 7.6. W modelu HSB można łatwo rozjaśnić lub przyciemnić określony kolor
		Nie próbuj bezpośrednio „przenosić” barwy określonej w modelu HSB do modelu o podobnej nazwie - HLS. Model HLS (Hue - Bar­wa, Luminosity - Luminancja i Saturation - Nasycenie), używany w programie FreeHand i innych programach wektorowych i dostępny rów­nież w próbniku systemu MacOS, do określenia „światła” zamiast jas­noś­ci wykorzystuje luminancję. Główna różnica pomiędzy tymi dwo­ma parametrami polega na innym oddziaływaniu ich maksymalnych war­toś­ci na tworzony kolor. W modelu HSB połączenie maksymalnej war­tości jasności z maksymalną wartością nasycenia daje najbardziej jas­krawe odcienie koloru. W modelu HLS, maksymalna wartość lumi­na­ncji (niezależnie od poziomu nasycenia) daje kolor biały.

Model Grayscale (Skala szarości)

Pomimo bogactwa kolorów (a może właśnie dlatego), obrazki w skali szarości cieszą się wielkim powodzeniem wśród grafików. Bez względu na to, czy tworzysz grafikę, któ­ra ma być częścią czarno-białego filmu czy czarno-biały obrazek, który chcesz umieś­cić w kolorowej witrynie internetowej, potrzebny Ci będzie dostęp do palety skali sza­rości. Paleta ta w Fireworks oferuje pełen zakres 256 odcieni szarości - od abso­lut­nej bieli do absolutnej czerni.

Po wybraniu modelu Grayscale XE "model kolorów:Grayscale" z menu palety Color Mixer, z trzech dostępnych wcześ­niej suwaków kolorów pozostaje tylko jeden - K (BlacK - Czarny). Jak pokazano na ry­sunku 7.7, czerń podawana jest w wartościach procentowych (100% daje czerń, zaś 0% - biel).

Rysunek 7.7. Wybierz model Grayscale z menu rozwijanego palety Color Mixer, aby uzyskać dostęp do 256 odcieni szarości

Próbki kolorów

Dość często witryny internetowe tworzone są z wykorzystaniem ściśle określonych ko­lo­rów. Najczęściej stosowana paleta zawiera 216 kolorów bezpiecznych dla Internetu, któ­re w każdym systemie operacyjnym zawsze wyglądają tak samo. Została ona za­pro­jek­towana także z myślą o dostosowaniu kolorów do określonego schematu (dla całej witryny WWW lub określonego obszaru). Każda paleta kolorów może zostać zapisana jako plik.

W palecie Swatches XE "paleta:Swatches" Fireworks można znaleźć wiele funkcji umożliwiających zarzą­dza­nie próbkami kolorów. Mogą one być modyfikowane, zapisywane, ładowane lub cał­ko­wi­cie usuwane. Możliwe jest nawet wydobywanie palet kolorów z obrazków.

Wybieranie kolorów za pomocą próbek

Standardowy rozwijany próbnik kolorów Fireworks oferuje duże możliwości. Po jego wybraniu, kursor zmienia się w narzędzie Eyedropper XE "Eyedropper" (Kroplomierz), które umożliwia pobieranie kolorów z dowolnych ob­sza­rów znajdujących się na ekranie (zarówno w próbniku kolorów, w innej części Fireworks, jak i w dowolnym miejscu monitora). Przy­cisk No Color (Bez koloru) pozwala na szybkie usunięcie barwy obrysu i wy­peł­nie­nia obiektu bez konieczności otwierania żadnych palet, a przy­cisk Palette (Paleta) pozwala na otwarcie systemowego próbnika kolorów.

	W Fireworks 3 narzędzie kroplomierz było aktywne dopiero po naciśnięciu przycisku w próbniku kolorów. Teraz jest ono dostępne natychmiast po otwarciu próbnika kolorów.

Aby uzyskać dostęp do bieżącego zestawu kolorów, kliknij strzałkę znajdującą się obok do­wolnej próbki koloru. Po otwarciu rozwijanego próbnika kolorów (rysunek 7.8), prze­suń kursor nad dowolną próbkę. Podczas jego przesuwania zauważysz, że auto­ma­tycz­nie jest aktualizowana próbka koloru znajdująca się w prawym górnym rogu prób­ni­ka. Wy­świetlona zostaje również nazwa koloru w systemie szesnastkowym. Kliknij próbkę, aby wybrać pożądany kolor.

Rysunek 7.8. Za pomocą dowolnej próbki kolorów znajdującej się w Fireworks możesz otworzyć rozwijany próbnik kolorów

Color well — Próbka koloru

Color name — Nazwa koloru

No Color button — Przycisk No Color (bez koloru)

Palette button — Przycisk palety

Eyedropper — Kroplomierz

Jeżeli obiekt nie posiada żadnego koloru obrysu i wypełnienia, wybra­nie koloru w rozwijanym próbniku spowoduje zastosowanie go do bie­żą­cego obiektu i ustawienie typu obrysu na Pencil (Ołówek), a typu wy­pełnienia na Solid (Jednolite).

Chociaż próbnik kolorów jest poręcznym narzędziem, czasami jednak użytkownik może chcieć regularnie zmieniać zestawy kolorów. Załóżmy, na przykład, że chcemy zająć się obiektem utworzonym wyłącznie z kolorów skali szarości. W takim przypadku zmiana próbnika kolorów na skalę szarości bardzo uprości nam pracę. Lista rozwijana na próbniku kolorów bardzo ułatwia zmianę zestawu kolorów (rysunek 7.9).

		Na próbniku kolorów znajdziemy listę rozwijaną, z której szybko możemy wybrać inny zestaw kolorów.
Rysunek 7.9. Lista rozwijana na próbniku kolorów pozwala na szybkie wybranie innego zestawu kolorów

Wykorzystanie narzędzia Eyedropper XE "Eyedropper" (Kroplomierz)

Kroplomierz jest doskonałym narzędziem umożliwiającym zachowanie w całym obraz­ku spójności kolorów. Jeśli na przykład musisz dostosować kolor krawędzi tworzonego pas­ka nawigacyjnego do określonego odcienia purpury, jaki ma grafika tła, kliknij kro­plo­mierzem w miejscu, z którego chcesz pobrać kolor, a wybrany odcień zostanie natychmiast zasto­so­wany.

Narzędzie Eyedropper jest bardzo proste w użyciu. Po otwarciu rozwijanego próbnika ko­lorów, kliknij znajdujący się w nim przycisk Eyedropper. Kursor zostanie zamieniony na kroplomierz. Teraz możesz pobrać kolor z dowolnego miejsca okna Fireworks.

Co więcej - za pomocą kroplomierza możesz pobierać kolory także z obszarów znaj­du­ją­cych się poza oknem Fireworks - z dowolnej aplikacji lub grafiki wyświetlanej na ekra­nie Twojego komputera. Funkcja ta jednak na każdej platformie działa w trochę in­ny sposób:

• W MacOS, narzędzie Eyedropper poza oknem Fireworks działa tak samo, jak w obrębie tego okna.

• W Windows kliknij i przeciągnij kroplomierzem poza rozwijany próbnik kolo­rów. Trzymaj wciśnięty przycisk myszy w czasie przeciągania kursora poza okno Fire­works. Zwolnij go, gdy kroplomierz znajdzie się nad kolorem, który chcesz pobrać.

	Prawdopodobnym jest, że kolor pobrany za pomocą kroplomierza nie bę­dzie należał do palety kolorów bezpiecznych dla Internetu. Aby po­bie­rany odcień został zamieniony na najbliższy odpowiednik bez­piecz­ny dla Internetu, przed zwolnieniem przycisku myszy wciśnij klawisz Shift.

Systemowy próbnik kolorów XE "systemowy próbnik kolorów"

Jeśli pracujesz z wieloma aplikacjami graficznymi, być może wygodniej Ci będzie uży­wać systemowego próbnika kolorów zamiast próbnika Fireworks. Aby otworzyć prób­nik systemowy, kliknij przycisk Palette znajdujący się w rozwijanym próbniku Fireworks. Zam­knięcie systemowego próbnika spowoduje przypisanie ostatnio wybranego koloru do próbki Fireworks.

Użytkownicy MacOS mają możliwość wyboru spomiędzy kilku systemowych prób­ni­ków kolorów. W tabeli 7.2 zostały opisane różne schematy kolorów.

Po lewej stronie okna dialogowego Color Picker wybierz model kolorów (rysunek 7.10), a po prawej stronie ustaw wartości koloru. Jako oryginalny (Original) w prawym gór­nym rogu okna dialogowego wyświetlany jest odcień ustawiony w rozwijanym prób­ni­ku ko­lorów Fireworks. Pozwala to porównać kolor oryginalny z kolorem, który możesz zde­­finiować w próbniku systemowym.

	Gdy w oknie dialogowym Color Picker w MacOS wciśniesz klawisz Op­tion, kursor zostanie zamieniony na kroplomierz (tak samo jak w Fire­works). Możesz go użyć do pobrania koloru z dowolnego miejsca ekranu.

Tabela 7.2.

Modele kolorów dostępne w oknie dialogowym Color Picker w MacOS

Model kolorów	Opis
CMYK	Model kolorów używany w poligrafii
Crayon	„Pudełko z kredkami” o nazwach, takich jak Banana (Banan) czy Cool Marble (Marmur). Kliknij wybraną „kredkę”, aby zdefiniować kolor
HLS	Hue (Barwa), Luminosity (Luminancja) i Saturation (Nasycenie)
HSV	Hue (Barwa), Saturation (Nasycenie) i Value (Wartość). Model oparty na kole kolorów
HTML	Kolory z modelu RGB reprezentowane za pomocą wartości szesnastkowych. Istnieje opcja zamiany na kolor bezpieczny dla Internetu
RGB	Standardowy model kolorów monitorów komputerowych. Istnieje opcja zamiany na kolor bezpieczny dla Internetu
Rysunek 7.10. Okno dialogowe próbnika kolorów w MacOS pozwala na wybór określonego modelu kolorów

Próbnik kolorów systemu MacOS jest elastycznym narzędziem, więc oprócz tych, które zo­stały wymienione w powyższej tabeli, w zależności od posiadanej konfiguracji sprzę­to­wej i programowej, możesz mieć także do dyspozycji inne modele kolorów. Przy­kła­do­wo - próbniki kolorów są instalowane wraz z pakietem Apple Display Software. Mo­żesz tak­że sam instalować próbniki produkowane przez wiele różnych firm. Mój ulubiony to FVPicker, dostępny pod adresem http://www.at-soft.net, który umożli­wia zapisywanie ze­stawów ulubionych kolorów i ich późniejsze wykorzystywanie.

Systemowy próbnik kolorów w Windows jest podzielony na dwie części (rysunek 7.11). Po lewej stronie znajduje się 48 próbek kolorów z systemowej palety Windows. Po jego pra­wej stronie znajduje się spektrum i pasek wartości służący do mieszania kolorów. Po­niżej dostępne są pola tekstowe, do których można wprowadzać wartości kolorów w mo­delach RGB i HSL (Hue - Barwa, Saturation - Nasycenie i Luminance - Jaskrawość). Aby zdefiniować kolor spoza 48-kolorowej palety systemowej, musisz go okre­ślić za pomocą spektrum i paska wartości, a następnie dodać do jednej z 16 próbek włas­nych kolorów znajdujących się po lewej stronie próbnika.

Rysunek 7.11. Próbnik kolorów Windows daje szybki dostęp do kolorów pochodzących z systemowej palety Windows. Pozwala także na zdefiniowanie za pomocą spektrum 16 własnych kolorów
		Aby zapobiec zastępowaniu uprzednio stworzonych własnych kolorów przez nowe, upew­nij się, że przed wybraniem nowego koloru w próbniku kolorów Win­dows zaznaczyłeś pustą próbkę.

Brak koloru

Podczas definiowania kolorów obrysów i wypełnień musisz pamiętać, że kolorem może być również „brak koloru”. Aby wyłączyć wypełnienie lub obrys obiektu, należy klik­nąć przycisk No Color znajdujący się w próbniku kolorów Fireworks. Po kliknięciu tego przy­cisku, w próbce koloru zostanie wyświetlony wzór szachownicy, reprezentujący w Fire­works przezroczystość.

	Przycisk No Color można znaleźć w rozwijanym próbniku, który otwo­rzysz, klikając w palecie narzędziowej próbkę koloru obrysu lub wy­peł­nie­nia. Nie znajdziesz go w żadnym innym rozwijanym próbniku kolo­rów. W Fire­works dla Windows przycisk No Color jest także w palecie Co­lor Mixer.

Paleta Swatches XE "paleta:Swatches" (Próbki)

Prosty wygląd palety Swatches jest zwodniczy. Umożliwia ona wybranie z aktywnej pa­le­ty koloru obrysu, wypełnienia lub efektu. Podobnie jak wszystkie pozostałe pły­wa­ją­ce palety Fireworks, paleta ta może być przemieszczana i skalowana. Możliwość zmia­ny jej wymiarów staje się szczególnie przydatna, gdy chcesz wyświetlić większą pa­le­tę kolorów.

	Musisz pamiętać, że w palecie Swatches wyświetlana jest bieżąca pa­le­ta kolorów Fireworks, a nie paleta kolorów bieżącego dokumentu.

Podstawowe zastosowanie palety Swatches jest podobne do zastosowań palety Color Mixer oraz rozwijanego próbnika kolorów. Najpierw musisz wybrać próbkę koloru, któ­rą chcesz zmodyfikować, a później kolor, za pomocą kliknięcia próbki znajdującej się w pa­le­cie Swatches (rysunek 7.12), w której kolory można identyfikować tylko wizu­al­nie. Aby zobaczyć wartości składowych RGB lub innych kolorów, należy wyświetlić pa­letę Info.

Rysunek 7.12. Pobierz dowolny kolor z palety Swatches

W kolejnym podrozdziale dowiesz się, że możesz wybierać spośród wielu dostępnych pa­let kolorów. Do palety Swatches możesz dodawać również, jako próbki, kolory „wy­mie­sza­ne” własnoręcznie lub pobrane za pomocą kroplomierza. Zdefiniowany jako próbka ko­lor będzie wówczas dostępny w każdym miejscu programu, w którym możesz klik­nąć jego próbkę lub otworzyć paletę Swatches. Nowe kolory będą dodawane do ze­sta­wu, rozszerzając w ten sposób paletę, lub wprowadzane w miejsce istniejących wcześniej barw. Możesz także usuwać standardowe lub własne kolory z palety.

Aby dodać, zastąpić lub usunąć kolor z palety Swatches:

60. Wymieszaj lub pobierz kolor, który chcesz dodać do palety tak, by został wy­świe­tlony w aktywnej próbce koloru.

61. Wyświetl paletę Swatches, wybierając z menu polecenie WindowSwatches lub klikając zakładkę palety Swatches, jeżeli znajduje się ona za innymi pale­ta­mi w grupie.

62. Aby dodać nowy kolor do bieżącej palety, umieść kursor nad pustym obszarem pa­lety Swatches i kliknij. Po umieszczeniu kursora nad pustym obszarem pa­le­ty, jego ikona jest zamieniana z kroplomierza na wiadro z farbą.

63. Aby zastąpić kolor istniejący w bieżącej palecie, wciśnij klawisz Shift, umieść kur­sor nad próbką wybranego koloru i kliknij. Po wciśnięciu klawisza Shift, kur­sor znajdujący się nad istniejącym kolorem jest zamieniany na wiadro z far­bą.

64. Aby usunąć kolor z bieżącej palety, wciśnij klawisz Ctrl (Command), umieść kur­sor nad próbką wybranego koloru i kliknij. Po wciśnięciu klawisza Ctrl (Com­mand) kursor jest zamieniany na nożyczki. Jeśli chcesz uzyskać jak naj­bar­dziej precyzyjne rezultaty, to nad kolorem, który chcesz usunąć musisz umie­ścić ten punkt kursora, w którym krzyżują się ostrza nożyczek (środek znaku X).

Żeby przywrócić domyślne ustawienia zmodyfikowanej palety, wybierz jej nazwę z roz­wijanego menu palety Swatches.

Wybór dostępnych kolorów

W Fireworks w dowolnym momencie pracy możesz wybierać spośród czterech do­stęp­nych palet kolorów:

• Web 216 Palette. Zawiera kolory, które mogą być wyświetlane w dwóch głów­nych przeglądarkach: Netscape Navigator i Internet Explorer w obu sys­te­mach operacyjnych: Windows i MacOS.

• Windows System. Zawiera kolory wykorzystywane w Windows do wyświe­tla­nia elementów interfejsu tego systemu.

• Macintosh System. Zawiera kolory używane przez system operacyjny MacOS.

• Grayscale: Monochromatyczna paleta, zawierająca odcienie szarości: od kolo­ru białego do czarnego.

Wszystkie palety oprócz Web 216 zawierają 256 kolorów.

Aby przełączyć paletę kolorów, wybierz nazwę nowej palety z rozwijanego menu (ry­sunek 7.13).

W rozwijanym menu znajduje się dodatkowa paleta - Current Export Palette (Bieżąca eks­portowana paleta). Wybranie jej nazwy z menu spowoduje załadowanie bieżącej pale­ty eksportu z palety Color Table (opisywanej w kolejnych podrozdziałach) do palety Swatches.

Rysunek 7.13. Rozwijane menu palety Swatches pozwala na wybranie jednej ze standardowych palet lub załadowanie własnej

Zarządzanie próbkami

Prawdziwą siłę próbkom Fireworks daje możliwość ładowania i zapisywania własnych pa­let kolorów. Pięć pozostałych poleceń, które znajdują się w rozwijanym menu, wy­ko­rzystuje się do zarządzania próbkami. Fireworks umożliwia ładowanie i zapisywanie pró­bek w formacie znanym jako Active Color Table XE "Active Color Table" (ACT). Format ten obsługiwany jest rów­nież przez Photoshopa, więc bez problemów możesz ładować do Fireworks palety ko­lorów zachowane uprzednio w Photoshopie.

By jednak pracować z próbkami kolorów w palecie Swatches, nie musisz ich ko­niecz­nie zapisać jako plik ACT. Fireworks umożliwia również wydobywanie palet kolorów znaj­du­jących się w obrazkach GIF lub innych plikach graficznych zawiera­ją­cych 8-bi­to­wą paletę kolorów. Co więcej - zachowane palety można wykorzystywać na dwa różne spo­soby. Możesz dodać je do bieżących próbek lub wykorzystywać je­dy­nie zachowaną paletę.

Aby załadować paletę kolorów do palety Swatches:

65. Kliknij przycisk rozwijanego menu palety Swatches.

66. Jeżeli chcesz dodać nową paletę do istniejącej, wybierz z rozwijanego menu po­lecenie Add Swatches (Dodaj próbki).

67. Jeśli chcesz używać jedynie zapisanej palety, wybierz z rozwijanego menu po­le­cenie Replace Swatches (Wymień próbki).

W obu przypadkach zostanie otwarte okno dialogowe Open, umożliwiające wy­­branie palety.

68. Określ typ palety, którą chcesz załadować:

• Color table (Tabela kolorów) - pliki zazwyczaj z rozszerzeniem .act.

	W MacOS, plik tabeli kolorów może nie posiadać rozszerzenia .act. Kod typu pliku tabeli kolorów to 8BCT. Fireworks nie posiada ikony iden­tyfikującej pliki z jego tabelami kolorów, natomiast tabele zapisywane w Pho­toshopie posiadają ikony i opis CLUT.

• GIF files (Pliki w formacie GIF) - pliki z rozszerzeniem .gif.

65. Odszukaj odpowiedni plik i kliknij przycisk Open.

Jeżeli wybierzesz opcję Add Swatches, nowa paleta kolorów zostanie umieszczona na koń­cu istniejącej palety. Opcja Replace Swatches powoduje usunięcie istniejących pró­bek z palety i wyświetlenie nowych.

Istnieje również ukryta funkcja, umożliwiająca ładowanie próbek ko­lo­rów Photoshopa (oprócz tabel kolorów). Pliki z próbkami Adobe Swa­t­ches posiadają rozszerzenie .aco, w odróżnieniu od plików z tabelami ko­lorów (.act). W Fireworks dla Windows w oknie dialogowym Open moż­na wybrać tylko pliki typu ACT. Aby wymusić wyświetlanie w oknie Open plików z rozszerzeniami .aco, wpisz w polu File Name wyrażenie *.aco i wciśnij klawisz Enter.

W Fireworks wszystkie palety kolorów zapisywane są w formacie Active Color Table. Aby zapisać bieżące próbki, wybierz z rozwijanego menu palety Swatches polecenie Save Swatches i w oknie dialogowym Save As wpisz nazwę pliku.

Za pomocą polecenia Clear Swatches z rozwijanego menu możesz usunąć wszystkie prób­ki kolorów, znajdujące się w palecie Swatches. Wybranie tego polecenia spo­wo­du­je usunięcie próbek wyświetlanych w palecie, ale wszystkie standardowe palety nie ulegną
żad­nym zmianom. Po wyczyszczeniu palety, próbki kolorów ponownie będą wyko­rzys­ty­wały paletę kolorów bezpiecznych dla Internetu, znajdującą się w rozwijanych prób­ni­kach Fireworks.

Ostatnie polecenie w rozwijanym menu palety Swatches to Sort by Color (Sortuj według koloru). Jak wskazuje jego nazwa - polecenie Sort by Color powoduje ułożenie ko­lorów, znajdujących się w bieżącej palecie według ich wartości zamiast w po­rząd­ku matematycznym. Jeśli do palety zostaną dodane nowe kolory (albo załadowana będzie zu­pełnie nowa paleta), one także będą sortowane. Pamiętaj, że polecenia Sort by Color nie można cofnąć. Aby przywrócić pierwotną konfigurację palety, wybierz jej nazwę z roz­wijanego menu palety Swatches.

Tabele kolorów

Jeśli zdefiniujesz w palecie Optimize ograniczoną tabelę kolorów wykorzystywanych pod­czas eksportu grafiki (przeważnie w formacie GIF), paleta eksportu bieżącego do­ku­men­tu również zostanie odpowiednio zredukowana i będzie różna od standardowej pale­ty. Paleta Color Table daje szybki dostęp do palet kolorów wykorzystywanych pod­czas eksportu.

Aby wyświetlić paletę Color Table (rysunek 7.14), wybierz z menu polecenie Win­dow Color Table lub kliknij zakładkę palety, jeżeli znajduje się ona za innymi paletami w grupie.

Rysunek 7.14. Paleta Color Table daje dostęp do palety eksportowanych kolorów bieżącego dokumentu

Jeśli starannie zredukujesz eksportowaną paletę do 16 lub 32 kolorów, w czasie pracy z do­kumentem prawdopodobnie nie będzie Ci potrzebny dostęp do kolorów spoza tego za­kresu. Przypadkowe dodanie nowego koloru może zniweczyć trud włożony w op­ty­ma­­lizację grafiki. W czasie pracy z obrazkami GIF, często wykorzystuję paletę Swat­ches do ładowania kolorów używanych przy eksporcie i z niej wybieram potrzebne kolory.

Jeśli w pasku tytułowym palety Color Table wyświetlane jest wyrażenie „Rebuild”, znaj­du­jące się w niej kolory można uznać za nieaktualne. Oznacza to, że w palecie Optimize zo­stała zmodyfikowana paleta eksportowanych kolorów. Wybierz wówczas z roz­wi­ja­ne­go menu palety polecenie Rebuild Color Table (Odbuduj paletę kolorów). Polecenia z roz­wijanego menu oraz przyciski znajdujące się u dołu palety Color Table pozwalają na dodawanie, usuwanie, edytowanie i blokowanie kolorów.

Więcej informacji o zastosowaniach palety Color Table znajdziesz w roz­dziale 15.

Technika Fireworks:
konwertowanie kolorów Pantone na kolory bezpieczne dla Internetu

Wielu projektantów grafiki internetowej pracuje dla klientów wymagających stoso­wa­nia znaków graficznych (logo), znaków towarowych i innych identyfikatorów. Wiele du­żych firm wydaje mnóstwo pieniędzy na opracowanie własnych wizerunków w pra­sie, telewizji oraz innych mediach, w których chcą się zareklamować. Taki sam wizerunek chcą utrzymać także w Internecie. Większość projektantów używa określonych ze­sta­wów kolorów (najpopularniejsze są kolory z palety Pantone XE "kolory Pantone" ), które mogą być wyko­rzys­tywane w druku. Nie powinien dziwić fakt, że większość tych kolorów nie należy do 216-kolorowej palety bezpiecznej dla Internetu.

Istnieje jednakże sposób na połączenie tych dwóch pozornie rozbieżnych światów kolo­rów. Właściwie, jest ich kilka. Firma Pantone stworzyła produkt o nazwie Color­Web Pro, który umożliwia konwertowanie kolorów używanych w grafice kompute­ro­wej. Jest to niewielkie narzędzie pozwalające na sprawdzenie numeru danego koloru z palety Pan­tone i wyświetlenie próbki koloru z jego wartościami w modelu RGB lub języku HTML.

Program ColorWeb Pro może pracować w dwóch różnych trybach. Pierwszy z nich to Pan­tone Matching System umożliwiający wybieranie spośród 1 012 kolorów Pantone. Dru­gi - Pantone Internet Color System - przed wysłaniem koloru do Fireworks kon­wer­tuje go na kolor bezpieczny dla Internetu. Jeśli satysfakcjonuje Cię prosta kon­wer­sja wy­konywana przez program ColorWeb Pro, wykorzystaj tryb Internet Color Sys­tem, w któ­rym możesz wybrać kolor z palety Pantone i zamienić go na kolor bezpieczny dla In­ternetu.

Aby lepiej odwzorować kolory z palety Pantone, możesz korzystać z modułu Pantone Mat­ching System w połączeniu z dostępnym w Fireworks wypełnieniem Web Dither. Po­bierz kolor Pantone i pozwól Fireworks na odwzorowanie go w Web Dither. Dzia­łanie takie umożliwia wykorzystywanie w Internecie wielu kolorów z palety Pan­to­ne. System ten nie jest może doskonały (zdarza mi się znaleźć kolor Pantone, który nie mo­że zostać odwzorowany za pomocą wypełnienia Web Dither), ale bardzo dobry.

W Windows ColorWeb Pro jest uruchamiany jako aplikacja w formie pływającej próbki ko­loru. Jej dwukrotne kliknięcie powoduje otwarcie próbnika kolorów Pantone. Klik­nię­cie próbki prawym przyciskiem myszy pozwala na wyświetlenie me­nu kontekstowego, umożliwiającego określenie kilku opcji programu.

W MacOS ColorWeb Pro jest instalowany jako rozszerzenie systemowego próbnika ko­lo­rów. Dostęp do nowych próbników możesz uzyskać w ten sam sposób, w jaki uży­wa­łeś innych, wbudowanych trybów systemowego próbnika. Kliknij przycisk Palette znaj­du­ją­cy się w rozwijanym próbniku kolorów Fireworks lub wybierz polecenie Add Color z roz­wijanego menu palety Color Table.

Użytkownicy MacOS mogą od razu posiadać próbnik kolorów Pantone, gdyż jest on instalowany razem z programami ColorSync lub Apple Display Sof­tware. W takim przypadku zainstalowanie demonstracyjnej wersji Co­lorWeb Pro spowoduje zastąpienie istniejących próbników Pan­tone. Jeśli nie zarejestrujesz ColorWeb Pro przed upływem czasu dzia­ła­nia wersji demonstracyjnej, będziesz musiał przeinstalować progra­my ColorSync lub Apple Display Software.

ColorWeb Pro dla Windows

Aby w Fireworks dla Windows przekonwertować kolor z palety Pantone na wypeł­nie­nie Web Dither:

69. Uruchom program ColorWeb Pro.

70. Jeśli próbka koloru Pantone nie znajduje się nad oknem Fireworks, kliknij ją pra­wym przyciskiem myszy (wciśnij Control i kliknij) i z kontekstowego me­nu wybierz polecenie Stay on Top (Zawsze na wierzchu). W związku z tym, że będziesz pra­cował jednocześnie w Fireworks i ColorWeb Pro, musisz przez cały czas wi­dzieć oba programy.

71. Dwukrotnie kliknij próbkę koloru Pantone, aby otworzyć okno Pantone Color Picker (rysunek 7.15).

Rysunek 7.15. ColorWeb Pro oferuje bogaty zestaw kolorów z palety Pantone

72. Zdefiniuj pożądany kolor poprzez wpisanie jego numeru w polu tekstowym Find Color lub kliknięcie go myszą. Kliknij OK, aby wrócić do próbki koloru.

73. Zaznacz obiekt, który chcesz wypełnić kolorem Pantone.

66. Otwórz paletę Fill, wybierając z menu polecenie WindowFill lub wciskając skrót klawiaturowy Shift+F7.

67. Kliknij strzałkę znajdującą się obok próbki koloru wypełnienia, aby otworzyć roz­wijany próbnik kolorów, a następnie kliknij narzędzie Eyedropper (Kroplomierz).

	Upewnij się, że kliknąłeś główną próbkę koloru (na samej górze), a nie jedną z dwóch próbek kolorów używanych w ditheringu.

68. Użyj kroplomierza do pobrania próbki koloru Pantone. Użytkownicy Windows mu­szą kliknąć, gdy znajduje się on nad oknem Fireworks, przeciągnąć nad prób­kę koloru Pantone i zwolnić przycisk myszy, aby pobrać kolor.

Fireworks obliczy najbardziej odpowiedni kolor za pomocą techniki Web Dither. Jeżeli Pan­tone należy do kolorów bezpiecznych dla Internetu, w obu próbkach wykorzys­ty­wa­nych w ditheringu użyty będzie ten sam kolor.

ColorWeb dla MacOS

Aby w Fireworks dla MacOS przekonwertować kolor z palety Pantone na wypełnienie Web Dither:

74. Zaznacz obiekt, który chcesz wypełnić za pomocą koloru Pantone.

75. Otwórz paletę Fill, wybierając z menu polecenie WindowFill lub wciskając skrót klawiaturowy Shift+F7.

76. W palecie Fill, jako typ wypełnienia wybierz Web Dither.

77. Otwórz próbnik kolorów palety Fill i kliknij znajdujący się w nim przycisk Pa­let­te, aby wyświetlić okno dialogowe systemowego próbnika kolorów.

	Upewnij się, że w próbniku kolorów palety Fill wybrałeś górną (a nie dol­ną) próbkę wypełnienia typu Web Dither.

69. W lewej części okna systemowego próbnika kolorów (rysunek 7.16) wybierz prób­nik o nazwie Pantone DC (Pantone Digital Color). Po prawej stronie okna zde­­finiuj pożądany kolor poprzez wpisanie numeru do pola tekstowego lub klik­­nięcie myszą. Kliknij przycisk Done.

Fireworks obliczy najbardziej odpowiedni kolor za pomocą techniki Web Dither. Jeżeli Pan­tone należy do kolorów bezpiecznych dla Internetu, w obu próbkach wyko­rzys­ty­wa­nych w ditheringu użyty będzie ten sam kolor.

Rysunek 7.16. ColorWeb Pro dodaje do systemowego próbnika paletę kolorów Pantone

Podsumowanie

Fireworks pozwala na dynamiczne zarządzanie kolorem. Projektanci mogą wybierać spo­śród różnych modeli kolorów i definiować palety dostosowane do własnych potrzeb. Gdy już zaczniesz zagłębiać się w zagadnienia związane z zarządzaniem kolorami w gra­fi­kach tworzonych w Fireworks, musisz pamiętać o następujących rzeczach:

• RGB to „język” opisujący kolor na ekranie. Poszczególne piksele są tworzone w wyniku mieszania trzech kolorów: czerwonego, zielonego i niebieskiego. W HTML-u kolory z modelu RGB są opisywane za pomocą wartości szes­nas­tkowych.

• Fireworks umożliwia przełączanie się pomiędzy kilkoma modelami kolorów, ta­kimi jak Grayscale (Skala szarości), RGB, CMY i Hexadecimal (Szes­nas­tkowy).

• Jeśli chcesz, aby kolory wyglądały zawsze tak samo w każdej przeglądarce, sto­suj kolory bezpieczne dla Internetu. Fireworks pozwala na wybieranie ko­lo­rów z palety bezpiecznej dla Internetu i zamienianie istniejących kolorów na ich najbliższe odpowiedniki z tej palety.

• Do zarządzania kolorem w Fireworks można wykorzystywać trzy pa­lety pływające: Color Mixer, Swatches i Color Table. Paleta Color Mixer umożliwia pro­jek­tantom definiowanie nowych lub modyfikowanie istniejących barw. W pa­le­cie Swatches wyświetlane są zestawy próbek kolorów pochodzących z palet stan­dar­do­wych, takich jak Web 216, lub z własnych palet. W palecie Color Table wy­świe­tlane są kolory znajdujące się w bieżącej palecie eksportu.

• Za pomocą narzędzia Eyedropper, z rozwijanego próbnika kolorów, można po­bierać barwy z dowolnych obrazów znajdujących się na ekranie - w oknie Fire­­works lub innej aplikacji.

W następnym rozdziale zapoznasz się z tworzeniem elementów „wykończeniowych” gra­fik Fireworks - obrysów.




Rozdział 8 Obrysy

W tym rozdziale:

• Stosowanie obrysów.

• Poznajemy paletę Stroke.

• Praca z tabletami graficznymi.

• Poznajemy standardowe obrysy.

• Tworzenie własnych obrysów.

• Technika Fireworks: Tworzenie kropkowanego obrysu.

• Orientacja obrysu.

Obrys jest jednym z trzech kluczowych atrybutów używanych w dokumentach Fire­works. Wraz z wypełnieniami i efektami, umożliwiają one nadawanie poszczególnym obiek­tom unikatowych cech. Dzięki obrysom widzialne mogą być ścieżki wektorowe. „Wi­dzial­ność” to jednak nie wszystko. Możesz również tworzyć obrysy o różnych sze­ro­kościach, kolorach i kształtach, a także kontrolować sposób ich budowania w zależ­noś­ci od pręd­kości, nacisku i kierunku rysowania. Co więcej - można modyfikować je, nawet gdy są już zastosowane do dowolnych ścieżek i natychmiast oglądać rezultaty tych zmian.

Oprócz czterdziestu ośmiu wbudowanych, standardowych obrysów Fireworks, masz pra­wie nieograniczone możliwości tworzenia własnych obrysów. Wiele ich atrybutów
- ko­lor, szerokość i zmiękczenie krawędzi - można kontrolować z poziomu palety Stroke. Dodatkowo Fireworks pozwala na opracowanie własnych obrysów od pod­staw. W tym rozdziale znajdziesz wyjaśnienia wszystkich ustawień obrysów oraz in­struk­cje typu „krok po kroku” wyjaśniające tworzenie specjalnych obrysów, takich jak linie krop­kowane.

Paleta Stroke (Obrys)

Paleta Stroke XE "paleta:Stroke" jest miejscem, w którym możesz dokonywać wszystkich ustawień ob­ry­sów. Kolor obrysu można ustawić także w dwóch innych miejscach: palecie narzę­dzio­wej i palecie Color Mixer, ale tylko w palecie Stroke można dokonywać ustawień wszys­tkich op­cji obrysów. Poniżej znajdują się poszczególne kroki typowego procesu ustawiania nowego lub mo­dy­fikowania istniejącego obrysu z wykorzystaniem wszystkich opcji dostępnych w pa­le­cie Stroke:

70. Wybierz z menu polecenie WindowStroke, aby otworzyć paletę Stroke (ry­su­nek 8.1). Możesz również użyć skrótu klawiaturowego Ctrl+Alt+F4 (Com­mand+Option+F4) lub kliknąć zakładkę palety Stroke, jeśli znajduje się ona na ekranie.

Rysunek 8.1. Wykorzystaj kontrolki znajdujące się w palecie Stroke do modyfikowania obrysu istniejącej ścieżki lub ustalenia atrybutów obrysu przed narysowaniem ścieżki za pomocą narzędzia Brush

Category — Kategoria

Type — Typ

Options pop-up button —Przycisk listy opcji

Color well — Próbka koloru

Edge softness slider — Suwak zmiękczania krawędzi

Size - Rozmiar

Amount of texture - Natężenie tekstury

Tip preview — Podgląd końcówki

Texture — Tekstura

71. Wybierz z rozwijanej listy Category jedną z jedenastu kategorii obrysów. Aby wy­łączyć obrys ścieżki, zaznacz kategorię None (Brak).

72. Wybierz jeden z dostępnych typów obrysu z rozwijanej listy Type. Po wy­bra­niu typu, automatycznie zostaną zdefiniowane jego domyślne ustawienia roz­mia­ru, zmiękczenia krawędzi i tekstury.

73. Jeśli chcesz, wybierz nowy kolor obrysu za pomocą próbki koloru.

74. Użyj suwaka Edge Softness, aby zmienić stopień rozmycia krawędzi obrysu.

75. Zmień rozmiar obrysu za pomocą suwaka Size lub poprzez wpisanie wartości w polu tekstowym Size.

76. Za rozwijanej listy Texture możesz wybrać teksturę obrysu i za pomocą su­wa­ka Amount ustawić jej natężenie (stopień krycia).

Jak zostało wspomniane wcześniej, możesz zarówno modyfikować obrys istniejącej, za­zna­czonej ścieżki, jak i ustawić parametry obrysu jeszcze przed rozpoczęciem ryso­wa­nia. Aby zaznaczyć ścieżkę (z obrysem lub bez), umieść narzędzie Pointer (Wskaźnik) nad ścieżką i po jej wyróżnieniu kliknij myszą. Przed zaznaczeniem ścieżka jest do­myśl­nie wyróżniana kolorem czerwonym, zaś po nim kolorem jasnoniebieskim.

	Jeśli w Twojej pracy wykorzystywane są kolory podobne do tych, jakich Fire­works używa do wyróżniania ścieżek, możesz je zmienić. Wybierz z me­nu polecenie EditPreferences i kliknij znajdującą się w zakładce Ge­neral (lista opcji w MacOS) próbkę koloru Highlight, aby zdefiniować inny kolor wyróż­nienia.

Niekiedy wygodniej jest zaznaczyć ścieżkę, która ma być modyfikowana, za pomocą za­zna­czenia prostokątnego, wykonanego narzędziem Pointer. Jeśli klikniesz i prze­ciąg­niesz wskaźnikiem, powstanie tymczasowa ramka selekcji. Zaznaczone zostaną wszys­tkie ścież­ki, które choć częściowo będą objęte tą ramką. Zaznaczenie prostokątne rysowane za po­mocą narzędzia Pointer jest doskonałym sposobem zaznaczania wielu ścieżek, do któ­rych chcesz jednocześnie zastosować takie same parametry obrysów. Wiele ścieżek moż­na również zaznaczać za pomocą narzędzia Pointer z wykorzystaniem klawisza Shift.

	Wciskając i przytrzymując klawisz Ctrl (Command), możesz włączyć tymczasowo wskaź­nik, nawet podczas korzystania z innego narzędzia. Po zwol­nie­niu klawisza ponownie zostanie uaktywnione poprzednie na­rzę­dzie.

Podczas ustawiania parametrów obrysu przed jego utworzeniem upewnij się, że nie jest za­znaczona żadna ścieżka ani obiekt. W przeciwnym przypadku zaznaczone obiekty także zostaną zmodyfikowane. Aby usunąć za­zna­cze­nia wszystkich obiektów, kliknij narzędziem Pointer w pustym obszarze dokumentu lub wybierz z menu polecenie EditDeselect (skrót klawiaturowy Ctrl+D (Com­mand+D)).

Kategorie i typy obrysów

Fireworks oferuje 12 różnych kategorii obrysów, w tym opcję None (Brak obrysu). Jak po­kazano na rysunku 8.2, wybór kategorii jest bardzo szeroki: od najprostszych, takich jak Pencil (Ołówek) i Basic (Podstawowy), do najbardziej wyszukanych, takich jak Ran­dom (Losowy) i Unnatural (Nienaturalny). Po wybraniu kategorii, uaktywniane są zwią­zane z nią typy obrysów. Domyślnie wybierany jest typ obrysu znajdujący się na pierw­­szej pozycji w porządku alfabetycznym.

Rysunek 8.2. Wybierz jeden z predefiniowanych typów obrysów - od najprostszego Basic (Podstawowy) do najbardziej wyszukanego Unnatural Fluid Splatter (Nienaturalne plamy farby)

Basic — Podstawowy

Unnatural Fluid Splatter — Nienaturalne plamy farby

W kolejnych podrozdziałach zostaną szczegółowo opisane wszystkie standardowe ob­ry­sy, ale już teraz należy wspomnieć o dwóch głównych czynnikach decydujących o ich wszys­tkich ustawieniach. Po pierwsze - gdy wybrana zostanie określona kategoria i typ obrysu, automatycznie określone zostają również domyślne ustawienia. Dzieje się tak na­wet wówczas, gdy przed kilkoma sekundami skończyłeś właśnie modyfikować usta­wie­nia innego obrysu. Po drugie - każda cecha wszystkich standardowych konturów mo­że być modyfikowana, zmieniana i dostosowywana.

	W podrozdziale „Tworzenie nowych obrysów” dowiesz się, jak zapisać i ponownie wykorzystać zmodyfikowany obrys.

Krawędzie i rozmiar XE "obrys:krawędzie i rozmiar" obrysu

Jeśli czytasz tę książkę rozdział po rozdziale, wiesz już z rozdziału 6., na czym polega wy­gładzanie krawędzi obrazków bitmapowych. Być może pamiętasz, że rozmyta, wy­gła­dzona krawędź obrazka to taka, która wtapia się w tło. Obrysy również mogą być roz­mywane, za pomocą suwaka Edge Softness znajdującego się w palecie Stroke. Prze­su­nięcie suwaka na sam dół powoduje utworzenie obrysu o ostrych krawędziach, bez żad­nego wtapiania, zaś przesunięcie go w górę tworzy miękkie krawędzie. Kontur o mięk­kich krawędziach przyjmuje maksymalną wartość wtapiania, jaka jest możliwa dla bieżącego rozmiaru obrysu.

Podobnie do wygładzania, zmiękczanie krawędzi jest jednym z zastosowań kanałów al­fa, sterujących przezroczystością obiektów. W każdym kanale alfa istnieje 256 poziomów prze­zroczystości i 100 poziomów rozmycia krawędzi. Sterowanie obydwoma typami po­ziomów odbywa się na zbliżonych zasadach. Mimo że dla każdego obrysu możesz zde­finiować dowolną wartość zmiękczania krawędzi, w przypadku cienkich obrysów nie zauważysz zbyt wielkiej różnicy. Im grubszy obrys, tym więcej odmian zmiękczania moż­na wykorzystać. Przy zmiękczaniu krawędzi, Fireworks utrzymuje mniej więcej dwie trze­cie ich grubości. Pozostała jedna trzecia jest równomiernie wtapiana po obu stro­nach obrysu w tło.

Grubość obrysu możesz modyfikować poprzez wpisanie wartości w polu tekstowym Size lub przeciąganie suwaka Size. Zakres dostępnych wartości mieści się w granicach od 1 do 72 pikseli. Pole zawierające podgląd końcówki obrysu jest zbyt małe, aby wy­świe­tlić maksymalną grubość obrysu. W MacOS pole to przestaje być przydatne przy ob­rysach o grubości większej niż 50 pikseli (staje się wówczas całkowicie czarne). W Windows, w przypadku obrysów o grubości większej niż 50 pikseli, w polu podglądu koń­cówki wyświetlane są wyrażenia „2x” lub „4x” wskazujące rzeczywistą grubość ob­ry­su (rysunek 8.3).

Tekstura XE "obrys:tekstura" obrysu

Zastosowanie tekstury do obrysu pozwala nadać mu indywidualny charakter i głębię. W Fire­works znajduje się szereg wbudowanych, standardowych tekstur, zaś na CD-ROM-ie można znaleźć dodatkową bibliotekę tekstur.

Rysunek 8.3. Po zdefiniowaniu grubości obrysu większej niż ta, która może być wyświetlona w polu podglądu końcówki, w Fireworks dla Windows wyświetlane są wyrażenia „2x” lub „4x” wskazujące rzeczywistą grubość obrysu

Każ­­da z dodatkowych tekstur może być stosowana do dowolnych obrysów, z różnymi wartościami natę­że­nia. Niektóre dostępne obrysy, takie jak Texture Air Brush (Aerograf z teksturą) lub Basic Crayon (Kredka), domyślnie wykorzystują tekstury nadające im unikatowy wygląd.

Aby zastosować teksturę do obrysu:

78. W palecie Stroke wybierz kategorię i typ obrysu, do którego chcesz zastosować teksturę.

79. Jeśli to konieczne - ustaw rozmiar, kolor i rozmycie krawędzi obrysu. Pa­mię­taj, że wiele tekstur może być niezauważalnych przy zbyt małych grubościach obrysu.

80. Wybierz teksturę z rozwijanej listy Texture.

77. Ustaw natężenie tekstury za pomocą suwaka Amount of texture. Możesz rów­nież wpisać procentową wartość (ze znakiem % lub bez niego) natężenia teks­tu­ry w polu tekstowym Amount of texture.

	Aby tekstura mogła zostać wyświetlona, jej natężenie musi być więk­sze niż 0%.

Tekstury to desenie bitmapowe nakładane na obrysy. Suwak Amount of texture steruje stop­niem krycia tekstury. Przy wartości 0%, tekstura jest całkowicie przezroczysta i niewidoczna. Przy natężeniu wynoszącym 100%, tekstura jest mak­symalnie widoczna. Na rysunku 8.4 znajduje się obrys z różnymi ustawieniami tej sa­mej tekstury. Zwykle lepiej widoczne są tekstury, które zawierają kontrastujące ze so­bą elementy, zaś tekstury o mniejszym kontraście są bardziej delikatne i przydatne je­dy­nie w przypadku bardzo grubych obrysów.

		Jeśli nie wystarczają Ci tekstury dostarczane wraz z programem Fire­works, w folderze Extensions na dołączonym do książki dysku CD-ROM - dzię­ki uprzejmości Massimo Foti - znaj­dziesz 50 dodatkowych tekstur.
Rysunek 8.4. Im wyższa wartość natężenia tekstury, tym jest ona bardziej widoczna

Wbudowane obrysy

Największą zaletą wbudowanych obrysów Fireworks jest szybkość ich stosowania. Po pros­tu wybierz obrys i rozpocznij rysowanie. Kolejna zaleta to ich niezmienność. Uży­wa­jąc kilkakrotnie obrysu Textured Air Brush, zawsze uzyskasz takie same rezultaty. Na­wet jeśli wolisz pracować z własnymi obrysami, zawsze będziesz rozpoczynać od wy­korzystywania tych standardowych.

W tym podrozdziale znajdziesz opisy wszystkich kategorii obrysów i oferowanych przez nie różnych ustawień. Lista kategorii obrysów Fireworks rozpoczyna się od dwóch pod­sta­wowych: Pencil (Ołówek) i Basic (Podstawowy). Następnie wymienione są alfa­be­tycz­nie kolejne obrysy: od Air Brush (Aerograf) do Unnatural (Nienaturalny). Ogólna zasa­da jest taka, że standardowe, czyli najczęściej wykorzystywane obrysy to te, które znaj­dują się u góry listy, zaś w jej dolnej części znajdują się dekoracyjne obrysy o bar­dziej wyszukanych konstrukcjach.

Pencil XE "obrys:Pencil" (Ołówek)

Po narysowaniu ścieżki za pomocą narzędzia Pencil (Ołówek), przypisywany do niej jest obrys Pencil typu 1-Pixel Hard (Twardy 1-pikselowy ołówek). Dzieje się tak nie­za­leż­nie od tego, jakich ustawień obrysu używałeś przy pracy z innymi narzędziami. Jeśli nie zdefiniujesz nowych ustawień obrysu przed użyciem narzędzia Brush (Pędzel), rów­nież zostanie zastosowany obrys Pencil 1-Pixel Hard. Można powiedzieć, że obrys Pen­cil jest prawdziwym „wołem roboczym” wśród wszystkich wbudowanych obrysów.

Pencil jest prostym obrysem, przeznaczonym jedynie do reprezentacji ścieżek. Nie po­sia­da żadnych elementów ozdobnych. W tabeli 8.1 i na rysunku 8.5 przedstawione zo­sta­ły różnice pomiędzy czterema typami obrysu Pencil. Obrys 1-Pixel Soft Pencil (Mięk­ki 1-pikselowy ołówek) wygładza ścieżki, aby zapobiec ich strzępieniu, występującemu w przy­padku ścieżek z obrysem 1-Pixel Hard Pencil. Obrys Colored Pencil (Kolorowy ołó­wek) o grubości 4 pikseli jest nieco szerszy i jest przeznaczony do pracy z narzędziami reagującymi na na­cisk i prędkość rysowania. Działa więc tak samo, jak tradycyjny ołówek. Ostatni typ ołów­ka - Graphite (Grafitowy) również reaguje na nacisk i prędkość rysowania. Dodat­ko­wo przypisana jest do niego tekstura o wysokim natężeniu symulująca ziarno grafitu.

Korzystanie z tabletu graficznego Korzystanie z myszy przy tworzeniu obiektów jest często - nie bez po­wo­du - wyszydzane jako „rysowanie za pomocą kostki mydła”. W prze­­szłości tablety graficzne - płaskie panele, na których można ry­so­wać za pomocą piórka - były najczęściej kosztowne, mało czułe na na­cisk i nieporęczne. Ale - jak większość technologii - stawały się co­raz tańsze i le­psze. Obecnie istnieje wiele tabletów o różnych rozmia­rach i cha­ra­kte­ry­stykach, które są przeznaczone dla komputerów pra­cu­ją­cych pod kontrolą systemów Windows i MacOS. Dla początkujących użyt­kow­ni­ków i tych, którzy rzadko pracują z grafiką, doskonałym wy­bo­rem jest tablet Wacom Graphire o wymiarach 4×5 cali, który jest tyl­ko trochę droższy od myszy. Firma Wacom produkuje również ta­ble­ty Intuos dla profesjonalistów. Są to urządzenia o wymiarach od 4×5 do 12×18 cali, których opcje i możliwości usatysfakcjonują każdego ar­tystę. Tablet 4×5 cali jest jednak zupełnie wystarczający do pracy z ma­łymi obszarami roboczymi, wykorzystywanymi w grafice inter­netowej. Nie ma właściwie żadnych wytycznych dotyczących używania tabletów gra­ficznych w Fi­reworks. Wszystkie obiekty mogą być tworzone tak sa­mo jak się to odbywało za po­mocą myszy. Jest tylko jedna, ale is­tot­na różnica - stosując tablet masz większą kontrolę nad tworzonymi obiek­tami. Pierwszą zaletą jest precyzja, zapewniana przez stosunek 1:1 obszaru tabletu do powierzchni ekranu. Standardowym testem pre­cyzji jest podpis. Spróbuj podpisać się za pomocą myszy, a na­stęp­nie za pomocą piórka i tabletu. Niedokładność myszy polega w tym przypadku na tym, że poziomym i pio­nowym przesunięciom urzą­­dzenia nie odpo­wia­dają podobne przesunięcia kursora myszy na ekranie. Oczywista przewaga tabletów graficznych polega głównie na tym, że rysując za po­mocą piórka, nacisk wywierany na tablet ma bezpośredni wpływ na wy­gląd tworzonego obrysu. Mocniejsze przyciśnięcie piórka powoduje utwo­rzenie grubszej linii, zaś zmniejszenie nacisku - utworzenie cień­szej. Narysowane tak linie mają bardziej „ludzki” wygląd. Większość stan­­dardowych obrysów Fireworks jest czułych na nacisk, wliczając w to wszy­s­tkie odmiany obrysów Air Brush (Aerograf), Calligraphy (Kali­gra­ficz­ny), Char­coal (Węgiel), Oil (Farba) i Watercolor (Akwarele). Oddzia­ły­wanie nacis­ku na sposób tworzenia obrysów można dostosowywać do własnych po­trzeb. Jak to zrobić, dowiesz się w kolejnych pod­roz­działach. Kolejna zaleta tabletów graficznych (która przyda się także użyt­kow­ni­kom nieposiadającym uzdolnień artystycznych) polega na ułatwie­niach w posługiwaniu się niektórymi narzędziami programu, na przy­kład przy ryso­waniu prostokątów i owali. Po krótkim okresie korzystania z table­tu przekonałem się, że znacznie ułatwia on „dostęp” do obiektów znaj­dujących się w obszarze roboczym. Nie musisz odszukiwać ich wzro­kiem lub „namierzać” kursorem myszy, gdyż zawsze znajdują się w tym samym miejscu tabletu. Cecha ta pozwala na intuicyjne i kre­atyw­ne tworzenie grafiki komputerowej. Jeśli nie masz tabletu, możesz symulować zwiększanie i zmniejszanie na­cisku za pomocą klawiatury. Wciśnij klawisz 1, aby zmniejszyć na­cisk lub klawisz 2, aby go zwiększyć. Pamiętaj jednak, że - w prze­ci­wień­stwie do tabletów graficznych - po zakończeniu rysowania nacisk nie zostanie natychmiast wyrównany. Jeżeli trzykrotnie wciśniesz kla­wisz 1, aby zmniejszyć nacisk, będzie on zmniejszony aż do czasu trzy­kro­tne­go wciśnięcia klawisza 2 lub ponownego uruchomienia Fire­works.

Rysunek 8.5. Obrysy typu 1-Pixel Hard i 1-Pixel Soft są obrysami „stałymi”, zaś Colored Pencil i Graphite reagują na nacisk i prędkość rysowania

1-Pixel Hard — Twardy 1-pikselowy

1-Piksel Soft — Miękki 1-pikselowy

Colored Pencil — Kolorowy ołówek

Graphite — Grafitowy ołówek

Tabela 8.1.

Atrybuty obrysów typu Pencil

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
1-Pixel Hard	1	0%	None (Brak)	brak
1-Pixel Soft	1	0%	None (Brak)	brak
Colored Pencil	4	0%	None (Brak)	brak
Graphite	5	0%	Grain (Ziarna)	80%

Basic (Podstawowy)

Inna, prosta odmiana obrysu posiada odpowiednią nazwę - Basic XE "obrys:Basic" (Podstawowy). Wszy­stkie typy obrysu Basic (tabela 8.2) mają cztery piksele szerokości i różnią się je­dy­nie kształtami zakończeń linii (kwadratowe lub zaokrąglone) oraz ustawieniami wy­gła­dza­nia.

Tabela 8.2.

Atrybuty obrysów Basic

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Hard Line	4	0%	None (Brak)	brak
Hard Line Rounded	4	0%	None (Brak)	brak
Soft Line	4	0%	None (Brak)	brak
Soft Line Rounded	4	0%	None (Brak)	brak

Obrysy Hard Line (Twarda linia) i Hard Line Rounded (Twarda linia z za­o­krą­glo­ny­mi końcówkami) nie są wygładzane, w przeciwieństwie do Soft Line (Mięk­ka linia) i Soft Line Rounded (Miękka linia z zaokrąglonymi końcówkami).

Różnice pomiędzy ob­rysami są niewielkie (rysunek 8.6), ale w przypadku niektórych obiektów mogą być dość widoczne.

Rysunek 8.6. Różnice pomiędzy różnymi typami obrysów Basic możesz zobaczyć, gdy się im dobrze przyjrzysz

Hard line — Linia twarda

Hard line Rounded — Linia twarda z zaokrąglonymi końcówkami

Soft Line — Linia miękka

Soft Line Rounded — Linia miękka z zaokrąglonymi końcówkami

Air Brush (Aerograf)

Przyznaję się - jestem uzależniony od aerografu. Stale używam wszystkich od­mia­n obrysu Air Brush XE "obrys:Air Brush" , jakie oferuje Fireworks. Oba typy aerografu (tabela 8.3) są bardzo czu­łe na nacisk oraz prędkość rysowania i, jak w przypadku tradycyjnego aerografu, dłuż­sze przytrzymanie narzędzia w jednym miejscu powoduje nałożenie większych iloś­ci farby (rysunek 8.7).

Rysunek 8.7. Różnica pomiędzy dwoma typami obrysu Air Brush jest łatwo zauważalna

Basic — Podstawowy

Textured — Z teksturą

Textured Air Brush (Aerograf z teksturą) znacznie różni się od obrysu Basic Air Brush (Podstawowy aerograf) i jest dobrym przykładem zasto­so­wa­nia tekstury do obrysu.

Tabela 8.3.

Atrybuty obrysów Air Brush

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Basic	60	100%	None (Brak)	brak
Textured	50	100%	Grain (Ziarna)	80%

Calligraphy XE "obrys:Calligraphy" (Kaligraficzny)

Kaligraficzny obrys doskonale się sprawdza przy tworzeniu odręcznych rysunków, w któ­rych szerokość obrysu jest uzależniona od zakrzywienia ścieżki. Fireworks oferuje pięć różnych typów obrysu Calligraphy (tabela 8.4 i rysunek 8.8). Jedynie obrys typu Bamboo (Bambus) nie tworzy krzywych o zróżnicowanych grubościach. Dzieje się tak dla­tego, że pozostałe cztery typy kaligraficznego obrysu wykorzystują pochyloną końcówkę pędz­la, zaś obrys Bamboo jest okrągły (jak łodyga bambusa). Obrys typu Quill (Gęsie pióro) jest wrażliwy na nacisk i prędkość rysowania oraz, podobnie jak Ribbon (Wstążka) i Wet (Mokry), pogrubia ścieżki na zakrzywieniach, akcentując ich kąty.

Tabela 8.4.

Atrybuty obrysów Calligraphy

Nazwa	Rozmiar		Rozmycie krawędzi	Tekstura	Natężenie tekstury
Bamboo	20		0%	Grain (Ziarna)	50%
Basic	14		0%	None (Brak)	Brak
Quill	20		20%	Grain (Ziarna)	25%
Ribbon	25		0%	None (Brak)	Brak
Wet	20		0%	None (Brak)	Brak
Rysunek 8.8. Cechą charakterystyczną obrysów kaligraficznych są doskonałe możliwości ich wykorzystania przy tworzeniu pisma odręcznego

Bamboo — Bambus

Basic — Podstawowy

Quill — Gęsie pióro

Ribbon — Wstążka

Wet — Mokry

Charcoal XE "obrys:Charcoal" (Węgiel)

Obrysy Charcoal są godne uwagi ze względu na ich tekstury, nakładane zarówno na sa­me obrysy, jak i na ich krawędzie. Jak możesz zobaczyć w tabeli 8.5, każdy typ obrysu wy­korzystuje teksturę Grain o zmiennym natężeniu. Typy Creamy (Tłusty) i Pastel (Pas­telowy) reagują na nacisk i prędkość rysowania, przy czym Creamy bardziej niż Pas­tel. Zasadnicza różnica pomiędzy obrysem typu Soft (Miękki) a pozostałymi polega na tym, że rozmiar obrysu Soft ulega w czasie rysowania losowym zmianom. Szerokość ob­rysu Soft waha się w granicach od 5 do 20 pikseli. Na rysunku 8.9 przedstawione zo­sta­ło porównanie różnych typów obrysów Charcoal.

Tabela 8.5.

Atrybuty obrysów Charcoal

Nazwa	Rozmiar		Rozmycie krawędzi	Tekstura	Natężenie tekstury
Creamy	20		0%	Grain (Ziarna)	16%
Pastel	20		0%	Grain (Ziarna)	24%
Soft	20		20%	Grain (Ziarna)	30%
Textured	20		60%	Grain (Ziarna)	85%
Rysunek 8.9. Obrysy Charcoal oferują szeroki zakres nierównych tekstur

Crayon XE "obrys:Crayon" (Kredka)

Obrys Crayon stosowany w Fireworks wygląda zupełnie jak kreska narysowana tra­dy­cyj­ną kredką. Ciekawe wyniki daje porównanie trzech typów obrysów Crayon. Na ry­sunku 8.10 i w tabeli 8.6 możesz zauważyć występujące pomiędzy nimi różnice.

Tabela 8.6.

Atrybuty obrysów Crayon

Nazwa	Rozmiar		Rozmycie krawędzi	Tekstura	Natężenie tekstury
Basic	12		0%	Grain (Ziarna)	65%
Rake	8		0%	Grain (Ziarna)	65%
Thick	20		0%	Grain (Ziarna)	20%
Rysunek 8.10. Obrysy kategorii Crayon pozwolą Ci wrócić do czasów dzieciństwa

Kred­ka ty­pu Rake (Grabki) ma mały rozmiar obrysu, ale wygląda, jakby była grub­sza niż dwa inne typy: Basic (Podstawowa) i Thick (Gruba). Różnica ta wynika z tego, że kred­ka typu Rake wykorzystuje cztery końcówki. Działa to tak, jakbyś rysował czte­rema kred­kami jednocześnie. Z powodu stosowania czterech końcówek, linie tworzone kred­ką typu Rake nakładają się na siebie, w wyniku czego jedna z nich może być prze­cią­gnię­ta dalej niż pozostałe.

Felt Tip XE "obrys:Felt Tip" (Marker)

Cztery typy obrysów z kategorii Felt Tip (rysunek 8.11) oferują różne poziomy prze­zro­czys­tości, co pozwala imitować rysowanie tradycyjnym markerem.

Rysunek 8.11. Różne typy obrysów z kategorii Felt Tip pozwalają uzyskać efekt przezroczystości

Markery typu Highlighter (Wyróżnienie) i Light Marker (Jasny) są w dużym stopniu przezroczyste. Ob­rys typu Light Marker ma oprócz tego bardziej rozmyte krawędzie niż pozostałe typy (ta­bela 8.7).

Tabela 8.7.

Atrybuty obrysów Felt Tip

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Dark Marker	8	0%	None (Brak)	brak
Highlighter	16	0%	None (Brak)	brak
Light Marker	12	5%	None (Brak)	brak
Thin	4	0%	None (Brak)	brak

Oil XE "obrys:Oil" (Farba)

Patrząc na pięć różnych typów obrysu Oil (rysunek 8.12), trudno jest uwierzyć, że drugi ob­rys od lewej - Broad Splatter (Rozrzucone plamy farby) - jest pojedynczym obrysem. Mi­mo że ma on tylko 10 pikseli grubości - podobnie jak obrysy Bristle (Pędzel z ostrym wło­siem) i Splatter (Plamy farby) (tabela 8.8) - wygląda na szerszy. Dzieje się tak dla­te­go, że używa jednocześnie dwóch końcówek, oddalonych od siebie o 500% sze­ro­koś­ci obrysu. Innymi słowy, obrys Broad Splatter może być pięć razy szerszy od swojej zdefi­nio­wa­nej grubości. Wszystkie obrysy Oil, z wyjątkiem typu Splatter, używają wielu koń­có­wek. Po­nie­waż jednak odległości pomiędzy końcówkami są ustawione na 100% sze­ro­kości ob­ry­su, wyglądają jak pojedyncze linie.

Rysunek 8.12. Szukasz obrysu, który nie będzie wyglądał jak zwykła linia? Wypróbuj obrysy Oil Splatter i Oil Broad Splatter

Tabela 8.8.

Atrybuty obrysów Oil

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Bristle	10	0%	Grain (Ziarna)	20%
Broad Splatter	10	0%	Grain (Ziarna)	30%
Splatter	10	0%	Grain (Ziarna)	30%
Strands	8	43%	None (Brak)	Brak
Textured Bristles	7	0%	Grain (Ziarna)	50%

Watercolor XE "obrys:Watercolor" (Akwarela)

Podobnie jak w przypadku innych obrysów czułych na nacisk i prędkość rysowania, wy­korzystując obrys Watercolor do tworzenia kształtów geometrycznych nie poznasz w peł­ni jego natury. Aby „wyczuć” jak zachowuje się ten obrys, powinieneś użyć jednego z na­rzędzi do odręcznego rysowania, na przykład narzędzia Brush (Pędzel) (rysunek 8.13).

Rysunek 8.13. Obrysy Watercolor dobrze wtapiają się w tło i są czułe na nacisk oraz prędkość rysowania

Obrysy na końcach wyglądają tak, jakby podczas rysowania kończył się atra­ment — zwła­szcza obrys typu Thin (Rzadka). Obrysy Heavy (Bardzo gęsta) i Thick (Gęsta) są przezroczyste i dobrze wta­pia­ją się w tło znaj­dujących się pod nimi obrazków, gdyż mają rozmyte krawędzie (ta­be­la 8.9).

Tabela 8.9.

Atrybuty obrysów Watercolor

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Heavy	50	50%	Grain (Ziarna)	30%
Thick	40	70%	Grain (Ziarna)	5%
Thin	15	25%	None (Brak)	brak

Random XE "obrys:Random" (Losowy)

Już najwyższy czas, by przystąpić do tworzenia obrysów, które może wykonać tylko kom­­puter. Obrysy z kategorii Random oprócz różnych rozmiarów, rozmycia krawędzi i teks­tur (tabela 8.10), mogą mieć również różne kształty i kolory. Kształt każdego ob­ry­su z tej kategorii jest wskazywany przez jego nazwę: Dots (Kropki), Fur (Futro), Squares (Kwadraty) i Yarn (Przędza). Zostały one pokazane na rysunku 8.14, ale jeśli chcesz zobaczyć ich wariacje kolorystyczne, będziesz musiał zerknąć do kolorowej wkład­ki. Najbardziej kolorowy jest obrys typu Confetti (Konfetti), zaś najmniej kolo­ro­wy - Dots (Kropki), ale we wszystkich obrysach losowych wykorzystywane są jakieś zmia­ny barw.

Tabela 8.10.

Atrybuty obrysów Random

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
Confetti	6	25%	None(Brak)	brak
Dots	3	20%	None (Brak)	brak
Fur	10	0%	None (Brak)	brak
Squares	5	0%	Grain (Ziarna)	20%
Yarn	8	0%	None (Brak)	brak

Rysunek 8.14. Obrysy z kategorii Random to wymyślna alternatywa dla typowych obrysów

Unnatural XE "obrys:Unnatural" (Nienaturalny)

Myślę, że śmiało można iść o zakład, że obrysy z kategorii Unnatural były tworzone w at­mosferze zabawy. Jak bowiem inaczej wytłumaczyć wrażenie bałaganu w obrysie ty­pu Fluid Splatter (Plamy płynu) lub blasku przebijającego z ciemności, jaki można za­ob­serwować w obrysie Toxic Waste (Odpady toksyczne)? Nie wspominając o obrysie Viscous Alien Paint (Ślady „obcego”), który wygląda jak nie z tego świata. Obojętnie kto i jak projektował te obrysy, korzystam z nich zawsze, gdy chcę nadać szczególny i wy­różniający wygląd swoim grafikom. Gdy więc zabraknie Ci inwencji twórczej, mo­żesz eksperymentować z nienaturalnymi obrysami, które możesz stosować do prawie wszys­tkich obiektów. Rezultaty mogą być naprawdę zaskakujące i przydatne. Jak widać z tabeli 8.11, wszystkie nienaturalne obrysy, z wyjątkiem Chameleon (Kameleon), mają mniej więcej takie same grubości. Kilka z nich posiada również przezroczyste obszary: 3D Glow (Blask 3D), Fluid Splatter (Plamy płynu), Outline (Obwódka), Paint Splatter (Plamy far­by) i Toxic Waste (Odpady toksyczne).

Ogólne możliwości wykorzystania niena­tural­nych obrysów możesz zobaczyć na ry­sun­ku 8.15, ale jeśli chcesz zobaczyć je w całej oka­załości, musisz zerknąć do kolo­ro­wej wkładki.

Tabela 8.11.

Atrybuty obrysów Unnatural

Nazwa	Rozmiar	Rozmycie krawędzi	Tekstura	Natężenie tekstury
3D	20	12%	None(Brak)	brak
3D Glow	19	100%	None (Brak)	brak
Chameleon	6	0%	Grain (Ziarna)	31%
Fluid Splatter	12	100%	None (Brak)	brak
Outline	19	100%	None (Brak)	brak
Paint Splatter	12	100%	None (Brak)	brak
Toothpaste	18	50%	None (Brak)	brak
Toxic Waste	18	100%	None (Brak)	brak
Viscous Alien Paint	12	30%	None (Brak)	brak
Rysunek 8.15. Obrysy Nienaturalne są ekscentryczną alternatywą dla obrysów Fireworks naśladujących naturalne media

Tworzenie nowych obrysów

Jeśli czterdzieści osiem standardowych obrysów to dla Ciebie za mało i potrzebujesz nie­co mniejszego aerografu lub obrysu kaligraficznego z większym natężeniem teks­tu­ry, albo jeśli chcesz użyć przerywanej lub kropkowanej linii zamiast ciągłej, w Fireworks mo­żesz tworzyć własne obrysy za pomocą kilku kliknięć myszą. Istnieje możliwość nie tyl­ko zapisywania drobnych modyfikacji jako nowych obrysów, ale również zapisania ist­niejącego obrysu po kompletnych modyfikacjach. Należy go zapisać razem z do­ku­men­tem lub jako styl Fireworks, który można wykorzystywać w dowolnych dokumen­tach albo wyeksportować i podzielić się nim z przyjaciółmi lub współpracownikami.

Niniejszy podrozdział został podzielony na dwie części. Pierwsza z nich wyjaśnia, jak zarządzać ob­rysami, aby były zawsze dostępne. Druga część jest nieco bardziej skomplikowana (ale bardzo interesująca) i opisuje edycję obrysów.

Zarządzanie obrysami

Zarządzanie obrysami jest możliwe przy użyciu rozwijanego menu palety Stroke XE "paleta:Stroke" (rysunek 8.16).

Rysunek 8.16. Za pomocą rozwijanego menu palety Stroke możesz zarządzać swoimi obrysami

Rozwijane menu palety zawiera cztery polecenia:

• Save Stroke As (Zapisz obrys jako). Zapisuje bieżący obrys pod nową nazwą w aktywnym dokumencie.

• Edit Stroke (Edytuj obrys). Wyświetla okno dialogowe Edit Stroke, które zo­sta­nie opisane w jednym z kolejnych podrozdziałów.

• Delete Stroke (Usuń obrys). Usuwa bieżący obrys (własny lub standardowy) z pa­lety Stroke.

	Z polecenia Delete Stroke korzystaj bardzo ostrożnie. Mimo że Fire­works zapyta Cię o potwierdzenie usunięcia obrysu, nie będziesz miał póź­niej możliwości cofnięcia tej operacji.

• Rename Stroke (Zmień nazwę obrysu). Zmienia nazwę bieżącego obrysu.

Aby zapisać zmodyfikowany obrys:

81. Zmodyfikuj dowolny istniejący obrys zmieniając wartości jego parametrów Edge Softness (Rozmycie krawędzi), Size (Rozmiar), Texture (Tekstura) i Am­ount of tex­­ture (Natężenie tekstury). Kolor obrysu nie może zostać zapisany jako jego atrybut.

82. Wybierz z rozwijanego menu polecenie Save Stroke As. Zostanie otwarte okno dia­­logowe Save Brush As (Zapisz pędzel jako). Użytkownicy pierwszej wersji Fi­re­­works pamiętają zapewne, że obrysy wcześniej nazywane były pędzlami (brush).

83. Wpisz nową nazwę dla obrysu. Jeśli wpiszesz taką, która już jest uży­wa­na, Fireworks zapyta Cię czy chcesz zastąpić istniejący pędzel.

84. Po wpisaniu nazwy obrysu kliknij przycisk Save (Zapisz). Nazwa nowego ob­ry­su zostanie wyświetlona, w porządku alfabetycznym, w rozwijanej liście opcji Type aktywnej kategorii obrysów.

Musisz wiedzieć, że każdy nowy lub zmodyfikowany obrys jest zapisywany w bie­żą­cym dokumencie. Nowo zdefiniowany obrys będzie zawsze dostępny w dokumencie, w któ­rym został zapisany.

Aby wykorzystać obrys w innym dokumencie:

85. Otwórz dokument zawierający obrys, który chcesz wykorzystać.

86. Zaznacz ścieżkę używającą nowego obrysu. Jeśli obrys nie jest przydzielony do żadnej ścieżki, narysuj jakąś ścieżkę i zaznacz ją.

87. Otwórz dokument, w którym chcesz użyć nowego obrysu.

88. Skopiuj zaznaczoną ścieżkę do nowego dokumentu za pomocą poleceń Edit Copy i EditPaste lub przeciągając ją z jednego dokumentu do drugiego. Po umieszczeniu w dokumencie nowej ścieżki zawierającej nowy obrys, do palety Stroke zostaną dodane nowe ustawienia tego obrysu.

89. Jeśli chcesz, możesz teraz usunąć z dokumentu skopiowaną wcześniej ścieżkę. Ob­rys będzie nadal dostępny i będziesz mógł go później wykorzystywać w no­wym dokumencie.

Istnieje jeszcze kilka innych metod przenoszenia obrysów pomiędzy dokumentami:

• Jedną z nich jest importowanie dokumentów zawierających własne obrysy. W tym celu po umieszczeniu dokumentu, wybierz z menu polecenie EditUn­do. Grafika zniknie z ekranu, ale wszystkie własne obrysy zostaną dołączone do pa­lety Stroke. Za pomocą tej techniki zostaną prze­nie­sione jedynie obrysy zastosowane do ścieżek znajdujących się w źródłowym dokumencie.

• Możesz również skopiować ścieżkę z własnym obrysem z jednego dokumentu i wkleić do nowego dokumentu jedynie jej atrybuty. W tym celu należy za­zna­czyć ścieżkę i wybrać z menu polecenie EditPaste Attributes.

Prawdopodobnie najlepszym sposobem zapewnienia dostępu do własnych obrysów jest wy­korzystanie styli. Aby utworzyć nowy styl używający własnego obrysu:

90. Zaznacz ścieżkę używającą własnego obrysu.

91. Wybierz z menu polecenie WindowStyles, użyj skrótu klawiaturowego Shift +F11, albo kliknij zakładkę Style (jeśli jest widocz­na na ekranie), aby otworzyć paletę Styles.

92. Kliknij znajdujący się w palecie Styles przycisk New Style (Nowy styl). Zo­sta­nie otwarte okno dialogowe New Style (rysunek 8.17).

93. W oknie dialogowym Edit Style wpisz opisową nazwę obrysu w polu tek­sto­wym Name i usuń zaznaczenia wszystkich pól wyboru z wyjątkiem Stroke Type.

Rysunek 8.17. Zdeklarowanie stylu w oknie dialogowym New Style pozwala na zdefiniowanie obrysu, który będzie łatwo dostępny z poziomu wszystkich dokumentów Fireworks

94. Kliknij przycisk OK. Nowy styl zostanie umieszczony w palecie Styles.

Wszystkie style utworzone za pomocą powyższych wskazówek będą zawsze dostępne dla kolejnych dokumentów Fireworks. Aby zastosować obrys, wystarczy zaznaczyć do­wol­ną ścieżkę wektorową i kliknąć styl w palecie Styles. Obrys zdefiniowany w stylu zo­stanie dodany do palety Stroke.

	Więcej informacji o możliwościach stylów znajdziesz w rozdziale 16.

Edycja XE "obrys:edycja" obrysów

Pewnych modyfikacji obrysów można dokonywać za pomocą palety Stroke, ale jeśli chcesz naprawdę dostosowywać je do własnych potrzeb, będziesz musiał wykorzystać ok­no dialogowe Edit Stroke. Mimo że bogaty zestaw opcji dostępnych w tym oknie dia­lo­gowym może być na początku nieco przytłaczający, jeśli już dowiesz się, jak osiągnąć za­mierzony efekt, tworzenie nowych obrysów stanie się prostym, przyjemnym i bardzo inte­resującym zajęciem.

Okno dialogowe Edit Stroke możesz otworzyć w jeden z dwóch sposobów:

• Wybierz polecenie Edit Stroke z rozwijanego menu palety Strokes.

• Kliknij dwukrotnie podgląd końcówki (Tip) wybranego obrysu w palecie Stroke.

Okno dialogowe Edit Stroke jest podzielone na trzy zakładki: Options (Opcje), Shape (Kształt) i Sensitivity (Czułość). W każdej z nich znajduje się podgląd obrysu, który jest po każdej zmianie automatycznie aktualizowany. Jeżeli przed otwarciem okna dia­lo­go­we­go Edit Stroke zaznaczysz ścieżkę z modyfikowanym obrysem, będziesz mógł za po­mo­cą przycisku Apply (Zastosuj) zobaczyć efekty swoich modyfikacji.

	W czasie pracy z oknem dialogowym Edit Stroke odkryłem technikę, któ­ra działa inaczej niż się spodziewałem. Jeżeli zmodyfikujesz obrys bez uprzedniego zaznaczenia ścieżki, zmiany te nie zostaną zare­jes­tro­wane. Zawsze więc przed utworzeniem własnego obrysu zaznacz ja­kąś ścieżkę, chociażby tymczasowo.

Zakładka Options (Opcje)

Zakładka Options umożliwia ustawianie wielu ogólnych, ale istotnych atrybutów. Op­rócz sterowania dobrze Ci już znanymi parametrami, takimi jak natężenie tekstury ob­ry­su lub jego przezroczystość, zakładka Options (rysunek 8.18) pozwala sterować również „szczel­nością” obrysu, jego rozkładem i efektami stosowanymi do krawędzi.

Rysunek 8.18. W zakładce Options okna dialogowego Edit Stroke znajduje się wiele kontrolek służących do sterowania kluczowymi atrybutami obrysu

Ink Amount (Ilość atramentu)

Pierwszy atrybut obrysu w zakładce Options to Ink Amount. Przeważnie jest on usta­wia­ny na 100 procent, ale możesz zmienić jego wartość dla dowolnego obrysu. Wartość Ink Amount jest odpowiedzialna za stopień krycia obrysu: 100% to kompletne krycie, zaś 0% daje pełną przezroczystość. Dolny przycisk „CLICK” znajdujący się na rysunku 8.19 po­kazuje, jak wygląda obrys przy wartości parametru Ink Amount wynoszącej 60%.

Za pomocą palety Object można również modyfikować stopień krycia całych obiektów, ale parametr Ink Amount umożliwia jedynie modyfikację obrysu. Zmiany obu para­me­trów są uwzględniane równolegle, co oznacza, że jeśli parametr Ink Amount obrysu ma war­tość 50% i na taką samą wartość ustawisz w palecie Object krycie obiektu, obrys bę­dzie miał w rezultacie krycie wynoszące 25% (ponieważ połowa 50% to 25%). Do­brym przykładem obrysu wykorzystującego zredukowane wartości parametru Ink Amount w celu uzyskania przezroczystości jest obrys Felt Tip Highlighter.

Spacing (Odstępy)

W praktyce każdy obrys składa się z długich serii stempli obrysu. Stempel jest naj­mniej­szym fragmentem obrysu. Aby zobaczyć jak to wygląda, wybierz jakiś obrys i kliknij raz narzędziem Brush. Podczas przeciągania narzędziem Brush lub ja­kim­kolwiek innym, poszczególne stemple będą umieszczane jeden za drugim. Za od­le­głoś­ci pomiędzy stemplami odpowiedzialny jest parametr Spacing. W jednym z kolej­nych podrozdziałów dowiesz się, jak poprzez zmiany parametru Spacing, możesz tworzyć linie krop­kowane.

Rysunek 8.19. Zredukowanie wartości parametru Ink Amount powoduje zmniejszenie stopnia krycia obrysu
		Jeśli będziesz próbował modyfikować obrys Pencil 1-Pixel lub dowolny ob­rys z kategorii Basic, zauważysz, że nie można zmienić wartości ich pa­rametrów Spacing i Flow Rate. Obrysy te wykorzystują przy wy­świe­tla­niu inny algorytm niż pozostałe obrysy. Brak możliwości modyfikacji od­stępów pomiędzy stemplami i szybkości rozpylania jest w nich re­kom­pensowany wyższą precyzją. Spróbuj zmodyfikować dowolny inny ob­rys, aby zobaczyć efekty zmian opcji Spacing i Flow Rate.

Wartości parametru Spacing można modyfikować w zakresie od 0 do 1000%. Przy war­tości parametru Spacing wynoszącej 100%, każdy kolejny stempel jest wstawiany bez­pośrednio za poprzednim. Przy wartości mniejszej niż 100%, stemple są nakładane je­den na drugi. Jeśli wartość parametru Spacing wynosi więcej niż 100%, pomiędzy po­szczególnymi stemplami powstają widoczne przerwy. Obrysy posiadające rozmyte kra­wędzie, takie jak Air Brush, posiadają widoczne odstępy pomiędzy stemplami nawet wów­czas, gdy wartość parametru Spacing jest mniejsza niż 100%. Dzieje się tak dla­te­go, że rozmycie krawędzi jest wliczane w rozmiar stempla. Efekt przedstawiony na ry­sun­ku 8.20 został osiągnięty poprzez zwiększenie wartości parametru Spacing obrysu Felt Tip do ponad 200%.

Flow Rate (Szybkość rozpylania) i Build-up (Wzmocnienie)

Większość ustawień obrysów decyduje o tym, jak obrysy będą zmieniane już po naryso­wa­niu. Wartość parametru Flow Rate jest odpowiedzialna za szybkość tworzenia poszcze­gól­­nych stempli obrysu - im wyższa wartość, tym szybciej są tworzone. Najlepszym przy­kładem mogą być tutaj obrysy z kategorii Air Brush (Aerograf). Oba typy tego ob­ry­su: Basic (Podstawowy) i Textured (Z teksturą) wykorzystują dość wysoką wartość pa­rametru Flow Rate - 80%.

Rysunek 8.20. Zwiększając wartość parametru Spacing można tworzyć linie kropkowane

Opcja Build-up (Wzmocnienie) jest kolejną metodą zmiany stopnia krycia obrysu. Jeśli op­cja ta zostanie włączona na przykład dla krzyżującego się obrysu Air Brush (rysunek 8.21) zauważysz, że w miejscach krzyżowania się obrysu tworzone są ciemniejsze ob­sza­ry. Po wyłączeniu opcji Build-up obrys będzie miał bardziej jednorodny i jednolity wygląd.

Rysunek 8.21. Przy włączonej opcji Build-up, obrys Air Brush działa jak prawdziwy aerograf, tworząc ciemniejsze obszary na skrzyżowaniach linii

Texture (Tekstura), Edge Texture (Tekstura krawędzi)
i Edge Effect (Efekty krawędzi)

Opcja Texture znajdująca się w oknie dialogowym Edit Stroke działa tak samo jak opcja Amount of Texture z palety Stroke. Zwiększenie wartości parametru Texture spowoduje uwy­puklenie nałożonej tekstury w nieprzezroczystych obszarach obrysu. Ustawienie war­tości Texture na 0% spowoduje jej całkowite wyłączenie.

Z poziomu okna dialogowego Edit Stroke nie można zdefiniować typu teks­tury, trzeba to zrobić za pomocą palety Stroke. Typ tekstury jest za­chowywany wraz z obrysem po wybraniu polecenia Save Stroke As (Za­pisz obrys jako), ale jeśli tymczasowo zostanie wybrany inny typ teks­tury, oryginalna tekstura nie zostanie przywrócona po ponownym wy­braniu zapisanego obrysu. Jeżeli chcesz przywrócić ustawienia wła­s­nej tekstury, musisz przeładować dokument z zapisanym obry­sem.

Wartość parametru Texture powoduje, że wybrana tekstura jest widoczna nad nie­prze­zro­czystymi obszarami obrysu, zaś ustawienie Edge Texture powoduje, że jest ona wi­docz­na jedynie nad przezroczystymi obszarami obrysu. Pamiętaj, że w Fireworks roz­my­cie kra­wę­dzi jest tworzone za pomocą kanału alfa dodawanego do obrysu. Po zwiększeniu war­toś­ci parametru Edge Texture i zmniejszeniu Texture, tekstura jest bardziej widoczna na kra­wędziach obrysu niż w jego środku.

	Niezależnie od tego, jak dużą wartość będzie miał parametr Edge Texture, teks­tu­ra na krawędziach obrysu będzie niewidoczna, jeżeli wartość pa­ra­metru Edge Softness będzie wynosiła 0%.

Oprócz modyfikowania tekstury krawędzi obrysu, możesz tworzyć także efekty kra­wę­dzi (Edge Effect). Efekty krawędzi są tworzone poprzez zastosowanie algorytmu od­dzia­łu­ją­cego na kanał alfa samego obrysu i jego krawędzi. Powyższy opis nie oddaje jednak w pełni in­try­gu­ją­cych rezultatów, do jakich prowadzi zastosowanie efektów krawędzi (rysunek 8.22).

Efekty krawędzi są uzależnione od przezroczystości krawędzi obrysu, więc nie mo­żesz zastosować efektu do obrysu, dla którego wartość parametru Edge Softness wynosi 0%.

Tips (Końcówki), Tip Spacing (Odległości pomiędzy końcówkami)
i Variations (Wariacje)

Czy kiedykolwiek zdarzyło Ci się rysować, trzymając pełną garść kolorowych kredek? A może za­uważyłeś kiedyś - po czasie - że Twój pędzel jest wysuszony i ma porozdzielane wło­sie? W każdym z tych przypadków powstaje obok siebie wiele linii. W języku Fire­works, każda kredka lub pojedynczy włos pędzla są nazywane końcówkami. Koń­ców­ki mogą być definiowane za pomocą atrybutu Tips. Każdy obrys musi mieć co naj­mniej jedną, a może mieć maksymalnie dziesięć końcówek.

	Aby uaktywnić atrybuty Tip Spacing i Variations, musisz zdefiniować wię­cej niż jedną końcówkę.

To, ile końcówek obrysu będzie widocznych, determinowane jest przede wszystkim przez atrybut Tip Spacing (Odległości pomiędzy końcówkami). Podobnie jak w przy­pad­ku parametru Spacing, wartości parametru Tip Spacing mieszczą się w zakresie od 0% (końcówki są rysowane jedna nad drugą) do 1000% (końcówki są maksymalnie rozsu­nię­te).

Rysunek 8.22. Każdy z pięciu efektów krawędzi jest tworzony przez połączenie przezroczystości obrysu i jego krawędzi

Na rysunku 8.23 możesz zobaczyć przykłady wykorzystania skraj­­nych wartości para­me­tru Tip Spacing. Obrys Unnatural 3D został utworzony za po­mo­cą jednej, pięciu i dzie­sięciu końcówek, zaś odległości pomiędzy końcówkami wy­no­szą 1000%. W każdej z grafik została narysowana pojedyncza gwiazda.

Rysunek 8.23. W każdej grafice została narysowana pojedyncza gwiazda, choć może wydawać się, że w dwóch z nich wykorzystano klonowanie obiektów. Wykorzystanie wielu końcówek i wysoka wartość parametru Tip Spacing pozwalają tworzyć wiele identycznie wyglądających obrazków za pomocą tylko jednego obrysu

Ostatnia opcja zakładki Options to Variations (Wariacje). Przy korzystaniu z wielu koń­cówek, wybrana wariacja decyduje o sposobie przedstawiania poszczególnych koń­cówek obrysu. W każdej z wariacji zmieniane są kolory dodatkowych końcówek. Do­stęp­ne wartości opcji Variations to:

• Random (Losowe). Dla każdej końcówki tworzonego obrysu losowo wybie­ra­ny jest kolor.

• Uniform (Jednolite). Wszystkie końcówki korzystają z tego samego koloru zde­­finiowanego dla obrysu.

• Complementary (Dopełniający). Jeśli obrys korzysta z dwóch końcówek, jedna z nich będzie używać koloru dopeł­nia­ją­ce­go do koloru bazowego (z przeciwnej strony koła kolorów HLS (Hue - Barwa, Luminosity - Luminancja, Saturation - Nasycenie). Jeżeli zdefiniowanych zo­sta­nie więcej niż dwie końcówki, dodatkowe końcówki wykorzystają ko­lory równo rozłożone pomiędzy początkowymi, dopełniającymi się kolorami.

• Hue (Odcień). Wiele końcówek jest wyświetlanych w odcieniach zbliżonych (plus-minus 5% koła kolorów HLS) do koloru obrysu.

• Shadow (Cień). Dodatkowe końcówki są wyświetlane za pomocą naprzemiennych jaśniejszych i ciemniejszych odcieni koloru obrysu.

Zakładka Shape (Kształt)

Jeśli porównamy zakładkę Shape okna dialogowego Edit Stroke (rysunek 8.24) z za­kład­­ką Object, działanie tej zakładki staje się prawie oczywiste. W górnym panelu wyświetlany jest stem­pel obrysu, zaś w dolnym wygląd odcinka obrysu.

Rysunek 8.24. Zarówno wygląd stempla, jak i całego obrysu jest uzależniony od ustawień atrybutów znajdujących się w zakładce Shape

W zakładce Shape można ustawiać pięć parametrów obrysu:

• Square (Kwadrat): Po włączeniu tej opcji stempel obrysu - w zależności od usta­wień parametru Aspect - ma kształt kwadratu lub prostokąta. Jeżeli opcja Square jest wyłączona, stempel ma kształt okręgu lub elipsy.

• Size (Rozmiar): Umożliwia ustawienie początkowej szerokości obrysu. Para­metr ten mierzony jest w pikselach, a zakres jego wartości mieści się w gra­ni­cach od 1 do 100. Wartość szerokości obrysu jest wyświetlana w palecie Stroke.

• Edge (Krawędzie): Definiuje stopień rozmycia krawędzi obrysu. Wartość tego pa­rametru jest również wyświetlana w palecie Stroke.

• Aspect (Proporcje): Ustala proporcje pomiędzy wysokością i szerokością stem­pla. Przy wartości 0 lub 100 tworzone są okręgi lub kwadraty, każda inna war­tość powoduje tworzenie prostokątów lub elips.

• Angle (Kąt): Definiuje kąt pochylenia stempla obrysu. Wartości tego para­metru można wpisywać bezpośrednio w pole tekstowe lub ustawiać za pomocą koła.

Stosując różne wartości parametrów znajdujących się w zakładce Shape możesz two­rzyć wiele różnych kształtów. Dla mnie szczególnie przydatne są parametry Aspect i Ra­tio. Używam ich na przykład do tworzenia kropkowanych obrysów w kształcie rom­bu, co zostanie opisane w jednym z kolejnych podrozdziałów.

Zakładka Sensitivity (Czułość)

Zakładka Sensitivity okna dialogowego Edit Stroke (rysunek 8.25) pozwala na usta­wia­nie pewnych reakcji własnych obrysów na sposób ich tworzenia. Modyfikując nacisk, prędkość lub kierunek rysowania, możesz tworzyć obrysy przyjmujące różne rozmiary, kąty po­chy­lenia, przezroczystość i kolory. Możesz nawet tak ustawić obrys, aby jego parametry były zmieniane losowo.

Korzystanie z zakładki Sensitivity opiera się na wybraniu jednego z atrybutów obrysu z roz­wijanej listy Brush Properties (Właściwości pędzla) i ustawieniu pożądanych war­toś­ci poszczególnych kontrolek znajdujących się w sekcji Affected By.

Rysunek 8.25. Za pomocą zakładki Sensitivity okna dialogowego Edit Stroke możesz tworzyć interaktywne obrysy

Jeśli chcesz na przy­kład, aby kolory obrysu były zmieniane tylko podczas rysowania w poziomie, po­wi­nieneś wybrać opcję Hue z rozwijanej listy Brush Properties i ustawić wysoką war­tość parametru Horizontal w sekcji Affected By. Im wyższa wartość danego parametru (Pressure - Nacisk, Speed - Prędkość itd.), tym bardziej widoczne jest jego działanie.

W zakładce Sensitivity możesz ustawiać siedem różnych parametrów:

• Size (Rozmiar). Jeżeli wartość tego parametru będzie większa od 0, obrys pod­czas rysowania będzie zawsze węższy (nigdy szerszy) niż na początku. Jeżeli usta­wisz 50%, obrys na końcu będzie o połowę węższy niż na początku.

• Angle (Kąt). Na kąt pochylenia stempla obrysu można oddziaływać w zakresie do 90⁰, jeżeli zaznaczona jest właściwość Angle i jego wartość Affected By ma mak­symalną wartość - 100%.

• Ink Amount (Ilość atramentu). Podobnie jak w zakładce Options, właściwość Ink Amount jest odpowiedzialna za krycie obrysu. Po ustawieniu mak­sy­mal­nych wartości tego parametru można tworzyć przezroczyste obrysy.

• Scatter (Rozrzut). Właściwość odpowiedzialna za odległości, w jakich stemple ob­rysu są oddalone od ścieżki. Parametr Scatter działa najbardziej efektywnie z warunkiem Random (Losowo).

• Hue (Barwa). Reguluje kolor obrysu. Właściwość ta doskonale sprawdza się w przy­padku wielokolorowych obrysów, takich jak te z kategorii Random.

• Lightness (Jasność). Ilość bieli w kolorze obrysu. Wybierz właściwość Ligh­tness i ustaw wysoką wartość warunku Speed jeśli chcesz, aby przy szybszym ry­sowaniu tworzony był bardziej „wyblakły” obrys.

• Saturation (Nasycenie). Intensywność koloru. Im wyższa wartość parametru, tym większy zanik nasycenia obrysu. Jeżeli ustawisz wysoką wartość warunku Speed, przy szybkim rysowaniu obrys zszarzeje, czyli będzie tracił kolory.

Każdy z warunków powyższych właściwości posiada własny suwak i pole tekstowe, do któ­rego można wprowadzać wartości:

• Pressure (Nacisk). Nacisk piórka wykorzystywanego w czułych na nacisk ta­ble­tach graficznych.

• Speed (Prędkość). Prędkość rysowania ścieżki za pomocą tabletu graficznego lub myszy.

• Horizontal (Poziomo). Rysowanie ścieżek od lewej do prawej lub w przeciw­nym kierunku.

• Vertical (Pionowo). Rysowanie ścieżek od góry do dołu lub w przeciwnym kie­runku.

• Random (Losowo). Wybrana właściwość działa bez żadnych dodatkowych da­nych dostarczanych prze użytkownika.

Warunki znajdujące się w sekcji Affected By mogą być stosowane razem. Wpro­wa­dzając na przykład takie same wartości warunków Horizontal i Vertical dla właściwości Angle, możesz sprawić, aby kąt pochylenia stempla obrysu, takiego jak Random Fur, był zmie­niany podczas rysowania w obu kierunkach: poziomym i pionowym.

Zasadniczo, ustawienia wprowadzane w zakładce Sensitivity działają w sposób bardziej prze­widywalny ze ścieżkami rysowanymi odręcznie, na przykład tworzonymi za po­mo­cą na­rzędzia Brush, niż ścieżkami budowanymi z geometrycznych kształtów, takich jak pros­tokąty lub elipsy. Aby poznać efekty działania poszczególnych parametrów, które mo­żesz ustawiać w oknie dialogowym Edit Stroke, będziesz musiał z nimi poeks­pe­rymentować.

Technika Fireworks:
Tworzenie kropkowanych linii

W bogatym zestawie standardowych obrysów Fireworks znajdziesz jedynie mniej lub bar­dziej jednolite linie, ale nie będzie tam żadnego obrysu, który można wykorzystać jako linię kropkowaną. Istnieje kilka wyjątków - na przykład obrysy typu Random, ale są one zbyt mało przewidywalne, aby stosować je do tworzenia zwykłych linii kropko­wa­nych. Jednak, jak mogłeś zauważyć w poprzednim podrozdziale, Fireworks oferuje sze­roki zakres możliwości dostosowywania obrysów do własnych potrzeb. Procedura two­rzenia linii kropkowanej jest bardzo prosta. Jest również dobrym wprowadzeniem do tworzenia własnych obrysów.

Najważniejszym parametrem wykorzystywanym do utworzenia linii kropkowanej jest Spa­cing, który można znaleźć w zakładce Options okna dialogowego Edit Stroke. Gdy war­tość parametru Spacing wynosi 100%, każdy stempel (najmniejszy element obrysu) jest wstawiany bezpośrednio za stemplem go poprzedzającym. Jeżeli Spacing wynosi mniej niż 100%, poszczególne stemple są nakładane na siebie, zaś jeśli wynosi więcej niż 100% (i właśnie takie wartości wykorzystamy do utworzenia linii kropkowanej), pomiędzy poszczególnymi stemplami obrysu tworzone są widoczne przerwy.

Tworząc jakikolwiek własny obrys, będziesz musiał rozpocząć od gotowego, wbu­do­wa­ne­go obrysu, który najlepiej nadaje się do Twoich zastosowań. Najlepsze byłyby tutaj ob­ry­sy Basic i Pencil 1-Pixel, ale niedostępny jest dla nich najważniejszy parametr przy two­rzeniu linii kropkowanych - Spacing. Jak wspominałem w jednym z poprzednich pod­rozdziałów, obrysy te są tworzone bardzo precyzyjnie i dlatego nie można dla nich mo­dyfikować parametrów Spacing i Flow. Najlepszym obrysem do utworzenia linii krop­ko­wa­nej, który wymaga jedynie minimalnej modyfikacji parametrów, jest jeden z ob­ry­sów z kategorii Pencil - Colored Pencil.

Aby utworzyć prostą linię kropkowaną:

95. Wyświetl paletę Stroke, wybierając z menu polecenie WindowStroke lub kli­kając jej zakładkę, jeśli jest widoczna na ekranie.

96. Z rozwijanej listy Category wybierz opcję Pencil.

97. Z rozwijanej listy Type wybierz opcję Colored Pencil.

98. Wybierz polecenie Edit Stroke z rozwijanego menu palety Edit Stroke lub dwu­krot­nie kliknij panel podglądu Tip, aby otworzyć okno dialogowe Edit Stroke.

99. W zakładce Options okna dialogowego Edit Stroke zmień wartość parametru Spa­cing z 15 na 200%.

W panelu podglądu zauważysz, że właśnie utworzyłeś linię kropkowaną (ry­su­nek 8.26).

Rysunek 8.26. Modyfikując ustawienia w oknie dialogowym Edit Stroke, w prosty sposób możesz utworzyć kropkowaną linię

78. Kliknij przycisk OK.

79. Z rozwijanego menu palety wybierz polecenie Save Stroke As.

80. W oknie dialogowym Save Stroke As wpisz indywidualną nazwę własnego obrysu.

Wykorzystaj jedno z narzędzi do tworzenia ścieżek: Rectangle, Ellipse, Polygon, Brush lub Pen, aby sprawdzić, jak wygląda utworzona linia kropkowana.

Teraz zobaczysz, jak łatwo obrys można dostosować do własnych potrzeb, wyko­rzy­stu­jąc trzy różne warianty (rysunek 8.27). Każda z instrukcji zakłada, że pracujesz w ok­nie dialogowym Edit Stroke.

Rysunek 8.27. Modyfikując ustawienia parametrów w oknie dialogowym Edit Stroke, możesz utworzyć różne warianty linii kropkowanej

Aby nadać linii bardziej ostre i spójne krawędzie:

• Ustaw wartość opcji Edge Texture znajdującej się w zakładce Options na 0%.

• Ustaw wartość opcji Edge znajdującej się w zakładce Shape na 0%.

• W zakładce Sensitivity ustaw warunek Speed właściwości Size na 0, warunki Pres­sure i Speed właściwości Ink Amount na 0 oraz warunki Speed i Pressure właś­ciwości Lightness również na 0.

Aby utworzyć linię kropkowaną składającą się z okrągłych zamiast kwadratowych stempli:

• Usuń zaznaczenie opcji Square znajdującej się w zakładce Shape.

• W zakładce Shape ustaw wartość parametru Aspect na 100.

Aby utworzyć poziomą linię przerywaną:

• Ustaw wartość opcji Aspect znajdującej się w zakładce Shape na 50.

• W zakładce Shape zmień wartość parametru Angle na 0.

Aby utworzyć pionową linię przerywaną:

• Ustaw wartość opcji Aspect znajdującej się w zakładce Shape na 50.

• W zakładce Shape zmień wartość parametru Angle na 270.

Aby utworzyć linię składającą się ze stempli w kształcie rombów:

• Upewnij się, że zaznaczona została opcja Square w zakładce Shape.

• Zmień wartość znajdującej się w zakładce Shape opcji Angle na 100.

• Zmień wartość parametru Angle na 45.

Orientacja XE "obrys:orientacja" obrysu

Obojętnie, czy są stosowane do ścieżek otwartych, takich jak linie lub ście­żek zamkniętych, takich jak okręgi lub prostokąty, obrysy zawsze są bardzo przydatne. Jednak po za­sto­sowaniu obrysu do ścieżki zamkniętej, Fireworks daje nam do dyspozycji dodat­ko­wy zestaw ustawień. Każdy obrys domyślnie jest wyśrodkowywany względem ścieżki. Za­znacz obiekt będący zamkniętą ścieżką a zobaczysz, że jego obrys jest wyświetlany po obu stronach ścieżki. Orientację obrysu względem ścieżki można zmienić tak, aby był tworzony tylko wewnątrz lub tylko na zewnątrz ścieżki. Jak możesz zobaczyć na ry­sunku 8.28 możliwości te pozwalają tworzyć wiele interesujących efektów.

Opcje odpowiedzialne za orientację obrysu względem ścieżki można znaleźć w palecie Ob­ject. Trzy dostępne w tej palecie przyciski, położone odpowiednio od lewej do pra­wej, pozwalają umieścić obrys wewnątrz ścieżki, wyśrodkować go względem ścieżki lub umieścić na zewnątrz ścieżki. Poniżej przycisków znajduje się dodatkowa opcja


Rysunek 8.28. Ten sam obrys został umieszczony na zewnętrz ścieżki, wyśrodkowany względem ścieżki i umieszczony wewnątrz ścieżki

- Draw Fill over Stroke (Wypełnienie nad obrysem). Domyślnie obrys jest zawsze wy­świe­tlany nad kolorem wypełnienia, deseniem lub gradientem. Za pomocą opcji Draw Fill over Stroke możesz jednak odwrócić kolejność wyświetlania tych atrybutów.

	łącząc działanie opcji Draw Fill over Stroke z obrysem wy­środ­ko­wa­nym względem ścieżki i wypełnieniem z rozmytymi krawędziami, mo­żesz stwo­rzyć obrys, który będzie się wtapiał w wypełnienie z za­cho­wa­niem os­trości zewnętrznych krawędzi.

Jednym z moich ulubionych zastosowań kontrolek modyfikujących orientację obrysu jest wykorzystanie wewnętrznego obrysu jako dodatkowego wy­peł­nie­nia, co w efekcie daje wrażenie bardziej złożonego wypełnienia (rysunek 8.29). Aż trudno uwie­rzyć, że Fireworks pozwala stworzyć tego typu efekty, wykorzystując jedynie ścież­ki wektorowe!

Podsumowanie

Obrys niejako definiuje kształt elementu graficznego. Fireworks oferuje wspaniały zes­taw obrysów standardowych oraz umożliwia tworzenie własnych. Pracując z obrysami, mu­sisz pamiętać o następujących rzeczach:

• Obrys czyni ścieżkę widoczną. Linia nie posiadająca obrysu nie będzie widoczna na ekranie do czasu zam­knię­cia ścieżki i zastosowania wypełnienia.

Rysunek 8.29. Wewnętrzne obrysy doskonale widać w zestawie znajdujących się na rysunku przycisków. W dolnym rzędzie pokazany został przycisk wskazywany kursorem w trzech różnych wersjach orientacji obrysu

• Paleta Stroke zapewnia szybki dostęp do ustawień koloru, rozmiaru, krawędzi i teks­tury obrysu. Okienko podglądu przedstawia końcówkę ob­rysu.

• Fireworks oferuje 48 różnych typów obrysów podzielonych na 11 kategorii. Wie­le obrysów jest interaktywnych, a to oznacza, że reagują na nacisk i pręd­kość podczas rysowania.

• Wbudowane obrysy Fireworks mogą być na wiele sposobów dostosowywane do indywidualnych potrzeb użytkowników za pomocą okna dialogowego Edit Stroke.

• Po zmodyfikowaniu obrysu możesz go zapisać wraz z dokumentem za pomocą po­leceń znajdujących się w rozwijanym menu palety Stroke. Własne obrysy moż­na zapisywać również jako style Fireworks.

• Mimo że w zestawie obrysów Fireworks nie ma linii kropkowanej, bez pro­­blemów możesz ją sam utworzyć.

• Fireworks dobrze współpracuje z tabletami graficznymi i w pełni wykorzystuje ich czułość na nacisk.

W następnym rozdziale dowiesz się, jak wykorzystać zaawansowane techniki tworzenia ście­żek w Fireworks.




Rozdział 9.
Konstruowanie ścieżek

W tym rozdziale:

• Przekształcanie obiektów wektorowych.

• Technika Fireworks: tworzenie perspektywy.

• Praca z obiektami wektorowymi na poziomie pikseli.

• Edycja istniejących obiektów wektorowych.

• Korzystanie z narzędzi do tworzenia obiektów wektorowych.

Nawet jeśli użyjesz najefektowniejszego obrysu, wspaniałego wypełnienia i rewela­cyj­ne­go efektu, bardzo rzadko uzyskasz zadowalające Cię rezultaty od razu po naryso­wa­niu obiektu. Być może będzie musiał być większy, mniejszy, węższy lub szerszy. A może jest doskonały, ale odwrócony „do góry nogami”. Jakikolwiek problem napotkasz, Fire­works oferuje Ci narzędzia pozwalające go rozwiązać. Uzyskasz również wspaniałą pre­­cyzję, gdyż Fireworks łączy grafikę bitmapową z wektorową.

Fireworks posiada narzędzia, których można byłoby spodziewać się w profesjonalnej apli­kacji do tworzenia grafiki wektorowej. Za pomocą narzędzi o opisowych nazwach: Union (Unia), Intersect (Przecięcie), Punch (Odjęcie spodu) i Crop (Kadrowanie) mo­żesz łączyć ze sobą kilka obiektów wektorowych na wiele różnych sposobów. Oczywiście wszystko co po­łączysz, możesz później rozdzielić i ponownie rozmieścić. Za pomocą poleceń Fire­works wolno Ci upraszczać, rozszerzać lub zawężać obiekty wektorowe.

W niniejszym rozdziale opisane są wszystkie narzędzia i techniki Fireworks służące do prze­kształ­cania i łączenia obiektów. Znajdziesz tu również opis wykorzystania go do two­rze­nia perspektyw w swoich grafikach.

Gdy zaczniesz przekształcać swoje obiekty, docenisz wielkie możliwości Fireworks, jakie daje połączenie wektorów z bitmapami. Jeśli chciałbyś zwiększyć rozmiar obrazka w apli­kacji służącej jedynie do edycji grafiki bitmapowej, musiałbyś utworzyć do­dat­ko­we pik­sele. Zmniejszenie obrazka spowodowałoby zaś odrzucenie przez program nie­któ­­rych pikseli. W obu sytuacjach rzadko zdarza się, że od razu uzyskasz zadowalające rezultaty. W Fireworks, gdy zmienisz rozmiary obiektu wektorowego, zmodyfikowana zostanie sama ścieżka, a piksele zostaną dostosowane do nowej ścieżki.

Wizualne przekształcanie obiektów

Fireworks pozwala przekształcać obiekty zarówno wizualnie, jak i numerycznie. Do wi­zu­alnych przekształceń można wykorzystać trzy narzędzia znajdujące się w palecie na­rzę­dziowej: Scale (Skalowanie), Skew (Przekrzywienie) i Distort (Zniekształcenie).

	W przykładach znajdujących się w tym rozdziale wykorzystywałem głów­­nie obiekty wektorowe, ale wszystkie narzędzia transformacji moż­na wykorzystywać również do pracy z obiektami bitmapowymi.

Skalowanie

W projektowaniu dla Internetu rozmiary obiektów ulegają dość częstym zmianom. Zda­rza się, że przycisk jest zbyt duży w stosunku do paska nawigacyjnego lub klient chce, abyś zwiększył znajdujący się na stronie napis. Czasami też obiekt musi zo­stać przeskalowany, aby lepiej wyglądał. Obojętnie, jakie są powody zmian rozmiarów, Fire­works pozwala szybko powiększać lub zmniejszać obiekty za pomocą narzędzia Scale (Skalowanie).

Narzędzie Scale XE "Scale" jest pierwszym z trzech narzędzi transformacji znajdujących się w pa­le­cie narzędziowej, które stają się aktywne po zaznaczeniu obiektu. Po kliknięciu na­rzę­dzia Scale (lub użyciu skrótu klawiaturowego Q) standardowe zaznaczenie zostanie za­mie­nio­ne na ramkę transformacji (rysunek 9.1). W narożnikach i środkach wszystkich boków ramki umie­szczane są uchwyty skalowania, zaś w jej środku - punkt środkowy. Aby prze­ska­lo­wać za­znaczony obiekt, możesz przeciągnąć dowolny uchwyt skalowania. Przecią­ga­nie uchwy­tów znajdujących się na rogach ramki powoduje proporcjonalne skalowanie obiektu.

Rysunek 9.1. Po wybraniu narzędzia Scale wokół zaznaczonego obiektu zostaną wyświetlone uchwyty skalowania, a w jego środku - punkt środkowy

Centerpoint — Punkt środkowy

Sizing cursor — Kursor skalowania

Sizing handles — Uchwyty skalowania

Aby przeskalować obiekt za pomocą narzędzia Scale:

81. Zaznacz obiekt, który chcesz przeskalować.

82. Wybierz narzędzie Scale z palety narzędziowej lub użyj skrótu klawia­tu­ro­we­go Q. Możesz również użyć polecenia menu ModifyTransformScale. W zazna­czo­nym obiekcie zostaną wyświetlone uchwyty skalowania i punkt środkowy.

83. Umieść kursor nad jednym z uchwytów skalowania. Powinien on zostać za­mie­niony na podwójną strzałkę.

84. Kliknij i przeciągnij uchwyt skalowania w kierunku obiektu, aby go zmniej­szyć, lub w kierunku od obiektu, aby powiększyć. Aby skalować obiekt z utrzy­ma­niem jego proporcji, kliknij i przeciągnij uchwyt skalowania, który znajduje się w jednym z wierzchołków obiektu.

85. Aby anulować skalowanie i przywrócić oryginalne rozmiary obiektu, wciśnij kla­wisz Esc.

86. Aby zatwierdzić nowe wymiary obiektu, kliknij dwukrotnie w dowolnym miej­scu dokumentu. Możesz także użyć przycisku Transform, który znajdujące się w palecie Options, jeśli jest widoczna na ekranie.

Za pomocą dowolnego narzędzia transformacji możesz również przesuwać i obracać obiek­ty. Przesuń wskaźnik nad zaznaczony obiekt i, gdy kursor zostanie zamieniony na po­czwórną strzałkę, kliknij i przeciągnij, by przesunąć obiekt w nowe położenie. Gdy wskaź­nik znajdzie się na zewnątrz ramki otaczającej zaznaczony obiekt, kursor zostanie zamie­niony na symbol obrotu. Kliknij i przeciągnij, aby obrócić obiekt względem jego punk­tu środkowego.

Dla każdego z narzędzi transformacji w palecie Options dostępne są dwie opcje. Przy zmia­nie rozmiarów obiektu, skalowany jest również domyślnie jego obrys, wypełnienie i efekty. Jeżeli wyłączysz opcję Scale Attributes (Skaluj atrybuty), atrybuty skalo­wa­ne­go obiektu pozostaną niezmienione. Mimo że rezultaty takiego skalowania są trudne do przewidzenia, niekiedy daje ono interesujące efekty (rysunek 9.2).

Rysunek 9.2. W większości przypadków będziesz chciał, aby obrys, wypełnienie i efekty były skalowane wraz z obiektem, ale niekiedy wyłączenie opcji Scale Attributes pozwala uzyskać interesujące rezultaty

Original — Oryginał

2 pixel Stroke — Obrys 2-pikselowy

Scale Attributes checked — Atrybuty skalowane wraz z obiektem

5 pixel Stroke — Obrys 5-pikselowy

2 pixel Stroke — Obrys 2-pikselowy

Scale Attributes unchecked — Wyłączone skalowanie atrybutów

W czasie moich eksperymentów z opcją Scale Attributes, najbardziej in­te­resujący efekt uzyskiwałem, gdy obiekt posiadał wypełnienie gra­dien­towe, a opcja Scale Attributes była wyłączona.

Inna opcja narzędzi transformacji znajdująca się w palecie Options to Auto-crop (Auto­ma­tyczne kadrowanie). Po włączeniu tej opcji, Fireworks przed przeskalowaniem obiektu automatycznie usuwa wszys­tkie przezroczyste piksele znajdujące się wokół niego.

Przekrzywianie

Narzędzie Skew XE "Skew" służy do przesuwania jednego boku obiektu z jednoczesnym utrzy­ma­niem niezmiennego położenia jego przeciwnego boku. Kliknij i przytrzymaj przycisk Scale w palecie narzędziowej i z rozwijanej grupy wybierz narzędzie Skew lub wciśnij dwu­krotnie skrót klawiaturowy Q. Po wybraniu narzędzia Skew, wokół zaznaczonego obiek­tu zostaną wyświetlone uchwyty transformacji (takie same jak przy narzędziu Sca­le). Uchwyty narzędzia Skew działają jednak trochę inaczej:

• Przeciągnij jeden z uchwytów znajdujących się w środku boku obiektu, aby po­chy­lić ten bok.

• Przeciągnij jeden z uchwytów narożnych, aby przechylić bok przylegający do niego i przeciwległy bok w przeciwnym kierunku.

Przechylanie narożników jest techniką pozwalającą nadać obiektom dynamiczny wy­gląd (rysunek 9.3).

Rysunek 9.3. Przeciągając środkowy uchwyt, możesz pochylić jeden bok obiektu

Zatwierdzanie przechylania odbywa się tak samo, jak zatwierdzanie skalowania. Wciś­nij klawisz Esc, aby anulować operację lub kliknij dwukrotnie w dowolnym miejscu do­ku­mentu, aby zatwierdzić zmianę kształtu.

Zniekształcanie

Przesuwanie jednego z uchwytów transformacji za pomocą narzędzi Scale i Skew po­wo­duje zmianę położenia całych boków obiektu. Narzędzie Distort XE "Distort" (Zniekształcanie) (trze­cie narzędzie w rozwijanej grupie narzędzi transformacji) nie ma takich ograniczeń. Za jego pomocą możesz dostosować ramkę ograniczającą zaznaczony obiekt poprzez prze­ciąganie uchwytów transformacji w dowolnym kierunku. Obiekt jest tak mody­fi­ko­wa­ny, aby pasował do kształtu swojej ramki ograniczającej (rysunek 9.4).

Narzędzie Distort jest przydatne do deformowania płaskich obiektów (zwłaszcza bitmap), aby nadać im interesujące kształty lub dostosować obiekt do kształtu innego obiektu.

Rysunek 9.4. Za pomocą narzędzia Distort możesz zmienić kształt obrazka lub obiektu poprzez modyfikacje jego ramki ograniczającej
		Narzędzie Distort możesz wykorzystać do odbijania pionowego lub po­zio­mego obiektów bitmapowych. Przeciągnij w tym celu jeden ze środkowych uch­wy­tów na przeciwną stronę obiektu. Technika ta nie zachowuje auto­ma­tycz­nie oryginalnych rozmiarów obiektu bitmapowego, jak narzędzia Flip Horizontal i Flip Vertical, ale możesz ręcznie sterować skalowaniem.

Obracanie

Obrót można wykonywać za pomocą każdego z narzędzi transformacji: Scale (Ska­lo­wa­nie), Skew (Przechylanie) lub Distort (Zniekształcanie). Po przesunięciu wskaźnika na zewnątrz ramki ograniczającej, kursor zamieniany jest na symbol obrotu. Jak widać na rysunku 9.5, obiekty mogą być obracane wokół punktu środkowego nawet o 360º.

Rysunek 9.5. Przeciąganie obiektu za pomocą kursora obrotu powoduje jego obracanie wokół punktu środkowego

Rotate cursor — Kursor obrotu

Centerpoint — Punkt środkowy

Aby obrócić dowolny obiekt:

100. Wybierz jedno z narzędzi transformacji z palety narzędziowej lub za pomocą po­leceń znajdujących się w menu ModifyTransform.

101. Przesuń kursor na zewnątrz ramki ograniczającej. Wskaźnik zostanie za­mie­nio­ny na kursor obrotu.

102. Kliknij i przeciągnij w dowolnym kierunku, aby obrócić obiekt.

103. Wciśnij klawisz Esc, jeśli chcesz anulować obracanie i przywrócić oryginalne po­łożenie obiektu.

104. Aby zatwierdzić obrót, kliknij dwukrotnie w dowolnym miejscu dokumentu lub kliknij przycisk Transform, znajdujący się w palecie Options.

Zgodnie z ustawieniem domyślnym, punkt środkowy obrotu jest umieszczany w samym środku obiektu. Aby zmie­nić położenie osi obrotu, kliknij i przeciągnij punkt środkowy w nowe położenie (punkt środkowy może znajdować się wewnątrz ramki ograniczającej lub poza nią). Je­że­li punkt środkowy zostanie umieszczony na zewnątrz obiektu, promień obrotu pow­sta­nie z połączenia punktu środkowego z najbliższym narożnym uchwytem trans­for­macji (ry­sunek 9.6).

Rysunek 9.6. Obiekty możesz obracać względem różnych osi. Wystarczy w tym celu zmienić położenie punktu środkowego, który może znajdować się nawet na zewnątrz ramki ograniczającej obiekt

Centerpoint — Punkt środkowy

Rotation radius — Promień obrotu

Wciśnięcie klawisza Shift podczas obracania obiektu pozwala ogra­ni­czyć kąt obrotu do wielokrotności 15º.

Numeryczne transformacje obiektów

Interaktywne transformacje obiektów poprzez klikanie i przeciąganie myszą sprawdza się w wielu sytuacjach, ale czasami trzeba bardzo precyzyjnie zmienić rozmiary i obrót obiek­tu. Przyda Ci się wówczas funkcja Numeric Transform XE "Numeric Transform" (Transformacje numery­cz­ne). Za jej pomocą możesz zmieniać rozmiary obiektów o wartości procentowe, definiować do­kład­nie ich wymiary w pikselach lub obracać o określone kąty.

Aby użyć polecenia Numeric Transform:

105. Zaznacz obiekt, który chcesz zmodyfikować.

106. Wybierz z menu polecenie ModifyTransformNumeric Transform lub użyj skrótu klawiaturowego Ctrl+Shift+T (Command+Shift+T). Zostanie otwarte ok­no dialogowe Numeric Transform (rysunek 9.7).

Rysunek 9.7. Okno dialogowe Numeric Transform pozwala precyzyjnie sterować skalowaniem lub obracaniem obiektu

87. Zaznacz opcję Scale Attributes, aby transformacja została zastosowana również do atrybutów obiektu.

88. Zaznacz opcję Constrain Proportions, aby zachować proporcje obiektu.

89. Aby proporcjonalnie skalować obiekt:

• Wybierz pozycję Scale z rozwijanej listy opcji.

• Wpisz nową procentową wartość w polu tekstowym wysokości lub szero­kości obiektu.

	Jeżeli pola wysokości i szerokości obiektu są zablokowane, możesz je od­blokować poprzez usunięcie zaznaczenia opcji Constrain Pro­por­tions.

90. Aby ustalić nowy rozmiar obiektu za pomocą wartości podawanych w pikselach:

• Wybierz pozycję Resize z rozwijanej listy opcji.

• Wpisz nową wartość (w pikselach) w polu tekstowym wysokości lub sze­ro­kości obiektu.

91. Aby obrócić obiekt o określoną liczbę stopni:

• Wybierz pozycję Rotate z rozwijanej listy opcji.

• Wpisz liczbę stopni w polu tekstowym lub przeciągnij gałkę, aby wybrać kąt obrotu.

92. Kliknij przycisk OK.

Technika Fireworks: tworzenie perspektywy

W prawdzie Fireworks nie jest programem do tworzenia grafiki trójwymiarowej, mo­żesz jednak za pomocą narzędzi transformacji i innych szybko utworzyć per­spek­ty­wę. Jeśli kiedykolwiek brałeś lekcje rysunku, znasz już na pewno podstawowe zasady two­rze­nia perspektywy XE "perspektywa" . Powstaje ona, gdy określony zostanie punkt zbiegu, będący miej­scem spotkania się na horyzoncie wyimaginowanych linii. Wrażenie ich zbiegania się można uzyskać dzięki wykorzystaniu specjalnej właściwości narzędzia Skew.

Aby nadać obiektowi wrażenie perspektywy:

107. Zaznacz obiekt, który chcesz zmodyfikować.

108. Wybierz narzędzie Skew z palety narzędziowej lub wciśnij dwukrotnie skrót kla­wiaturowy Q.

109. Zdefiniuj kierunek perspektywy:

• Aby obiekt wyglądał jak lewa ściana, przeciągnij pionowo lewy górny lub lewy dol­­ny uchwyt narożny w kierunku od obiektu.

• Aby obiekt wyglądał jak prawa ściana, przeciągnij pionowo prawy górny lub prawy dol­ny uchwyt narożny w kierunku od obiektu.

• Aby obiekt wyglądał jak podłoga, przeciągnij poziomo dolny lewy lub dolny pra­wy uch­wyt narożny w kierunku od obiektu.

• Aby obiekt wyglądał jak sufit, przeciągnij poziomo górny lewy lub górny prawy uch­­wyt narożny w kierunku od obiektu.

93. Aby bardziej pogłębić perspektywę, powtórz punkt trzeci z przeciwległym na­roż­nikiem, przeciągając go w przeciwnym kierunku. Aby pogłębić per­spek­ty­wę pokazaną na rysunku 9.8, przeciągnąłem dolny prawy uchwyt narożny w kie­runku od obiektu i dolny lewy uchwyt narożny w kierunku obiektu.

Rysunek 9.8. Za pomocą narzędzia Skew możesz nadać płaskim obiektom wrażenie perspektywy

Aby utworzyć tło perspektywy, dobrze jest na początek do wypełnienia prostokąta za­sto­sować teksturę. Przekonałem się, że zamiast używać jednego dużego prostokąta, le­piej jest podzielić teksturę na wiele małych prostokątów. Do stworzenia pokoju przed­sta­wio­nego na rysunku 9.9 wykorzystałem grupę małych prostokątów wypełnionych de­se­niem Wood-Light, które następnie zgrupowałem i przekrzywiłem, aby osiągnąć wra­że­nie per­spek­tywy. Duplikując i odbijając przekrzywioną grupę prostokątów, szybko mo­głem zbu­dować pozostałe ściany pokoju.

		Wypełnienia teksturami zostały szczegółowo opisane w rozdziale 11.
Rysunek 9.9. Wykorzystując deseń do stworzenia perspektywy, wypełnij deseniem serię mniejszych prostokątów, zgrupuj je i dopiero wówczas przekrzyw
		Przeciąganie uchwytu narożnego za pomocą narzędzia Skew zawsze po­woduje równomierne przesuwanie dwóch boków obiektu. Sprawia to, że punkt zbiegu zawsze znajduje się w jednakowej odległości od obu boków obiektu. Aby zmienić położenie tylko jednego boku obiek­tu, możesz użyć narzędzia Distort. Używaj go jednak bardzo ostrożnie al­bo nawet wyświetl siatkę dokumentu, ponieważ podczas prze­cią­ga­nia narzędziem Distort narożne uchwyty transformacji nie są przy­cią­gane i trudno jest zachować prostoliniowość boków obiektu.

Zarządzanie węzłami i ścieżkami

Nie zawsze będziesz potrzebował całkowitego przekształcenia obiektu. Fireworks oferuje wie­le funkcji pozwalających dostosowywać ścieżki wektorowe poprzez modyfikacje tworzących je punk­tów. Punkty możesz przesuwać, dodawać lub usuwać. Ścieżki mogą być również prze­kształcane z otwartych na zamknięte lub łączone z innymi ścieżkami. Połączone ścież­ki można oczywiście w każdej chwili rozdzielić.

Przesuwanie punktów
za pomocą narzędzia Subselection

Wiele operacji związanych z modyfikacjami punktów ścieżek można wykonywać za po­mocą narzędzia Subselection XE "Subselection" (Zaznaczanie bezpośrednie). Podczas gdy narzędzie Poi­nter (Wskaźnik) jest używane do zaznaczania i przesuwania całych ścieżek, na­rzę­dzie Subselection służy do pracy z pojedynczymi elementami ścieżek.

Narzędzie Subselection znajduje się po prawej stronie wskaźnika (Poi­nter) w palecie na­rzę­dzio­wej. Można je uaktywnić również za pomocą skrótu klawiaturowego A. Gdy zaznaczysz ścież­kę za pomocą narzędzia Subselection, zostaną wyświetlone wszystkie tworzące ją punk­ty, a nie tylko ścieżka, jak w przypadku narzędzia Pointer. Każdy punkt ścieżki jest po­czątkowo wyświetlany jako mały, wypełniony kwadrat. Gdy umieścisz narzędzie Sub­­selection nad takim punktem, kursor zostanie zamieniony na biały grot strzałki wska­zujący, że możesz go zaznaczyć (rysunek 9.10). Kliknięcie punktu spowoduje jego zaznaczenie i zamianę wypełnionego kwadratu na pusty kwadrat.

Rysunek 9.10. Za pomocą narzędzia Subselection możesz modyfikować pojedyncze punkty ścieżki
		Jeżeli punkt ścieżki nie posiada uchwytów kontrolnych Béziera, po wciś­­nięciu klawisza Alt możesz za pomocą narzędzia Subselection je utworzyć.

Kliknięcie i przeciągnięcie dowolnego punktu spowoduje zmianę kształtu ścieżki. Za po­mocą narzędzia Subselection możesz kompletnie zmodyfikować kształt całej ścieżki.

Dodawanie i usuwanie punktów

Punkty tworzące ścieżkę można bardzo łatwo dodawać i usuwać. Dlaczego miałbyś zwięk­szać liczbę punktów? Zdarza się bardzo często, że obiekt, z jakim pracujesz po­sia­da linię, którą musisz rozszerzyć w jednym z kierunków, a krzywa Béziera tworzy zbyt ła­god­ne przejścia. Możliwość usuwania punktów jest pomocna w sytuacji przeciwnej
- na ścieżce pojawia się ostre załamanie, które chciałbyś zastąpić miękkim przejściem.

Prze­konasz się także, że ścieżki rysowane za pomocą narzędzia Brush lub Pencil zbu­do­wa­ne są czasem z bardzo wielu punktów. Ich usuwanie nie wpływa na rozmiary fizyczne pli­ku, ale obiekty posiadające minimalną ilość punktów są łatwiejsze do modyfikacji.

Aby dodać punkt do ścieżki:

110. Wybierz narzędzie Pen (Pióro) z palety narzędziowej lub użyj skrótu kla­wia­tu­ro­wego P.

111. Wciśnij i przytrzymaj klawisz Ctrl (Command), aby tymczasowo uaktywnić na­rzę­dzie Subselection.

112. Zaznacz ścieżkę, z którą chcesz pracować.

113. Zwolnij klawisz Ctrl (Command).

114. Umieść wskaźnik nad obszarem ścieżki, w którym zamierzasz dodać punkt. W „iko­nie” kursora narzędzia Pen zostanie wyświetlony mały znak plusa „+” (ry­su­nek 9.11).

Rysunek 9.11. Kliknij narzędziem Pen wybraną linię, aby dodać punkt do ścieżki

94. Kliknij, aby dodać punkt.

95. Kliknij i przeciągnij, aby dodać punkt z uchwytami kontrolnymi Béziera.

96. Jeśli chcesz dodać więcej punktów, powtórz kolejno polecenia od 5 do 7.

97. Po zakończeniu dodawania punktów wybierz inne narzędzie.

Aby usunąć punkty ze ścieżki:

115. Wybierz narzędzie Subselection z palety narzędziowej.

116. Zaznacz ścieżkę, z której chcesz usuwać punkty.

117. Umieść wskaźnik nad punktem, który chcesz usunąć. Po umieszczeniu kursora nad punktem, w jego ikonie zostanie wyświetlony mały znak „x”.

118. Kliknij, aby zaznaczyć punkt.

119. Wciśnij klawisz Backspace (Delete), aby usunąć punkt.

	Aby usunąć jednocześnie wiele punktów, wciśnij klawisz Ctrl (Com­mand), aby tymczasowo uaktywnić narzędzie Pointer i przeciągnij nim, żeby otoczyć wybrane punkty ramką selekcji. Możesz również wcisnąć klawisz Shift i kolejno klikać poszczególne punkty. Wciśnij klawisz Back­space (Delete), aby usunąć wszystkie zaznaczone punkty.

Zamykanie otwartych ścieżek XE "zamykanie otwartych ścieżek"

Czasami przez przypadek, a czasami celowo ścieżkę otwartą musisz przekształcić na ścież­kę zamkniętą. Konwersję taką można łatwo przeprowadzić za pomocą narzędzia Pen (Pióro).

	Jeśli ścieżka jest prawie zamknięta (jej punkty końcowe znajdują się bar­dzo blisko siebie), możesz zaznaczyć oba punkty końcowe narzę­dziem Subselection i zamknąć ścieżkę za pomocą polecenia Modi­fyJoin lub jego skrótu klawiaturowego Ctrl+J (Command+J).

Aby zamknąć otwartą ścieżkę:

120. Zaznacz ścieżkę, którą chcesz zamknąć.

121. Wybierz narzędzie Pen z palety narzędziowej.

122. Umieść kursor nad jednym z punktów końcowych ścieżki. W prawym dolnym ro­gu „ikony” kursora zostanie wyświetlony mały znak „X”.

123. Kliknij punkt końcowy. Znajdujący się w „ikonie” kursora znak „x” zostanie za­­mieniony na mały kwadrat (rysunek 9.12).

Rysunek 9.12. Za pomocą narzędzia Pen możesz zamknąć dowolną ścieżkę otwartą

98. Kontynuuj tworzenie ścieżki za pomocą narzędzia Pen. Po naniesieniu każ­de­go dodatkowego punktu, do ścieżki ponownie zastosowywane są ustawienia obry­su i efektów (jeśli są przypisane obiektowi).

99. Aby zamknąć ścieżkę, umieść kursor narzędzia Pen nad drugim punktem koń­co­wym. W dolnym prawym rogu „ikony” kursora zostanie wyświetlony mały, wy­pełniony kwadrat.

100. Kliknij, aby zamknąć ścieżkę.

Jeśli Twój obrys miał różne wartości grubości lub krycia tworzone w od­powiedzi na nacisk lub prędkość rysowania, odcinek zamykający ścież­kę, utworzony za pomocą narzędzia Pen, może się odróżniać od po­zostałych fragmentów ścieżki. Dzieje się tak dlatego, że narzędzie Pen nie reaguje na nacisk i prędkość rysowania. Możesz jednak póź­niej zmodyfikować ścieżkę za pomocą jednego z narzędzi Path Scrub­ber (Zmiana nacisku ścieżki). Narzędzia te zostaną opisane w jednym z następnych podrozdziałów.

Praca ze złożonymi ścieżkami

Każda ścieżka może zostać połączona z inną ścieżką za pomocą prostego polecenia. Po­cząt­kowo możesz zaliczyć tę funkcję do kategorii „No i co z tego?”. Szybko jednak zmie­nisz zdanie, gdy dowiesz się, że - aby można było połączyć ścieżki - nie muszą one nakładać się na siebie ani nawet znajdować się w bezpośrednim sąsiedztwie. łą­cze­nie ze sobą wielu prostych kształtów jest łatwym sposobem tworzenia bardzo skom­pli­ko­wanych obiektów. Przykładowo - połączenie pustych okręgów z obiektem umożliwia wy­cięcie w nim „dziur” (rysunek 9.13). Zauważ, że połączony obiekt posiada atrybuty (ob­rys, wypełnienie, efekty itd.) obiektu, który przed połączeniem znajdował się na sa­mym spodzie stosu obiektów (innymi słowy, najbliżej obszaru roboczego).

Rysunek 9.13. łączenie ścieżek jest prostym sposobem tworzenia złożonych obiektów

Aby połączyć ze sobą dwie lub więcej ścieżek:

124. Za pomocą narzędzia Pointer zaznacz wszystkie ścieżki, które chcesz połączyć.

125. Wybierz z menu polecenie ModifyJoin lub użyj skrótu klawiaturowego Ctrl+J (Command+J).

W Fireworks dla Windows można również użyć przycisku Join znajdującego się na pasku narzędzi Modify.

Po połączeniu ścieżek, w każdej chwili będziesz mógł je rozdzielić. Aby rozdzielić po­łą­czone ścieżki, wybierz z menu polecenie ModifySplit lub użyj skrótu klawia­tu­ro­we­go Ctrl+Shift+J (Command+Shift+J). W Windows można również użyć przycisku Split znajdującego się w pasku narzędzi Modify.

Edycja XE "ścieżki:edycja" ścieżek

Większość narzędzi do edycji ścieżek opisywanych dotychczas w tym rozdziale miało dość radykalne działanie. Usuwanie, zniekształcanie, skalowanie, obracanie - po takich sło­wach nie można spodziewać się subtelnych modyfikacji. Fireworks oferuje jednak kil­ka innych narzędzi, które umożliwiają modyfikowanie wybranych fragmentów ście­żek lub zmianę kształtów pewnych jej obszarów. W sytuacjach, gdy wymagasz prawie chi­rurgicznej precyzji przy usuwaniu segmentów ścieżek, pomocne będzie narzędzie Knife (Nóż), działające prawie tak samo jak prawdziwy nóż.

Modyfikowanie ścieżek

Jeżeli kiedykolwiek utworzyłeś ścieżkę, której tylko niewiele brakowało do doskonałości, na pew­no docenisz możliwości, jakie daje narzędzie Redraw Path (Modyfikacja ścieżki). Jak wskazuje jego nazwa, narzędzie to pozwala zmodyfikować dowolny fragment go­to­wej ścieżki.

Narzędzie Redraw Path, znajdujące się w rozwijanej grupie narzędzi Brush, umożliwia od­ręczne rysowanie. Aby zmodyfikować dowolny segment ścieżki, kliknij w jej do­wol­nym miejscu, przeciągnij i zwolnij przycisk myszy, gdy kursor znajdzie się nad orygi­nal­ną ścieżką. Fireworks usunie jej fragment znajdujący się pomiędzy początkowym i końcowym punktem Twoich modyfikacji i połączy nową ścieżkę z oryginalną.

Aby zmodyfikować fragment ścieżki:

126. Zaznacz ścieżkę, którą chcesz zmodyfikować.

127. Wybierz narzędzie Redraw Path z rozwijanej grupy narzędzia Brush. Możesz rów­nież wcisnąć dwukrotnie skrót klawiaturowy B.

128. Umieść kursor nad obszarem ścieżki, od którego chcesz rozpocząć jej mody­fi­ko­wanie. Fireworks w dolnym prawym rogu „ikony” kursora wyświetli mały znak „^”.

129. Kliknij i przeciągnij, aby narysować nową ścieżkę.

130. Umieść wskaźnik w tym miejscu oryginalnej ścieżki, w którym ma zostać po­łą­czona z nową ścieżką i zwolnij przycisk myszy. Fireworks usunie stary frag­ment oryginalnej ścieżki i połączy ją z nowo narysowanym segmentem.

Narzędzie Redraw Path może być używane nie tylko do poprawiania ścieżek. Na ry­sun­ku 9.14 zobaczysz, że można go użyć również do nadania wybranym fragmentom geo­metrycznych kształtów bardziej „organicznego” wyglądu.

Rysunek 9.14. Narzędzie Redraw Path pozwala łatwo zmienić standardowe kształty na bardziej oryginalne
		Wciśnięcie klawisza Shift podczas korzystania z narzędzia Redraw Path pozwala ograniczyć rysowanie do linii prostych o nachyleniu co 45°.

Narzędzia Freeform (Dowolne kształty)
i Reshape Area (Zmiana kształtu)

Szukasz narzędzia, które pozwoli nadać obiektom „zakręcone” kształty? Wypróbuj Free­form XE "Free­form" i Reshape Area XE "Reshape Area" . Zamiast dodawać lub usuwać punkty, narzędzia te umo­żli­wia­ją rzeźbienie ścieżek poprzez wyciąganie i wpychanie ich segmentów, jakby były wy­konane z gliny.

Oba narzędzia działają w podobny sposób, ale jest pomiędzy nimi kilka istotnych różnic:

• Freeform - pozwala zarówno wpychać, jak i wyciągać segmenty ścieżek.

• Reshape Area - umożliwia tylko wpychanie segmentów ścieżek, ale można kon­trolować jego „siłę” za pomocą pola tekstowego Strength znajdującego się w palecie Tool Options. Co więcej - narzędzie to umożliwia modyfikowanie za­rów­no fragmentów ścieżek, jak i całych obiektów.

Wpychanie ścieżek

Aby wepchnąć fragment ścieżki za pomocą narzędzia Freeform:

131. Zaznacz ścieżkę, którą chcesz zmodyfikować.

132. Wybierz narzędzie Freeform z palety narzędziowej lub użyj skrótu klawia­tu­ro­wego F.

101. Umieść kursor w pobliżu ścieżki, którą chcesz wepchnąć. Można go umieścić po dowolnej stronie ścieżki otwartej albo po zewnętrznej lub wewnętrznej stro­nie ścieżki zamkniętej.

	Umieszczenie kursora w pobliżu ścieżki spowoduje jego przekształ­ce­nia na narzędzia Freeform pracującego w trybie wpychania. Umiesz­cze­nie kur­sora dokładnie nad ścieżką spowoduje wyświetlenie narzę­dzia Free­form pracującego w trybie wyciągania, co zostanie opisane w jednym z kolejnych podrozdziałów.

Kursor zostanie zamieniony na okrąg (rysunek 9.15). Okrąg ten działa jako obiekt używany do wpychania obrysu.

Rysunek 9.15. Zaokrąglij swoje ścieżki za pomocą narzędzia Freeform pracującego w trybie wpychania

102. Kliknij i przeciągnij okrągłym kursorem do wewnątrz ścieżki, aby zmienić jej kształt.

	Zbyt szybkie lub zbyt głębokie wepchnięcie ścieżki zamkniętej może spo­wodować nałożenie się jej segmentów i wygenerować niepożą­da­ne efekty.

103. Zwolnij przycisk myszy, gdy osiągniesz pożądany kształt ścieżki.

Wyciąganie ścieżek

Aby wyciągnąć segment ścieżki:

133. Zaznacz ścieżkę, którą chcesz zmodyfikować.

134. Wybierz narzędzie Freeform z palety narzędziowej lub użyj skrótu kla­wia­tu­ro­wego F.

104. Umieść kursor dokładnie nad segmentem ścieżki, który chcesz wyciągnąć. W dol­nym prawym rogu „ikony” kursora Freeform zostanie wyświetlona krzy­wa linia w kształcie litery „s” (rysunek 9.16).

Rysunek 9.16. Narzędzie Freeform może być używane do wyciągania segmentów ścieżek

105. Kliknij i przeciągnij w kierunku, w którym chcesz wyciągnąć segment ścieżki. Możesz przeciągać do środka lub na zewnątrz obiektu.

106. Zwolnij przycisk myszy, aby zakończyć wyciąganie ścieżki.

Podczas wyciągania ścieżek narzędziem Freeform, Fireworks dodaje do obiektów jak naj­mniejszą liczbę pikseli. Wyciąganie można traktować jako „podkradanie” jednego z punk­tów ścieżki i odsuwanie go od całego obiektu. Natomiast w trybie wpychania, na­rzę­dzie Freeform zachowuje się jak piłka zmieniająca kształt ścieżki. Rozmiar tej pił­ki możesz definiować w palecie Tool Options.

Paleta Tool Options XE "paleta:Tool Options" narzędzia Freeform

Aby zmienić rozmiar kursora narzędzia Freeform pracującego w trybie wpychania, klik­nij dwukrotnie narzędzie Freeform w palecie narzędziowej, aby wyświetlić paletę Tool Op­tions (rysunek 9.17) i wpisz nowy rozmiar w polu tekstowym Size lub ustaw go za po­mocą suwaka. Rozmiar kursora mierzony jest w pikselach i zmienia się w zakresie od 1 do 500.

Rysunek 9.17. W palecie Tool Options możesz ustawiać opcje narzędzia Freeform, na przykład rozmiar kursora

W palecie Options znajdują się jeszcze dwie inne opcje narzędzia Freeform. Po za­zna­cze­niu opcji Preview (Podgląd), w czasie pracy z narzędziem Freeform wyświetlane będą zmiany ob­rysu i wypełnienia obiektu. Opcja ta może spowodować dodatkowe obciążenie pro­ce­so­ra, ale zawsze ją włączam, gdy modyfikuję za pomocą narzędzia Freeform obiekty z sze­rokimi obrysami, na przykład Air Brush, ponieważ widzę wówczas dokładnie, jaki bę­­dzie końcowy efekt moich zmian. Po wyłączeniu opcji Preview, na ekranie wy­świe­tla­na będzie zarówno stara, jak i nowa ścieżka. Gdy skończysz rysowanie, stara ścieżka zniknie.

Inna opcja - Pressure (Nacisk) staje się przydatna przy korzystaniu z czułego na nacisk ta­bletu graficznego. Po jej włączeniu, minimalne różnice w nacisku na tablet powodują zmia­ny rozmiaru narzędzia określonego w palecie Tool Options. Im mniejszy nacisk, tym mniejszy roz­miar narzędzia i odwrotnie.

Modyfikacja obiektu wektorowego za pomocą jednej operacji

Mimo że narzędzie Reshape Area o małym rozmiarze pozwala osiągnąć rezultaty po­dob­ne do tych, jakie daje narzędzie Freeform, to jeszcze nie jest to cecha, która czyni to narzę­dzie szczególnym. Narzędzie Reshape Area najlepiej sprawdza się przy deformo­wa­niu lub zmianie kształtów całych obiektów. Weźmy na przykład rysunek 9.18. Naj­pierw utworzyłem w nim gwiazdę za pomocą narzędzia Polygon, a następnie użyłem na­rzędzia Reshape Area o rozmiarze większym niż wymiary gwiazdy. Przeciągając na­rzę­dzie Reshape Area nad gwiazdą, przekształciłem cały standardowy kształt, a nie tylko jeden z jego seg­mentów, i uzyskałem ciekawe rezultaty.

Rysunek 9.18. Za pomocą narzędzia Reshape Area, w jednej operacji można zmodyfikować kształt całego obiektu wektorowego

Aby użyć narzędzia Reshape Area:

135. Zaznacz ścieżkę, którą chcesz zmodyfikować.

136. Wybierz narzędzie Reshape Area z rozwijanej grupy narzędzia Freeform lub wciś­nij dwukrotnie skrót klawiaturowy F.

Po każdym wciśnięciu litery F, narzędzia będą przełączane pomiędzy Reshape Area a Freeform.

107. Umieść wskaźnik nad obiektem, który chcesz zmodyfikować.

108. Kliknij i przeciągnij w wybranym kierunku.

109. Zwolnij przycisk myszy, gdy osiągniesz pożądany kształt obiektu.

Podobnie jak w przypadku narzędzia Freeform, rozmiar Reshape Area można zmieniać w palecie Tool Options. Znajdziesz tam również opcje Preview i Pressure, które działają w ten sam sposób, co dla narzędzia Freeform. Dodatkowo narzędzie Reshape Area po­sia­da opcję Strength. Determinuje ona siłę jego działania. Wartości opcji Strength po­da­wa­ne są w procentach; przy 100-procentowej sile obiekty są modyfikowane w sposób maksy­mal­ny. Jeżeli korzystasz z czułego na nacisk tabletu graficznego, za­rów­no rozmiar narzędzia Reshape Area, jak i jego siła mogą być zmieniane podczas ry­so­wania piórkiem.

	Nie posiadasz jeszcze tabletu graficznego? Możesz symulować jego dzia­łanie. Wciśnięcie klawisza 1 lub strzałki w lewo symuluje zmniej­sze­nie nacisku, zaś wciśnięcie klawisza 2 lub strzałki w prawo - zwięk­szenie nacisku na tablet graficzny.

Narzędzia Path Scrubber (Zmiana nacisku ścieżki)

Narzędzia Path Scrubber XE "Path Scrubber" działają podobnie do pozostałych narzędzi opisywanych w tym rozdziale. Jeśli eksperymentowałeś z obrysami, takimi jak Air Bursh zauważyłeś za­pewne, że zmieniają się one w zależności od prędkości rysowania lub nacisku piórka na tablet graficzny. Narzędzia Path Scrubber pozwalają na modyfikacje tych atrybutów w ścieżce ukończonej. Jedno z narzędzi Path Scrubber wzmacnia efekt, zaś drugie go osła­bia (rysunek 9.19).

Rysunek 9.19. Narzędzia Path Scrubber pozwalają zamienić zwykłą ścieżkę na taką, jakie są tworzone za pomocą czułych na nacisk tabletów graficznych

Aby użyć narzędzi Path Scrubber:

137. Zastosuj do ścieżki jeden z obrysów reagujących na nacisk lub prędkość ry­so­wa­nia, na przykład Air Brush.

138. Jeżeli chcesz zwiększyć efekt nacisku, wybierz narzędzie Path Scrubber Plus, je­śli chcesz go zmniejszyć, wybierz narzędzie Path Scrubber Minus. Oba na­rzę­dzia znajdują się w rozwijanej grupie narzędzia Freeform. Możesz je rów­nież uaktywnić wciskając dwukrotnie skrót klawiaturowy U.

139. Przeciągnij narzędziem wzdłuż tego fragmentu ścieżki, w którym chcesz zmie­nić efekt nacisku lub szybkości przesuwania piórka tabletu.

Paleta Options

Gdy Fireworks rysuje ścieżki, gromadzi dane o używanej podczas ich tworzenia pręd­koś­ci i nacisku. Narzędzia Path Scrubber mogą korzystać z informacji o prędkości lub naci­sku albo też z informacji o obu parametrach jednocześnie. Co więcej - mogą róż­ni­co­wać swoje działanie. W palecie Options znajdziesz wszystkie potrzebne opcje narzę­dzi Path Scrubber:

• Rate (Współczynnik) - względna siła działania narzędzia. Opcja ta może przyj­mo­wać wartości z przedziału od 10 (maksymalne rezultaty) do 1 (mini­mal­ny efekt).

• Pressure (Nacisk) - po włączeniu tej opcji, narzędzia Path Scrubber pozwalają sy­mulować efekt obrysu czułego na nacisk rysowania.

• Speed (Prędkość) - po włączeniu tej opcji, narzędzia Path Scrubber pozwalają sy­mulować efekt obrysu czułego na prędkość rysowania.

Knife (Nóż)

Jednym z moich ulubionych (i najbardziej użytecznych) narzędzi jest nóż. Jego precyzja w odcinaniu ścieżek niejednokrotnie wybawiła mnie z opresji. Komputerowym odpo­wied­nikiem tradycyjnego noża jest narzędzie Knife XE "Knife" . Nóż może być używany jedynie ze ścież­kami wektorowymi, tak jak jego odpowiednik - Eraser - pracuje jedynie z obiektami bitmapowymi. Narzędzie Knife dzieli pojedynczą ścieżkę na dwie odrębne ścieżki.

Ścieżki są przecinane w miejscu, w którym narysujesz linię za pomocą narzędzia Knife. Noża można używać ze ścieżkami otwartymi lub zamkniętymi i z dowolnymi obiektami wek­torowymi. Aby przeciąć ścieżkę otwartą, wystarczy, że klikniesz ją w miejscu prze­cię­cia. By przeciąć ścieżkę zamkniętą, musisz narysować za pomocą narzędzia Knife linię dzielącą obiekt na dwie części (rysunek 9.20).

Aby użyć narzędzia Knife:

140. Zaznacz ścieżkę, którą chcesz rozdzielić.

110. Wybierz narzędzie Knife z palety narzędziowej lub użyj skrótu klawiaturowego E.

141. Narysuj za pomocą noża linię dzielącą ścieżkę. Fireworks podzieli ścieżkę na dwie części. Nie będzie tego na razie widać, ponieważ obie nowe ścieżki nadal są zaznaczone.

Rysunek 9.20. Po lewej stronie widać nóż, który przecina obiekt na dwie części, które mogą być następnie oddzielone od siebie, jak pokazano po prawej stronie ilustracji

142. Aby przesunąć jedną z nowo utworzonych ścieżek, wybierz narzędzie Pointer i klik­nij w dowolnym miejscu obszaru roboczego znajdującym się poza obiek­tem. Zaznaczenie podzielonych ścieżek zostanie usunięte.

143. Zaznacz dowolny fragment oryginalnej ścieżki. Zostanie zaznaczona tyl­ko jedna część ścieżki, którą można teraz usunąć, przesunąć lub zmodyfikować.

Narzędzie Knife doskonale sprawdza się w tworzeniu kształtów specjalnych, takich jak łuki. Wystarczy, że narysujesz okrąg i przetniesz go za pomocą noża. Jak w przypadku wie­lu innych narzędzi, wciśnięcie klawisza Shift spowoduje ograniczenie kąta na­chy­le­nia linii rysowanych narzędziem Knife do wielokrotności 45^º.

	Mimo że w palecie Tool Options wyświetlane są różne opcje narzędzia Era­ser, wszystkie one przydatne są jedynie w pracy z bitma­po­wym narzędziem Eraser. Zmiana dowolnej opcji nie powoduje żadnych zmian w pracy narzędzia Eraser w trybie wektorowym.

Operacje na ścieżkach

Im dłużej będziesz pracował w programach wektorowych, takich jak Fireworks, tym częś­ciej będziesz poszukiwał nowych i niestandardowych kształtów. Nieważne, ile punk­tów będzie posiadała Twoja gwiazda, wciąż będzie tylko gwiazdą. Kształt każdego ist­niejącego obiektu można modyfikować za pomocą dowolnych narzędzi opisywanych w tym rozdziale, ale często łatwiej jest utworzyć złożony obiekt poprzez połączenie dwóch lub więcej standardowych kształtów.

W menu ModifyCombine znajdziesz całą grupę poleceń służących do łączenia ście­żek: Union (Unia), Intersect (Przecięcie), Punch (Odjęcie spodu) i Crop (Ka­dro­wa­nie). Polecenia służące do modyfikowania obrysów: Simplify (Uprość), Expand Stroke (Roz­szerz obrys) i Inset Path (Rozszerz-Zawęź ścieżkę) znajdziesz w menu Modi­fyAl­ter Path.

Przy kombinowaniu wielu ścieżek, do nowo utworzonego obiektu zastosowywane są usta­wienia obrysu, wypełnienia i efektów, które miał obiekt znajdujący się na samym spo­dzie stosu obiektów.

Union (Unia)

Polecenie Union XE "Union" pozwala scalić dwa lub więcej obiektów w jeden obiekt połączony. Tech­niką, która pomaga mi zdecydować, czy Union jest właściwym dla mnie pole­ce­niem jest... zezowanie. Kiedy już rozmieszczę obiekty, które mają utworzyć nowy kształt, oddalam się trochę od monitora i robię takiego zeza, że widzę jedynie kontury no­wego kształtu. Tak właśnie działa polecenie Union - łączy kształty w jeden kontur i usu­wa wszystkie nakładające się na siebie obszary.

Stosowanie polecenia Union, podobnie jak wszystkich poleceń z menu Combine, jest bar­dzo proste. Najpierw rozmieść odpowiednio wszystkie obiekty, zaznacz je, a następ­nie wybierz z menu polecenie ModifyCombineUnion. Niekiedy polecenie to przydaje się również przy dostosowywaniu pojedynczych ścieżek. Przykładowo - kieliszek do mar­tini pokazany na rysunku 9.21 utworzyłem poprzez połączenie trzech obiektów: trój­kąta, prostokąta i kształtu stopki narysowanego narzędziem Pen.

Rysunek 9.21. Trzy obiekty znajdujące się po lewej stronie ilustracji zostały połączone ze sobą za pomocą polecenia Union i w ten sposób powstał nowy obiekt widoczny po prawej stronie

Po pierwszym po­łą­czeniu obiektów zobaczyłem, że prostokąt i stopka kieliszka nie pa­su­ją dokładnie do siebie, więc wybrałem polecenie EditUndo (no dobra, właściwie uży­łem skrótu kla­wia­turowego Ctrl+Z (Command+Z) i dopasowałem stopkę. Następ­nie za­znaczyłem obie­k­ty i ponownie użyłem polecenia Union. Kieliszek był gotów do nalewania.

Intersect (Przecięcie)

Podczas gdy polecenie Union odrzuca nakładające się na siebie obszary łączonych ścieżek, polecenie Intersect XE "Intersect" pozostawia wszystkie nakładające się obszary ze ścieżek zaznaczonych. Możesz wierzyć lub nie, ale klu­czowym wyrazem w poprzednim zdaniu jest słowo „wszystkie”. Jeżeli choć jeden obiekt nie zazębia się z jakąś częścią wszystkich innych zaznaczonych obiektów, wy­da­nie polecenie Intersect spowoduje ich usunięcie. Mimo tej niedogodności, polecenie In­ter­sect jest bardzo przydatne. Nie żartuję. Jak inaczej mógłbyś utworzyć kawałek pizzy pokazany na rysunku 9.22. Zaznaczyłem dwa obiektu znajdujące się po lewej stronie ilu­stracji, wybrałem z menu polecenie ModifyCombineIntersect i pizza gotowa!

Rysunek 9.22. Połączenie okręgu i trójkąta za pomocą polecenia Intersect pozwala utworzyć doskonały kawałek pizzy

Punch (Odjęcie spodu)

Pamiętasz dziurkacz, którego używałeś w szkole? Takie małe urządzenie, które wy­ci­na­ło okrągłe dziurki we wszystkim, co się znalazło pomiędzy jego „szczękami”? Podobnie dzia­ła polecenie Punch XE "Punch" z tym wyjątkiem, że wycinane „dziurki” mogą mieć tutaj do­wol­ne kształty. Gdy dwa obiekty wektorowe nakładają się na siebie, kształt znajdujący się u góry wycina dziurę w kształcie dolnym. Na rysunku 9.23 możesz zobaczyć re­zul­tat działania polecenia Punch, którego użyłem do wykonania obwarzanka. Najpierw upew­niłem się, że oba obiekty są wyśrodkowane względem siebie, zaznaczyłem je i wy­brałem z menu polecenie ModifyCombinePunch.

Rysunek 9.23. Polecenie Punch pozwala na wycięcie w dolnym obiekcie dziury o kształcie górnego obiektu
		Co się stanie, gdy polecenie Punch zostanie zastosowane do więcej niż dwóch zaznaczonych obiektów? Obiekt znajdujący się na samym wierz­chu stosu wytnie dziury we wszystkich pozostałych, które jednak nie zostaną połączone.

Crop (Kadrowanie)

Mówiąc po prostu, polecenie Crop XE "Crop" jest przeciwieństwem polecenia Punch. Po użyciu po­le­cenia Punch, górny obiekt wycina dziury we wszystkich obiektach znajdujących się pod spodem. W poleceniu Crop, dolny obiekt jest wykorzystywany jako ścieżka od­ci­na­nia wszystkich obiektów znajdujących się na wierzchu. Aby zilustrować działanie po­le­ceń z me­nu Combine, na rysunku 9.24 zostały odrzucone wszystkie kształty z wy­jąt­kiem ostatniego kawałka ciastka. Najpierw utworzyłem ścieżki definiujące kształt ciastka, połączyłem je w jeden obiekt, zaznaczyłem go razem z całym ciastkiem, a następnie wybrałem z me­nu polecenia ModifyCombineCrop. Usunięte zostało wszystko z wyjątkiem ciastka o zde­finiowanym wcześniej kształcie.

Simplify (Uprość)

Narzędzia do odręcznego rysowania doskonale sprawdzają się w szybkim szkicowaniu spe­cyficznych kształtów. Dość często jednak zdarza się, że komputerowe odwzoro­wa­nie Twoich mistrzowskich pociągnięć myszą lub piórkiem wygląda nieco kanciasto. Po­le­ce­nie Simplify XE "Simplify" pozwala na zredukowanie liczby punktów tworzących ścieżkę z jed­no­czes­­nym zachowaniem ogólnego kształtu obiektu.

Rysunek 9.24. Polecenie Crop pozwala uzyskać pożądany kształt przez wycięcie z oryginalnego obiektu dziury o kształcie obiektu znajdującego się na samym wierzchu stosu

Po wybraniu z menu polecenia ModifyAlter PathSimplify zostanie otwarte okno dia­lo­gowe Simplify, w którym możesz wpisać liczbę pikseli, na jaką ma działać polecenie. Za­kres dostępnych wartości mieści się w granicach od 1 do 100 pikseli. Do otrzymania efek­tu przedstawionego na rysunku 9.25 została użyta stosunkowo niska wartość - 12. Rę­cznie narysowany facet znajdujący się po lewej stronie posiada zbyt wiele punktów. Ich ręczne usuwanie może być żmudnym zajęciem. Po zastosowaniu polecenia Simplify uzy­skałem o wiele gładszy obiekt. Nie musi to być jednak ostatni krok pracy. Prze­waż­nie, aby poprawić wygląd grafiki, będziesz musiał dostosować położenie uchwytów kon­trolnych Béziera poszczególnych punktów.

Rysunek 9.25. Po zastosowaniu polecenia Simplify do oryginalnej, ręcznie narysowanej ścieżki, powstał prostszy i bardziej gładki wizerunek widoczny po prawej stronie ilustracji

Expand Stroke (Rozszerz obrys)

Mimo że za pomocą palety Stroke możesz utworzyć wiele obiektów składających się ze ścieżek ot­wartych, czasami potrzebne Ci będzie wypełnienie. Polecenie Expand Stro­ke XE "Expand Stro­ke" jest prostym sposobem konwertowania dowolnych ścieżek (otwartych lub zamkniętych) na ścieżki większe i zamknięte. Zasada działania tego polecenia polega na otoczeniu ory­ginalnej ścieżki nową i usunięciu starej.

Po wybraniu z menu polecenia ModifyAlter PathsExpand Stroke, zostanie otwarte ok­no dialogowe Expand Stroke (rysunek 9.26). Jak widać, znajduje się tam kilka opcji poz­walających kontrolować typ ścieżki, którą można wykorzystać do rozszerzania ob­ry­su. Dostępne opcje to:

Rysunek 9.26. W oknie dialogowym Expand Stroke możesz zdefiniować wiele opcji dotyczących rozszerzanego obrysu

• Width (Szerokość) - determinuje końcową szerokość rozszerzanego obrysu. Za­kres wartości mieści się w granicach od 1 do 99 pikseli.

• Corners (Narożniki) - możesz wybrać jeden z trzech typów narożników. Po­szcze­gólne przyciski przedstawiają kolejno od lewej do prawej:

• Miter (Ostre) - po zaznaczeniu tego przycisku, zewnętrzne krawędzie ścież­ki są rozszerzane do czasu aż spotkają się, tworząc ostro zakończony narożnik. Niekiedy mogą one być dość długie, więc za pomocą opcji Miter Limit ograniczysz ich długości.

• Round (Zaokrąglone) - narożnik jest równo zaokrąglany po obu stronach ścieżki tworzącej na­rożnik. Często jest ono używane wraz z zaokrąglaniem końcówek.

• Bevel (Fazowane) - przycinanie narożników rozpoczyna się od środka ścieżki zamiast od jej zewnętrznych krawędzi, jak w przypadku opcji Miter. W rezultacie tworzone są narożniki fazowane.

• Miter Limit (Ograniczenie długości narożników) - określa mierzoną w pik­se­lach długość ostrych narożników ścieżki przed ich odcięciem. Opcja ta pracuje je­dynie z narożnikami typu Miter.

• End Caps (Końcówki) - do wyboru są trzy różne typy końcówek rozsze­rza­nych ścieżek:

• Butt Cap (Beczka) - końcówka typu Butt Cap jest wstawiana prostopadle do obrysu, bezpośrednio obok jego końcowego punktu.

• Square Cap (Kwadrat) - podobnie do Round Cap, końcówka typu Square Cap na końcu ścieżki umieszcza kwadrat, którego długość boku jest równa sze­rokości obrysu.

• Round Cap (Zaokrąglone) - końcówka typu Round Cap umieszcza półkola na końcach ścieżki. Promień każdego półkola jest równy połowie szero­kości obrysu.

Na rysunku 9.27 pokazane są trzy różne typy końcówek ścieżki oraz przykład zmian obiek­tów zawierających zarówno obrysy, jak i wypełnienia na obiekty składające się wy­łącznie z wypełnień.

Rysunek 9.27. Polecenie Expand Stroke pozwala zamienić obrysy na wypełnienia

Po rozszerzeniu obrysu ustaw go na None i zastosuj wypeł­nie­nie do całego obiektu. Zauważ, że w trzeciej i czwartej twarzy wykorzystane zostały wło­sy z twarzy pierwszej.

Inset Path (Rozszerz/Zawęź ścieżkę)

Podczas gdy polecenie Expand Stroke oddziałuje na obrys po obu stronach zaznaczonej ścież­ki, Inset Path XE "Inset Path" działa tylko po jednej stronie obrysu. Okno dialogowe Inset Path wy­glą­da prawie tak samo jak okno Expand Stroke. Jedyny wyjątek to opcje Inside i Out­side. Polecenie Inset Path najbardziej przewidywalne rezultaty daje przy pracy ze ścieżkami zam­knię­ty­mi, ale możesz je wykorzystywać z dowolnymi ścieżkami z wyjątkiem linii pros­tych.

Najczęściej za pomocą polecenia Inset Path można zamienić prosty i nudny obiekt na cał­kiem interesujący (rysunek 9.28).

Jednym z moich ulubionych zastosowań polecenia Inset Path jest tworzenie kształtów roz­mieszczonych koncentrycznie jeden wewnątrz drugiego.

Aby tworzyć koncentryczne kształty za pomocą polecenia Inset Path:

Rysunek 9.28. Za pomocą polecenia Inset Path można tworzyć różne modyfikacje obiektów

144. Zaznacz zamkniętą ścieżkę, do której chcesz dodać koncentryczne kształty.

145. Wybierz z menu polecenie EditClone. Musisz najpierw zduplikować ścieżkę, po­nieważ polecenie Inset Path powoduje usunięcie ścieżki oryginalnej.

146. Wybierz z menu polecenie ModifyAlter PathInset Path. Zostanie otwarte ok­no dialogowe Inset Path.

147. Ustaw opcje Direction (Kierunek), Width (Szerokość) i Corner (Narożnik). Je­śli wy­bierzesz narożnik typu Miter, będziesz mógł również wpisać wartość op­cji Miter Limit. Kliknij przycisk OK. Zostanie narysowana nowa ścieżka, a stara zostanie usunięta.

148. Powtórz polecenia od 2 do 4, aby utworzyć pożądaną ilość koncentrycznych kształ­tów. By kształty były rozmieszczane w równych odstępach, korzystaj z tych samych wartości opcji w oknie dialogowym Inset Path.

Po utworzeniu wszystkich podstawowych kształtów możesz zmodyfikować szerokość ob­rysu lub inne ustawienia poszczególnych ścieżek, aby utworzyć interesujące efekty.

Podsumowanie

Poznanie zagadnień związanych z modyfikacjami ścieżek pomoże Ci wykorzystać wszys­tkie dostępne możliwości Fireworks. Obiekty wektorowe mogą być znie­kształ­ca­ne, skalowane, obracane i dostosowywane na wiele innych, subtelnych sposobów, co poz­wa­la tworzyć kształty potrzebne w każdej oryginalnej witrynie WWW. Modyfikując obiek­ty w Fireworks, musisz pamiętać o następujących rzeczach:

• Obiekty mogą być modyfikowane za pomocą narzędzi transformacji: Scale (Ska­lowanie), Skew (Przekrzywianie) i Distort (Zniekształcanie).

• Za pomocą dowolnego narzędzia transformacji możesz obracać obiekty.

• Aby precyzyjnie obrócić lub przeskalować obiekt, wykorzystaj funkcję Nu­me­ric Transform.

• Skew jest doskonałym narzędziem do tworzenia perspektyw (zwłaszcza w obiektach bitmapowych). Wrażenie perspektywy możesz pogłębić, symulując grę świateł i cieni.

• Podczas gdy narzędzie Pointer (Wskaźnik) służy do przesuwania całych ście­żek, narzędzie Subselection (Zaznaczanie bezpośrednie) można wykorzystać do manipulacji pojedynczymi punktami i ich uchwytami kontrolnymi.

• Po utworzeniu ścieżki możesz ją edytować na wiele sposobów za pomocą na­rzę­dzi Freeform (Dowolne kształty), Redraw Path (Modyfikacja ścieżki), Reshape Area (Zmiana kształtu) i Path Scrubber (Zmiana nacisku ścieżki).

• Polecenia Union (Unia), Intersect (Przecięcie), Punch (Odjęcie spodu), Crop (Ka­drowanie), Simplify (Uprość), Expand Path (Rozszerz ścieżkę) i Inset Path (Za­węź ścieżkę) są niezwykle ważnymi narzędziami w pracy ze ścieżkami w Fire­works.

W następnym rozdziale dowiesz się, jak w Fireworks dodać tekst do swojej grafiki in­ter­netowej.




Rozdział 10.
Obiekty tekstowe

W tym rozdziale:

• Praca z tekstem w oknie Text Editor.

• Wstawianie plików tekstowych.

• Stosowanie obrysów i wypełnień do tekstu.

• Zamiana tekstu na ścieżki.

• Przydzielanie obiektów tekstowych do ścieżek.

• Maskowanie obrazków za pomocą tekstu.

Tekst zajmuje specjalne miejsce w grafice internetowej. Ogromna większość obiektów tek­s­towych - akapity, listy i tabele - jest tworzonych bezpośrednio na stronie WWW wy­­świetlanej w przeglądarce. Jednak ozdobne obiekty tekstowe, używane do pro­jek­to­wa­nia logo, fantazyjnych nagłówków i innych elementów dekoracyjnych nie mogą być two­rzone za pomocą kodu HTML. Tekst jest również integralną częścią kluczowego ele­mentu internetowego - nawigacji. Wiele przycisków nawigacyjnych wykorzystuje tekst (sam lub w połączeniu z symbolami graficznymi) do szybkiego przekazu infor­macji.

Zanim pojawił się Fireworks, edycja tekstu bitmapowego była koszmarem każdego pro­jek­tanta. Obojętnie, czy konieczność korekty wynikała z popełnionych błędów lite­ro­wych, czy też była powodem zmiany zdania klienta, projektant musiał modyfikować ca­łą gra­fikę, ponieważ tekst zastosowany kolejny raz stawał się kolejnym zbiorem pikseli. Wraz z Fireworks pojawiła się możliwość edycji tekstu. Teraz, gdy musisz zmienić logo klienta, który dokonał fuzji wartej 7 miliardów złotych lub zapomnisz umieścić na końcu naz­wy firmy skrót S.A., wystarczy, że klikniesz dwukrotnie tekst i będziesz mógł go zmo­dyfikować.

Kilka programów zaczęło zbliżać się do poziomu aplikacji firmy Macromedia, ale Fire­works nadal jest niepokonany w edycji tekstu bitmapowego. Poznamy podstawowe ope­ra­cje, takie jak wybór czcionki lub wyrównywanie tekstu, a także te bardziej zaawan­so­wa­ne, na przykład przydzielanie tekstu do ścieżek. Poznasz również technikę pozwalającą łą­czyć obrazki z tekstem za pomocą grup maskujących Fireworks.

Wykorzystanie edytora tekstu

Tworzenie i większość operacji związanych z edycją tekstu odbywa się w jednym z okien dialogowych Fireworks - Text Editor XE "Text Editor" (Edytor tekstu). Text Editor (rysunek 10.1) jest osobnym oknem posiadającym pełen zakres kontrolek tekstu i panel pod­glą­du.

Rysunek 10.1. Okno Text Editor umożliwia tworzenie i edytowanie tekstu w Fireworks

Text controls — Kontrolki tekstu

Preview Pane — Panel podglądu

Po utworzeniu tekstu w oknie bieżącego dokumentu Fireworks pojawia się obiekt teks­towy, otoczony ramką ograniczającą. Obiekty tekstowe posiadają wiele, ale nie wszys­tkie, właś­ciwości obiektów wektorowych. Możesz na przykład używać z nimi na­rzę­dzi tran­sfor­macji, takich jak Skew, ale nie można zniekształcać tekstu tak jak ście­żek, za pomocą narzędzia Reshape Area. Obiekty tekstowe posiadają także funkcje nie­spo­ty­kane w żad­nych innych obiektach, na przykład możliwość dostosowywania się do kształ­tów ścieżek. Jeśli będzie to konieczne, możesz również zamienić obiekt tekstowy na obiekt wektorowy lub bitmapowy, ale wówczas tekst nie będzie już mógł być edyto­wany.

Okno edytora tekstu można otworzyć za pomocą narzędzia Text, znajdującego się w pa­le­cie narzędziowej. Narzędzie to może być używane na dwa sposoby:

• Kliknij narzędziem Text w obszarze roboczym, aby ustalić punkt wprowa­dza­nia tekstu. Tekst może rozciągać się w kierunku bocznych krawędzi bieżącego doku­men­tu i ku jego dołowi.

• Narysuj na pomocą narzędzia Text prostokątny obszar tekstowy. Tekst two­rzo­ny w oknie Text Editor jest zawijany na końcach ustalonego obszaru i, jeśli jest to konieczne, rozszerza ten obszar ku dołowi.

Aby wstawić tekst do dokumentu Fireworks:

111. Wybierz narzędzie Text z palety narzędziowej lub użyj skrótu klawiaturowego T.

112. Ustaw obszar tekstu:

• Kliknij w miejscu dokumentu, w którym chcesz rozpocząć wstawianie tekstu.

• Przeciągnij narzędziem Text, aby narysować prostokątny obszar tekstowy.

Każda z tych metod powoduje otwarcie okna dialogowego Text Editor

113. W oknie Text Editor zdefiniuj parametry tekstu, takie jak czcionkę, rozmiar, ko­lor i wyrównanie.

114. Kliknij w panelu podglądu i wprowadź swój tekst. Jeżeli włączona będzie op­cja Auto-Apply, po wprowadzeniu każdego znaku, Fireworks automatycznie uak­tualni obiekt tekstowy znajdujący się w dokumencie.

115. Kliknij przycisk OK.

	Wciśnięcie klawisza Enter (Return) w oknie podglądu spowoduje wsta­wie­nie znaku podziału wiersza. W oknie edytora tekstu domyślnie zaw­sze zaznaczony jest przycisk OK, co może sugerować, że wciśnięcie klawisza Enter spowoduje zamknięcie okna Text Editor. Aby zamknąć okno edytora tekstu, należy wcisnąć inny klawisza En­ter, znajdujący się na klawiaturze numerycznej.

Gdy obiekt tekstowy znajduje się już na ekranie, możesz go przesuwać za pomocą wskaźnika (Pointer), jak każdy inny obiekt Fireworks. Przeciągając jeden z uchwytów wyświetlanych po zaznaczeniu obiektu tekstowego, możesz dostosować jego kształt.

	Przeciąganie uchwytów obiektu tekstowego nie powoduje skalowania sa­mego tekstu, a jedynie jego ramki ograniczającej. Tekst będzie auto­ma­tycznie dostosowywał się do kształtu ramki. Aby dostosować obiekt tekstowy do znajdującego się w nim tekstu, można go ska­lo­wać jedynie w pionie. Jeżeli chcesz, aby tekst zajmował więcej miej­sca w pionie, zaznacz go i wybierz większy rozmiar z menu TextSize.

Jeżeli chcesz edytować istniejący obiekt tekstowy, edytor tekstu możesz otworzyć na je­den z kilku sposobów. Możesz zaznaczyć obiekt tekstowy (jak każdy inny obiekt Fire­works) i wybrać z menu polecenie TextEditor. Możesz również wybrać narzędzie Text z palety na­rzę­dziowej i przesunąć je nad obiekt tekstowy. Gdy kursor zostanie zamieniony z kształtu belki na mały trójkąt, kliknij, aby otworzyć okno Text Editor. Najwygodniejszą (i najczęściej wykorzystywaną) metodą otwierania edytora tekstu jest dwukrotne kliknięcie obiektu tek­stowego narzędziem Pointer lub Subselection.

Zawsze aktualny podgląd

Każda zmiana wykonana w oknie Text Editor jest automatycznie odzwierciedlana przez Fire­works w oknie dokumentu. Kolejna modyfikacja (samego tekstu w oknie podglądu lub jego parametrów za pomocą kontrolek) jest natychmiast uwzględniana w obiekcie teks­towym (rysunek 10.2).

Można również przemieszczać obiekty tekstowe w obrębie obszaru roboczego, nawet przy otwartym oknie Tekst Editor. Upraszcza to znacznie fazę tworzenia, gdy próbujesz zna­leźć optymalny wygląd tekstu i fazę modyfikacji, gdy dostosowujesz tekst.

	Można przemieszczać obiekty tekstowe w obrębie obszaru roboczego przy otwartym oknie edytora tekstu. Uprzednio, aby móc dostosować lokalizację obiektu tekstowego, trzeba było zamknąć okno Text Editor.

Rysunek 10.2. Wszelkie zmiany dokonywane w edytorze tekstu są natychmiast zastosowywane do obiektu tekstowego znajdującego się w dokumencie Fireworks. Zwiększenie odległości pomiędzy literami E i M w oknie Text Editor jest natychmiast wyświetlane w obszarze roboczym

Definiowanie podstawowych atrybutów czcionek XE "tekst:definiowanie podstawowych atrybutów czcionek"

Okno Text Editor zapewnia pełną kontrolę nad wyglądem i stylem tekstu. Jak większość edy­torów tekstu, okno Text Editor oferuje dwie metody pracy. Aby ustawić atrybuty teks­tu, użyj jednej z poniższych metod:

• Ustaw atrybuty czcionki przed rozpoczęciem wprowadzania tekstu w oknie pod­glądu.

• Zaznacz w oknie podglądu tekst, który chcesz zmodyfikować i zmień wszys­tkie atrybuty.

Wszystkie atrybuty tekstu można definiować za pomocą kontrolek znajdujących się u gó­ry okna Text Editor (rysunek 10.3).

Ustalenie podstawowych atrybutów tekstu jest bardzo prostą operacją:

• Font (Czcionka): Z rozwijanej listy wybierz czcionkę dla tekstu. W liście tej wy­świetlane są wszystkie dostępne w Twoim systemie operacyjnym czcionki TrueType i Type 1.

	Użytkownicy Windows mogą zaznaczyć listę czcionek, a następnie uży­wać kursorów w postaci strzałek, aby przemieszczać się w górę lub w dół listy, lub wpisać pierwszą literę poszukiwanej czcion­ki, aby przejść od razu do określonej części listy.

• Size (Rozmiar): Ustal rozmiar tekstu przeciągając suwak lub wpisując wartość bez­po­średnio w polu tekstowym Text Size. Rozmiar czcionki reprezentuje jej wysokość.

Rysunek 10.3. Za pomocą kontrolek znajdujących się w górnej części okna Text Editor zdefiniuj typ, rozmiar, kolor i styl czcionki

Font list — Lista czcionek

Text Size box — Pole rozmiaru tekstu

Text Size slider — Suwak rozmiaru tekstu

Color well — Próbka koloru

Text styles — Style tekstu

W Fireworks rozmiary czcionek mogą być zmieniane w zakresie od 4 do 1000 punk­tów, choć za pomocą suwaka można je ustawiać jedynie w zakresie od 8 do 128.

Rozmiar tekstu można zmieniać także za pomocą narzędzia Scale, uży­wając go do obiektu tekstowego tak, jak przy skalowaniu innych obiek­tów. Mimo że tekst cały czas będzie można edytować, po przeska­lo­wa­niu jego rozmiar w oknie Text Editor nie zostanie zmodyfikowany. Mo­żesz się więc zdziwić, gdy będziesz edytował tekst ogromnych roz­miarów, a w oknie Text Editor zobaczysz, że jego rozmiar wynosi jedynie 10 punktów.

• Color (Kolor): Początkowo edytor tekstu używa koloru zdefiniowanego za po­mo­cą próbki koloru wypełnienia. Jednak za pomocą próbki koloru znajdującej się w oknie Text Editor możesz łatwo zdefiniować nowy kolor tekstu. W stan­dar­dowym rozwijanym próbniku wyświetlany jest bieżący zestaw próbek. Każ­dy znak w obiekcie tekstowym może mieć inny kolor.

	Obecnie edytor tekstu zapamiętuje ustawienia koloru, niezależnie od próbek koloru Stroke i Fill, a zatem nowe obiekty tekstowe będą pojawiac się na innych obiektach.

• Style (Styl): Do jednego obiektu tekstowego można zastosować wszystkie lub wy­brane style: Bold (Pogrubienie), Italic (Kursywa) lub Underline (Pod­kre­ś­lnie).

	Styl Underline jest przydatny do imitowania hiperłączy. Przed utwo­rze­niem dokumentu HTML, można zaprojektować makietę strony i po­ka­zać ją klientowi.

Wszystkie podstawowe atrybuty można definiować na poziomie pojedynczych znaków. Mo­żesz (choć jest to niewskazane ze względów estetycznych) utworzyć obiekt teks­to­wy, w którym każdy znak będzie sformatowany innym typem, kolorem, rozmiarem lub sty­lem czcionki.

Dostosowywanie odstępów w tekście XE "tekst:odstępy w tekście"

Wszystkich modyfikacji układu tekstu w obiekcie tekstowym można dokonywać w ok­nie Text Editor. Fireworks oferuje pięć kontrolek pozwalających dostosowywać odstępy w tekście (rysunek 10.4).

Rysunek 10.4. Za pomocą kontrolek odstępów Fireworks możesz dostosowywać położenia znaków i całych wierszy tekstu

Kerning — Kerning

Leading — Interlinia

Horizontal Scale — Rozmiar poziomy

Baseline shift — Przesunięcie linii bazowej

Auto Kern checkbox — Pole wyboru Auto Kern (Automatyczny kerning)

Kerning (odstępy znaków) XE "tekst:Kerning"

Kerning definiuje odstępy pomiędzy poszczególnymi literami w tekście. Przy wartości do­myślnej, wynoszącej 0 procent, używane są standardowe odstępy zdefiniowane w da­nym typie czcionki. Zwiększenie wartości za pomocą suwaka Kerning (od 1 do 100%) zwięk­sza odstępy pomiędzy znakami, zaś zmniejszenie wartości (od -1 do -100%) zbli­ża do siebie litery, które mogą nawet na siebie zachodzić. Umieść kursor pomiędzy dwo­ma znakami w panelu podglądu okna Text Editor i zmień odległość pomiędzy nimi, prze­ciągając suwak Kerning lub wpisując nową wartość w polu tekstowym. Aby zmie­nić odległości pomiędzy znakami w wybranym fragmencie lub w całym tekście, przed zmia­ną wartości kerningu musisz zaznaczyć żądane znaki w panelu podglądu.

	W panelu podglądu nie są wyświetlane zmiany kerningu. Jeśli jednak za­znaczysz opcję Auto-Apply, będziesz mógł zobaczyć efekty zmian ker­ningu w obiekcie tekstowym, znajdującym się w dokumencie.

Auto Kern XE "tekst:Auto Kern" (Automatyczny kerning)

Wiele czcionek ma zdefiniowane odstępy pomiędzy parami znaków, na przykład li­te­ra­mi „WA” lub „ov”, które są dopasowywane do siebie w celu poprawienia czytelności teks­tu. Niektóre czcionki mają zdefiniowane odstępy nawet pomiędzy 500 różnymi para­mi znaków. Po włączeniu opcji Auto Kern, Fireworks zastosowuje wszystkie zde­fi­nio­wane odstępy pomiędzy parami znaków. Opcja Auto Kern działa w obrębie całego obiektu tekstowego.

Rezultat dostosowania odstępów pomiędzy parami znaków jest najbardziej widoczny przy dużych rozmiarach czcionek. W górnym obiekcie tekstowym znajdującym się na ry­sunku 10.5 została włączona (zgodnie z ustawieniem domyślnym) opcja Auto Kern. Dolny obiekt tekstowy po­siada takie same parametry z tym wyjątkiem, że została wyłączona opcja Auto Kern. Zwróć uwagę, że zmieniła się całkowita długość słowa oraz odległości pomiędzy pa­ra­mi znaków „WA” i „AV”. Dopóki nie będziesz miał ściśle określonych powodów, żeby wy­łączyć opcję Auto Kern, pozostaw ją włączoną.

Rysunek 10.5. Opcja Auto Kern używa wbudowanych dla czcionki informacji o odstępach, aby lepiej dostosować kerning tekstu, jak zostało pokazane w górnym obiekcie

Auto Kern on — Włączony automatyczny kerning

Auto Kern off — Wyłączony automatyczny kerning

Leading XE "tekst:Leading" (Interlinia)

Termin interlinia określa odstępy pomiędzy wierszami tekstu. W Fireworks interlinia jest wyrażana za pomocą wartości procentowych rozmiaru czcionki i działa jedynie w tek­stach składających się z wielu wierszy. Przy domyślnej, 100-procentowej wartości in­terlinii, pomiędzy wierszami tworzony jest pojedynczy odstęp. Interlinia wynosząca 200% utworzy akapit z podwójnymi odstępami pomiędzy poszczególnymi wierszami. War­tości interlinii mniejsze niż 90% sprawią, że wiersze tekstu będą się stykały ze so­bą lub nawet zachodziły na siebie (rysunek 10.6). Dopóki nie będziesz chciał tworzyć efek­tów specjalnych, używaj interlinii 90-procentowej lub większej.

Horizontal Scale (Rozmiar poziomy)

Za pomocą kontrolki Horizontal Scale XE "tekst:Horizontal Scale" możesz zmienić względną szerokość dowolnego obiek­tu tekstowego. Suwak Horizontal Scale działa w zakresie od 50 do 300%, ale za po­mocą pola tekstowego możesz zdefiniować dowolną inną wartość poziomego roz­mia­ru tekstu.

Rysunek 10.6. Wartość interlinii jest odpowiedzialna za odstępy pomiędzy poszczególnymi wierszami tekstu

Leading at 100% — Interlinia 100%

Leading at 130% — Interlinia 130%

Leading at 70% — Interlinia 70%

Rezultaty zmian poziomego rozmiaru tekstu można zobaczyć na rysunku 10.7, gdzie ten sam obiekt tekstowy jest wyświetlany w 200, 100, 50 i 25-procentowej ska­li. Mody­fi­ka­cje poziomego rozmiaru tekstu nie są odzwierciedlane w panelu pod­glą­du okna Text Editor.

Rysunek 10.7. Zmień szerokość obiektu tekstowego za pomocą suwaka Horizontal Scale znajdującego się w oknie Text Editor

Horizontal Scale 200% — Rozmiar poziomy równy 200%

Horizontal Scale 100% — Rozmiar poziomy równy 100%

Horizontal Scale 50% — Rozmiar poziomy równy 50%

Horizontal Scale 25% — Rozmiar poziomy równy 25%

Nie myl kerningu z poziomym rozmiarem tekstu. Kerning definiuje od­stę­py pomiędzy pojedynczymi znakami w tekście, zaś parametr Hori­zon­tal Scale zmienia rozmiary całego obiektu tekstowego.

Baseline Shift XE "tekst:Baseline Shift" (Przesunięcie linii bazowej)

Gdy tworzysz stronę internetową, której głównym elementem są równania che­micz­ne, będziesz bardzo zadowolony z istnienia kontrolki Baseline Shift. Zazwyczaj cały tekst jest układany wzdłuż tej samej linii bazowej, więc dolne krawędzie prawie wszys­tkich znaków są położone na tym samym poziomie. Parametr Baseline Shift pozwala na umie­szczanie liter lub całych słów powyżej lub poniżej standardowej linii bazowej tek­stu. Wartość linii bazowej jest mierzona przez Fireworks w punktach: ujemne wartości ob­niżają, zaś dodatnie podwyższają linię bazową. Aby stworzyć indeks dolny, na przy­kład dwójkę we wzorze H₂O, użyj ujemnej wartości, wynoszącej połowę bieżącego roz­mia­ru czcionki (rysunek 10.8). Aby utworzyć indeks górny, zdefiniuj wartość dodatnią, wy­noszącą połowę bieżącego rozmiaru czcionki.

Rysunek 10.8. Zmień wartość parametru Baseline Shift, aby utworzyć indeks dolny (na przykład 2 w słowie H2O) lub indeks górny (na przykład ^® lub symbol przypisu)

Superscript — Indeks górny

Subscript — Indeks dolny

Wyrównywanie XE "tekst:wyrównywanie" tekstu

Każdy obiekt tekstowy zaznaczony w Fireworks jest otaczany ramką ograniczającą. Ram­ka ta ustala położenie tekstu za pomocą współrzędnych jej górnego lewego wie­rzchoł­ka, a także ogranicza rozmiar bloku tekstowego. Co najważniejsze - każdy rodzaj wy­równania tekstu jest tworzony względem jego ramki ograniczającej.

Do każdego wiersza znajdującego się w tym samym obiekcie tekstowym mogą być sto­so­wane różne opcje wyrównania. Na rysunku 10.9 przedstawiony został akapit, w któ­rym każdy wiersz posiada własną opcję poziomego wyrównania oraz pięć akapitów, z któ­rych każdy został inaczej wyrównany.

Rysunek 10.9. Fireworks oferuje wiele opcji dotyczących wyrównania tekstu

Left — Do lewej

Center — Wyśrodkowanie

Right — Do prawej

Stretched — Rozciąganie

Combination — Kombinacja różnych opcji

Justified — Justowanie

W oknie Text Editor znaleźć można kontrolki sterujące wyrównaniem tekstu (rysunek 10.10). Tekst może być pisany poziomo (Horizontal) (ustawienie domyślne) lub pionowo (Vertical) oraz od lewej do prawej (ustawienie domyślne) lub od prawej do lewej. Dostępne kontrolki wy­rów­nania tekstu zależą od jego orientacji (poziomej lub pionowej).

Po wybraniu opcji Horizontal, dostępne są następujące opcje wyrównania:

Rysunek 10.10. Użyj kontrolek poziomego wyrównania, aby wyrównać tekst do lewej, do prawej, wyśrodkować, wyjustować lub rozciągnąć

Horizontal text — Tekst poziomy

Vertical text — Tekst pionowy

Left — Do lewej

Center — Wyśrodkowanie

Right — Do prawej

Justified — Justowanie

Stretched — Rozciąganie

Left to right — Od lewej do prawej

Right to left — Od prawej do lewej

• Left Alignment (Wyrównanie do lewej): Tekst jest wyrównywany do lewej kra­wędzi ramki ograniczającej.

• Right Alignment (Wyrównanie do prawej): Tekst jest wyrównywany do pra­wej krawędzi ramki ograniczającej.

• Center Alignment (Wyśrodkowanie): Tekst jest wyśrodkowywany pomiędzy le­wą i prawą krawędzią ramki ograniczającej.

• Justified Alignment (Justowanie): Tekst jest równomiernie rozkładany tak, aby litery znajdujące się w każdym wierszu stykały się zarówno z lewą, jak i pra­wą krawędzią ramki ograniczającej. Litery zachowują przy tym oryginalne roz­miary.

• Stretched Alignment (Rozciąganie): Tekst jest poziomo rozciągany tak, aby li­tery znajdujące się w każdym wierszu stykały się zarówno z lewą, jak i prawą kra­wędzią ramki ograniczającej.

• Text Flows Left to Right (Przepływ tekstu od lewej do prawej): Tekst jest ukła­dany w poprzek ekranu - od lewej do prawej.

• Text Flows Right to Left (Przepływ tekstu od prawej do lewej): Tekst jest układany w poprzek ekranu - od prawej do lewej.

	Możesz zmieniać położenie uchwytów znajdujących się w środku bocz­nych krawędzi ramki ograniczającej obiekt tekstowy. Jest to bardzo przy­datna możliwość, pozwalająca na szybkie wyśrodkowanie obiektu teks­towego względem dokumentu. Przeciągnij boczne uchwyty ramki ogra­niczającej do krawędzi obszaru roboczego i wyśrodkuj tekst za po­mo­cą kontrolki Center w oknie Text Editor.

Po wybraniu opcji Vertical Text dostępne są następujące opcje wyrównania:

• Top Alignment (Wyrównanie do góry). Tekst jest wyrównywany do górnej krawędzi ramki ogra­niczającej.

• Center Alignment (Wyśrodkowanie). Tekst jest wyśrodkowywany pomiędzy gór­ną i dolną krawędzią ramki ograniczającej.

• Bottom Alignment (Wyrównanie do dołu). Tekst jest wyrównywany do dolnej krawędzi ram­ki ograniczającej.

• Justified Alignment (Justowanie). Tekst jest równomiernie rozkładany, aby li­te­ry znajdujące się na końcach każdego wiersza dotykały górnej i dolnej kra­wę­dzi ramki ograniczającej, zachowując przy tym oryginalne roz­miary.

• Stretched Alignment (Rozciąganie). Tekst jest rozciągany pionowo, aby litery znaj­dujące się na końcach każdego wiersza dotykały górnej i dolnej krawędzi ram­ki ograniczającej.

• Text Flows Down and Up (Przepływ tekstu od góry do dołu). Tekst jest wyświetlany od gór­nej krawędzi ramki ograniczającej w dół ekranu.

• Text Flows Up and Down (Przepływ tekstu od dołu do góry). Tekst jest wyświetlany od dol­nej krawędzi ramki ograniczającej w górę ekranu.

Włączanie opcji edytora tekstu

W oknie Text Editor znaleźć można jeszcze kilka dodatkowych opcji: dwie dotyczące sa­me­go edytora i trzy działającą na końcowy produkt. Aby tekst w panelu podglądu miał wy­gląd jak najbardziej zbliżony do końcowego, zaznacz opcje Show Font i Show Size&Color. Po włączeniu opcji Show Font tekst jest wyświetlany w oknie podglądu za po­mocą aktualnie wybranej czcionki. Wyłączenie tej opcji powoduje wyświetlanie teks­tu za pomocą jednej ze standardowych czcionek, takich jak Arial lub Helvetica. Opcja Size&Color pozwala zobaczyć tekst w bieżącym rozmiarze i kolorze. Gdy opcja ta jest wy­łączona, tekst będzie wyświetlany za pomocą czarnej 24-punktowej czcionki.

Trzy inne opcje: Anti-Alias (Wygładzanie), Auto Kern (Automatyczny kerning) i Apply (Za­stosuj) odnoszą się do obiektu tekstowego. Opcja Anti-Alias pozwala wygładzić tekst po­przez zastosowanie do krawędzi wypełnienia obiek­tu tekstowego techniki nazywanej anti-aliasingiem. Opcja Auto Kern (opisywana w poprzednim podrozdziale, doty­czą­cym odstępów w tekście) używa zdefiniowanych w danej czcionce odległości pomiędzy pa­rami znaków. Opcja Apply pozwala wszystkie zmiany dokonywane w oknie Text Edi­tor zastosować i obejrzeć w obiekcie tekstowym znajdującym się w dokumencie.

Przy moim sposobie pracy wszystkie te opcje wyłączam jedynie w bardzo rzadkich przy­padkach. Gdy w oknie podglądu muszę wyświetlić duży blok tekstu, wyłączam op­cję Size&Color, ale nigdy nie wyłączam opcji Font. Wyłączenie opcji Anti-Alias i Auto Kern rozważam jedynie wówczas, gdy próbuję uzyskać jakiś efekt specjalny. Jestem cał­kowicie uzależniony od opcji Apply, która umożliwia mi ciągły podgląd zmian w ok­nie dokumentu.

Reedycja XE "tekst:reedycja" tekstu

Okno Text Editor jest prawdopodobnie najczęściej wykorzystywaną metodą edycji teks­tu w Fireworks, ale nie jest jedyną. Globalnych modyfikacji obiektów tekstowych, takich jak zmiana czcionki lub rozmiaru, można dokonywać za pomocą poleceń menu. Mimo że nie dają tak szerokiego zakresu możliwości, korzystanie z poleceń menu może być o wie­le bardziej wydajne niż używanie edytora tekstu, zwłaszcza gdy poznasz odpo­wia­da­jące im skróty klawiaturowe.

Do zaznaczonego obiektu tekstowego można stosować polecenia znajdujące się w czte­rech podmenu menu Text:

• Font (Czcionka): Zawiera listę wszystkich czcionek dostępnych w systemie ope­racyjnym, wyświetlaną w porządku alfabetycznym.

• Size (Rozmiar): Aby szybko zmienić rozmiar zaznaczonego tekstu, wybierz z me­nu polecenie TextSize, a następnie jeden z podanych w punktach roz­mia­rów: 8, 9, 10, 12, 14, 18, 24, 36, 48, 72, 96 lub 120. Aby ustawić rozmiar tekstu inny niż po­dane, wybierz pozycję Other.

• Style (Styl): Oprócz opcji dostępnych w oknie Text Editor (Bold - Pogrubienie, Ita­lic - Kursywa i Underline - Podkreślenie), menu TextStyle pozwala usunąć wszys­tkie style tekstu za pomocą jednego polecenia - TextStylePlain.

• Align (Wyrównanie): Menu TextAlign jest podzielone na dwie części. Jedna z nich to polecenia służące do wyrównywania tekstu poziomego, druga - pio­no­wego. Wybranie opcji wyrównania z jednej z grup powoduje automatyczne dos­tosowanie orientacji tekstu. Przykładowo - jeśli zastosujesz polecenie Text AlignBottom do poziomego obiektu tekstowego, obiekt ten zostanie za­mie­niony na pionowy, a znajdujący się w nim tekst - wyrównany do dołu.

Żeby być skrupulatnym, muszę wymienić jeszcze jedno polecenie menu Text, które nie zo­stało wcześniej wymienione. Jest to polecenie TextEditor, które otwiera okno edy­to­ra tekstu zawierające zaznaczony obiekt tekstowy.

Importowanie XE "tekst:import" tekstu

Przeważnie teksty używane w grafice internetowej są względnie krótkie. Dłuższe aka­pi­ty tekstu są zazwyczaj częścią pliku HTML generowanego przez przeglądarkę. Jest wie­le po­wodów, dla których tekst w Internecie nie jest zamieszczany w formie grafiki bit­ma­po­wej, a najważniejszym z nich jest rozmiar fizyczny pliku. Ściągnięcie strony za­wie­ra­ją­cej tekst bitmapowy trwa o wiele dłużej niż ściągnięcie tej samej strony z tekstem HTML.

Jednak - zgodnie z twierdzeniem „od każdej reguły są wyjątki” - niekiedy bloki tekstu mu­szą być wyświetlane jako grafika bitmapowa. Niektórzy klienci upierają się, aby stro­ny internetowe ich firm wiernie odzwierciedlały wygląd tradycyjnych, drukowanych ma­teriałów. Jedynym sposobem na uszczęśliwienie ich (nawet kosztem dłuższego ła­do­wa­nia pliku) jest utworzenie tekstu bitmapowego. W takich przypadkach z pomocą przy­chodzi jedna z najmniej znanych funkcji Fireworks - import tekstu.

Oprócz wielu formatów graficznych obsługiwanych przez Fireworks, możesz w tym pro­gramie otwierać również pliki tekstowe ASCII i RTF. Pliki ASCII (American Stan­dard Code for Information Interchange) są najpopularniejszymi plikami tekstowymi, któ­re nie zawierają żadnych informacji o formatowaniu znaków. Pliki RTF są dobrym spo­sobem przekazywania podstawowych informacji o formatowaniu tekstu, takich jak typ, rozmiar, styl (pogrubienie, kursywa lub podkreślenie) czcionki lub wyrównanie.

Możesz kopiować krótkie fragmenty tekstu z innych programów i wklejać je w oknie Text Editor Fireworks, ale w przypadku dużych bloków tekstu lepszym rozwiązaniem jest ich importowanie.

Aby zaimportować plik tekstowy:

149. Upewnij się, że plik, który chcesz zaimportować jest zapisany w formacie ASCII lub RTF.

150. Wybierz z menu polecenie FileImport lub użyj skrótu klawiaturowego Ctrl+R (Com­mand+R). Zostanie otwarte okno dialogowe Import.

151. W Windows z listy Files of Type (Pliki typu) wybierz opcję ASCII Text (*.txt) lub RTF Text (*.rtf).

152. Odszukaj odpowiedni plik ASCII lub RTF, zaznacz go i kliknij przycisk Open. Po zamknięciu okna Import zostanie wyświetlony kursor.

153. Umieść tekst w dokumencie, używając jednego z dwóch sposobów:

• Umieść kursor w miejscu, w którym ma się znajdować lewy górny narożnik obiektu tekstowego i kliknij.

• Kliknij i przeciągnij, aby narysować ramkę ograniczającą obiekt tekstowy.

Tekst zostanie umieszczony w nowym obiekcie tekstowym.

Metoda „kliknij i przeciągnij” posiada pewne ograniczenia w tworzeniu obiek­tów tekstowych. Użytkownik nie ma pełnej swobody w rysowaniu ram­ki ograniczającej, ponieważ program utrzymuje jej stałe proporcje wyso­kości do szerokości wynoszące 4:1. Innymi słowy - obiekt teks­to­wy będzie początkowo zawsze cztery razy szerszy niż wyższy. Co waż­niejsze - Fireworks tak wyświetla tekst, aby dopasować go do ram­ki ograniczającej, bez względu na poprzedni rozmiar czcionki.

Przekształcanie XE "tekst:przekształcanie" tekstu

Prawdziwe możliwości Fireworks odkryjesz dopiero przy dodawaniu obrysów, wypełnień gra­dien­towych z teksturami i wielu efektów do bloków tekstowych, które nadal będziesz mógł poddawać edycji. Nawet jeśli użyjesz jednego z narzędzi transformacji: Scale (Ska­lowanie), Skew (Przechylanie) lub Distort (Zniekształcanie), aby kompletnie znie­kształ­cić obiekt tekstowy, tekst nadal będzie mógł być edytowany.

Nie ma żadnej krótszej drogi do poznania możliwości komponowania tekstu z grafiką. Wszys­tkie możliwości możesz poznać jedynie poprzez pracę, eksperymentowanie i... za­bawę. W kolejnych podrozdziałach znajdziesz pewne wskazówki, które pomogą Ci roz­począć zgłębianie możliwości obiektów tekstowych.

Dodawanie obrysów

Gdy utworzysz obiekt tekstowy, zastosowywany jest do niego jedynie podstawowy ko­lor wypełnienia. Nie oznacza to jednak, że nie możesz dodawać obrysów do tekstu. Mo­żesz stosować do tekstu obrysy o dowolnych kombinacjach ustawień. Musisz to jednak czy­nić bardzo ostrożnie. Niektóre typy obrysów, na przykład Basic Air Brush, są dość ma­syw­ne i mogą całkowicie przysłonić tekst o małych rozmiarach. Jednak modyfikowanie roz­mia­rów obrysów (albo koloru, rozmycia lub tekstury) jest proste i każdy typ obrysu mo­żesz dostosować do własnych potrzeb.

Jednym z zastosowań obrysów jest tworzenie tekstów z obwódkami. Prawie wszystkie ty­py czcionek mają znaki z jednolitym wypełnieniem. W Fireworks za pomocą prostej ope­racji możesz tworzyć (z prawie wszystkich typów czcionek) teksty z obwódkami:

154. Zaznacz obiekt tekstowy.

155. Wybierz z menu polecenie WindowStroke, aby otworzyć paletę Stroke lub klik­nij jej zakładkę, jeśli znajduje się na ekranie.

156. Zmień kategorię obrysu z None na dowolną kategorię dostępną w rozwijanej liś­cie Category.

157. Wybierz dowolny typ obrysu z rozwijanej listy Type i zmień, jeśli będzie to ko­nieczne, ustawienia obrysu.

158. Wybierz z menu polecenie WindowFill, aby otworzyć paletę Fill lub kliknij jej za­kładkę, jeśli jest widoczna na ekranie.

116. Ustaw kategorię wypełnienia na None. Wypełnienie tekstu zniknie i pozostanie je­dynie otaczająca go obwódka.

	Do tworzenia prostych obwódek możesz wykorzystać obrysy Basic i Pen­cil. Aby osiągnąć bardziej niezwykłe efekty, wybierz obrys Air Brush lub Random.

Wynik przeprowadzonych czynności możesz zobaczyć na rysunku 10.11.

Rysunek 10.11. Za pomocą dostępnych w Fireworks obrysów można utworzyć tekst z obwódką w oparciu o prawie każdy typ czcionki

Original text object — Oryginalny obiekt tekstowy

Strokes applied (no fill) — Obiekty tekstowe z zastosowanymi obrysami (bez wypełnień)

Inna technika dostosowania wyglądu obrysu tekstu polega na zmianie orientacji obry­su. W przypadku większości obiektów wektorowych, obrys jest wyśrodkowany wzglę­dem ścież­ki. Jednak w przypadku obiektów tekstowych, zgodnie z ustawieniem domyślnym, obrys jest umieszczany na zewnątrz ścieżki. Po zaznaczeniu obiektu tekstowego, za pomocą palety Object możesz zmienić je­go orientację. Pozwala to uzyskać trzy zupełnie inaczej wyglądające obie­kty (rysunek 10.12).

Rysunek 10.12. Jedyną różnicą pomiędzy tymi trzema obiektami tekstowymi jest inna orientacja obrysu

Stroke inside path — Obrys wewnątrz ścieżki

Stroke centered on path — Obrys wyśrodkowany względem ścieżki

Stroke outside path — Obrys na zewnątrz ścieżki

Więcej informacji o obrysach znajdziesz w rozdziale 8.

Dostosowywanie wypełnień

Przy wyświetlaniu tekstu, zgodnie z ustawieniem domyślnym, używane jest jednolite wypełnienie. Ale to tylko nie­wielka część możliwości, jakie daje Fireworks w pracy z obiektami tekstowymi. Wszys­tkie dostępne w programie typy wypełnień: jednolite, z ditheringiem, gradientowe lub z teksturą mogą być stosowane do obiektów tekstowych. Co więcej - zmieniając kra­wę­dzie wypełnienia można nadać mu bardziej miękki lub ostry wygląd. Zastosowanie wypełnienia do tekstu jest bardzo prostą operacją. Wystarczy zaznaczyć obiekt teksto­wy i wybrać wypełnienie z palety Fill. Fireworks traktuje cały obiekt teks­to­wy jako po­jedynczy element, więc gradient lub deseń wypełnia wszystkie litery lub sło­wa tekstu. Za pomocą kontrolek gradientów i deseni możesz jednak modyfikować spo­sób dystry­bucji wypełnienia w obiekcie. Aby to zrobić:

159. Zaznacz obiekt tekstowy.

160. Wybierz z menu polecenie WindowFill, aby wyświetlić paletę Fill lub kliknij jej zakładkę, jeśli jest widoczna na ekranie.

161. Wybierz wypełnienie gradientowe lub deseń.

162. Jeśli opcja Auto-Apply nie jest włączona, kliknij przycisk Apply. Wypełnienie gra­dientem lub deseniem zostanie zastosowane do obiektu tekstowego.

163. Wybierz narzędzie Paint Bucket (Wiadro z farbą). W obiekcie tekstowym zo­sta­ną wyświetlone uchwyty edycyjne gradientu (rysunek 10.13).

Rysunek 10.13. Zmieniając położenie uchwytów edycyjnych możesz modyfikować punkt początkowy i kierunek wypełnienia gradientowego obiektu tekstowego

Gradient ending handle — Uchwyt końcowy gradientu

Gradient starting handle — Uchwyt początkowy gradientu

Gradient width handle — Uchwyt szerokości gradientu

164. Aby dostosować punkt środkowy gradientu, kliknij i przeciągnij okrągły, czar­ny punkt.

165. Aby dostosować kierunek gradientu, kliknij i przeciągnij jeden z kwa­dra­to­wych uchwytów końcowych. Niektóre gradienty - na przykład Ellipse (Elip­tycz­ny), Rectangle (Prostokątny) i Starburst (Wybuchająca gwiazda) - mają jesz­cze trzeci uchwyt, który służy do zmiany szerokości i pochylenia gradientu.

166. Kliknij dowolne narzędzie inne niż Paint Bucket, aby opuścić tryb edycji gra­dientu.

Chcesz dowiedzieć się więcej o gradientach? Zajrzyj do rozdziału 11.

Wykorzystanie narzędzi transformacji

Każde z trzech narzędzi transformacji: Scale, Skew i Distort może być używane do mo­dy­fikowania obiektów tekstowych. Oznacza to, że tekst może być skalowany, obracany, prze­chy­la­ny, a nawet zniekształcany, i nadal będzie można go edytować w oknie Text Editor. Obiekty teks­towe działają więc jak każdy inny typ obiektu; wyświetlane są takie same uchwyty ska­lowania, a nawet mogą być używane polecenia Flip Horizontal/Vertical (Odbij po­zio­mo-pionowo) lub Numeric Transform (Przekształć numerycznie) (rysunek 10.14).

Rysunek 10.14. Obiekty tekstowe mogą być modyfikowane za pomocą narzędzi transformacji Fireworks. Tekst pozostaje przez cały czas edytowalny

Original text object — Oryginalny obiekt tekstowy

Scaled — Przeskalowany

Skewed — Przekrzywiony

Distorted — Zniekształcony

Horizontally flipped — Odbity poziomo

Przekształcając obiekty tekstowe, musisz pamiętać o kilku rzeczach:

• Przed użyciem narzędzia Skew do obiektu tekstowego, przybliż jak najbardziej ram­kę ograniczającą do krawędzi obiektu. Przekrzywianie oddziałuje na cały obiekt tekstowy i zbędne obszary mogą powodować generowanie niepo­żą­da­nych efektów.

• Jak w przypadku obiektów wektorowych, narzędzia Skew i Distort pozwalają na tworzenie efektów perspektywy tekstu. Dodanie do tekstu efektu, np. wewnęt­rzne­go fazowania krawędzi lub zewnętrznego cienia, pomaga spotęgować wra­że­nie perspektywy.

• Tekst może być przekształcany na jeden z dwóch sposobów: jako obiekt we­kto­rowy lub jako obrazek bitmapowy. Opcje dotyczące konwersji obiektów teks­towych są dostępne w palecie Object, po zaznaczeniu obiektu tekstowego. Opcja Transform as Path (Prze­kształć na ścieżkę) (ustawienie domyślne) pozwala utworzyć gładszy i mniej postrzępiony tekst niż opcja Transform as Pixels (Przekształć na piksele). W niektórych przy­padkach możesz preferować jednak bardziej postrzępione obiekty teks­to­we.

Konwertowanie tekstu na ścieżki XE "tekst:konwertowanie na ścieżki"

Skoro możliwość edycji tekstu jest tak ważną sprawą, dlaczego miałbyś z niej kie­dy­kol­wiek rezygnować? Po przekonwertowaniu tekstu na ścieżkę, możesz połączyć ją z in­ny­mi obiektami wektorowymi za pomocą jednego z poleceń, znajdujących się w podmenu ModifyCombine. Możesz również zmienić kształty liter, ale w tym celu także musisz prze­konwertować tekst na ścieżkę, aby uzyskać dostęp do jej punktów kontrolnych. W czcion­ce Wingdings znajdziesz interesujące dla siebie obiekty graficzne, które możesz wy­korzystać jako kliparty nazywane podstawami grafiki. W każdym razie, aby prze­kon­wertować tekst na ścieżkę, zaznacz go i wybierz z menu polecenie TextConvert to Paths, lub skorzystaj ze skrótu klawiaturowego Ctrl+Shift+P (Command+Shift+P).

	Zanim przekonwertuję tekst na ścieżkę, zawsze wykonuję jego kopię, któ­rą przechowuję w ukrytej warstwie lub nieużywanej klatce doku­men­tu. Zachowanie kopii zapasowej może Ci się przydać w nie­prze­wi­dzia­nych sytuacjach w przyszłości.

Konwertowanie tekstu na obrazki

Tekst możesz przekonwertować nie tylko na ścieżkę, ale również na obrazek bit­ma­po­wy. Zaznacz obiekt tekstowy i wybierz z menu polecenie ModifyConvert to Bitmap, lub skorzystaj ze skrótu klawiaturowego Ctrl+Alt+Shift+Z (Command+Option+Shift+Z). Podobnie jak w przypadku konwersji na ścieżki, tekst przekształcony na piksele nie będzie mógł być edytowany w oknie Text Editor.

Technika Fireworks: tekst jako wycinacz kształtów

Jedną z moich ulubionych operacji przeprowadzanych na tekście jest konwertowanie go na ścieżki wektorowe i wycinanie kształtu powstałej ścieżki z innych obiektów wekto­ro­wych. Powstałe w ten sposób obiekty są doskonałymi „królikami doświadczalnymi” do przeprowadzania prób z Xtras lub Live Effects. łat­wo można tworzyć wówczas przyciski reagujące na zdarzenia myszy, ponieważ tekst (a ra­czej dziura, którą wyciął w obiekcie) jest przezroczysty. Umieszczając przyciski na róż­nych tłach, możesz tworzyć wokół nich różnokolorowe blaski, zaś po umieszczeniu ta­kiego tekstu nad obrazkiem bitmapowym, tekst będzie działał jako maska obrazka.

W każdym z powyższych przypadków, aby użyć obiektu tekstowego jako wycinacza kształ­tów z innych obiektów wektorowych, musisz wykonać następujące czynności (ry­su­nek 10.15):

167. Utwórz obiekt tekstowy.

168. Wybierz z menu polecenie TextConvert to Paths lub użyj skrótu kla­wia­tu­ro­we­go Ctrl+Shift+P (Command+Shift+P). Wszystkie znaki tekstu zostaną przek­ształ­cone na ścieżki wektorowe, a następnie zgrupowane.

Rysunek 10.15. Tekst został przekształcony na ścieżkę, a następnie wykorzystany do wycięcia kształtu w innym obiekcie wektorowym

Original text object — Oryginalny obiekt tekstowy

Path text ... rectangle — Ścieżka tekstu nad prostokątnym obiektem wektorowym

New combined path — Nowa ścieżka kombinowana

New path with effects — Nowa ścieżka z zastosowanymi efektami

169. Zaznacz ścieżkę tekstu i wybierz z menu polecenie ModifyUngroup, a na­stęp­nie ModifyJoin lub użyj skrótów klawiaturowych Ctrl+Shift+G (Command+ Shift+G) i Ctrl+J (Command+J). Poszczególne litery tekstu najpierw zostaną rozgrupo­wa­ne, a następnie połączone w jedną ścieżkę.

170. Utwórz obiekt wektorowy, na przykład prostokąt, w którym wytniemy kształt teks­tu. Upewnij się, że obiekt ten posiada jakieś wypełnienie.

117. Umieść ścieżkę tekstu nad nowym obiektem wektorowym i ustaw ją dokładnie w tym miejscu, w którym chcesz wyciąć kształt.

	Być może będziesz musiał zaznaczyć ścieżkę tekstu i wybrać z menu po­lecenie ModifyArrangeBring to Front, aby przesunąć ją na wierzch innych obiektów znajdujących się w stosie. Obiekt wektorowy mo­żesz przesunąć również na spód stosu.

118. Zaznacz oba obiekty i wybierz z menu polecenie ModifyCombinePunch.

Oba obiekty zostaną połączone w nowy obiekt wektorowy posiadający ustawienia wy­peł­nienia, obrysu i innych atrybutów dolnego obiektu. Wypróbuj różne wypełnienia, obry­sy i efekty lub umieść nowy obiekt nad innymi obiektami, aby były one widoczne je­dynie w miejscu wyciętych liter.

Technika Fireworks: zabezpieczenie czcionek

Najlepiej byłoby, gdyby pliki źródłowe, takie jak dokumenty Fireworks, zawsze były za­pisywane wraz z wykorzystywanymi w nich czcionkami. Nie zawsze jed­nak ma miejsce taka sytuacja. Możesz zarchiwizować dokument, otworzyć go rok później i stwier­dzić, że nie masz już w swoim systemie operacyjnym używanych w nim czcionek. Mo­żesz wysłać do kogoś dokument i zapomnieć o dołączeniu czcionek lub otworzyć do­ku­ment Fireworks na innej platformie, gdzie czcionki nie będą działały bez ich wcześniejszej kon­wersji. I nagle cały projekt legnie w gruzach, ponieważ zastępcze czcionki mają in­ne odstępy i atrybuty niż czcionki oryginalne.

Jednym z prostych sposobów na zabezpieczenie się przed zmianą wyglądu czcionek jest wy­konanie, przed zarchiwizowaniem, kopii zapasowych wszystkich tekstów znaj­du­ją­cych się w dokumencie, w postaci obrazków bitmapowych. Jeśli później otworzysz do­ku­ment w systemie, w którym nie ma właściwych czcionek, możesz ukryć wszystkie war­stwy tekstowe i wyświetlić jedynie te warstwy, na których znajdują się bitmapowe wer­sje tekstów. Wygląd dokumentu zostanie zachowany i będziesz mógł go odtworzyć. Je­żeli chcesz jedynie nieznacznie zmodyfikować elementy graficzne i opublikować do­ku­ment, zaoszczędzisz wiele czasu, ponieważ tekst będzie wyglądał dokładnie tak, jak za­mierzałeś.

Technika ta zakłada, że wszystkie obiekty tekstowe umieścisz na włas­nych warstwach (o nazwach Logo, Nagłówek, Główny tekst itd.). Jeśli tego nie zrobisz, będziesz mógł później ręcznie zaznaczać obiek­ty tekstowe i kopiować je do oddzielnych warstw, a następnie kontyn­uo­wać polecenia od punktu 4. Staraj się zachować właściwą kolejność obiek­tów w stosie. Łączenie obiektów znajdujących się na tej sa­mej warstwie może spowodować przeniesienie ich na wierzch obiek­tów, podczas gdy wcześniej znajdowały się pod nimi.

Aby utworzyć warstwę z bitmapowymi kopiami edytowalnego tekstu w dokumencie Fire­works:

171. W palecie Layer zaznacz warstwę tekstową i przeciągnij ją na przycisk New Layer (Nowa warstwa) wyglądający jak kartka papieru. Fireworks utworzy ko­pię warstwy i doda do jej nazwy przyrostek 1.

	Nie zmieniaj położenia skopiowanej warstwy w stosie warstw. Sko­pio­wa­na i oryginalna warstwa powinny znajdować się jak najbliżej siebie.

119. Powtórz pierwsze polecenie dla wszystkich warstw tekstowych znajdujących się w dokumencie.

120. Wybierz polecenie Single Layer Editing (Edycja pojedynczej warstwy) z roz­wi­ja­nego menu palety Layers, abyś mógł pracować w danym momencie tylko z jedną warstwą. Po zaznaczeniu tego polecenia, wybranie pożądanej warstwy w pale­cie Layers spowoduje zablokowanie wszystkich pozostałych warstw.

121. Zaznacz skopiowaną warstwę tekstową w palecie Layers i wybierz z menu po­le­cenie EditSelect All, aby zaznaczyć wszystkie znajdujące się w niej obiekty tekstowe.

122. Wybierz z menu polecenie ModifyConvert to Bitmap, aby przekształcić obiekty tekstowe na bitmapę.

123. Powtórz punkty 4. i 5., aby wszystkie skopiowane warstwy tekstowe prze­kształ­cić na obrazki bitmapowe.

124. Ukryj skopiowane warstwy tekstowe, klikając znajdujące się obok nich w pa­le­cie Layers ikony oznaczone symbolem oka.

Dokument może być teraz publikowany bez obawy o zmianę jego wyglądu, a jego ele­men­ty graficzne nadal będą mogły być edytowane.

Tekst na ścieżce

Przeważnie tekst jest ułożony poziomo lub pionowo. Polecenie Text on a Path XE "tekst:Text on a Path" XE "tekst:układanie na ścieżce" pozwala jed­nak umieści tekst wzdłuż ścieżki o dowolnym kształcie: okrągłym, prostokątnym lub na­rysowanym odręcznie.

Proces tworzenia takiego tekstu jest dość prosty. Najpierw musisz utworzyć obiekt teks­to­wy i ścieżkę, a następnie odpowiednio połączyć ze sobą te dwa elementy. Ścieżki mo­gą mieć wiele różnych kształtów, więc Fireworks oferuje wiele różnych kontrolek i opcji po­magających otrzymać zadowalające efekty. To niesamowite, ale tekst po przydzie­le­niu do ścieżki wciąż nadaje się do edycji.

Aby dostosować tekst do kształtu ścieżki:

172. Narysuj lub utwórz dowolną ścieżkę.

173. Utwórz obiekt tekstowy.

125. Zaznacz ścieżkę i obiekt tekstowy.

126. Wybierz z menu polecenie TextAttach to Path lub użyj skrótu klawia­tu­ro­we­go Ctrl+Shift+Y (Command+Shift+Y). Tekst zostanie ułożony wzdłuż ścieżki, któ­ra zostanie pozbawiona wszystkich swoich atrybutów (obrysu, wypełnienia i efektów) (rysunek 10.16).

Rysunek 10.16. Dwa oddzielne obiekty: tekst i ścieżka zostały ze sobą połączone za pomocą polecenia Attach to Path

Text object — Obiekt tekstowy

Path object — Ścieżka

Text attached to path — Tekst przydzielony do ścieżki

127. Jeżeli chcesz edytować tekst, kliknij go dwukrotnie, aby otworzyć okno Text Edi­tor.

128. Aby oddzielić tekst od ścieżki, wybierz z menu polecenie TextDetach from Path.

Istnieje kilka opcji pozwalających zmieniać układ tekstu względem ścieżki. Po pierwsze - możesz zmieniać wyrównanie tekstu:

• Left Aligned (Wyrównany do lewej). Tekst rozpoczyna się od początku ścieżki.

• Centered (Wyśrodkowany). Tekst jest wyśrodkowany pomiędzy po­cząt­kiem i końcem ścieżki.

• Right Aligned (Wyrównany do prawej). Tekst kończy się na końcu ścieżki.

• Justified (Justowany): Wszystkie znaki tekstu są równomiernie rozkładane wzdłuż całej ścieżki. Jeżeli jest konieczne, tworzone są dodatkowe odstępy po­między znakami.

• Stretched (Rozciągany). Wszystkie znaki tekstu są rozciągane, aby wypełnić ca­łą długość ścieżki. Odstępy pomiędzy znakami pozostają niezmienione.

łatwo jest zgadnąć, gdzie zaczyna się, a gdzie kończy ścieżka liniowa, ale co z okrę­giem? Jeśli pamiętasz zasadę działania opisywanego w rozdziale 5. narzędzia Ellipse, być może przypominasz sobie, że okrąg rozpoczyna się na godzinie dziewiątej i jest kon­tynuowany zgodnie z kierunkiem ruchu wskazówek zegara. Istnieją trzy opcje poz­wa­lające układać tekst w trzech różnych obszarach okręgu:

• Obróć tekst przydzielony do ścieżki za pomocą jednego z narzędzi trans­for­macji.

• Wybierz z menu polecenie ModifyTransformNumeric Transform i, aby okre­ślić kąt obrotu, wybierz z rozwijanej listy opcję Rotate.

• W palecie Object wpisz wartość parametru Offset (Przesunięcie).

Wprowadzenie wartości parametru Offset powoduje przesunięcie tekstu o zadaną liczbę pik­seli w kierunku ścieżki. Średnice okręgów mogą być bardzo różne, więc najlepszą me­todą ustawienia parametru Offset jest „metoda prób i błędów”. Możesz używać także ujem­nych wartości parametru Offset, które powodują przesunięcie tekstu w kierunku prze­ciwnym do kierunku ścieżki.

Aby ułożyć tekst wewnątrz okręgu, wybierz z menu polecenie TextReverse Direction (ry­sunek 10.17). Przy wartości parametru Offset wynoszącej 0, tekst rozpoczyna się na go­dzinie szóstej, a jego kierunek jest przeciwny do kierunku ruchu wskazówek zegara.

Ostatnim aspektem tekstu przydzielonego do ścieżki, który możesz kontrolować jest orien­tacja tekstu względem ścieżki. Opcje dotyczące tego parametru znajdziesz w pod­me­nu TextOrientation (rysunek 10.18).

• Rotate around Path (Obróć względem ścieżki). Każdy znak obiektu teks­to­we­go jest umieszczany prostopadle do pierwotnego położenia względem ścież­ki (ustawienie domyślne).

• Vertical (Pionowo). Każdy znak obiektu tekstowego pozostaje w pozycji pio­no­­wej względem całego dokumentu, zaś wszystkie znaki są układane wzdłuż ścieżki.

• Skew Vertical (Przechyl pionowo): Obraca litery względem ścieżki, odchylając je do pionu.

Rysunek 10.17. Użyj polecenia Reverse Direction w połączeniu z opcją Offset, aby właściwie rozmieścić tekst względem okręgu
Rysunek 10.18. Zmieniając orientację tekstu względem ścieżki, do której jest przydzielony, możesz uzyskać wiele różnych efektów

Rotate around path — Obróć względem ścieżki

Vertical — Pionowy

Skew vertical — Przechyl pionowo

Skew horizontal — Przechyl poziomo

• Skew Horizontal (Przechyl poziomo): Utrzymuje znaki w pozycji pros­to­pa­dłej względem ścieżki i przechyla je poziomo, aby dostosować do kąta pochy­le­nia ścieżki.

Przyglądając się przykładowi wykorzystania opcji Skew Horizontal na rysunku 10.18, mo­żesz zacząć się zastanawiać, po co ta opcja została w ogóle uwzględniona. Jednym z po­wodów jej nieatrakcyjnego wyglądu jest fakt, że pochylenie jest modyfikowane tyl­ko wtedy, gdy ścieżka zmienia swój kształt. Gdy opcja Skew Horizontal zostanie za­sto­sowana do ścieżki posiadającej mało lub nie posiadającej w ogóle zakrzywień, mo­żesz uzyskać bardziej atrakcyjnie wyglądające efekty (rysunek 10.19).

Technika Fireworks:
maskowanie obrazków za pomocą tekstu

Co można osiągnąć łącząc obrazek z tekstem, tak że tekst również staje się obraz­kiem bitmapowym? Grafikę godną tysiąca pochwał? Myślę, że technika ma­skowania obrazków warta jest o wiele więcej, a łatwość tworzenia masek w Fire­works czyni ją jeszcze bardziej atrakcyjną.

Rysunek 10.19. Pionowe pochylenie tekstu wygląda najlepiej, gdy zostanie zastosowane do ścieżki posiadającej mało lub nie mającej w ogóle żadnych zakrzywień

Grupa maskująca składa się z grupy dwóch lub więcej obiektów, w której dolne obiekty wi­doczne są jedynie poprzez obszary górnych obiektów. Aby zobaczyć, co mam na myśli, przyj­rzyj się bliżej rysunkowi 10.20. Istotnym czynnikiem, nadającym maskom efek­tow­ny wy­gląd jest kolor, dlatego też poniższy rysunek znajdziesz również w kolorowej wkładce.

Rysunek 10.20. Obrazek i obiekt tekstowy połączone w grupę maskującą. Zauważ, że po grupowaniu w tekście pozostał efekt fazowania krawędzi

Text — Tekst

Image — Obrazek

Text and image Mask Group — Grupa maski tekstu i obrazka

Aby maskować obrazek za pomocą tekstu:

174. Utwórz lub umieść istniejący obrazek i obiekt tekstowy w tym samym do­ku­men­cie.

175. Umieść obiekt tekstowy nad obrazkiem, w jego ostatecznym położeniu.

176. Zaznacz oba obiekty.

177. Wybierz z menu polecenie ModifyMaskGroup as Mask. Obrazek będzie wyświe­tla­ny tylko w obszarach tekstu.

178. Użyj narzędzia Subselection, jeśli chcesz zmodyfikować położenie obrazka.

	Tekst wykorzystany w grupie maskującej pozostaje edytowalny. Mu­sisz go jedynie rozgrupować i zaznaczyć. Gdy skończysz edytować tekst, ponownie zastosuj polecenie Group as Mask.

Technika maskowania obrazków za pomocą tekstu działa tak samo jak maskowanie za po­mocą każdego innego obiektu. Zauważyłem jednak, że nadanie tekstowi pożądanego kształ­tu przed przeprowadzeniem maskowania pozwala utworzyć lepiej wyglądającą mas­kę. Zawsze zaczynam od dość szerokiej czcionki, aby widać było przez nią jak naj­wię­cej obszarów obrazka i używam kontrolek Horizontal Scale oraz Kerning, znaj­du­ją­cych się w oknie Text Editor, aby uzyskać jak największą czcionkę. Na przykład czcion­ka wykorzystana na rysunku 10.20 to bardzo szeroki Arial Black z 12-procentowym ker­nin­giem. Znaki w tej czcionce stykają się ze sobą i pozwalają uzyskać jak najbardziej spój­ny obrazek.

Podsumowanie

Tekst i obrazki są elementami wspólnie używanymi w Internecie. Prawie niemożliwe jest istnienie jednego elementu bez drugiego. Bogaty zestaw funkcji Fireworks słu­żą­cych do ma­nipulowania tekstem pozwala na jego integrację z bitmapami. Poznanie taj­ni­ków two­rzenia i edytowania obiektów tekstowych Fireworks jest kluczem do pro­jek­to­wania dla Internetu. Podczas pracy z tekstem w Fireworks, musisz pamiętać o następujących rzeczach:

• Tekst zapisywany w plikach źródłowych Fireworks jest zawsze edytowalny. Mo­żesz do niego stosować obrysy, wypełnienia, efekty i nawet transformacje, a nadal będziesz mógł go edytować.

• W Fireworks tekst jest reprezentowany za pomocą obiektów tekstowych, które mo­gą być tworzone w oknie Text Editor lub importowane z plików zapisanych w formatach ASCII i RTF.

• Głównym narzędziem umożliwiającym tworzenie tekstu jest okno Text Editor, któ­re zawiera wszystkie kontrolki niezbędne do ustawiania atrybutów tekstu, ta­kich jak typ, rozmiar i kolor czcionki, odstępy oraz wyrównanie tekstu.

• Zmiany dokonywane w oknie Text Editor są natychmiast wyświetlane w oknie do­kumentu.

• Obiekty tekstowe mogą być przemieszczane w obrębie obszaru roboczego przy otwartym oknie Text Editor.

• Do tekstu można stosować wszystkie obrysy, wypełnienia i efekty dostępne w Fire­works. Do obiektów tekstowych można również stosować narzędzia tran­s­formacji: Scale, Skew i Distort.

• Przekształcenie obiektu tekstowego na zbiór ścieżek pozwala łączyć te ścieżki z innymi obiektami wektorowymi w celu uzyskania interesujących efektów.

• Fireworks oferuje polecenie Align Text with Path pozwalające rozmieszczać tekst względem okręgów, krzywych i innych dowolnych ścieżek. Co więcej
  - za pomocą funkcji Alignment i Offset możesz dostosowywać rozmieszczenie teks­tu względem jego ścieżki.

• Za pomocą polecenia Group as Mask możesz łatwo łączyć tekst z obrazkami bit­ma­powymi.

W następnym rozdziale zajmiemy się wnętrzem obiektów Fireworks: wypełnieniami i teks­turami.




Część III
Efekty




Rozdział 11.
Wypełnienia i tekstury

W tym rozdziale:

• Podstawowe wiadomości o wypełnieniach.

• Wybór typu wypełnienia.

• Rozszerzanie zakresu dostępnych kolorów za pomocą ditheringu.

• Modyfikowanie wypełnienia gradientowego.

• Technika Fireworks: tworzenie przezroczystego gradientu.

• Ulepszanie grafik za pomocą deseni.

• Technika Fireworks: projektowanie bezspoinowych deseni.

• Tworzenie tekstur w grafikach internetowych.

• Wypełnianie fragmentów obrazka za pomocą narzędzia Paint Bucket.

Wypełnienia i obrysy to równorzędni partnerzy w grafikach Fireworks. Wypełnienia oży­wiają wnętrze obiektu, zaś obrysy ich krawędzie zewnętrzne. Wypełnienia wy­stę­pu­ją w Fireworks w wielu odmianach: jednolite kolory, płynne przejścia kolorów i wzorki oraz, podobnie jak obrysy, są zadziwiająco elastyczne i można je dostosowywać na pra­wie nieskończoną ilość sposobów. Co więcej, wypełnienia obiektów mogą być w każdej chwi­li edytowane, co oznacza, że zmiana wypełnienia obiektu z jednolitego koloru na pow­tarzający się deseń wymaga tylko jednego lub dwóch kliknięć myszą.

Po omówieniu wszystkich standardowych wypełnień Fireworks, rozdział ten opisuje wszys­tkie techniki dostosowywania i ulepszania wypełnień. Oprócz poznania technik edy­towania gradientów i deseni oraz wielu wariacji tworzonych za pomocą tekstur, do­wiesz się również, jak możesz tworzyć własne gradienty, desenie i tekstury.

Wykorzystanie wbudowanych wypełnień

Podobnie jak obrysy za pomocą palety Stroke, wypełnienia mogą być stosowane i mo­dy­fikowane za pomocą palety Fill (rysunek 11.1). Paletę Fill XE "paleta:Fill" można otworzyć, wy­bie­ra­jąc z menu polecenie WindowFill, klikając zakładkę palety Fill, jeśli jest widoczna na ek­ra­nie lub używając skrótu klawiaturowego Shift+F7.

Rysunek 11.1. Paleta Fill stanowi „centrum zarządzania” pozwalające zastosować lub zmodyfikować dowolny typ wypełnienia

Category — Kategoria

Color well — Próbka koloru

Degree of Feather edge — Stopień rozmycia krawędzi

Degree of texture — Natężenie tekstury

Texture — Tekstura

Edge — Krawędzie

Istnieje pięć głównych kategorii wypełnień XE "wypełnienia:kategorie" :

• None (Brak): Brak wypełnienia.

• Solid (Jednolite): Określa wypełnienie jednolitym kolorem, który można zde­fi­nio­wać za pomocą rozwijanego próbnika lub narzędzia Eyedropper (Krop­lo­mierz).

• Web Dither (Dithering internetowy): Rozszerza zakres kolorów bezpiecznych dla Internetu, symulując je za pomocą deseni tworzonych z dwóch innych ko­lorów.

• Pattern (Deseń): Stosuje kolorowy obrazek jako powielany wzór wypełnienia.

• Gradient: Jeden z 11 typów gradientu zawierających przejścia dwóch lub wię­cej kolorów. W rozwijanej liście kategorii nie występuje kategoria Gradient, lecz nazwy każ­dego z typów gradientu.

Dla każdej kategorii paleta Fill wygląda nieco inaczej. Jeśli wybierzesz na przykład wy­peł­nienie Solid, nie będą dostępne żadne dodatkowe typy wypełnień. Jeżeli zaś wybie­rzesz kategorię Pattern, zostanie wyświetlona rozwijana lista zawierająca wszystkie dos­tępne desenie. Wszystkie typy wypełnień (z wyjątkiem None) mają pewne wspólne ce­chy - w każdej z nich wyświetlana jest standardowa próbka koloru oraz rozwijana lista Edge (Krawędzie).

Lista Edge działa tak samo, jak lista o tej samej nazwie dostępna w palecie Stroke. Znaj­dują się w niej trzy opcje: Hard Edge (Ostre krawędzie), Anti-Alias (Wygładzone) i Feat­her (Rozmycie). Opcja Hard Edge nie powoduje żadnych zmian krawędzi wy­peł­nie­nia, Anti-Alias wygładza krawędzie i usuwa ich postrzępienie (jeśli istnieje), zaś Feather pozwala na ustawienie za pomocą suwaka Amount of Feather liczby pikseli, dla ja­kiej zostanie zastosowane rozmycie krawędzi.

Tekstury wypełnień pracują w ten sam sposób, w jaki działały z obrysami. Ponieważ jed­nak są o wiele bardziej widoczne, w jednym z podrozdziałów znajdziesz dokład­niej­sze omówienie ich stosowania.

Usuwanie wypełnień obiektów

Oprócz umiejętności dodawania wypełnień, musisz również wiedzieć, jak je usuwać. W Fire­works istnieją dwie metody usuwania wypełnień. Pierwsza z nich to wybranie po­zycji None z rozwijanej listy Category, znajdującej się w palecie Fill. Inna metoda to klik­nięcie przycisku No Color, znajdującego się w rozwijanym próbniku kolorów w pa­le­cie narzędziowej (rysunek 11.2). Użycie tego przycisku powoduje usunięcie do­wol­ne­go typu wypełnienia: jednolitego, gradientowego lub deseniem.

Rysunek 11.2. Próbnik kolorów znajdujący się w palecie narzędziowej zawiera przycisk No Color pozwalający usunąć wypełnienie obiektu

Tools — Narzędzia

No color button — Przycisk No color (Brak koloru)

Solid XE "wypełnienia:Solid" (Jednolite)

Solid jest podstawowym, monochromatycznym wypełnieniem, nazywanym czasami wypełnieniem jednolitym. Kolor wykorzystywany przez wypełnienie jednolite można zde­fi­niować za pomocą próbki koloru wypełnienia, dostępnej w palecie Fill, w palecie narzę­dzio­wej oraz w palecie Color Mixer. Próbka koloru wypełnienia używa standardowego prób­nika kolorów Fireworks (rysunek 11.3). W próbniku tym wyświetlane są kolory pró­bek aktywnych w palecie Swatches. Domyślnie jest to paleta 216 kolorów bez­piecz­nych dla Internetu.

Aby zastosować jednolite wypełnienie do obiektu:

129. Zaznacz obiekt.

130. Wyświetl próbkę koloru wypełnienia, za pomocą jednej z trzech metod:

• Wybierz z menu polecenie WindowFill, aby otworzyć paletę Fill i kliknij prób­kę koloru.

• Kliknij próbkę koloru oznaczoną wiadrem z farbą w palecie narzędziowej (ry­sunek 11.2).

Rysunek 11.3. Wybierz kolor jednolitego wypełnienia za pomocą próbki koloru

Eyedropper — Kroplomierz

System Palette button — Systemowa paleta kolorów

Palette pop-up button — Przycisk wywoływania palety

• Wybierz z menu polecenie WindowColor Mixer, aby otworzyć mikser ko­lo­rów i kliknij próbkę koloru oznaczoną wiadrem z farbą.

Każda z wymienionych metod powoduje wyświetlenie rozwijanego próbnika kolorów.

131. Aby wybrać kolor z bieżącego zestawu próbek , wybierz w próbniku na­rzę­dzie Eyedropper i kliknij pożądany kolor, albo wybierz dowolny kolor znajdujący się na ekranie.

132. Aby uzyskać dostęp do systemowej palety kolorów, kliknij przycisk Palette i wy­bierz jeden z kolorów znajdujących się w otwartym oknie dialogowym.

Jednolite wypełnienia można modyfikować na kilka sposobów. Z rozwijanej listy Edge znaj­dującej się w palecie Fill możesz wybrać jedną z opcji krawędzi wypełnienia: Hard, Anti-Alias lub Feather. Jeżeli wybierzesz opcję Feather, uaktywniony zostanie suwak Amount of Feather. Dodatkowo, do jednolitych wypełnień możesz stosować tekstury dos­tępne w rozwijanej liście Texture. Pamiętaj jednak, że aby tekstura była widoczna, mu­sisz ustawić większą niż 0% wartość parametru Amount of texture.

Web Dither XE "wypełnienia:Web Dither" (Dithering internetowy)

Kolor to jeden z najbardziej problematycznych elementów w projektowaniu dla Internetu. Więk­szość projektantów używa palety 216 kolorów bezpiecznych dla Internetu, które mo­gą być poprawnie wyświetlane przez najważniejsze przeglądarki na komputerach PC i Macintosh pracujących z 8-bitową głębią kolorów (256 kolorów). Największym ogra­ni­czeniem jest stosunkowo mała liczba dostępnych kolorów: dwieście szesnaście z pa­le­ty zawierającej miliony kolorów. Kolejne ograniczenie to duże odległości pomiędzy tymi ko­lo­ra­mi w palecie. Ograniczenia te stają się szczególnie dotkliwe, gdy logo klienta zawiera ko­lory niedostępne w palecie bezpiecznej dla Internetu. Na szczęście Fireworks, za po­mocą wypełnienia Web Dither, poz­wa­la na zwiększenie liczby bezpiecznych kolorów do ponad czterdziestu pięciu tysięcy.

Aby zrozumieć zasadę działania wypełnienia Web Dither, musisz poznać kilka za­gad­nień dotyczących koloru w komputerze. Dithering (rozpraszanie) jest procesem polega­ją­cym na takim rozmieszczeniu dwóch lub więcej pikseli o różnych kolorach, że ludzkie oko będzie je postrzegać jako inny kolor. Technika ta działa dzięki temu, że ludzkie oko nie po­tra­fi rozróżnić pojedynczych pikseli wchodzących w skład wzoru. Pierwotnie dithering był stosowany do przełamywania bariery 256 kolorów dostępnych we wcześniejszych moni­to­rach komputerowych. Jeśli przekonwertujesz zdjęcie posiadające miliony kolorów na 256-kolorowego GIF-a, w miejscach, gdzie komputer próbuje symulować niedostępne ko­lory, zauważysz obszary ditheringu. Jednak w grafikach zawierających duże obszary jed­nolitych kolorów, wykorzystanie ditheringu wymusza na projektantach rezygnację z zachowania pełnej kontroli. Nie będziesz znał końcowego rezultatu swoich działań, do­pó­ki nie wyeksportujesz grafiki.

Pierwotnie model Hybrid-Safe został opracowany przez Dona Barnetta i Bruce'a Hea­vi­na, a następnie spopularyzowany przez projektanta internetowego - Lyndę Weinmann. Mo­del Hybrid-Safe zawiera dwa kolory bezpieczne dla Internetu, tworzące deseń o wy­mia­rach 2×2 piksele. Technika ta została zaadoptowana w Fireworks pod nazwą Web Dither. Funkcja ta pozwala nie tylko zwiększyć liczbę kolorów bezpiecznych do czter­dzie­s­tu sześciu tysięcy sześciuset pięćdziesięciu sześciu (216×216), ale umożliwia również tworzenie pół­przezroczystych jednolitych wypełnień, co otwiera zupełnie nowe możli­woś­ci dla projektantów internetowych.

Po wybraniu w palecie Fill kategorii Web Dither zauważysz, że dostępny stanie się nowy zes­taw opcji (rysunek 11.4). Zamiast jednej wyświetlone zostaną bowiem trzy próbki ko­lorów. Górna próbka reprezentuje bieżący kolor wypełnienia, zaś dwie dolne - ko­lo­ry używane do stworzenia desenia. Jeżeli bieżący kolor wypełnienia jest dostępny w pa­lecie bezpiecznej dla Internetu, obie próbki ditheringu posiadają ten sam kolor. Jeśli zaś kolor wypełnienia nie należy do palety Web-Safe, Fireworks utworzy jego naj­bliż­szy odpowiednik za pomocą dwóch kolorów używanych w ditheringu.

Rysunek 11.4. Wypełnienie Web Dither znacznie rozszerza zakres dostępnych kolorów bezpiecznych dla Internetu

Aby zastosować wypełnienie Web Dither:

179. Zaznacz obiekt.

180. Otwórz paletę Fill, wybierając z menu polecenie WindowFill, klikając zakładkę pa­lety Fill, jeśli znajduje się na ekranie lub używając skrótu klawiaturowego Shift+F7.

133. Kliknij strzałkę znajdującą się obok najwyższej próbki koloru, aby otworzyć roz­wijany próbnik kolorów.

134. Za pomocą jednej z trzech metod wybierz kolor nie należący do palety bez­piecznej dla Internetu:

• Jeśli chcesz wybrać kolor z aktywnej palety, kliknij jeden z kolorów wy­świe­tlanych w rozwijanym próbniku. Aktywna paleta kolorów musi być in­na niż Web 216.

• Aby wybrać dowolny kolor znajdujący się na ekranie, wybierz w próbniku na­rzędzie Eyedropper i pobierz żądany kolor.

• Aby uzyskać dostęp do systemowej palety kolorów, kliknij przycisk Palette znaj­dujący się w rozwijanym próbniku.

Jeżeli nie możesz znaleźć koloru spoza palety Web Safe, pobierz go za pomocą narzędzia Eyedropper z dowolnego miejsca ekra­nu, znajdującego się poza oknem Fireworks. Użytkownicy Windows mu­szą kliknąć kroplomierz i trzymać wciśnięty przycisk myszy podczas prze­suwania narzędziem nad oknem Fireworks, aż do momentu, gdy umie­szczą kroplomierz nad żądanym kolorem. Dopiero wtedy można zwolnić przy­cisk, aby pobrać ten kolor.

Fireworks utworzy za pomocą ditheringu kolor najbardziej zbliżony do tego, który wy­bra­łeś (rysunek 11.5).

Rysunek 11.5. W środkowym kwadracie zostało zastosowane wypełnienie Web Dither. Kwadraty znajdujące się po lewej i po prawej stronie są wypełnione kolorami bezpiecznymi dla Internetu używanymi w ditheringu środkowego kwadratu

Wypełnienie Web Dither jest doskonałym sposobem na uzyskiwanie niezbędnych ko­lo­rów (na przykład tych używanych w logo klienta) w Internecie. Wykorzystując do pracy ma­teriały drukowane, możesz z nich pobierać kolory używane w wypełnieniu Web Dither.

Mimo że wypełnienie Web Dither daje dostęp do szerokiego zakresu ko­lorów, nie oznacza to, że wykorzystywane mogą być wszystkie kom­bi­nacje kolorów. Jeżeli wybierzesz dla ditheringu dwa bardzo różne ko­lo­ry, w utworzonym deseniu będzie widać wyraźne kropki. Najlepiej jest wybrać pożądany kolor wypełnienia za pomocą narzędzia Eyedrop­per lub innej metody i pozwolić Fireworks na wykonanie ditheringu bez udziału użytkownika.

Wypełnienie Web Dither jest wzbogacone w Fireworks opcją Transparent. Po jej włą­cze­niu program usunie kolor z pierwszej próbki używanej w ditheringu, zaś drugą prób­kę usta­wi na kolor jak najbliższy kolorowi bezpiecznemu dla Internetu. Powstanie deseń, utwo­rzony z naprzemiennie występujących przezroczystych pikseli i pikseli w kolorze bez­piecznym dla Internetu. Powstałe w ten sposób wypełnienie będzie pół­prze­zro­czyste.

	Eksportując grafikę używającą wypełnienia Web Dither z opcją Trans­pa­rent, upewnij się, że zaznaczyłeś opcję Index lub Alpha Trans­pa­rency.

Praca z gradientami

Gradient to stopniowe przejście pomiędzy dwoma lub więcej kolorami. Gradienty są uży­wane do nadania grafice wrażenia trójwymiarowości lub oryginalnego zabarwienia. Każ­dy gradient jest definiowany za pomocą dwóch elementów: spektrum kolorów, de­fi­niu­jącego używane kolory i ich położenie względem siebie oraz wzór gradientu, opi­su­ją­cy jego kształt.

Fireworks oferuje jedenaście różnych wzorów gradientów i trzynaście wbudowanych kom­binacji ich kolorów. Jak może zdążyłeś już się domyślić, gradienty są w pełni edy­to­walne, jak wiele innych atrybutów grafiki tworzonej w Fireworks.

Stosowanie wypełnienia Gradient XE "wypełnienia:Gradient"

Wypełnienie gradientowe jest przypisywane do obiektów w trochę inny sposób niż wy­peł­nienie Solid lub Pattern. Aby zastosować wypełnienie Gradient:

181. Zaznacz obiekt.

182. Aby wyświetlić paletę Fill, wybierz z menu polecenie WindowFill lub kliknij za­kładkę palety Fill, jeśli jest widoczna na ekranie.

183. Z rozwijanej listy Category wybierz jeden z typów gradientu znajdujących się po­niżej linii rozdzielającej. Do jego utworzenia wykorzystane zostaną bie­żą­ce kolory obrysu i wypełnienia, zaś w palecie Fill pojawi się rozwijana lista opcji Preset (rysunek 11.6).

Rysunek 11.6. W palecie Fill zdefiniuj wzór i kombinację kolorów gradientu

135. Z rozwijanej listy Preset wybierz kombinację kolorów gradientu.

136. Jeśli chcesz, możesz zmodyfikować krawędzie wypełnienia lub dodać do niego teksturę.

Zamiast słownych opisów wszystkich standardowych gradientów, na poniższym rysun­ku 11.7 zamieściłem ich graficzne reprezentacje.

Rysunek 11.7. Fireworks oferuje jedenaście różnych wzorów gradientów

Linear — Liniowy

Radial — Radialny

Ellipse — Elipsa

Rectangle — Prostokąt

Cone — Stożek

Waves — Fale

Starburst — Wybuch gwiazdy

Satin — Satyna

Bars — Paski

Folds — Fałdy

Ripples — Okręgi

Modyfikowanie gradientów

Fireworks oferuje rozmaite wzory i kombinacje kolorów gradientów, ale największą wartość mają możliwości dostosowywania ich do własnych potrzeb. Gradienty możesz mo­dyfikować na dwa główne sposoby:

• Można dostosować punkt środkowy, szerokość i pochylenie (jeśli istnieje) każ­de­go gradientu. Wykorzystując tę możliwość, zmienisz wygląd gradientu za­sto­so­wanego do dowolnego obiektu.

• Spektrum kolorów wykorzystywane do tworzenia stopniowych przejść ko­lo­rów gradientu jest w pełni elastyczne. Kolory gradientu można modyfikować, usu­wać lub zmieniać ich położenia. W dowolnym miejscu przejścia możesz rów­nież dodać zupełnie nowy kolor.

Zmodyfikowane spektrum kolorów możesz zachować jako nowy zestaw ustawień, po­dob­nie jak własny obrys. Jednak zmodyfikowanego wzoru gradientu nie można zacho­wać ani jako gradient, ani jako styl. Nie ma innej możliwości wykorzystywania zmo­dyfi­ko­wa­nych wzorów gradientów w kolejnych dokumentach niż kopiowanie i wklejanie obiektów.

Modyfikowanie wzorów gradientów XE "wypełnienia:modyfikowanie wzorów gradientów"

Każdy obiekt z gradientem ma uchwyty, będące kluczem do odblokowania i dostosowania wzoru gradientu do własnych potrzeb. Po wybraniu narzędziem Pointer obiektu z wypełnieniem gra­dientowym lub deseniem, wyświetlone zostaną kontrolki gradientu. Wszystkie gra­dien­ty posiadają punkt początkowy i końcowy, zaś cztery z nich (Ellipse, Rectangle, Star­burst i Ripples) wykorzystują cztery dodatkowe kontrolki pozwalające dostosować roz­miar i pochylenie wzoru. Kontrolki gradientu dla każdego wzoru gradientu są umie­szcza­ne w innych miejscach (rysunek 11.8).

Rysunek 11.8. Każdy z jedenastu standardowych gradientów posiada własne uchwyty kontrolne

Control handles — Uchwyty kontrolne

Starting point — Punkt początkowy

Ending points — Punkty końcowe

Uchwyty gradientu mogą być teraz aktywowane przez kliknięcie narzędziem Pointer lub Paint Brush obiektu z wypełnieniem gradientowym, co ułatwia wybieranie i modyfikację gradientów.

Aby zmodyfikować wzór gradientu:

184. Zaznacz obiekt z wypełnieniem gradientowym. Pojawią się kontrolki gradientu.

185. Aby zmienić położenie początkowego punktu gradientu, przeciągnij okrągły uch­wyt kontrolny.

186. Aby obrócić gradient, ustaw wskaźnik myszy nad linią łączącą uchwyty kon­trol­ne i gdy kursor zostanie zamieniony na Rotate, przeciągnij uchwyty do no­we­go położenia. Podczas obracania gradientu, Fireworks wykorzystuje punkt po­czątkowy gradientu jako środek obrotu.

187. Aby zmienić rozmiar dowolnego gradientu, przeciągnij w nowe położenie kwa­­dratowy uchwyt kontrolny.

188. Aby zmienić pochylenie gradientu Ellipse, Rectangle, Starburst lub Ripples, prze­ciągnij jeden z kwadratowych uchwytów kontrolnych w żądanym kie­runku.

Kontrolki gradientu nie muszą znajdować się wewnątrz zaznaczonego obiektu. Każda z nich: uchwyt początkowy, końcowy, szerokości lub pochylenia gradientu może być prze­suwana w miejsca znajdujące się poza obszarem obiektu. Niektóre z moich naj­ład­niej­szych wzorów gradientów powstały właśnie w wyniku umieszczenia ich kontrolek po­za obiektem.

	Pamiętaj, że nie ma sposobu na kopiowanie zmodyfikowanych gra­dien­tów pomiędzy obiektami. Aby powielić gradient, musisz sko­pio­wać i wkleić cały wypełniony nim obiekt. Aby w dwóch bardzo róż­nią­cych się od siebie obiektach utworzyć takie samo wypełnienie gradientowe, bę­dziesz musiał ręcznie odtworzyć położenia wszystkich uchwytów kon­trolnych.

Edycja kolorów gradientu XE "wypełnienia:edycja kolorów gradientu"

Gdy przejrzysz wszystkie predefiniowane kombinacje kolorów gradientów, zauwa­żysz, że niektóre z nich składają się jedynie z dwóch, a inne aż z sześciu różnych ko­lo­rów. Aby zobaczyć, jak zbudowana jest kombinacja kolorów gradientu, wybierz z rozwijanego menu palety Fill polecenie Edit Gradient. Wywoływane okno dialogowe Edit Gradient (rysunek 11.9) jest podzielone na trzy główne obszary: spektrum kolorów, próbki ko­lorów i panel podglądu. Okna wywoływane w Fireworks można ukryć, klikając w dowolnym miejscu poza ich obszarem.

Rysunek 11.9. Za pomocą wywoływanego okna dialogowego Edit Gradient możesz modyfikować kolory używane w gradiencie

Color ramp — Spektrum kolorów

Color wells — Próbki kolorów

Preview — Podgląd

Okno dialogowe Edit Gradient jest teraz oknem wywoływanym, co ułatwia dostęp do niego.

W spektrum kolorów przedstawione są przejścia pomiędzy kluczowymi kolorami gra­dien­tu, które wyświetlane są w próbkach znajdujących się poniżej spektrum kolorów. W pa­nelu podglądu można zobaczyć, jak wybrana kombinacja kolorów będzie wy­glą­da­ła po zastosowaniu do aktywnego wzoru gradientu. W oknie Edit Gradient możesz mo­­dy­fi­kować zarówno predefiniowane gradienty, jak i te tworzone za pomocą kolorów ob­rysu i wypełnienia.

Aby edytować gradient:

189. Wybierz z menu polecenie WindowFill lub użyj skrótu klawiaturowego Shift+F7, aby wyświetlić paletę Fill.

190. Z rozwijanego menu palety Fill wybierz polecenie Edit Gradient. Zostanie ot­war­te okno dialogowe Edit Gradient.

191. Aby zmienić przejście pomiędzy kolorami, przeciągnij próbki kolorów w nowe miej­sca. Każda próbka koloru może być przeciągana nawet na drugą stronę in­nej próbki.

192. Aby usunąć dowolny kolor z gradientu, przeciągnij reprezentującą go próbkę po­za obszar okna dialogowego Edit Gradient.

193. Aby dodać nowy kolor, kliknij w dowolnym miejscu poniżej spektrum ko­lo­rów. Nowy kolor zostanie wyświetlony bezpośrednio nad spektrum kolorów.

	Zauważysz mały znak plus, dodany do kursora w miejscu, w którym kliknięcie spowoduje dodanie koloru.

194. Aby zmienić kolor, kliknij reprezentującą go próbkę. Zostanie wy­świe­tlony standardowy próbnik kolorów. Wybierz dowolną z dostępnych pró­bek lub narzędzie Eyedropper, aby pobrać kolor znajdujący się na ekranie, na przy­kład ten reprezentowany przez inną próbkę koloru. Za pomocą przycisku Palette, znajdującego się w rozwijanym próbniku kolorów, można otworzyć sys­temową paletę kolorów.

195. Po zakończeniu edycji kliknij przycisk OK.

Teoretycznie nie ma ograniczeń liczby kolorów, jakie możesz dodać do edytowanego gra­dientu, ale dodanie więcej niż dwudziestu kolorów jest mało praktyczne. Przy tak du­żej liczbie kolorów, reprezentujące je próbki zaczynają nakładać się na siebie i coraz trud­niejsze staje się wybranie określonego koloru do edycji.

Zapisywanie i zmienianie nazw

Po zmodyfikowaniu istniejącego gradientu powinieneś go zapisać, aby móc wyko­rzys­ty­wać go w przyszłości. Fireworks oferuje dwie metody zachowywania zmodyfiko­wa­nych gradientów:

• Wykorzystanie polecenia Save Gradient z rozwijanego menu palety Fill do za­pi­sania kombinacji kolorów gradientu w bieżącym dokumencie.

• Utworzenie nowego stylu i zapisanie go jako typ Fill.

Polecenia palety Fill

W palecie Fill XE "paleta:Fill" znajduje się kilka poleceń pozwalających zarządzać gradientami:

• Save Gradient As (Zapisz gradient jako). Zapisuje gradient pod nową nazwą w bieżącym dokumencie.

• Edit Gradient (Edytuj gradient). Otwiera okno dialogowe Edit Gradient.

• Rename Gradient (Zmień nazwę gradientu). Zmienia nazwę bieżącego gra­dientu.

• Delete Gradient (Usuń gradient). Usuwa bieżący gradient (standardowy lub włas­ny) z palety Gradient.

Zapisywanie zmodyfikowanych gradientów

Aby zapisać zmodyfikowany gradient:

196. Z rozwijanego menu palety Fill wybierz polecenie Save Gradient As. Zostanie ot­warte okno dialogowe Save Gradient As.

197. Wpisz nową nazwę gradientu. Jeśli wpiszesz taką, która jest już używana, Fire­works zapyta Cię, czy chcesz zastąpić istniejący gradient.

198. Po wpisaniu nazwy gradientu kliknij przycisk Save. Nowy gradient zostanie wy­świetlony w rozwijanej liście Preset w porządku alfabetycznym.

Wykorzystywanie gradientów w innych dokumentach

Musisz pamiętać, że każdy nowy lub zmodyfikowany gradient może być zapisany tylko w bieżącym dokumencie. Aby wykorzystać gradient w innym dokumencie:

199. Otwórz dokument zawierający gradient, którym chcesz się posłużyć.

200. Zaznacz obiekt wykorzystujący żądany gradient.

201. Otwórz dokument, w którym zastosujesz nowy gradient.

137. Skopiuj zaznaczony obiekt do nowego dokumentu za pomocą poleceń EditCopy i EditPaste lub przeciągnij go z jednego dokumentu do drugiego. W chwili umie­szczenia obiektu w nowym dokumencie, w palecie Fill pojawią się usta­wie­nia nowego gradientu.

138. Jeśli chcesz, możesz teraz usunąć skopiowany wcześniej obiekt z nowego do­kumentu.

Istnieje jeszcze kilka innych sposobów przenoszenia gradientów pomiędzy dokumentami:

• Możesz wykorzystać polecenie InsertImage do wstawienia dokumentu, za­wie­rającego jeden lub więcej własnych gradientów. Po kliknięciu i umie­szcze­niu dokumentu, wybierz polecenie Undo. Wstawiona grafika zniknie z dokumentu, ale wszystkie znajdujące się w niej własne gradienty zostaną dołączone do pa­le­ty Gradient.

• Skopiuj obiekt wektorowy wypełniony własnym gradientem do schowka, następnie zaznacz obiekt wektorowy w innym dokumencie i zastosuj do niego wypełnienie gradientowe pierwszego obiektu za pomocą polecenia EditPaste Attributes.

Wykorzystanie stylów

Najlepszym sposobem na zapewnienie dostępności własnych gradientów jest praw­do­po­dobnie zapisywanie ich w postaci stylu w palecie Styles. Aby utworzyć nowy styl uży­wający własnego gradientu:

202. Zaznacz obiekt wypełniony własnym gradientem.

203. Wybierz z menu polecenie WindowStyles lub użyj skrótu klawiaturowego Shift+F11, aby wyświetlić paletę Styles. Jeśli paleta Styles jest już wyświetlana na ekranie w grupie innych palet, kliknij jej zakładkę.

204. Kliknij przycisk New Style (Nowy styl) znajdujący się w palecie Styles.

205. W oknie dialogowym Edit Style, w polu tekstowym Name wpisz opisową naz­wę swojego gradientu i usuń zaznaczenia wszystkich pól wyboru oprócz pola Fill Type.

206. Kliknij przycisk OK. W palecie Style pojawi się nowy styl.

Wszystkie utworzone w ten sposób style będą zawsze dostępne w dowolnym doku­men­cie Fireworks. Aby zastosować gradient, zaznacz dowolny obiekt znajdujący się w do­ku­mencie i wybierz styl z palety Styles. Gradient zostanie wówczas dodany również do palety Fill.

	Więcej informacji o wykorzystaniu stylów znajdziesz w rozdziale 16.

Technika Fireworks: tworzenie przezroczystych gradientów XE "wypełnienia:tworzenie przezroczystych gradientów"

Dla każdej próbki koloru gradientu możesz wybrać dowolny kolor dostępny w spek­trum, ale nie możesz zdefiniować braku koloru. Innymi słowy - nie ma sposobu na ut­wo­rzenie przezroczystego gradientu za pomocą okna dialogowego Edit Gradient. Ist­nie­je jednak prosta i elastyczna metoda pozwalająca na tworzenie efektu zanikających obiek­tów (wektorowych i bitmapowych).

Prawie wszystkie efekty przezroczystości tworzone są w Fireworks z wykorzystaniem funk­cji Mask Group (Grupa maski). Przezroczyste gradienty nie są tu żad­nym wyjątkiem. Grupa maskująca łączy obiekty w ten sposób, że górny obiekt jest używany jako maska alfa. Tam gdzie maska jest czarna, obiekty znajdujące się pod spodem są przezroczyste, a tam gdzie jest biała - są nie­przez­roczyste. Odcienie szarości są półprzezroczyste. Pomiędzy kolorami gradientu tworzone są stopniowe przejścia, więc przej­ście pomiędzy przezroczystością i kryciem także będzie bardzo płynne.

Aby utworzyć przezroczysty gradient:

207. Utwórz lub wstaw obiekt albo obrazek, który ma być częściowo prze­zroczysty.

208. Narysuj obiekt maskujący, który całkowicie obejmie oryginalny obiekt. Jeśli chcesz maskować obiekt wektorowy, możesz skopiować oryginalny obiekt.

209. Otwórz paletę Fill.

210. Zaznacz obiekt maskujący i wybierz wzór gradientu jego wypełnienia, na przy­kład Linear lub Radial.

211. Z rozwijanej listy Preset wybierz pozycję Black, White (Czarny, Biały).

212. Jeżeli to konieczne, zmień położenie obiektu maskującego względem ory­gi­nal­ne­go tak, aby obiekt maskujący znajdował się nad obiektem oryginalnym.

213. Zaznacz oba obiekty za pomocą zaznaczenia prostokątnego narysowanego na­rzę­dziem Pointer.

214. Wybierz z menu polecenie ModifyMaskGroup as Mask.

Jak możesz zobaczyć na rysunku 11.10, gdy połączyłem dwa obiekty znajdujące się w gór­nej części ilustracji, powstała grupa maskująca, przez której przezroczyste obszary wi­dać tło dokumentu.

Rysunek 11.10. Obiekt z wypełnieniem gradientowym został połączony z innym obiektem w grupę maskującą, co pozwoliło otrzymać przezroczystość

Object — Obiekt

Gradient — Gradient

Mask group with gradient as mask — Grupa maskująca wykorzystująca gradient jako maskę przezroczystości

Właściwie widać przez nią nawet zbyt dużo tła. Często muszę do­sto­sowywać stan­dar­dowy czarno-biały gradient, aby było w nim więcej czerni niż bieli. Wy­bieram wówczas polecenie Edit Gradient z rozwijanego menu palety Fill i prze­su­wam czarną próbkę koloru tak, aby znajdowała się bliżej białej próbki. Aby w ten spo­sób zmo­dy­fikować gradient, naj­le­piej jest najpierw zaznaczyć grupę maskującą, a na­stęp­nie wy­brać na­rzę­dzie Paint Buc­ket, aby wyświetlić uchwyty kontrolne gradientu. Po uaktyw­nie­niu tych kontrolek, mo­żesz bezpośrednio edytować gradient. W przeciwnym przypadku musiał­byś najpierw roz­gru­po­wać grupę maskującą i dopiero wówczas zmodyfikować gradient.

Desenie XE "wypełnienia:desenie"

Najprościej mówiąc, Pattern XE "wypełnienia:Pattern" (Desenie) do wypełnienia obiektu używają serii powta­rza­jących się obrazków. Desenie są często wykorzystywane do tworzenia wypełnień imi­tujących rzeczywiste powierzchnie, takie jak tkanina lub woda. Do modyfikowania wyglądu grafiki używane są również bardziej ab­strak­cyjne desenie. Fireworks za­wiera szereg standardowych deseni, a jeszcze więcej znajduje się w ka­talogu Goodies/Patterns na płycie instalacyjnej programu. Jako deseni możesz uży­wać także własnych obrazków.

	Wbudowane desenie Fireworks możesz zobaczyć w kolorowej wkładce.

Wypełnienia Pattern to jedna z głównych kategorii, jakie możesz znaleźć w palecie Fill. Po jej wybraniu, wyświetlana jest dodatkowo rozwijana lista Pattern name, zawierająca wszy­stkie dostępne typy deseni. Podczas przechodzenia pomiędzy jej poszczególnymi pozycjami, obok nazwy desenia wyświetlany jest jego miniaturowy podgląd (rysunek 11.11).

Rysunek 11.11. Z rozwijanej listy Pattern name możesz wybrać żądane wypełnienie z deseniem

Aby obrazek mógł zostać wykorzystany jako deseń Fireworks wystarczy, że będzie on za­pisany w formacie PNG. Jednak nie wszystkie obrazki są odpowiednie do wyko­rzys­ty­wania ich jako desenie. Najlepsze są te, które zawierają jednolity, powtarzający się wzór bez zauważalnych krawędzi. W kolorowej wkładce możesz zobaczyć, że wszys­tkie standardowe desenie Fireworks spełniają te wymagania.

Jak każde inne wypełnienie, wypełnienie Pattern może być stosowane do obiektów o dowolnych kształtach. Dla deseni dostępne są również dodatkowe opcje wypełnienia - krawędzie i tekstury.

Dodawanie nowych deseni

Istnieją dwa sposoby dodawania deseni do listy opcji Pattern name tak, aby były one do­stęp­ne w dowolnym momencie pracy w Fireworks:

• Zapisz lub wyeksportuj plik w formacie PNG do katalogu programu Fireworks Configuration/Patterns.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

• W oknie dialogowym Preferences przydziel programowi dodatkowy katalog z de­seniami.

Aby zapisać dowolny plik jako deseń, wystarczy zachować go w źródłowym formacie Fire­works - PNG. Obrazki używane jako desenie są przeważnie pełnokolorowe (pod­czas gdy tekstury są wyświetlane w skali szarości), ale nie jest to żelazna reguła. Nie jest to wymóg konieczny, ale desenie mają przeważnie wymiary 128×128 pikseli. Jeden z tych, który możesz znaleźć na płycie Fireworks - Light Panel - ma inne wy­miary: 12 pikseli szerokości i 334 piksele wysokości.

Po zapisaniu pliku w katalogu deseni i ponownym uruchomieniu Fireworks, nowy de­seń zostanie wyświetlony w palecie Fill. Jak widać na rysunku 11.12, własne desenie po­siadają nawet możliwość podglądu.

Rysunek 11.12. Po zapisaniu pliku w katalogu Configuration /Patterns i ponownym uruchomieniu programu, w palecie Fill wyświetlany jest mój nowy deseń - Tapeworm (Tasiemiec)

Dobrym sposobem na jednoczesne dodanie całej grupy folderów oraz współ­użyt­ko­wa­nie zasobów w środowisku sieciowym jest przydzielenie Fireworks zewnętrznego kata­lo­gu z deseniami. Aby to zrobić:

215. Wybierz z menu polecenie EditPreferences. Zostanie otwarte okno dialo­go­we Preferences.

216. Kliknij zakładkę Folders (lub wybierz pozycję Folders z listy opcji w MacOS).

217. W części Additional Materials, kliknij znajdujący się obok opcji Patterns przy­cisk Browse. Zostanie otwarte okno dialogowe, w którym będziesz mógł wska­zać katalog z deseniami.

218. Odszukaj zewnętrzny katalog zawierający pliki w formacie PNG, które chcesz wy­korzystać jako desenie. Zaznacz katalog i kliknij przycisk OK. W oknie dia­lo­gowym Preferences zostanie zaznaczone pole wyboru Patterns.

219. Kliknij OK, aby zaakceptować zmiany i zamknąć okno preferencji.

220. Aby można było używać dodatkowych deseni, musisz ponownie uruchomić Fire­works.

Chcesz mieć szybki dostęp do deseni znajdujących się na płycie Fireworks? Przydziel zew­nęt­rzny katalog z deseniami do katalogu Goodies/Patterns i uruchom ponownie Fireworks. Jeśli po uruchomieniu programu w napędzie CD-ROM znajduje się płyta Fireworks, do palety Fill zostanie dodany nowy zestaw deseni. Gdy Fireworks za­koń­czy ich ładowanie, możesz wyjąć płytę z napędu, a desenie nadal bę­dą dostępne. Jeżeli w stacji CD-ROM nie będzie płyty, Fireworks zo­sta­nie uruchomiony normalnie, ale do palety Fill nie zostaną dołą­czo­ne dodatkowe desenie.

Dodawanie deseni do dokumentów

Dołączenie często wykorzystywanych deseni do domyślnej listy wypełnień Fireworks to doskonała możliwość, ale co zrobić, gdy chcesz wykorzystać jakiś plik graficzny szybko i bez konieczności prze­no­sze­nia do listy deseni? A co, jeśli chcesz go użyć tylko w jednym dokumencie? Fireworks umożliwia bardzo elastyczną pracę z deseniami, poz­walającą na umieszczanie ich w wybranych dokumentach.

Aby wykorzystać zewnętrzny plik PNG jako deseń w bieżącym dokumencie:

221. Zaznacz obiekt, który chcesz wypełnić deseniem.

222. Wybierz z menu polecenie WindowFill, aby otworzyć paletę Fill lub kliknij jej za­kładkę, jeśli jest widoczna na ekranie.

223. Wybierz pozycję Pattern z rozwijanej listy kategorii w palecie Fill.

224. Z listy Pattern name wybierz pozycję Other (Inny), aby otworzyć okno dialogowe Lo­cate File.

225. Odszukaj plik, który chcesz wykorzystać jako deseń i zaznacz go. Kliknij przy­cisk OK.

Fireworks doda nowy deseń do listy Pattern name i zastosuje go do zaznaczonego obiektu. De­seń będzie dostępny w liście wypełnień tylko w obrębie bieżącego dokumentu. Po za­pisaniu tego dokumentu, deseń zostanie zachowany wraz z nim.

	Fakt, że desenie są zapisywane wraz z dokumentami, czyni je prze­noś­nymi. Jeśli współpracujesz z kimś, kto pracuje w zupełnie in­nym miejscu, dodanie własnego desenia do dokumentu automa­tycz­nie czyni go dostępnym dla wszystkich współpracowników, gdy tylko otrzy­ma­ją Twój dokument.

Modyfikowanie deseni

Desenie mogą być modyfikowane w taki sam sposób, w jaki dostosowywałeś gradienty. Gdy po zastosowaniu desenia do obiektu wybierzesz narzędzie Paint Bucket, wy­świe­tlo­ne zostaną uchwyty kontrolne wypełnienia (rysunek 11.13). Dostępne są te same kon­trolki, których używałeś przy gradientach:

Rysunek 11.13. Oba prostokąty zostały wypełnione standardowym deseniem Illusion2, a następnie uchwyty kontrolne dolnego prostokąta zostały obrócone, aby zmodyfikować kierunek desenia

• Zmodyfikuj położenie środka wypełnienia deseniem poprzez przeciągnięcie okrą­głego punktu początkowego.

• Aby obrócić deseń, umieść kursor nad jedną z linii łączących uchwyty kon­trol­ne. Gdy kursor zostanie zamieniony na kursor narzędzia Rotate (Obróć), przeciągnij go, aby zmienić kąt obrotu desenia.

• Zmień rozmiar desenia, przeciągając po linii prostej w nowe położenie jeden z je­go kwadratowych uchwytów kontrolnych.

• Aby zmienić pochylenie desenia, przeciągnij w pożądanym kierunku jeden z je­go kwadratowych uchwytów kontrolnych.

W odróżnieniu od gradientów, desenie posiadają dwa uchwyty kontrolne oprócz punktu po­czątkowego wypełnienia. Uchwyty te są zawsze położone prostopadle względem sie­bie i zachowują proporcje pomiędzy wysokością i szerokością.

	Podczas obracania obiektu, wypełnienie deseniem lub gradientem po­zostaje stabilne. Aby zmienić kąt obrotu wypełnienia, musisz wy­ko­rzys­tać uchwyty kontrolne desenia lub gradientu.

Technika Fireworks:
tworzenie bezspoinowych deseni XE "wypełnienia:tworzenie bezspoinowych deseni"

Największym problemem przy tworzeniu nowych deseni jest zapewnienie tego, żeby wy­glądały one na bezspoinowe. Gdy Fireworks próbuje wypełnić obiekt o rozmiarach więk­szych niż te, które ma plik z deseniem, program mu­si wielokrotnie wykorzystać w nim ten sam obrazek, aby kompletnie wypełnić obiekt. Jeśli obiekt będzie posiadał choćby cien­kie obramowanie, wyraźnie będzie widać powtarzający się deseń. W większości przy­padków jest to efekt niepożądany. Istnieje kilka metod likwidacji widocznych miejsc łączenia deseni.

Pierwsza i najprostsza metoda polega na umieszczaniu elementów graficznych z dala od krawędzi desenia. Pozwala to na tworzenie gładkich przejść pomiędzy poszcze­gól­ny­mi kopiami desenia umieszczanymi nad kolorem tła. Do utworzenia de­se­nia bez wi­docznych „szwów” można wykorzystać na przykład obrazek pokazany na rysunku 11.14.

Rysunek 11.14. Obrazek posiadający wokół wszystkich zewnętrznych krawędzi obszary o takim samym kolorze może być wykorzystany do utworzenia desenia, gdyż obszary te będą łączone ze sobą w sposób niezauważalny

Większość obrazków tworzona jest w ten sposób, by można było nimi wypełnić cały ob­szar roboczy. Jednak żeby grafika taka mogła zostać przekształcona na deseń, trzeba wło­żyć trochę pracy w jej edycję i utworzyć niewidoczne krawędzie. Na szczęście Fire­works zawiera wystarczającą ilość narzędzi służących do edycji grafiki bitmapowej, aby moż­na było w nim wykonać wszystkie potrzebne czynności.

Deseń powstaje poprzez umieszczanie obok siebie poszczególnych obrazków. Aby usu­nąć wszystkie widoczne krawędzie, musisz stworzyć symulację ułożenia poszczególnych ele­men­tów desenia i tak połączyć obrazki, żeby nie było widać pomiędzy nimi żadnych kra­wędzi. Poniżej spisane są poszczególne etapy procedury, którą wykorzystuję do utwo­rzenia niewidocznych krawędzi deseni w Fireworks.

	W opisie tej techniki używam poleceń menu, takich jak EditCopy. Ty mo­żesz oczywiście używać ich skrótów klawiaturowych.

Zatem:

226. Otwórz obrazek, który chcesz przekształcić na deseń.

227. Zaznacz tę część obrazka, która ma zostać wykorzystana jako deseń.

Najczęściej jako desenie wykorzystywane są jedynie fragmenty skanowanych obraz­ków lub innych grafik. Przekonałem się, że najlepiej jest najpierw okre­ślić rozmiar tworzonego desenia (na przykład 128×128 pikseli) i do jego usta­wie­nia wykorzystać funkcję Fixed Size (Stała wielkość) narzędzia Marquee znaj­dującą się w palecie Options. Ułatwia to szybkie tworzenie zaznaczenia i prze­su­wanie go w nowe położenia.

228. Wybierz z menu polecenie EditCopy, aby skopiować zaznaczony obszar.

139. Wybierz z menu polecenie FileNew, aby utworzyć nowy dokument. Doku­ment powinien być co najmniej trzy razy większy niż zaznaczony obszar. Zaznaczony przeze mnie obszar jest kwadratem o boku 128 pikseli, więc minimalne rozmiary doku­men­tu to 384×384 piksele.

140. Wybierz z menu polecenie ViewGridEdit Grid i ustaw takie same roz­miary siatki, jakie ma Twój obrazek, a następnie włącz opcje Show Grid (Po­każ siatkę) i Snap to Grid (Przyciągaj do siatki).

141. Wybierz z menu polecenie EditPaste, aby wkleić skopiowany fragment obraz­ka w lewym górnym rogu dokumentu (rysunek 11.15).

142. Skopiuj obrazek, przeciągając go z wciśniętym klawiszem Alt (Option) i umieść ko­pię po prawej stronie oryginalnego obrazka.

143. Powtórz jeszcze dwa razy powyższą czynność, aby umieścić dwie następne kopie obraz­ka poniżej tych, które już znajdują się w dokumencie (rysunek 11.16).

144. Ukryj siatkę dokumentu (polecenie ViewGridShow Grid) i wyłącz opcję Snap to Grid (po­lecenie ViewGridSnap to Grid).

Rysunek 11.15. Po ustawieniu siatki ułatwiającej rozmieszczenie poszczególnych elementów desenia wklejony został pierwszy obrazek
Rysunek 11.16. Wszystkie cztery kopie zostały umieszczone na swoich miejscach. Wyraźnie widać ich krawędzie

145. Zaznacz wszystkie cztery kopie obrazka i wybierz z menu polecenie Modi­fyConvert to Bitmap. Jest to konieczne, gdyż cała technika opiera się na wyko­rzys­taniu narzędzia Rubber Stamp (Stempel), które pracuje jedynie z obiektami bit­mapowymi. Po zaznaczeniu wszystkich kopii, cztery oddzielne obiekty bit­ma­powe zostaną połączone w jeden obiekt.

146. Wybierz narzędzie Rubber Stamp z palety narzędziowej.

Następny krok jest najważniejszy w całej procedurze, dlatego też wymaga od­ro­biny finezji i „metody prób i błędów”. Możesz na tym etapie pracy zapisać do­kument, abyś w razie pomyłki nie musiał powtarzać całej procedury od po­czątku.

147. Najpierw zajmiemy się pionowymi łączeniami pomiędzy poszczególnymi ko­pia­mi desenia. Ustal źródło próbkowania narzędzia Rubber Stamp w miejscu po­ło­żonym w odległości kilku pikseli od boku jednej z kopii obrazka. Prze­ciąg­nij w poprzek pionowej krawędzi od lewej do prawej (lub od prawej do le­wej, w zależności od tego, po której stronie krawędzi zostało ustawione źródło prób­kowania), rozsze­rza­jąc w ten sposób bok jednego obrazka na bok innego obrazka.

Powtarzaj całą procedurę, aż dojdziesz do końca pionowej krawędzi obrazka. Cza­sami możesz zmieniać kierunek malowania i położenie źródła, aby mo­dy­fi­ko­wać rozmycie obrazka. Wciśnij klawisz Alt, aby ponownie ustawić źródło próbkowania na­rzędzia Rubber Stamp. Jeśli będzie to konieczne, możesz ustawić maksymalne rozmycie kra­wędzi stempla za pomocą opcji dostępnych w palecie Options.

148. Po rozmyciu pionowych krawędzi desenia, powtórz całą procedurę dla krawędzi po­zio­mych. Musisz zmienić jedynie kierunek malowania narzędziem Rub­ber Stamp.

Po zakończeniu rozmywania pionowych i poziomych krawędzi, powstałe w ten spo­sób obrazki powinny wyglądać jak jednolity deseń (rysunek 11.17). Przy­szedł czas na skopiowanie fragmentu obrazka, który zostanie wykorzystany do utworzenia desenia.

Rysunek 11.17. Po rozmyciu krawędzi trudno jest zauważyć, gdzie kończy się jeden obrazek i zaczyna inny

149. Wybierz z menu polecenie ViewGridEdit Grid i tak ustaw siatkę, aby była o połowę mniejsza niż poprzednio. Włącz opcje wyświetlania i przy­cią­gania do siatki. Wykorzystanie o połowę mniejszej siatki pomoże ustalić śro­dek obrazka. Moja oryginalna siatka miała wymiary 128×128 pikseli, więc no­wa będzie miała wymiary 64×64 piksele.

150. Wybierz narzędzie Marquee z palety narzędziowej. W palecie Options powinna być ustawiona dla tego narzędzia opcja Fixed Size, z poprzednio ustalonymi roz­miarami.

151. Za pomocą narzędzia Marquee zaznacz środkową część całego obrazka (rysunek 11.18). Zauważ, że widoczne na rysunku zaznaczenie obejmuje fragmenty wszys­tkich czterech obrazków, które wcześniej były oddzielnymi obiektami.

152. Wybierz z menu polecenie EditCopy, aby skopiować zaznaczenie.

153. Wybierz z menu polecenie FileNew, aby utworzyć nowy dokument. Fire­works automatycznie przyjmie takie rozmiary dokumentu, jakie ma grafika znaj­dująca się w schowku.

154. Wybierz z menu polecenie EditPaste, aby wkleić zaznaczony obszar. To, co zobaczysz na ekranie, jest Twoim gotowym deseniem (rysunek 11.19).

155. Wybierz z menu polecenie FileSave i zapisz obrazek w katalogu programu Fireworks Configuration/Patterns.

156. Ponownie uruchom Fireworks.

Rysunek 11.18. Wykorzystanie siatki dokumentu w połączeniu z opcją Fixed Size (Stała wielkość) narzędzia Marquee pozwala łatwo wyselekcjonować fragment grafiki zawierający części wszystkich czterech oryginalnych obrazków
Rysunek 11.19. Końcowy deseń używa środkowej części połączonych obrazków, więc przy powtarzaniu desenia ich krawędzie są niezauważalne
		Jeśli nie chcesz ponownie uruchamiać Fireworks, nie musisz tego ro­bić, ale żeby wykorzystać utworzony deseń, będziesz musiał wybrać z roz­wijanej listy Pattern name opcję Other (Inny).

157. Aby sprawdzić deseń, narysuj zamkniętą ścieżkę i wypełnij ją nowym de­se­niem.

158. Jeśli będzie to konieczne, otwórz plik z deseniem, aby usunąć wszystkie jesz­cze zauważalne krawędzie.

Istnieje wiele innych sposobów rozmywania krawędzi obrazków, ale w większości przy­padków wykorzystywane jest do tego narzędzie Rubber Stamp. Mimo że opa­no­wa­nie obsługi stempla i całej techniki wymaga nieco praktyki, końcowe rezultaty są tego warte.

	Więcej informacji o narzędziu Rubber Stamp i jego opcjach znajdziesz w rozdziale 6.

Dodawanie tekstur XE "wypełnienia:dodawanie tekstur" do wypełnień

Najczęściej wymienianą wadą grafiki komputerowej jest jej zbyt sztuczny wygląd. Jeśli ro­zejrzysz się wokół siebie zauważysz, że bardzo niewiele przedmiotów ma jed­no­ko­lo­ro­we i jednorodne powierzchnie. Większość z nich posiada jakieś tekstury. Fireworks poz­wa­la uzy­skać „rzeczywisty” wygląd obiektów poprzez łączenie dowolnych typów wy­peł­nień (lub obrysów) z teksturami. W Fireworks tekstura jest powtarzającym się obrazkiem, któ­ry może być nakładany na obiekty z różnym natężeniem, mierzonym w procentach.

Podobnie jak desenie, tekstury są obrazkami PNG przechowywanymi w określonym ka­ta­logu, które mogą być wielokrotnie powtarzane, aby wypełnić cały obiekt. Na tym jed­nak kończy się podobieństwo tych dwóch elementów. Podczas gdy zastosowanie de­senia usu­wa z obiektu wszystkie inne wypełnienia, tekstury są używane jako dodatek do wy­peł­nień. W rezultacie, są one oddzielnymi obiektami, które z różnym stopniem krycia są nakładane na obiekt oryginalny. Zwiększając natężenie tekstury za pomocą suwaka znaj­dującego się w palecie Fill, w rzeczywistości zwiększasz jej stopień krycia. Przy 100-procentowym natężeniu tekstura jest całkowicie nieprzezroczysta.

Kolejną różnicą pomiędzy deseniem a teksturą jest kolor. Desenie wykorzystują pełen ich zakres, natomiast tekstury są wyświetlane w skali szarości. Powodem takiego wyko­rzys­ty­wa­nia tekstur jest ich funkcjonalność. Gdyby tekstura zawierała jakiś kolor, po­wo­do­wa­ło­by to zmianę oryginalnych kolorów wypełnienia lub obrysu. Jedną z wad tekstur wy­świe­tla­nych w skali szarości jest fakt, że zastosowanie jej do kompletnie białego wypeł­nie­nia nie daje zupełnie żadnych rezultatów.

	Z reguły tekstury lepiej działają z ciemnymi kolorami, które zapew­nia­ją większy kontrast.

Fireworks oferuje szeroki wachlarz tekstur, a dodatkowe znajdują się na płycie instalacyjnej Fire­works. Podobnie jak w przypadku deseni, dla każdej tekstury wybranej z listy, która znaj­duje się w palecie Fill, wyświetlany jest miniaturowy podgląd. Obok rozwijanej listy Texture znajduje się suwak. Umożliwia on sterowanie natężeniem wybranej tekstury. Im wyższe natężenie, tym wyraźniejszy jest wpływ tekstury na wypełnienie (rysunek 11.20).

Rysunek 11.20. Zwiększenie natężenia tekstury w palecie Fill pozwala tworzyć wyraźniejsze tekstury wypełnień

0% texture — Natężenie tekstury 0%

40% texture — Natężenie tekstury 40%

80% texture — Natężenie tekstury 80%

Nakładanie tekstur na obrysy i obrazki Tekstury przydają się nie tylko do wypełnień. W równie łatwy sposób moż­na je stoso­wać do obrysów, a przy większym nakładzie pracy tak­że do obrazków. Niekiedy obrysy są używane do definiowania wypeł­nio­nych obiektów i wtedy nie powinno się rozsze­rzać tekstury na ob­rys obiektu. Jednak w niektórych obrazkach przynosi to wiele ko­rzyści. Za przykład niech nam posłuży poniższy rysunek. W górnej części ekra­nu utworzyłem prostą teksturę składającą się z linii i zasto­so­wa­łem ją do obrysu (aerograf o dużej średnicy). Taki sam zestaw tekstur jest dostępny zarówno w palecie Fill, jak i Stroke, więc można łatwo sko­piować ustawienia tekstury z jednej palety do drugiej. W środkowym przykładzie zasto­sowałem zatem tę samą teksturę do wypełnienia i obrysu obiek­tu. W dolnym przykładzie wprowadziłem kilka efektów. Linie teks­tury nadal są widoczne i łączą ze sobą obrys i wypełnienie obiektu. Zastosowanie tekstury do obrazka wymaga dodatkowych czynności. Ob­rysy i wy­pełnienia nie mogą być bezpośrednio stosowane do obraz­ków. Należy więc utworzyć obiekt wektorowy, który całkowicie przy­kry­je obrazek i zastosować do niego teksturę. Przejście pomiędzy obiektem wek­torowym a bitmapowym można utworzyć poprzez modyfikację stop­nia krycia obiektu wektorowego i trybu mieszania (kontrolki pozwalające modyfikować oba parametry możesz znaleźć w palecie Layers) lub poprzez wykorzystanie obiektu wektorowego jako maski obrazka. Jak w większości przypadków, eksperymentowanie z różnymi tech­nikami pozwoli Ci uzyskać różne interesujące rezultaty.

Istnieje jeszcze jedna właściwość tekstur - przezroczystość. Jeśli obiekt z teksturą znaj­du­je się nad innymi obiektami, włączenie opcji Transparent umożliwia wyświetlenie tych obszarów dolnych obiektów, które znajdują się pod jaśniejszymi fragmentami teks­tu­ry. Im wyższe natężenie tekstury, tym bardziej obiekty stają się przezroczyste.

Dodawanie nowych tekstur

Nowe tekstury dodaje się w dokładnie taki sam sposób, w jaki dodawałeś desenie:

• Zapisz lub wyeksportuj plik w formacie PNG do katalogu programu Fireworks Configuration/Textures.

• Przydziel za pomocą okna dialogowego Preferences dodatkowy katalog z teks­turami.

Jako tekstury najlepiej sprawdzają się pliki zawierające powtarzający się wzór bez wi­docz­nych krawędzi i, jak zostało wspomniane wcześniej, wyświetlane są w skali sza­roś­ci.

Konwersja kolorowych obrazków na skalę szarości

Mimo że nie musisz konwertować obrazków na skalę szarości przed zapisywaniem ich ja­ko tekstury (Fireworks i tak wyświetla je w skali szarości), konwersja taka pozwoli Ci zo­baczyć, jak tekstura będzie wyglądała w rzeczywistości i umożliwi Ci dostosowanie jej jasność i kontrast.

Aby przekształcić kolorowy obiekt wektorowy lub bitmapowy na skalę szarości za po­mo­cą polecenia Convert to Grayscale:

229. Zaznacz obiekt, który chcesz przekształcić.

230. Wybierz z menu polecenie CommandsCreativeConvert to Grayscale, a Fire­works przekształci obiekt na skalę szarości.

Przydzielanie dodatkowego katalogu z teksturami

Jeśli masz cały zestaw tekstur i chciałbyś je wszystkie dodać jednocześnie do Fire­works, możesz przydzielić do programu dodatkowy katalog tekstur. Aby przydzielić do Fire­works dodatkowy katalog z teksturami:

231. Wybierz z menu polecenie FilePreferences. Zostanie otwarte okno dialo­go­we Preferences.

232. Kliknij zakładkę Folders (w MacOS wybierz opcję Folders z rozwijanej listy).

233. W części Additional Materials, kliknij znajdujący się obok opcji Textures przy­cisk Browse, a zostanie otwarte nawigacyjne okno dialogowe.

234. Odszukaj zewnętrzny katalog zawierający pliki PNG, które chcesz wyko­rzys­ty­wać jako tekstury. Zaznacz ten katalog i kliknij przycisk OK. W oknie Pre­fren­ces zostanie zaznaczone pole wyboru Textures.

235. Kliknij OK, aby zaakceptować zmiany i zamknij okno preferencji.

236. Aby móc korzystać z dodatkowych tekstur, musisz ponownie uruchomić Fire­works.

	Masz wciąż za mało tekstur? Dodatkowe znaj­dziesz w katalogu Textures na płycie CD-ROM dołączonej do tej książ­ki.

Dodawanie tekstur do dokumentu

Podobnie jak desenie, tekstury mogą być pojedynczo otwierane i wykorzystywane w bie­żącym dokumencie. Funkcja ta daje łatwy dostęp do plików tekstur, znajdujących w Twoim komputerze. Otwierane w ten sposób tekstury są zapisywane wraz z bieżącym do­kumentem.

Aby wykorzystać zewnętrzny plik PNG jako teksturę w bieżącym dokumencie:

237. Wybierz z menu polecenie WindowFill, aby wyświetlić paletę Fill, lub kliknij jej zakładkę, jeśli znajduje się na ekranie.

238. Wybierz wypełnienie Solid, Pattern lub dowolny gradient z rozwijanej listy ka­te­gorii w palecie Fill, aby wyświetlić listę Texture name.

239. Z rozwijanej listy Texture name wybierz pozycję Other, aby otworzyć okno dia­logowe Open.

240. Odszukaj i zaznacz plik PNG, który chcesz wykorzystać jako teksturę. Obrazek mo­że być kolorowy lub utrzymany w skali szarości, ale tekstura i tak będzie zaw­sze wyświetlana w skali szarości. Kliknij przycisk OK.

Fireworks doda nową teksturę do rozwijanej listy Texture.

Tworzenie wypełnień
za pomocą narzędzia Paint Bucket XE "wypełnienia:Paint Bucket"

Narzędzie Paint Bucket (Wiadro z farbą) jest używane do tworzenia wypełnień zazna­czo­nych obszarów z wykorzystaniem bieżących ustawień palety Fill (obojętnie, czy do­ty­czą one jednolitego koloru, gradientu czy też desenia). Wiadro z farbą może być uży­wa­ne do wypełniania zarówno obiektów wektorowych, jak i bitmapowych. W obu przy­pad­kach zachowuje się jednak trochę inaczej. Obiekty wektorowe są wypełniane cał­ko­wi­cie, zaś w obiektach bitmapowych wypełniane są jedynie zaznaczone obszary lub, jeśli nie zostanie zaznaczony żaden obszar, sąsiadujące ze sobą obszary o podobnych kolorach (rysunek 11.21).

Rysunek 11.21. Znajdujący się w dolnym lewym rogu obiekt wektorowy został całkowicie wypełniony narzędziem Paint Bucket. Zastosowanie tego samego wypełnienia do obrazka bitmapowego znajdującego się w prawym dolnym rogu ilustracji spowodowało wypełnienie jedynie pikseli o podobnych kolorach do znajdujących się poniżej kursora

Pre-Bucket — Przed wypełnieniem

Path objects — Obiekty wektorowe

Image objects — Obiekty bitmapowe

Cursor point — Punkt kursora

Post-Bucket — Po wypełnieniu

Wypełnianie obiektów wektorowych za pomocą wiadra z farbą jest bardzo proste. Wy­star­czy, że wybierzesz narzędzie Paint Bucket z palety narzędziowej (lub wciśniesz skrót klawiaturowy K) i klikniesz obiekt, aby zastosować do niego wypełnienie o usta­wie­niach zdefiniowanych w palecie Fill. Jeżeli w palecie Fill wybrana jest kategoria No­ne (Brak), do obiektu zastosowywane jest wypełnienie Solid z bieżącym kolorem (widocz­nym w palecie narzędziowej i mikserze kolorów).

	Fireworks podczas pracy z narzędziem Paint Bucket nie odróżnia ście­żek zamkniętych od otwartych. Jeżeli użyjesz wiadra z farbą do ot­war­tej ścieżki, program narysuje niewidoczną linię łączącą punkt począ­tko­wy z końcowym i dopiero wówczas wypełni tak powstałą ścieżkę.

Stosowanie narzędzia Paint Bucket do obiektów bitmapowych to zupełnie inna historia. Je­żeli klikniesz tym narzędziem obiekt bitmapowy, w którym nie zaznaczyłeś uprzed­nio żadnych obszarów za pomocą któregoś z narzędzi selekcji (Marquee, Ellipse Marquee, Lasso, Polygon Lasso lub Magic Wand), stanie się jedna z trzech rze­czy:

• Bieżące ustawienia wypełnienia zostaną zastosowane do wybranego piksela i wszy­s­tkich sąsiadujących z nim pikseli, które mieszczą się w zakresie to­le­ran­cji zdefiniowanym za pomocą opcji Tolerance w palecie Options.

• Jeśli w palecie Options zaznaczona będzie opcja Fill Selection Only (Wypełnij tyl­ko zaznaczenie) i w oknie preferencji wyłączona będzie opcja Expand to Fill Do­cument, bieżące ustawienia wypełnienia zostaną zastosowane do całego obiektu bitmapowego.

• Jeśli w palecie Options zaznaczona będzie opcja Fill Selection Only (Wypełnij tyl­ko zaznaczenie) i w oknie preferencji włączona będzie opcja Expand to Fill Do­cument, bieżące ustawienia wypełnienia zostaną zastosowane do całego do­ku­mentu.

Jak widzisz, przy stosowaniu narzędzia Paint Bucket do wypełniania obiektów bit­ma­po­wych bardzo ważna staje się paleta Options (rysunek 11.22).

Rysunek 11.22. Opcje znajdujące się w palecie Options dla narzędzia Paint Bucket mają duży wpływ na sposób wypełniania obiektów bitmapowych

Opcje dostępne w palecie Options to:

• Mouse Highlight (Wyróżnienie). Wyróżnia obszary, które są zazna­cza­ne, gdy znajduje się nad nimi kursor.

• Fill Selection Only (Wypełnij tylko zaznaczenie). Ignoruje ustawienia to­le­rancji kolorów i wypełnia zaznaczony obszar lub - jeśli żaden obszar nie jest zaznaczony - cały obiekt bitmapowy czy dokument, w zależności od ustawienia opcji Expand to Fill Document.

• Preserve Transparency (Zachowaj przezroczystość). Wypełnia kolorem tylko ist­niejące piksele, więc przezroczyste piksele nadal pozostają przezroczyste.

• Tolerance (Tolerancja). Określa zakres kolorów, które będą wypełniane przy wy­łączonej opcji Fill Selection Only. Za pomocą suwaka Tolerance można usta­wiać wartości z zakresu od 0 (nie są wypełniane żadne dodatkowe kolory) do 255 (wypełniane są wszystkie dodatkowe kolory).

• Edge (Krawędzie). Definiuje typ krawędzi wypełnienia: Hard (Ostre), Anti-Alias (Wygładzane) lub Feather (Rozmyte). Po wybraniu opcji Feather aktyw­ny staje się suwak Amount of Feather, umożliwiający ustawienie stopnia roz­my­cia krawędzi wypełnienia.

	Po zaznaczeniu obszaru w obiekcie bitmapowym, nie musisz kliknąć do­kład­­nie w tym obszarze, aby go wypełnić. Kliknięcie w dowol­nym miejscu dokumentu spowoduje automatyczne wypełnienie wyse­lek­cjonowanych obszarów.

Podsumowanie

Wypełnienia są jednym z podstawowych elementów grafiki Fireworks. Bez nich obiek­ty posiadają jedynie kontury i bardzo trudne jest wówczas rozmieszczanie jednych obiek­tów nad innymi. Rozpoczynając pracę z wypełnieniami, musisz pamiętać o na­stę­pujących rzeczach:

• Wypełnienia mogą być stosowane do wszystkich obiektów Fireworks: wek­to­ro­wych i bitmapowych.

• Wszystkie ustawienia wypełnień można definiować z poziomu palety Fill. Prób­kę koloru wypełnienia można znaleźć również w palecie narzędziowej i w pa­le­cie Color Mixer.

• Istnieje pięć kategorii wypełnień: None (Brak), Solid (Jednolite), Web Dither (Dithe­ring internetowy), Pattern (Deseń) i Gradient.

• Wypełnienie Web Dither miesza ze sobą dwa kolory bezpieczne dla Internetu, aby uzyskać trzeci kolor, który nie należy do palety bezpiecznej dla Internetu.

• Wypełnienia Pattern i Gradient można modyfikować poprzez zaznaczenie obie­k­tu, wybranie narzędzia Paint Bucket i dostosowanie uchwytów kon­trol­nych wypełnienia.

• Nowe kombinacje kolorów gradientów można zapisać wraz z bieżącym do­ku­men­tem lub jako styl Fireworks.

• Desenie można tworzyć z dowolnych powtarzających się obrazków zapisanych w for­macie PNG i zapisywać wraz z dokumentami Fireworks.

• Tekstury można wykorzystywać do nadawania rzeczywistego wyglądu „płas­kim” obiektom graficznym i zapisywać wraz z dokumentami Fireworks.

• Opcje narzędzia Paint Bucket pozwalają definiować, czy wypełniany będzie ca­ły obiekt bitmapowy, czy też jedynie wyselekcjonowany obszar.

W następnym rozdziale poznasz zabawne i efektowne oblicza Fireworks: Live Effects i Xtras.




Rozdział 12.
Live Effects i Xtras

W tym rozdziale:

• Podstawy efektów Fireworks.

• Wykorzystanie palety Effect.

• Praca z Live Effects.

• Technika Fireworks: Tworzenie perspektywicznych cieni.

• Zarządzanie Live Effects.

• Stosowanie Xtras.

• Wykorzystanie modułów dodatkowych zgodnych z Photoshopem

• Filtry innych firm.

Większość grafik Fireworks składa się z trzech różnych, ale uzupełniających się ele­men­tów: obrysów, wypełnień i efektów. Nie każdy wykorzystuje efekty (dające moż­li­wość szybkiego dodania cienia lub fazowania krawędzi do przycisku) równie często, co ob­rysy i wypełnienia, ale czyni tak większość projektantów grafiki dla Internetu. Efekty są bardzo bliskie istocie Internetu, gdyż pozwalają nadać witrynom WWW oryginalny wy­gląd, a ponadto zwiększają ich funkcjonalność, zwłaszcza przy tworzeniu ele­men­tów, takich jak przyciski reagujące na zdarzenia myszy.

Nowością w Fireworks są Live Effects („Żywe efekty”). Po raz pierwszy projektanci mo­gą edytować efekty bez konieczności budowania całej grafiki od początku. Ale tym, co czyni Live Effects Fireworks naprawdę „żywymi” jest zdolność ich automatycznego do­stosowywania się do każdej zmodyfikowanej grafiki obojętnie, czy obrazek zostanie znie­kształcony, przeskalowany lub zmieniony w każdy inny sposób. Fireworks umoż­li­wia także (jak wiele innych programów) wykorzystywanie standardowych filtrów zgod­nych z Photoshopem jako Live Effects, które mogą być stosowane, edytowane i usu­wa­ne w równie prosty sposób, co standardowe efekty fazowania i blasków Fireworks.

W późniejszych podrozdziałach dowiesz się, w jaki sposób i do których obiektów mo­żesz stosować rozszerzenia Fireworks - Xtras. Będziemy pracowali z Xtras dołą­cza­ny­mi do Fireworks i poznamy kilka technik umożliwiających kreatywną pracę z roz­sze­rze­nia­mi. Dowiesz się również, jak dodać do Fireworks więcej Xtras, włączając te, które być mo­że już wykorzystujesz w innych aplikacjach. W rozdziale tym przyjrzymy się dwóm bar­dzo popularnym pakietom filtrów bitmapowych: Eye Candy i Kai's Power Tools.

Efekty Fireworks

Podczas gdy w menu Xtras znajduje się lista wszystkich filtrów graficznych, któ­re można wykorzystywać w Fireworks, wiele z tych filtrów dostępnych jest także w swo­ich „żywych” wersjach w palecie Effect.

Filtry zgodne z Photoshopem mogą być w palecie Effect traktowane tak jak każdy inny Live Effect. W każdej chwi­li możesz zastosować taki filtr do obiektu wektorowego, usunąć go lub zmodyfi­ko­wać jego ustawienia.

Dostępne stały się nowe możliwości ekspery­men­to­wa­nia z tymi samymi filtrami graficznymi, których wcześniej używałeś przez lata pracy w Photoshopie. Możliwość zmiany kolejności stoso­wa­nia filtrów do grafiki bez konieczności zaczynania pracy od początku i łatwość za­pi­sy­wania ulubionych kombinacji filtrów są funkcjami, które naprawdę pozwalają na pusz­czenie wodzy fantazji. Możliwości łączenia, dopasowywania i eksperymentowania poz­walają tworzyć atrakcyjne kombinacje różnych filtrów graficznych.

Paleta Effect

Paleta Effect XE "paleta:Effect" (rysunek 12.1) jest wygodnym narzędziem zawierającym większość opcji do­tyczących efektów Fireworks, z wyjątkiem niektórych filtrów produkowanych przez in­ne firmy, jakie pozostają dostępne jedynie z poziomu menu Xtras. W palecie Effect znaj­dują się dwie listy opcji: lista Effect Category, zawierająca wszystkie dostępne Live Effects i lista Effect, zawierająca tylko te Live Effects, które zostały zastosowane do za­zna­czonego obiektu.

Lista Effect Category jest podzielona na pięć odrębnych części:

Rysunek 12.1. Paleta Effects z rozwijaną listą Effect Category jest centrum zarządzania prawie wszystkimi efektami dostępnymi w Fireworks

Effect Category option list —Rozwijana lista kategorii efektów

Your saved effects — Zachowane filtry

Included Eye Candy ... filters — Wbudowany pakiet filtrów graficznych Eye Candy 4000 LE

Included Live Effects — Wbudowane Live Effects („żywe” efekty )

Third-party ... filters — Filtry graficzne innych firm zgodne z Photoshopem

• None (Brak). Wybranie tej opcji powoduje usunięcie wszystkich efektów z za­znaczenia.

• Use Defaults (Użyj domyślnych). ładuje do listy efektów standardowe Live Effects: Inner Bevel (Faza wewnętrzna), Outer Bevel (Faza zewnętrzna), Drop Sha­dow (Cień zewnętrzny) i Glow (Blask). Zaznacz wybrany efekt, aby zasto­so­wać go do zaznaczenia.

• Zachowane kombinacje efektów. Ta sekcja palety nie jest wyświetlana, dopóki nie zapiszesz swojej pierwszej kombinacji efektów.

• Wbudowane Live Effects - fazowanie, rozmycie i blaski.

• Filtry graficzne zgodne z Photoshopem produkowane przez inne firmy.

Nie wszystkie filtry graficzne innych firm mogą być używane jako Live Effects. Takie fil­try nie są po prostu wyświetlane w liście Effect Category i są dostępne jedynie z po­zio­mu menu Xtras.

Stosowanie Live Effects XE "Live Effects:stosowanie"

Live Effects mogą być stosowane tylko do obiektów zaznaczonych w trybie edy­cji grafiki wektorowej. Gdybyś chciał użyć ich do selekcji bitmapowej, masz do wy­bo­ru dwie metody:

• Zaznacz obszar za pomocą jednego z narzędzi selekcji i skopiuj go do schow­ka. Wybierz Modify⇒Exit bitmap mode. Wklej zaznaczenie jako nowy obiekt bitmapowy. Zostanie on umieszczony do­kład­nie w takim samym położeniu, w jakim znajdowało się zaznaczenie. Zastosuj Live Effects do nowego obiektu bitmapowego. Jeśli chcesz, możesz następnie zgru­pować nowy obiekt bitmapowy z oryginalnym obiektem, z którego po­cho­dziło zaznaczenie.

• Niektóre Live Effects dostępne są również z poziomu menu Xtras i mogą być stam­tąd stosowane do zaznaczeń bitmapowych. Wówczas nie zostanie jednak za­cho­wana możliwość ich edycji.

Mimo że każdy z efektów posiada własne ustawienia, wszystkie z nich są przy­pi­sy­wa­ne w taki sam sposób:

159. Zaznacz obiekt lub obiekty. Fireworks umo­żliwia zastosowanie tego samego efektu do wielu obiektów jednocześnie.

	Jeśli znajdujesz się obecnie w trybie edycji grafiki bitmapowej, kliknij przycisk „STOP”, znajdujący się u dołu okna do­ku­mentu, aby przejść do trybu wektorowego.

160. Wybierz z menu polecenie WindowEffect, aby otworzyć paletę Effect. Mo­żesz również użyć skrótu klawiaturowego Alt+F7 (Option+F7) lub kliknąć zakładkę palety Effect, jeśli znajduje się ona na ekranie.

161. Wybierz efekt z rozwijanej listy Effect Category. Jeżeli efekt posiada edyto­wal­ne ustawienia (jak większość efektów), Fireworks wyświetli okno dialogowe (ry­sunek 12.2) o wyglądzie uzależnionym od typu efektu.

Rysunek 12.2. Paleta Effect oferuje wiele ustawień dotyczących stosowania, edytowania i usuwania efektów

Apply Effect checkbox — Pole wyboru włączające lub wyłączające efekt

Info button — Przycisk wywołujący okno dialogowe efektu

Pop-up menu — Menu rozwijane

Pop-up dialog box — Rozwijane okno dialogowe

Effects list — Lista efektów

Delete effect button — Przycisk usunięcia efektu

162. Zmień ustawienia w oknie dialogowym, aby osiągnąć pożądane rezultaty. Po za­kończeniu modyfikacji ustawień kliknij w dowolnym miejscu poza oknem dia­logowym lub wybierz przycisk OK w standardowym ok­nie dialogowym. Możesz również wcisnąć klawisz En­ter (Return).

Efekt zostanie zastosowany do wszystkich zaznaczonych obiektów.

Po zastosowaniu, efekt jest dodawany do listy znajdującej się w palecie Effect, zaś Fire­works utrzymuje możliwość jego dostosowania do wszystkich zmian, jakim może ule­gać obiekt. Po zmodyfikowaniu obiektu wektorowego, bitmapowego lub tekstowego, Fire­works przelicza wszystkie wymagane parametry i ponownie wprowadza efekt. Moż­liwość tworzenia całkowicie edytowalnych grafik wektorowych (rysunek 12.3), wy­glądających jak obiekty bitmapowe po zastosowaniu wielu modyfikacji filtrów gra­ficz­nych, jest znako­mitym uzupełnieniem warsztatu pracy każdego projektanta grafiki in­ter­netowej.

Rysunek 12.3. Zawsze edytowalne Live Effects pozwalają tworzyć obiekty wektorowe, które wyglądają jak bitmapy zmodyfikowane wieloma filtrami graficznymi
		W kolorowej wkładce znajdziesz barwną wersję powyższej ilustracji.

Aby edytować parametry zastosowanego efektu, zaznacz obiekt i kliknij przycisk Info, znaj­dujący się obok nazwy efektu w liście. Fireworks wyświetli okno dialogowe wy­bra­ne­go efektu. Zmień parametry i opuść okno dialogowe, wybierając znajdujący się w nim przy­cisk OK lub klikając w dowolnym miejscu po­za oknem dialogowym.

Efekty Fireworks pozwalają poprawić wygląd obiektów, ale niektóre z nich lepiej wy­glą­dają bez żadnych efektów. Aby usunąć efekty z obiektu, zaznacz go i wybierz pozycję No­ne (Brak) z rozwijanej listy Effect Category, znajdującej się w palecie Effect. Gdy chcesz jedynie tymczasowo wyłączyć pojedynczy efekt, usuń zaznaczenie z pola wy­bo­ru znajdującego się obok nazwy efektu w liście. Jeśli zamierzasz tymczasowo wyłączyć wszys­tkie efekty, wy­bierz polecenie All Off z rozwijanego menu palety Effect. Wybranie z tego samego menu polecenia All On spowoduje ponowne włączenie wszystkich efek­tów. Aby całkowicie usu­nąć pojedynczy efekt, zaznacz go w liście i kliknij przycisk De­le­te Effect (Usuń efekt), znaj­dujący się u dołu palety Effect i wyglądający jak tra­dy­cyj­ny kosz na śmieci.

Menu Xtras XE "menu:Xtras"

Wiele aplikacji służących do edycji grafiki bitmapowej posiada menu zawierające filtry gra­ficzne zgodne z Photoshopem. Fireworks nie jest tu żadnym wyjątkiem i oferuje me­nu Xtras (rysunek 12.4). Po uruchomieniu Fireworks, w menu Xtras znajdują się wszys­tkie dostępne dla programu filtry graficzne. Są to rozszerzenia zainstalowane w katalogu Firework Xtras lub w katalogu modułów dodatkowych Photoshopa zdefiniowanym w pre­­ferencjach Fireworks.

Rysunek 12.4. Menu Xtras zawiera wbudowane filtry graficzne Fireworks oraz, produkowane przez inne firmy, filtry zgodne z Photoshopem

Included Xtras — Wbudowane Extras

Repeat last Xtra — Powtórz ostatnio zastosowane Extra

Included Eye ... filters — Wbudowany pakiet filtrów graficznych Eye Candy 4000 LE

Third-party ... filters — Filtry graficzne innych firm zgodne z Photoshopem

Filtry graficzne nazywane są „filtrami”, ponieważ filtrują one każdy pik­sel obrazka i — w zależności od ustawień i typu zastosowanego efektu, mo­dyfikują go lub nie. W tym rozdziale będę wykorzystywał zamiennie ter­minów Xtra i filtr.

W dużym skrócie różnica pomiędzy efektami znajdującymi się w menu Xtras i tymi, któ­re można znaleźć w palecie Effect, polega na tym, że efekty z menu Xtras nie są „ży­we” i mogą być stosowane tylko do obiektów bitmapowych; zastosowanie Xtra do obiektu tekstowego lub wektorowego spowoduje przekształcenie go na obiekt bitmapowy. Nie ma innej możliwości cofnięcia tej operacji niż polecenie Undo lub wykorzystanie palety History.

Menu Xtras jest podzielone na trzy części:

• Pojedyncze polecenie identyfikujące i pozwalające powtórzyć ostatnio za­sto­so­wany filtr

• Wbudowane filtry graficzne Fireworks

	Jedyny wyjątek to filtr DitherBox, który jest wbudowany do Photo­sho­pa 5. Filtr ten może być dostępny w podmenu Other.

• Zgodne z Photoshopem filtry graficzne produkcji innych firm.

Filtry graficzne typu modułów dodatkowych są automatycznie grupowane w różnych podmenu, odpowiadających producentom tych modułów.

Wbudowane Live Effects XE "Live Effects:wbudowane efekty"

Razem z Fireworks instalowane są wbudowane Live Effects, pogrupowane w na­stę­pu­ją­cych podmenu listy Effect Category, znajdującej się w palecie Effect:

• Adjust Color XE "Live Effects:Adjust Color" (Dostosuj kolory) - Auto Levels (Auto-poziomy), Bright­ness/Con­trast (Jasność/Kontrast), Curves (Krzywe), Hue/Saturation (Barwa/Nasycenie), Invert (Odwróć), Levels (Poziomy)

• Bevel and Emboss XE "Live Effects:Bevel and Emboss" (Faza i płaskorzeźba) - Inner Bevel (Wewnętrzna faza), Inset Emboss (Płaskorzeźba), Outer Bevel (Zewnętrzna faza) i Raised Emboss (Wy­tłoczenie)

• Blur XE "Live Effects:Blur" (Rozmycie) - Blur (Rozmyj), Blur More (Rozmyj bardziej) i Gaussian Blur (Rozmyj gaussowsko)

• Other XE "Live Effects:Other" (Inne) - niesklasyfikowane efekty Convert to Alpha (Konwertuj na alfa) i Find Edges (Znajdź krawędzie)

• Shadow and Glow XE "Live Effects:Shadow and Glow" (Cień i blask) - Drop Shadow (Cień zewnętrzny), Glow (Blask), Inner Glow (Wewnętrzny blask), Inner Shadow (Cień wewnętrzny)

• Sharpen XE "Live Effects:Sharpen" (Wyostrzanie) - Sharpen (Wyostrz), Sharpen More (Wyostrz bar­dziej) i Unsharp Mask (Maska wyostrzająca)

W tabeli 12.1 znajdziesz zestawienie i opisy działania wszystkich Live Effects wbu­do­wa­nych w Fireworks.

	Więcej informacji o grupach maskujących znajdziesz w rozdziale 13.

Tabela 12.1.

Wbudowane Live Effects

Live Effect	Opis
Auto Levels	Automatycznie dostosowuje poziomy tonalne obrazka
Brightness/Contrast	Dostosowuje jasność i (lub) kontrast wszystkich pikseli obrazka
Curves	Pozwala dostosować poziomy wybranej barwy obrazka, nie zmieniając przy tym innych kolorów
Hue/Saturation	Dostosowuje kolory obrazka
Invert	Zmienia kolor każdego piksela na jego matematyczną odwrotność. Utworzony zostaje w ten sposób negatyw oryginalnego obrazka
Levels	Pozwala dostosować poziomy tonalne wszystkich pikseli obrazka
Inner Bevel	Fazuje wewnętrzne krawędzie obrazka, nadając mu w ten sposób trójwymiarowy wygląd
Inset Emboss	Symuluje wyrzeźbienie obiektu w jego tle
Outer Bevel	Otacza obiekt za pomocą trójwymiarowego, zaokrąglonego prostokąta
Raised Emboss	Symuluje wytłoczenie obiektu z jego tła
Blur	Rozmywa piksele, tworząc w ten sposób obiekt z nieostrymi krawędziami
Blur More	Działa tak samo jak Blur, ale używa większego promienia rozmycia
Gaussian Blur	Działa podobnie do Blur More, ale używa krzywej gaussowskiej i posiada okno dialogowe pozwalające zdefiniować promień rozmycia
Convert to Alpha	Konwertuje obrazek na skalę szarości. Przekonwertowany obrazek może być następnie wykorzystany jako maska alfa. Białe piksele obrazka uzyskują przezroczystość
Find Edges	Wykrywa kontury kształtów i konwertuje je na ciągłe linie
Drop Shadow	Tworzy cień obiektu, wyróżniając go w ten sposób z tła
Glow	Tworzy aureolę lub lekki blask wokół obiektu
Inner Glow	Tworzy blask wewnątrz obiektu
Inner Shadow	Tworzy cień wewnątrz obiektu
Sharpen	Wyostrza obrazek poprzez wyszukiwanie krawędzi i zwiększenie kontrastu pomiędzy sąsiednimi pikselami
Sharpen More	Działa tak samo jak Sharpen, ale używa większego promienia
Unsharp Mask	Działa tak samo jak Sharpen More, ale umożliwia określenie pikseli, które mają być wyostrzane (a które nie - „unsharp” - nieostre) za pomocą maski skali szarości obrazka

Dostosowywanie kolorów

Podmenu Adjust Color XE "Live Effects:Adjust Color" (znajdujące się w rozwijanej liście Effect Category) zawiera świe­tne narzędzia, pozwalające dostosowywać poziomy tonalne, korygować kolory oraz dodawać efekty specjalne do obiektów. Wcześniej były one dostępne tylko w swo­ich „destrukcyjnych” wersjach. Gdy dostosowałeś poziomy tonalne obrazka i stwier­dzi­łeś później, że jest on zbyt ciemny lub zbyt jasny, musiałeś przywrócić wcześniejszą wer­sję dokumentu i rozpocząć pracę od nowa. Dołączenie do Fireworks tych narzędzi jako Live Effects, pozwoliło znacznie zwiększyć elastyczność pracy.

Dostosowywanie poziomów tonalnych

W idealnej sytuacji obrazek bitmapowy powinien mieć równe proporcje pomiędzy ciem­nymi tonami (cieniami), półtonami i jasnymi tonami (światłami). Zbyt wiele ciem­nych pikseli powoduje utratę szczegółów grafiki; nadmiar jasnych tonów tworzy „spra­ne” obrazki. Skupienie dużej ilości półtonów (ciemne są niedostatecznie ciemne, zaś jasne - nie­dostatecznie jasne) tworzy „mdłe” obrazki, jak ten znajdujący się po lewej stronie na rysunku 12.5. Fireworks oferuje kilka różnych metod dostosowywania poziomów to­nalnych obrazków. To, której metody użyjesz, jest uzależnione od stopnia uszko­dze­nia obrazka.

Rysunek 12.5. Ten sam obrazek przed i po zwiększeniu zakresu tonalnego obrazka. Ciemne piksele są jeszcze ciemniejsze, zaś jasne - jeszcze jaśniejsze

Before — Przed

After — Po

Brightness/Contrast XE "Live Effects:Brightness/Contrast" (Jasność/Kontrast)

Obrazki, które są jedynie nieco zbyt ciemne lub zbyt jasne albo brak w nich kontrastu można sko­rygować za pomocą efektu Brightness/Contrast. Fireworks w oknie dokumentu wy­świe­tla podgląd uzyskiwanych rezultatów.

Aby użyć filtra Brightness/Contrast:

241. Zaznacz obiekt, który chcesz mody­fi­kować.

242. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby wyświetlić paletę Effect.

243. Z listy efektów wybierz Adjust ColorBrightness/Contrast. Fireworks otworzy ok­no dialogowe Brightness/Contrast (rysunek 12.6).

Rysunek 12.6. Za pomocą suwaków znajdujących się w oknie dialogowym Brightness/Contrast możesz dostosowywać jasność i kontrast obrazków

244. Zaznacz opcję Preview, aby wszystkie zmiany były automatycznie wyświetlane w oknie dokumentu.

245. Za pomocą suwaków Brightness i (lub) Contrast dostosuj poziomy tonalne obraz­ka. Zakres każdego suwaka wynosi od -100 do 100. Kliknij przy­cisk OK.

Color Fill (Wypełnienie kolorem)

Live Effect Color Fill pozwala na zmianę kolorów pikseli obiektu, bez zmieniania pikseli na stałe.

	Color Fill jest nowym Live Effect w Fireworks 4.

Aby użyć filtra Color Fill:

1. Zaznacz obiekt, który chcesz mody­fi­kować.

2. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby wyświetlić paletę Effect.

3. Z listy efektów wybierz Adjust ColorColor Fill. Fireworks otworzy ok­no dialogowe Color Fill.

4. Z rozwijanego próbnika kolorów wybierz żądany kolor wypełnienia.

5. Zmień ustawienia krycia, korzystając z suwaka Opacity.

6. Z listy opcji Blending Mode wybierz tryb mieszania.

	W rozdziale 13. znajdziesz więcej informacji o trybach krycia i mieszania.

7. Aby zamknąć okno dialogowe, kliknij poza jego obszarem lub wciśnij Enter (Return).

Program zastosuje efekt do zaznaczonego obiektu.

Levels (Poziomy) i Auto Levels (Auto-poziomy)

W obrazkach, które wymagają większej korekty tonalnej niż ta oferowana przez filtr Bright­ness/Contrast, można wykorzystać inne filtry Fireworks: Levels i Auto Levels XE "Live Effects:Levels i Auto Levels" . Filtr Auto Levels działa podobnie do Levels, ale nie wyświetla żadnego okna dialo­go­we­go. Fireworks zamienia najciemniejsze piksele obrazka na czarne, zaś piksele najjaśniejsze na białe. W przypadku niektórych obrazków, filtr Auto Levels pozwala dostosować ich po­ziomy tonalne w rekordowo krótkim czasie. Gdy jednak nie zadziała tak, jak za­mie­rza­łeś, będziesz musiał ręcznie dostosować poziomy za pomocą filtru Levels.

	W kolorowej wkładce znajdziesz ilustrację demonstrującą wykorzys­ta­nie filtru Auto Levels.

W oknie dialogowym Levels znajduje się specjalny zestaw trzech kroplomierzy (ry­su­nek 12.7), dostępnych również w oknie dialogowym Curves (Krzywe), któremu przyj­rzy­my się bliżej w następnym podrozdziale. Trzy kroplomierze - jeden dla świateł, je­den dla półtonów i jeden dla cieni - pozwalają ustawić nowe wartości świateł, półtonów i cieni poprzez wskazanie pikseli o żądanych poziomach tonalnych. Jeżeli na przy­kład Twój obrazek jest zbyt ciemny, wybierz kroplomierz cieni i kliknij piksel, który jest odrobinę jaśniejszy od najciemniejszego piksela w obrazku. Fireworks zastąpi wszys­tkie najciemniejsze piksele obrazka za pomocą tonów klikniętego piksela. W re­zul­tacie obrazek zostanie rozjaśniony. Na podobnych zasadach działają kroplomierze świa­teł i półtonów.

Rysunek 12.7. Specjalny zestaw kroplomierzy pozwala wskazać piksele o żądanym poziomie nowych świateł, półtonów i cieni obrazka

Shadow eyedropper — Kroplomierz cieni

Highlight eyedropper — Kroplomierz świateł

Midtone eyedropper — Kroplomierz półtonów

	Kliknięcie przycisku Auto, znajdującego się w oknie dialogowym Le­vels wywołuje podobne rezultaty co filtr Auto Levels.
	Kroplomierze można rozpoznać po kolorze znajdującego się w nich atra­mentu. W kroplomierzu świateł znajduje się biały atrament, w kro­plo­mierzu półtonów jest szary atrament, zaś w kroplomierzu cieni - czar­ny atrament.

W oknie dialogowym Levels znajduje się również histogram, czyli wykres prezentujący po­ziomy świateł, półtonów i cieni obrazka. Pozwala on szybko zorientować się, co mo­żesz osiągnąć poprzez dostosowywanie poziomów tonalnych obrazka. Oś pozioma his­to­gra­mu prezentuje od lewej do prawej tony obrazka od najciemniejszych do naj­jaś­niej­szych, zaś oś pionowa - poziomy tych tonów, mieszczące się w zakresie od 0 do 255.

Aby zastosować filtr Levels i zmodyfikować poziomy tonalne obrazka:

246. Zaznacz obrazek, który chcesz modyfi­ko­wać.

247. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby wyświetlić paletę Effect.

163. Z listy efektów wybierz Adjust ColorLevels. Fireworks otworzy okno dia­lo­go­we Levels (rysunek 12.8).

248. Zaznacz opcję Preview, aby wszystkie zmiany były automatycznie wyświetlane w oknie dokumentu.

249. Z rozwijanej listy Channels (Kanały) wybierz kanał, który chcesz zmodyfi­ko­wać. Możesz wybrać tylko kanał Red (Czerwony), tylko Green (Zielony), tyl­ko Blue (Niebieski) lub opcję RGB, aby modyfikować wszystkie kanały jed­no­cześnie.

		Modyfikowanie jedynie kanału Red (Czerwony) w obrazku RGB daje po­dobne efekty do dostosowywania kolorów poprzez zwiększanie lub zmniej­szanie wartości R w palecie Color Mixer pracującej w trybie RGB lub Hexadecimal (Szesnastkowy).
Rysunek 12.8. W oknie dialogowym Levels wyświetlany jest histogram świateł, półtonów i cieni obrazka

Shadow .. box — Pole tekstowe poziomów wejścia cieni

Midtone ... box — Pole tekstowe poziomów wejścia półtonów

Highlight ... box — Pole tekstowe poziomów wejścia świateł

Histogram — Histogram

Highlight Input ... slider — Suwak poziomów wejścia świateł

Shadow Input ... slider — Suwak poziomów wejścia cieni

Shadow Output ... slider — Suwak poziomów wyjścia cieni

Midtone Input ... slider — Suwak poziomów wejścia półtonów

Highlight Output ... slider — Suwak poziomów wyjścia świateł

164. Zmień poziomy świateł i cieni w obrazku za pomocą suwaków Highlight, Mid­to­ne i Shadow Input Levels lub poprzez wpisanie nowych wartości w pola teks­to­we Highlight i Shadow Input Levels. Wartości świateł i cieni należą do za­kre­su 0-255, zaś półtony mogą mieć wartości od 1,0 (neutralne) do 50 procent sza­roś­ci.

	Wartości cieni nie mogą być większe niż wartości świateł, zaś wartości świa­teł nie mogą być mniejsze niż wartości cieni.

165. Za pomocą suwaków Highlights i Shadows Output Levels dostosuj ogólny kon­trast obrazka.

166. Jeśli będzie to konieczne, możesz użyć kroplomierza Highlight, Midtone lub Sha­dow, aby pobrać odpowiednio docelowe poziomy świateł, półtonów i cieni obrazka.

167. Gdy będziesz zadowolony z dokonanych modyfikacji, kliknij przycisk OK.

Wykonane zmiany zostaną zastosowane do zaznaczonego obiektu.

	W kolorowej wkładce znajdziesz ilustrację demonstrującą wykorzys­ta­nie filtru Levels.

Curves (Krzywe)

Filtr Curves XE "Live Effects:Curves" ma takie samo zastosowanie jak filtr Levels, ale w nieco inny sposób pre­zen­tuje informacje o poziomach tonalnych grafiki. Podczas gdy filtr Levels pozwala do­s­to­sowywać osobno poziomy świateł, półtonów i cieni obrazka, filtr Curves umożliwia usta­wianie poziomów pojedynczych kolorów. Możesz na przykład dostosować poziom czer­wieni bez wpływu na poziomy świateł i cieni obrazka.

W oknie dialogowym Curves znajduje się pomocnicza siatka. Na jej osi poziomej wy­świe­tlane są oryginalne wartości jasności, które można odczytać również w polu teks­to­wym Input. Na osi pionowej mieszczą się nowe wartości jasności, które można odczytać rów­nież w polu tekstowym Output. Wartości te mieszczą się w zakresie od 0 do 255, gdzie 0 tworzy pełny cień. Linia jest początkowo zawsze rysowana na siatce po przekątnej, wska­zując w ten sposób, że nie zostały jeszcze dokonane żadne modyfikacje krzywych (war­tości Input i Output są takie same).

Jak zostało wspomniane wcześniej, okno dialogowe Curves zawiera również zestaw trzech kroplomierzy, podobnie jak okno dialogowe Levels. W oknie Curves znajduje się tak­że przycisk Auto, który daje te same rezultaty jak przycisk Auto w oknie dialogowym Levels: najciemniejsze piksele w obrazku zamieniane są na czarne, zaś najjaśniejsze na białe.

Aby użyć filtra Curves:

250. Zaznacz obrazek, który chcesz mody­fi­kować.

251. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby otworzyć paletę Effect.

252. Wybierz z menu polecenie Adjust ColorCurves. Fireworks wyświetli okno dia­logowe Curves (rysunek 12.9).

Rysunek 12.9. Okno dialogowe Curves pozwala graficznie modyfikować krzywe kolorów

New ... axis — Oś nowego poziomu jasności

Original ... axis — Oś oryginalnego poziomu jasności

253. Zaznacz opcję Preview, aby wszystkie zmiany były automatycznie wyświetlane w oknie dokumentu.

254. Z rozwijanej listy Channels (Kanały) wybierz kanał, który chcesz zmo­dy­fi­ko­wać. Możesz wybrać tylko kanał Red (Czerwony), tylko Green (Zielony), tyl­ko Blue (Niebieski) lub opcję RGB, aby modyfikować wszystkie kanały jed­no­cześnie.

255. Kliknij punkt znajdujący się na przekątnej linii i przeciągnij go w nowe po­ło­że­nie, aby dostosować krzywą. Modyfikacja krzywej powoduje zmiany wartości Input i Output.

168. Aby usunąć punkt z krzywej, zaznacz go i przeciągnij poza siatkę.

	Nie możesz usunąć punktów końcowych krzywej.

169. Jeśli będzie to konieczne, możesz użyć kroplomierzy Highlight, Midtone lub Sha­­dow, aby pobrać odpowiednio docelowe poziomy świateł, półtonów i cieni obrazka.

170. Gdy będziesz zadowolony z dokonanych modyfikacji, kliknij przycisk OK.

Fireworks zastosuje zmiany do zaznaczonego obiektu.

	W kolorowej wkładce możesz porównać rezultaty zastosowania filtru Curves.

Hue/Saturation XE "Live Effects:Hue/Saturation" (Barwa/Nasycenie)

Działanie filtru Hue/Saturation jest podobne do ustawiania kolorów w modelu HSL (Hue - Barwa, Saturation - Nasycenie, Lightness - Jasność). Jeśli znasz zasadę dzia­ła­nia koła kolorów, wiesz, że aby dostosować barwę, trzeba przenieść się w inne miejsce ko­ła i wybrać nowy kolor. Dostosowanie nasycenia odbywa się poprzez przemiesz­cza­nie wzdłuż promienia koła kolorów i wybranie bardziej lub mniej „czystej” wersji da­nego koloru.

	Przykład koła kolorów możesz znaleźć w systemowym próbniku ko­lo­rów, który można otworzyć za pomocą przycisku Palette, znajdującego się w rozwijanym próbniku Fireworks. Użytkownicy MacOS mogą de­fi­nio­wać kolory, korzystając z różnych modeli, włączając model HLS.

Aby dostosować barwę lub nasycenie obrazka za pomocą filtru Hue/Saturation:

256. Zaznacz obrazek, który chcesz mody­fi­ko­wać.

257. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby otworzyć paletę Effect.

171. Wybierz z menu polecenie Adjust ColorHue/Saturation. Fireworks wyświetli ok­no dialogowe Hue/Saturation (rysunek 12.10).

Rysunek 12.10. W oknie dialogowym Hue/Saturation znajdują się trzy suwaki: Hue (Barwa), Saturation (Nasycenie) i Lightness (Jasność)

172. Zaznacz opcję Preview, aby wszystkie zmiany były automatycznie wyświetlane w oknie dokumentu.

173. Zaznacz opcję Colorize, aby dodać kolory do obrazka w skali szarości lub za­mie­nić obrazek RGB na obrazek dwutonowy.

	Po wybraniu opcji Colorize, zakres wartości suwaka zostanie za­mie­nio­ny z -180-180 na 0-360, a zakres suwaka Saturation z -100-100 na 0-100.

174. Dostosuj czystość kolorów za pomocą suwaka Saturation.

175. Dostosuj kolory obrazka za pomocą suwaka Hue.

176. Dostosuj poziom jasności kolorów za pomocą suwaka Lightness.

177. Gdy będziesz zadowolony z dokonanych modyfikacji, kliknij przycisk OK.

Dokonane zmiany zostaną zastosowane do zaznaczonego obiektu.

	W kolorowej wkładce możesz zobaczyć rezultaty użycia filtru Hue/Sa­turation.

Uzyskiwanie trójwymiarowych efektów za pomocą filtrów Bevel (Faza) i Emboss (Płaskorzeźba)

Dostępne w Fireworks filtry Bevel i Emboss pozwalają na tworzenie trójwymiarowych efek­tów. Oba filtry nakładają światło w określonym kierunku, oświetlając w ten sposób obiekt, który wygląda tak, jakby był wytłoczony lub wciśnięty w tło.

Filtr Bevel XE "Live Effects:Bevel"

Efekty fazowania są podobne w zakresie interfejsu użytkownika, atrybutów i opcji. Istnieją pomiędzy nimi dwie istotne różnice:

• Inner Bevel fazuje wewnętrzne krawędzie zaznaczonych obiektów, zaś Outer Be­vel fazuje zewnętrzne krawędzie obiektów.

• Efekt Outer Bevel posiada jeden atrybut, którego nie ma Inner Bevel - kolor. In­ner Bevel przy fazowaniu wewnętrznych krawędzi używa koloru obiektu, zaś efekt Outer Bevel używa przy fazowaniu koloru wybranego przez użyt­kow­nika.

Gdy wybierzesz filtr Inner Bevel lub Outer Bevel z rozwijanej listy Effect Category, Fire­works wyświetli ich okna dialogowe, w których możesz do­sto­sować parametry filtrów (rysunek 12.11).

Rysunek 12.11. Okno dialogowe filtru Outer Bevel jest takie samo jak okno filtru Inner Bevel z tym wyjątkiem, że posiada dodatkową próbkę koloru

Width — Szerokość

Effect name — Nazwa efektu

Color well — Próbka koloru

Contrast — Kontrast

Softness — Rozmycie

Angle — Kąt

Button Preset — Typy przycisków

Inner Bevel — Faza wewnętrzna

Outer Bevel — Faza zewnętrzna

W tabeli 12.2 znajdziesz opisy korzystania z poszczególnych kontrolek filtrów.

Tabela 12.2.

Efekty Bevel

Kontrolka efektu		Opis
Effect name		W liście opcji dostępnych jest siedem różnych typów fazowania. Każdy z nich modyfikuje liczbę, kształt lub wielkość faz
Width		Steruje grubością tworzonej fazy. Wartości suwaka Width należą do zakresu od 0 do 10 pikseli, ale bezpośrednio w pole tekstowe możesz wprowadzać wyższe wartości
Contrast		Determinuje różnicę w jasności pomiędzy jasnymi i ciemnymi stronami fazy. Największy kontrast tworzony jest przy wartości 100%, zaś 0% nie tworzy żadnego kontrastu
Softness		Określa ostrość krawędzi używanych do stworzenia fazy. Wartość 0 daje najbardziej ostre krawędzie, zaś wartość 10 - maksymalnie rozmyte. Wartości większe od 10 pikseli nie dają żadnych rezultatów
Angle		Tworzy kąty, symulując w ten sposób światło na fazowanych krawędziach. Przeciągnij gałkę lub wpisz wartość kąta bezpośrednio w polu tekstowym
Button Preset		Zawiera cztery wbudowane ustawienia parametrów, wykorzystywane głównie do tworzenia przycisków reagujących na zdarzenia myszy
Color		Standardowa próbka koloru, dostępna dla filtru Outer Bevel, pozwala zdefiniować kolor zewnętrznej fazy
		Efekty fazowania mogą być stosowane do dowolnych obiektów, ale je­śli krawędzie obiektu zostaną za bardzo rozmyte, nie zobaczysz dzia­ła­nia efektu. Aby połączyć rozmycie krawędzi z ich fazowaniem, ustaw pa­rametr Amount of Feather na mniejszą wartość niż szerokość fazy.

Każdy typ efektów fazowania posiada taki sam rodzaj krawędzi. Porównaj efekty Inner Bevel i Outer Bevel przedstawione na rysunku 12.12, a zauważysz podobieństwa po­mię­dzy siedmioma typami obu efektów. Są one dostępne w rozwijanej liście Effect name, a różnią się między sobą głównie kształtem fazy. Obserwacja ich kształtów pozwala iden­tyfiko­wać poszczególne typy efektów.

Rysunek 12.12. Efekty Inner Bevel tworzone są wewnątrz oryginalnej ścieżki obiektu, zaś efekty Outer Bevel tworzą fazy na zewnątrz ścieżki. Przekrój fazy pozwala zidentyfikować jej typ

Side views — Przekrój fazy

Inner Bevel — Faza wewnętrzna

Outer Bevel — Faza zewnętrzna

Flat — Płaska

Frame 1 — Ramka 1

Frame 2 — Ramka 2

Ring — Pierścień

Ruffle — Zmarszczki

Sloped — Stok narciarski

Smooth — Gładki

Gotowe ustawienia efektów Bevel do tworzenia przycisków

Efekty fazowania umożliwiają łatwe tworzenie różnych przycisków: nawigacyjnych, do for­mularzy, łączy itd. Jednym z najczęściej występujących zastosowań takich przy­cis­ków są przyciski reagujące na zdarzenia myszy, zwane rollovers. Rollover jest ter­mi­nem określającym zdarzenie, w którym umieszczenie kursora na przyciskiem powoduje zmia­ny tego przycisku. W obu typach fazowania znajdują się cztery gotowe ustawienia pa­rametrów, dostępne w rozwijanej liście Button preset: Raised (Podniesiony), Highlight (Pod­świetlony), Inset (Wytłoczony) i Inverted (Odwrócony), które można wy­ko­rzys­ty­wać do tworzenia przycisków reagujących na zdarzenia myszy.

W przeciwieństwie do zestawów gotowych ustawień dostępnych w paletach Stroke i Fill, wbudowane ustawienia przycisków dostępne w efektach fazowania nie modyfi­ku­ją atrybutów znajdujących się w palecie, jedynie wewnętrznie zmieniają kąt i inten­syw­ność oświetlenia obiektów (rysunek 12.13). Przyciski Raised i Highlight używają tego sa­mego kąta oświetlenia, ustawianego za pomocą parametru Angle, natomiast przycisk High­light jest o około 25% jaśniejszy. Przyciski Inset i Inverted oświetlane są z przeciwnej stro­ny niż dwa poprzednie i (w tej parze) jaśniejszym przyciskiem jest Inverted.

Rysunek 12.13. W obu typach fazowania dostępne są gotowe ustawienia przycisków: Raised, Highlight, Inset i Inverted

Raised — Podniesiony

Highlight — Podświetlony

Inset — Wytłoczony

Inverted — Odwrócony

Aby przy tworzeniu przycisków reagujących na zdarzenia myszy wyko­rzys­tać wszystkie zalety gotowych ustawień dostępnych w efektach fa­zo­wania, najpierw ustaw kąt oświetlenia za pomocą gałki Angle, znaj­du­jącej się w palecie Effect. Następnie zduplikuj obrazek i do każdej jego ko­pii zastosuj inny typ przycisku.

Płaskorzeźba

Jeżeli widziałeś kiedykolwiek papier firmowy, prawdopodobnie zetknąłeś się już z efek­tem płaskorzeźby. Wytłaczanie jest wykorzystywane do wyciskania nazw firm bez­pośrednio w papierze tak, aby wyglądały jak tradycyjne pieczęcie. Podobne rezultaty poz­walają uzyskać efekty płaskorzeźby dostępne w Fireworks, ale są oczywiście bar­dziej elastyczne.

Oba efekty płaskorzeźby zastępują wypełnienie obiektu za pomocą koloru obszaru ro­bo­czego lub koloru obiektów znajdujących się w tle, a następnie dodają światła i cienie. Inset Emboss (Płaskorzeźba) i Raised Emboss (Wytłoczenie) mają odwrotne położenia świa­teł i cieni, aby utworzyć odpowiednio efekt wepchnięcia obiektu do tła lub jego podniesienia z tła (rysunek 12.14).

Rysunek 12.14. Dwa efekty płaskorzeźby pozwalają utworzyć obiekt, który wydaje się być wyrzeźbiony lub wytłoczony w tle

Efekty Emboss są stosowane jak wszystkie inne Live Effects i można ustawiać ich op­cje w oknach dialogowych (rysunek 12.15).

Rysunek 12.15. Dostosuj parametry efektów Inset Emboss i Raised Emboss za pomocą tak samo wyglądających okien dialogowych

Width — Szerokość

Contrast — Kontrast

Softness — Rozmycie

Angle — Kąt

A oto lista parametrów, które możesz dostosowywać dla efektów Emboss XE "Live Effects:Emboss" :

• Width (Szerokość). Definiuje grubość wytłaczanych krawędzi obiektu. Jak w przy­padku innych efektów wartości, które można ustawić za pomocą suwaka na­leżą do zakresu od 0 do 30 pikseli, wyższe liczby należy wpisywać w zwią­za­ne z nim pole tekstowe.

• Contrast (Kontrast). Kontrast pozwala ustawić różnice pomiędzy poziomami jas­ności świateł i cieni płaskorzeźby.

• Softness (Rozmycie). Ustawia ostrość wytłaczanych krawędzi. Im wyższe war­tości parametru Softness, tym mniej ostre krawędzie.

• Angle (Kąt). Ustala kierunek wytłoczenia.

• Show Object (Pokaż obiekt). Pokazuje lub ukrywa obiekt z wytłoczeniem. Samo wytłoczenie jest zawsze widoczne.

	Efekt Show Object jest nowością w Fireworks 4.

Tworzenie wrażenia głębi za pomocą rozmycia

Czasem okazuje się, że najważniejszy punkt obrazka jest zagubiony pomiędzy innymi ele­men­ta­mi grafiki. Dzieje się tak zwłaszcza wtedy, gdy wykorzystujesz w swojej kompozycji wie­le obiektów lub nakładasz na siebie kilka filtrów. Obiekty pierwszoplanowe obrazka moż­na wyróżnić poprzez dodanie do jego tła rozmycia.

Aby dodać efekt głębi do obszarów tła obrazka:

258. Użyj jednego z narzędzi selekcji Marquee, aby utworzyć zaznaczenie tej części obiektu bitmapowego, która ma pozostać na pierwszym planie. Możesz użyć na­rzędzia Oval Marquee, aby skupić uwagę widza na okrągłym obszarze obraz­ka lub narzędzia Magic Wand, aby utworzyć bardziej złożoną selekcję, ota­czającą na przykład głowę lub twarz jakiejś osoby.

	Po wybraniu jednego z narzędzi selekcji Marquee Fireworks auto­ma­tycz­nie przejdzie w tryb edycji grafiki bitmapowej.

178. Wybierz z menu polecenie ModifyMarqueeInvert Selection, aby zamienić zaznaczenie z obrazka na jego tło.

179. Wybierz z menu polecenie WindowEffect, aby otworzyć paletę Effect lub klik­nij jej zakładkę, jeśli znajduje się na ekranie.

180. Z rozwijanej listy Effect Category wybierz BlurGaussian Blur.

Fireworks wyświetli okno dialogowe Gaussian Blur (Rozmyj gaussowsko).

	Niektóre Live Effects posiadają trzykropek po swojej nazwie obok po­le­cenia menu, co oznacza, że wybranie polecenia spowoduje otwarcie ok­na dialogowego, w którym będziesz mógł określić ustawienia efek­tu. Xtras bez trzykropków oznacza, że w nazwach nie można ustawiać żad­nych parametrów lub posiadają one okna dialogowe z parametrami.

181. Za pomocą suwaka Blur Radius (Promień rozmycia) możesz dostosować inten­syw­ność efektu. Im większe rozmycie, tym większe wrażenie głębi obrazka. Pro­mień rozmycia od 1 do 2 pikseli tworzy efekt głębi bez niszczenia krawędzi ele­mentów obrazka. Kliknij przycisk OK.

Obszary znajdujące się w utworzonym zaznaczeniu będą teraz wyróżnione i widoczne na pierw­szy rzut oka (rysunek 12.16). Dodatkowo, zostanie stworzone ogólne wrażenie głę­bi obrazka. Elementy tła wyglądają, jakby znajdowały się nieco dalej niż obiekty pier­w­szoplanowe.

Efekty Blur (Rozmyj) i Blur More (Rozmyj bardziej) działają podobnie do efektu Gaus­sian Blur (Rozmyj gaussowsko), ale nie można ustawiać ich parametrów. Blur tworzy nie­wielkie rozmycie, zaś Blur More - no, chyba już się domyślasz.

Niesklasyfikowane efekty

Dwa efekty znajdujące się w podmenu Other (Inne) rozwijanej listy Effect Category zo­sta­ły przeniesione z pierwszej wersji Fireworks. Efekt Convert to Alpha XE "Live Effects:Convert to Alpha" stał się nie­po­trzeb­ny, ponieważ Fireworks potrafi tworzyć grupy maskujące, ale niekiedy można zna­leźć dla nie­­go ciekawe zastosowania. Użycie tego filtru powoduje przekonwertowanie zaznaczo­ne­go obszaru na skalę szarości i białe piksele zamienia na przezroczyste. Filtr Find Edges wykrywa zewnętrzne krawędzie konturów i przekształca je na linie ciągłe. Mo­że być przydatny do tworzenia efektów specjalnych lub masek.

Rysunek 12.16. Rozmycie tła umożliwia dodanie do obrazka wrażenia głębi i wyróżnienie elementów pierwszoplanowych grafiki. Zwróć uwagę, jak Twój wzrok natychmiast zostaje przyciągnięty przez twarz osoby znajdującej się na ilustracji

Original image — Obrazek oryginalny

Foreground excluded from selection — Plan pierwszy wyłączony z zaznaczenia

Blur applied to selection —Rozmycie zastosowane do zaznaczenia

Shadow (Cień) i Glow (Blask)

Efekty cieni i blasków pozwalają tworzyć wrażenie głębi i rozmycia w dokumentach Fire­works.

Zewnętrzne i wewnętrzne cienie

Pamiętam, jak rozpierała mnie duma, gdy utworzyłem swój pierwszy zewnętrzny cień w jednej z wcześniejszych wersji Photoshopa. Całe popołudnie zajęło mi wykonanie dwóch różnych zestawów instrukcji i dołączanie warstw maskujących, rozmyć gaus­sow­skich, warstw dopasowania i kto spamięta, co jeszcze. Radość szybko opadła, gdy spró­bowałem umieścić mój nowy obrazek z zewnętrznym cieniem nad kolorem tła, a wo­kół mojej grafiki pojawiła się niepożądana aureola, składająca się z białych pikseli.

W Fireworks cienie możesz tworzyć bez większego wysiłku i obaw o niepożądane efek­ty. Zastosowanie cienia do obiektu zewnętrznego jest prostym dwuetapowym procesem: za­znacz obiekt i wybierz z palety Effect opcję Drop Shadow XE "Live Effects:Drop Shadow" . Najlepsze w tym efekcie jest to, że cień możesz umieścić nad dowolnym tłem. Fireworks tak dostosuje cień, aby wto­pić go w tło i usunąć niepożądaną aureolę.

	Nie próbuję tutaj oczerniać Photoshopa, który jest świetną aplikacją. Now­sze wersje tego programu również posiadają efekt Drop Shadow, któ­ry można łatwo zastosowywać i importować do Fireworks z za­cho­wa­niem możliwości edycji.

Zewnętrzny cień jest monochromatyczną kopią obrazka położoną za obiektem i prze­su­nię­tą względem niego. Najczęściej są wykorzystywane cienie zewnętrzne w skali sza­rości (choć mogą mieć dowolne kolory), które posiadają zarówno rozmyte, jak i ostre kra­wędzie. Cienie są bardzo często używane w grafice internetowej. Niektórzy mogliby po­wiedzieć, że są nawet nadużywane. Jednak wrażenie głębi, jaką uzyskują obrazki po do­daniu zewnętrznego cienia, tak przyciąga oko widza, że prawdopodobnie efekt ten jesz­cze długo będzie wykorzystywany w grafice komputerowej.

Oprócz efektu Drop Shadow, Fireworks oferuje również efekt Inner Shadow (Cień we­wnęt­rzny). Oba efekty działają zasadniczo w taki sam sposób (nawet używają takich sa­mych okien dialogowych z ich parametrami), różnicą jest położenie cienia. Efekt Inner Shadow umieszcza cień wewnątrz obiektu i wypełnia nim wszystkie jego za­kamarki.

Aby zastosować efekt Drop Shadow lub Inner Shadow do dowolnego obiektu Fire­works:

259. Zaznacz obiekt, do którego chcesz zastosować efekt. Zewnętrzne cienie działają poprawnie z większością obiektów: ot­wartymi i zamkniętymi ścieżkami, kształtami geometrycznymi, obiektami bit­mapowymi, tekstowymi itd.

260. Wybierz z menu polecenie WindowEffect, aby otworzyć paletę Effect lub klik­nij jej zakładkę, jeśli znajduje się na ekranie.

261. Wybierz Drop Shadow lub Inner Shadow z rozwijanej listy Effect Category. W ok­nach dialogowych wyświetlane będą początkowe parametry efektów (ta­kie same dla obu efektów) (rysunek 12.17).

Rysunek 12.17. Domyślne ustawienia efektu Drop Shadow tworzą miękki cień, lekko przesunięty w prawo względem obiektu. Możesz jednak zmienić te ustawienia w oknie dialogowym efektu

Color well — Próbka koloru

Distance — Odległość

Opacity — Krycie

Softness — Rozmycie

Angle — Kąt

182. Aby stworzyć cień mniej lub bardziej oddalony od obiektu, przeciągnij suwak Distance lub wpisz pożądaną wartość w związane z nim pole tekstowe.

	Za pomocą suwaka Distance można wprowadzać wartości z zakresu od 0 do 100 pikseli, ale jeśli chcesz jeszcze bardziej oddalić cień od obiek­tu, możesz wpisać większą wartość w polu tekstowym. Pole teks­towe przyjmuje również ujemne wartości, które powodują prze­su­nię­cie cienia względem obiektu w przeciwnym kierunku niż ten okre­ślo­ny za pomocą parametru Angle.

183. Użyj próbki koloru, aby zmienić kolor cienia, który domyślnie jest czarny.

184. Przeciągnij suwak Opacity lub wpisz pożądaną wartość w związanym z nim po­lu tekstowym, aby zmienić stopień krycia (przezroczystości) cienia. Krycie jest podawane w wartościach procentowych; 100% daje całkowite krycie, zaś 0% całkowitą przezroczystość (cień będzie wówczas niewidzialny).

185. Przeciągnij suwak Softness lub wpisz wartość w związanym z nim polu teks­to­wym, aby zmienić stopień rozmycia krawędzi cienia. Za pomocą suwaka moż­na ustawiać wartości z zakresu od 0 do 30, ale w polu tekstowym można wpro­wa­dzać wartości wykraczające poza ten zakres.

186. Przeciągnij gałkę Angle lub wpisz liczbę stopni (od 0 do 360) w związanym z nią polu tekstowym, aby zmienić kierunek cienia.

187. Aby ukryć obiekt i wyświetlić tylko jego cień, zaznacz opcję Knock Out.

Używam cieni z ostrymi krawędziami prawie tak często, jak cieni z krawędziami rozmytymi, zwłasz­cza w grafikach, w których najważniejszym czynnikiem jest rozmiar pliku. Każdy obra­zek z rozmytymi krawędziami jest większy niż taki sam obrazek z ostrymi, ponieważ do ut­wo­­rzenia rozmytych krawędzi musi zostać wykorzystanych więcej pikseli (prze­waż­­nie o połowę). Gdy rozmiar pliku jest istotnym czynnikiem (a Tobie podobają się jednolite cienie) przeciągnij suwak Softness na sam dół skali.

Miękkie cienie stają się szczególnie efektowne, gdy zachodzą na siebie. Jeszcze więk­sze wrażenie trójwymiarowości w grafikach internetowych można uzyskać poprzez umie­szczenie jednego obiektu z cieniem nad innym obiektem również posiadającym cień.

Wykorzystanie opcji Knock Out (Usuń obiekt)

Na specjalną uwagę zasługuje jedna z opcji efektów cieni - Knock Out. Termin „knock out” używany jest w poligrafii do określania techniki, polegającej na usuwaniu pew­nych kolorów z czcionki i pozostawianiu odpowiednich obszarów, przez które będzie widać tło. Je­żeli usuniesz kolor ze zwykłej czcionki (nie posiadającej obwódki i innych elementów ota­czających), tekst będzie zanikać. Cień doskonale nadaje się do otaczania usu­niętego tekstu, ponieważ daje wrażenie wypełnienia elementów, które zostają usu­nię­te z oryginalnego obrazka. Zaznaczenie opcji Knock Out powoduje usunięcie koloru wy­pełnienia i obrysu obiektu, a pozostawienie jedynie jego cienia (rysunek 12.18).

Rysunek 12.18. Użyj efektu Drop Shadow z opcją Knock Out, aby wyróżnić tekst lub inne obiekty za pomocą samego cienia
		We wprowadzeniu do tego podrozdziału pisałem, że w Fireworks moż­na łatwo zapobiegać tworzeniu aureoli pojawiającej się przy prze­su­wa­niu zewnętrznych cieni z jednego tła na inne. W Fireworks są na to dwie me­to­dy. Jeśli nie chcesz, aby obiekt lub jego cień były prze­­zroczyste, zmień kolor obszaru roboczego na kolor tła swojej stro­ny internetowej i normalnie wyeksportuj obrazek. Aby usunąć aureolę i jednocześnie zachować przezroczystość obrazka, w czasie eksportu za­mień kolor tła na przezroczystość.

Glow (Blask)

Podczas gdy cienie są wyświetlane jedynie po jednej lub obu stronach obiektu, blaski
- efek­ty Glow XE "Live Effects:Glow" i Inner Glow - tworzą obwódkę otaczającą cały obiekt. Użytkownik może zde­finiować szerokość, krycie i rozmycie blasku.

Aby zastosować blask do obiektu:

262. Zaznacz obiekt, do którego chcesz zastosować efekt.

263. Wybierz z menu polecenie WindowEffect, aby otworzyć paletę Effect lub klik­nij jej zakładkę, jeśli znajduje się na ekranie.

264. Z podmenu Shadow and Glow rozwijanej listy Effect Category wybierz opcję Glow (Blask zewnętrzny) lub Inner Glow (Blask wewnętrzny). Fireworks wy­świe­tli okno dialogowe z atrybutami efektu, które jest podobne do okna dia­lo­go­­wego zewnętrznego cienia (rysunek 12.17) z wyjątkiem braku opcji Knock Out.

188. Ustaw pozostałe parametry efektu: Width (Szerokość), Color (Kolor), Opacity (Kry­cie) i Softness (Rozmycie).

Wszystkie parametry efektu Glow są takie same jak atrybuty efektów cieni.

	Za pomocą filtru Glow możesz także tworzyć ramki. Zastosuj efekt Glow do obiektu, ustaw jego atrybut Softness na 0, zaś atrybut Opa­city na 100 i już masz ramkę.

Poprawianie ostrości obrazków

Wyostrzanie obrazków pozwala na poprawianie ich głębi przez odszukiwanie krawędzi obiektów i tworzenie po obu ich stronach bardziej kontrastujących ze sobą pikseli. Wy­os­trzanie takie przydaje się zwłaszcza przy poprawianiu źle zeskanowanych fotografii lub przy przy­wracaniu szczegółów, które mogły zostać usunięte po zastosowaniu efektów spe­cjalnych.

Aby lekko wyostrzyć obrazek, zaznacz go i wybierz z listy Effect Category, znajdującej się w palecie Effect, polecenie Sharpen XE "Live Effects:Sharpen" Sharpen lub SharpenSharpen More.

Aby wyostrzyć obrazek, ustawiając poszczególne parametry:

265. Zaznacz obiekt.

266. Wybierz z menu polecenie WindowEffect lub użyj skrótu klawiaturowego Alt+F7 (Option+F7), aby otworzyć paletę Effect albo kliknij jej za­kład­kę, jeśli znajduje się na ekranie.

267. Z listy rozwijanej Effect Category wybierz polecenie SharpenUnsharp Mask.

Fire­works wyświetli okno dialogowe Unsharp Mask (Maska wyostrzająca) (ry­su­nek 12.19).

Rysunek 12.19. W oknie dialogowym Unsharp Mask możesz ustalić parametry maski wyostrzającej

189. Przeciągnij suwak Sharpen Amount (Wzmocnienie), aby ustawić inten­syw­ność działania efektu. Możesz ustawić ten suwak w połowie skali i zwięk­szyć lub zmniejszyć wzmocnienie później, po dostosowaniu pozostałych usta­wień.

190. Przeciągnij suwak Pixel Radius (Promień), aby ustawić liczbę pikseli, które ma­ją być jednocześnie zmieniane. Im większy promień, tym wyraźniejsze efek­ty działania filtru, gdyż przeważnie w dużych grupach pikseli występują większe różnice po­mię­dzy nimi.

191. Za pomocą suwaka Threshold (Próg) określ, na jakie piksele ma działać filtr. Zmo­dyfikowane zostaną tylko te piksele, których wartość skali szarości jest więk­sza niż zdefiniowany próg filtru. Im mniejsza wartość parametru Treshold, tym modyfikowanych będzie więcej pikseli. Kliknij przycisk OK.

Twój obrazek powinien nabrać wyraźnego, ostrego wyglądu (rysunek 12.20).

Rysunek 12.20. Wyostrzanie obrazków pozwala pokazać dodatkowe szczegóły

Original image — Obrazek oryginalny

Simulated bad scan —Symulacja złego skanowania

Sharpened image — Obrazek wyostrzony

Niekiedy wyostrzone obrazki wydają się zbyt ostre. Możesz temu za­ra­dzić przez rozmycie go za pomocą efektu Blur lub zastosowanie filtru Auto Levels.

Technika Fireworks:
tworzenie cieni perspektywicznych

Fireworks jest na tyle elastyczny, że umożliwia rozszerzanie wbudowanych Live Effects o efekty tworzone przez użytkownika. Jednym z takich efektów mogą być cienie perspek­ty­wicz­ne. W przeciwieństwie do cieni zewnętrznych, cienie perspektywiczne nie są do­kład­nymi ko­piami zaznaczonych obiektów, ale raczej wyglądają tak, jakby były trój­wy­miarowe. Oprócz tego, cienie perspektywiczne mogą znajdować się przed obiektem, za nim, lub z boku obiektu.

	W pakiecie filtrów Alien Skin's Aye Candy (opisywanym w kolejnych podrozdziałach) znajduje się filtr pozwalający tworzyć perspektywiczne cienie. Jeśli posiadasz pakiet Eye Candy, poznanie tych filtrów na pewno Ci się przyda.

Technika tworzenia cieni perspektywicznych wykorzystuje obiekty wektorowe Fire­works i możliwość dostosowywania gradientów oraz krawędzi obiektów. Za pomocą tej tech­niki możesz dodawać perspektywiczne cienie do tekstu, obiektów bitmapowych lub wek­torowych. Obiekt bitmapowy z perspektywicznymi cieniami możesz zobaczyć na rysunku 12.21.

Rysunek 12.21. Łącząc wypełnienia gradientowe ze zniekształcaniem obiektów, możesz w Fireworks tworzyć cienie perspektywiczne

Aby utworzyć cień perspektywiczny:

268. Skopiuj kontur oryginalnego obiektu, który zostanie wykorzystany do utwo­rze­nia nowego obiektu - perspektywicznego cienia. W zależności od typu obiektu, pierw­szy krok może być bardzo prosty lub bardzo pracochłonny. Poniżej zamie­sz­czone zostały techniki pracy z trzema podstawowymi typami obiektów Fire­works:

• Obiekty wektorowe. Aby skopiować obiekt wektorowy, wystarczy, że wy­bie­rzesz z menu polecenie EditClone. Klonowanie jest w tym przypadku lep­szym rozwiązaniem niż duplikowanie, ponieważ łatwiej jest później roz­mieścić cień względem obiektu oryginalnego.

• Obiekty tekstowe. Nie jest to absolutnie konieczne, ale przekonałem się, że czasami łatwiej jest tworzyć cienie dla tekstu przekształconego na ścież­ki wektorowe niż dla zwykłego tekstu. Z moich doświadczeń wynika, że zniekształcanie obiek­­tów wektorowych daje bardziej przewidywalne rezultaty niż znie­kształ­ca­nie tekstu. Dlatego najpierw kopiuję tekst, a dopiero później używam polecenia TextConvert to Paths. Następnie wybieram polecenie ModifyCom­bi­neUnion, aby wypełnienia gradientowe poszczególnych znaków zostały roz­ciągnięte na cały obiekt.

• Obiekty bitmapowe. Obiekty bitmapowe mogą być zwykłymi pro­sto­ką­ta­mi lub mieć nieregularne kształty. Jeśli Twój obiekt jest jednym z kształtów ge­ometrycznych, użyj narzędzia Rectangle, Ellipse lub Polygon, aby utwo­rzyć kopię o takich samych rozmiarach, jakie ma obiekt oryginalny. Jeżeli obiekt ma nieregularne kształty, najlepszym narzędziem do odwzorowania je­go zarysu jest Pen (Pióro). Używam tego narzędzia w trybie tworzenia pro­stych linii, klikając kolejne punkty, a tylko w niektórych przypadkach wykorzystuję możliwość tworzenia piórem krzywych Béziera. Zarysy obie­ktu nie muszą być bardzo precyzyjne, ale im więcej szczegółów uda Ci się zachować, tym bardziej naturalny cień uzyskasz.

192. Jeśli jest to konieczne, odbij obiekt cienia. W zależności od położenia hipo­te­tycznego źródła światła, możesz odbić pionowo obiekt cienia, aby perspekty­wi­­czny cień znajdował się przed obiektem.

193. Jeśli to konieczne, przesuń obiekt cienia we właściwe położenie.

Jeżeli cień znajduje się za oryginalnym obiektem, nie będziesz musiał zmieniać je­go położenia. Gdy jednak perspektywiczny cień jest przed obiektem, trzeba go tak przesunąć, aby dolne krawędzie obu obiektów przylegały do siebie. Obiekt cienia można przeciągnąć w nowe położenie za pomocą myszy, ale naj­częś­ciej wyko­rzy­stuję w tym celu klawisze strzałek. Obiekt jest wówczas prze­su­wany o 1 piksel w wybranym kierunku, a po wciśnięciu klawisza Shift - o 10 pikseli.

194. Ustaw obiekt cienia za oryginalnym obiektem.

W zależności od pozostałych obiektów znajdujących się w dokumencie i tego, jak cień ma być położony względem nich, możesz użyć pole­ce­nia ModifyArrangeSend Backward lub ModifyArrangeSend to Back. Na­wet jeśli perspektywiczny cień znajduje się przed oryginalnym obiektem, mo­żesz umieścić go za tym obiektem, aby ukryć punkt, w którym oba obiekty łą­czą się ze sobą.

195. Zniekształć obiekt cienia.

Tu właśnie zaczyna się artystyczna (i wymagająca wiele prób) część całej procedury. Zaznacz obiekt cienia i wybierz narzędzie Skew z palety narzędziowej, aby prze­chylić cień w wybranym kierunku. Kierunek cienia zależy od źródła hi­po­te­tycznego światła.

Następnie, jeśli narzędzie Skew jest wciąż aktywne, zmień je na narzędzie Scale. (Wciskając dwukrotnie klawisz Q zrobisz to bez pomocy myszy.) Teraz mo­żesz łatwo przeskalować ramkę ograniczającą obiektu. Przeciągnij środkowy po­ziomy uchwyt skalowania w kierunku krawędzi położonej najdalej od oryginalnego obiektu. Następnie mo­żesz przeciągać ten uchwyt, aby skrócić lub wydłużyć cień.

196. Możesz zastosować do obiektu cienia wypełnienie gradientowe.

Być może już teraz jesteś zadowolony z rzuconego cienia, ale dodając do niego wy­pełnienie gradientowe możesz zwiększyć wrażenie głębi i realizmu. W pa­le­cie Fill, wybierz z rozwijanej listy gradient Linear z kombinacją kolorów Black, White.

197. Dostosuj wypełnienie gradientowe obiektu cienia.

Początkowo po zastosowaniu gradient Linear jest rozkładany od lewej do pra­wej. Jeżeli chcesz zmienić kierunek gradientu (a prawdopodobnie tak będzie), za­znacz obiekt cienia i wybierz z palety narzędzie Paint Bucket, aby wyświetlić kon­trolki gradientu. Zmień położenie i kąt gradientu tak, aby jego punkt po­cząt­kowy był w punkcie połączenia obiektu oryginalnego i obiektu cienia, zaś punkt końcowy gradientu znajdował się poza cieniem. Technika ta pozwala utwo­rzyć łagodnie zanikający cień.

198. Jeśli chcesz, możesz lekko rozmyć krawędzie cienia.

Cienie wyglądają bardziej realistycznie, gdy nie mają ostrych krawędzi. Za­wsze wybieram z rozwijanej listy Edge w palecie Fill opcję Feather i usta­wiam niską wartość parametru Amount of Feather - trzy lub cztery piksele. Być może będziesz musiał ukryć rozmyte krawędzie cienia w miejscu, w któ­rym styka się on z oryginalnym obiektem.

Technikę tę można udoskonalać na wiele sposobów. Możesz „przewrócić” cień po­przez wygięcie go lub wyciągnięcie za pomocą narzędzia Freeform lub Reshape Area. Narzędzia te przydają się, gdy cień wygląda zbyt mało naturalnie. Grafika kom­puterowa pozwala stworzyć cień w postaci „rogatego diabła” lub „skrzydlatego anio­ła”. Pobaw się z różnymi perspektywami a będziesz zadowolony z uzyskanych rezultatów.

Zasady pracy XE "Live Effects" z Live Effects

Podobnie jak obrysy i wypełnienia, konfiguracje Live Effects mogą być zapisywane wraz z dokumentami. Później efekty takie można stosować do innych obiektów, znaj­du­ją­cych się w tym samym dokumencie lub w innych, jeśli zostanie do nich skopiowany obiekt z zastosowanym efektem. Tak samo jak w przypadku obrysów i wypełnień, efek­ta­mi można zarządzać z poziomu rozwijanego menu palety.

Polecenia dostępne w rozwijanym menu palety Effect to:

• Save Defaults (Zapisz ustawienia domyślne). Zapisuje ustawienia efektu, który został za­sto­sowany do aktualnie zaznaczonego obiektu jako domyślne ustawienia tego efektu.

• Save Effect As (Zapisz efekt jako). Zapisuje bieżące ustawienia efektu pod nową nazwą w rozwijanej liście Effect name.

• Rename Effect (Zmień nazwę efektu). Zmienia nazwę własnego lub stan­dar­do­wego efektu.

• Delete Effect (Usuń efekt). Usuwa dowolny własny lub standardowy efekt. Je­śli usuniesz efekt standardowy, zostanie on przywrócony po po­now­nym uruchomieniu Fireworks lub otwarciu innego dokumentu.

• All On i All Off (Włącz wszystkie i Wyłącz wszystkie). Odpowiednio włącza lub wyłącza wszystkie zastosowane efekty. Opcja ta ma takie samo działanie jak zaznaczenie lub usunięcie zaznaczeń wszystkich pól wyboru znajdujących się w liście efektów.

• Locate Plugins (Odszukaj moduły dodatkowe). Umożliwia określenie katalogu z modułami dodatkowymi zgodnymi z Photoshopem, które można wykorzystać w Fireworks. Po­le­cenie to działa w ten sam sposób co opcja Photoshop Plug-Ins, znajdująca się w zakładce Folders okna preferencji Fireworks. Aby ustawienie katalogu z modułami dodatkowymi zostało uwzględnione, musisz ponownie uruchomić Fireworks.

Zapisywanie zmodyfikowanych efektów

Tworzenie własnych efektów jest zajęciem twórczym i przyjemnym, które pozwala za­oszczędzić wiele czasu w późniejszej pracy z grafiką. Jednym ruchem można następnie stosować skomplikowane efekty. Efekty przedstawione na rysun­ku 12.22 łączą standardowe efekty Fireworks z efektami zapożyczonymi z Photo­shopa 5.5.

Aby zapisać zmodyfikowany efekt:

269. Po dostosowaniu efektu, wykorzystaj go do dowolnego obiektu.

270. Wybierz polecenie Save Effect As z rozwijanego menu palety Effect. Zostanie ot­warte okno dialogowe Save Effect As.

271. Wpisz nową nazwę efektu. Gdy wpiszesz taką, która jest już zapisana, Fire­works zapyta Cię, czy chcesz zastąpić istniejący efekt.

272. Po wpisaniu nazwy efektu kliknij przycisk Save. Nowa nazwa zostanie wy­świe­tlona w porządku alfabetycznym w liście Effect Category.

		W kolorowej wkładce znajdziesz barwne ilustracje niektórych zapisanych efektów.
Rysunek 12.22. W Fireworks można tworzyć zestawy efektów i zapisywać je pod własnymi nazwami, aby zawsze mieć do nich dostęp

Brakujące filtry XE "brakujące filtry"

Teraz, kiedy już wiesz, że do zapisywanych efektów możesz dołączać wszystkie zew­nęt­rzne filtry, musisz również wiedzieć, że wykorzystujący je dokument jest uzależ­nio­ny od ich obecności w komputerze. Jeżeli spróbujesz na przykład otworzyć dokument ko­legi, który używał filtrów niedostępnych w Twoim systemie operacyjnym, Fireworks wy­świetli okno dialogowe Missing Effects (rysunek 12.23) mówiące, że pewne efekty są niedostępne. Możesz oczywiście zainstalować wymagane filtry, ale tymczasowo mo­żesz również zmodyfikować dokument tak, aby nie musiał korzystać z brakujących pli­ków.

Rysunek 12.23. Gdy spróbujesz otworzyć dokument używający filtrów niedostępnych w Twoim systemie, Fireworks wyświetli okno dialogowe Missing Effects

Zapisywanie efektów w palecie Styles

Innym sposobem na zachowywanie i odwoływanie się do efektów własnych jest za­pi­sa­nie ich w postaci stylu. Podobnie jak przy zapisywaniu właściwości wypełnień, obry­sów i obiektów tekstowych, w stylach można zapisywać ustawienia Live Effects, a na­wet fil­trów graficznych używanych jako Live Effects. Jeżeli zapiszesz jako styl jedynie usta­wienia efektu, będziesz mógł je zastosować, korzystając z jednego kliknięcia myszą. W pa­lecie Styles wyświetlane są również miniaturowe podglądy zachowanych efektów (ry­sunek 12.24).

Rysunek 12.24. Każdy efekt zachowany jako styl posiada miniaturę przedstawiającą jego wygląd

Aby utworzyć nowy styl używający własnego efektu:

273. Zaznacz obiekt, do którego zastosowany jest Twój efekt.

274. Wybierz z menu polecenie WindowStyles lub użyj skrótu klawiaturowego Shif+F11 (Shift+F11), aby otworzyć paletę Styles. Możesz też klik­nąć jej zakładkę, jeśli znajduje się na ekranie.

275. Kliknij znajdujący się w palecie Styles przycisk New Style (Nowy styl).

276. W oknie dialogowym Edit Style wpisz opisową nazwę efektu w polu teks­to­wym Name i usuń zaznaczenia wszystkich opcji z wyjątkiem Effect.

199. Kliknij OK. W palecie Styles pojawi się nowy styl.

Każdy styl zapisany za pomocą powyższej procedury będzie dostępny w każdym doku­men­cie Fireworks. Aby zastosować efekt wystarczy, że zaznaczysz obiekt Fireworks i klik­niesz wybrany styl.

	Jeśli wyeksportujesz swój styl, nie będzie on poprawnie działał na in­nych komputerach, w których nie będą zainstalowane wszystkie po­trzeb­ne efek­ty. Możesz się przed tym ustrzec, stosując wyłącznie stan­dar­dowe Live Effects dostępne w Fireworks.

Złożone kombinacje różnych efektów są bardzo przydatne, ale zapisywanie pro­s­tych efektów również pomoże Ci zaoszczędzić wiele czasu. Przy tworzeniu przy­cisków o wymiarach 88×31 pikseli często używam takiego samego zewnętrznego cie­nia lub 4-pik­selowej, płaskiej wewnętrznej fazy. Zapisanie tych efektów jako stylów pozwoliło mi zaoszczędzić trochę czasu i nie muszę codziennie wykonywać takich sa­mych czyn­ności.

	Więcej informacji o możliwościach stylów znajdziesz w rozdziale 16.

Xtras XE "Xtras"

Wiele pozycji znajdujących się w menu Xtras dostępnych jest również w pa­lecie Effect, jednak wybranie rozszerzenia z menu Xtras działa inaczej niż wy­branie tego samego Xtra z palety Effect:

• Filtry dostępne w menu Xtras mogą być stosowane do dowolnych typów za­zna­czeń w Fireworks w obu trybach: wektorowym i bitmapowym, podczas gdy te same filtry dostępne w palecie Effect mogą być stosowane jedynie w trybie wek­torowym.

• W przeciwieństwie do palety Effect, zastosowanie filtra z poziomu menu Xtras po­woduje przekształcenie tekstów i obiektów wektorowych na bitmapy, re­du­ku­jąc w ten sposób możliwości ich edycji.

Zanim wybierzesz filtr z menu Xtras, musisz zdecydować, jakie obiekty chcesz mo­dy­fi­ko­wać i odpowiednio je zaznaczyć. Wszystkie Xtra instalowane wraz z Fireworks pra­cują z dowolnymi zaznaczeniami, ale niektóre zewnętrzne rozszerzenia lepiej sprawdzają się w pracy z zaznaczeniami obiektów bitmapowych, a czasami nawet wymagają takich zaznaczeń, aby w ogóle mogły zadziałać.

Obiekty wektorowe XE "Xtras:obiekty wektorowe"

Jak zostało wspomniane wcześniej, zastosowanie Xtra do obiektu wektorowego lub ca­łej grupy takich obiektów powoduje ich przekształcenie na obrazek bitmapowy. Od­rzu­ca­ne są wszystkie informacje o wektorach, takie jak możliwość skalowania i edycji, któ­re posiada obiekt wektorowy. Przed zastosowaniem Xtra spróbuj użyć jednego z Live Effects, aby zobaczyć jak będzie wyglądał Twój obiekt po zastosowaniu filtra. Gdy obiekt wektorowy zostanie przekształcony na bitmapę, będziesz mógł cofnąć tę ope­­rację jedynie za pomocą polecenia Undo lub palety History.

Niekiedy jednak możesz uzyskać najlepsze rezultaty poprzez po­łą­cze­nie ze sobą grafiki wektorowej z bitmapową. Jeśli chcesz użyć Xtra, poz­walającego na wprowadzenie nowych elementów poza zaznaczonym obszarem (na przykład filtr Eye Candy Fire, który tworzy pło­mie­nie wokół obrazka), możesz zastosować filtr do kopii obiektu, a na­s­tępnie umieścić powstały obrazek za oryginalnym obiektem i zgru­pować je. Nadal będziesz mógł zmieniać kolory obiektu wekto­ro­we­go i stosować do niego Live Effects. Jeśli zmienisz rozmiary obiek­tu, powinieneś usunąć obrazek i zastosować zachowane ustawienia fil­tra do nowej kopii obiektu. Jeżeli używasz Xtra, które modyfikuje ob­sza­ry znajdujące się wewnątrz zaznaczenia, spróbuj zastosować filtr do ko­pii obiektu, a następnie wykorzystać tę kopię jako maskę alfa orygi­nal­ne­go obiektu. Nie wchodząc w tryb edycji grafiki bitmapowej, można w ten sposób uzyskać wiele interesujących efektów.

Gdy stosujesz Xtra do obiektu wektorowego, Fireworks wyświetli ostrzeżenie o tym, że obiekt zostanie przekształcony na bitmapę. Możesz wyłączyć wyświetlanie te­go okna poprzez usunięcie zaznaczenia pola wyboru z etykietą „don't show again” („nie wyświetlaj ponownie”). Proponuję jednak na razie pozostawić te opcję nie­za­zna­czo­ną, dopóki nie przeprowadzisz kilku takich konwersji. Jeśli przypadkowo prze­kształ­cisz obiekt wektorowy na bitmapowy i zapiszesz dokument, wszystkie informacje o wek­torach zostaną bezpowrotnie usunięte.

Aby zastosować Xtra do obiektu wektorowego, zaznacz ten obiekt i wybierz żądane polecenie z menu Xtras.

Obiekty bitmapowe XE "Xtras:obiekty bitmapowe"

Stosowanie Xtra do obiektów bitmapowych jest zdecydowanie łatwiejsze. Musisz pamiętać je­dy­nie, że niektóre z nich rysują dodatkowe elementy na zewnątrz zaznaczenia, aby utworzyć efekt imitujący poruszenie lub zewnętrzny cień. Jeśli obiekt bitmapowy ma takie same wy­miary jak obszar roboczy, efekt będzie niewidoczny, ponieważ znajduje się poza ob­sza­rem roboczym albo (w przypadku niektórych Xtras) nie został w ogóle stworzony. Przed zastosowaniem filtra powiększ obszar roboczy, aby zapewnić mu trochę miejsca.

Aby zastosować Xtra do obiektu bitmapowego, zaznacz go i wybierz pożądany filtr z menu Xtras.

Zaznaczanie w obiektach bitmapowych

Wiele filtrów działa najlepiej, gdy są stosowane do zaznaczeń tworzonych w obrazkach bit­mapowych, gdyż mogą wówczas utworzyć różnicę pomiędzy obszarem znajdującym się wewnątrz i obszarem znajdującym się na zewnątrz zaznaczenia. Najczęściej złożone zaznaczenia, takie jak te tworzone narzędziami Magic Wand lub Polygon Lasso, sprawdzają się lepiej niż proste, prostokątne lub okrągłe. Im bardziej złożone zaznaczenia, tym wię­cej jest obszarów, w których filtr może utworzyć dodatkowe elementy, takie jak fazy, cie­nie lub tekstury.

	Utworzenie zaznaczenia nie oznacza, że Xtra będzie mogło działać jedynie wew­nątrz niego. Mimo że większość filtrów działa wewnątrz obszarów zaznaczonych, nie­które tworzą dodatkowe elementy również poza ich obszarem. Zaznaczenie służy do wskazania centralnego punktu, od którego Xtra roz­po­czyna swoje działanie.

Aby zastosować Xtra do zaznaczenia w obiekcie bitmapowym, w trybie edycji grafiki bit­ma­powej użyj jednego z narzędzi Marquee do utworzenia zaznaczenia, a następnie wybierz od­powiedni filtr z menu Xtras.

	Więcej informacji o tworzeniu zaznaczeń w obiektach bitmapowych znaj­dziesz w rozdziale 6.

Fałszywe zaznaczenia

Niektóre filtry ignorują utworzone zaznaczenia i są zastosowywane do całych obiektów bit­ma­powych. Jeśli znajdziesz filtr, który będzie się zachowywał właśnie w taki sposób, mo­żesz temu zaradzić poprzez utworzenie „fałszywego zaznaczenia”. Skopiuj w tym celu ut­wo­rzone zaznaczenie do schowka i wklej go jako nowy obiekt bitmapowy.

	Wszystkie filtry z pakietu Kai's Power Tools 5 (opisywane w jednym z ko­lejnych podrozdziałów) są zastosowywane do całych obiektów bit­ma­powych i będziesz musiał wykonać fałszywe zaznaczenie, aby ogra­ni­czyć ich działanie do wybranych fragmentów obrazka.

Aby utworzyć fałszywe zaznaczenie:

277. Wybierz z menu polecenie ModifyEdit Bitmap lub użyj skrótu klawiaturowego Ctrl+E (Command+E), aby przejść do trybu edycji grafiki bitmapowej.

278. Wybierz jedno z narzędzi Marquee z palety narzędziowej i zaznacz obszar, do którego chcesz zastosować Xtra.

279. Skopiuj zaznaczenie do schowka za pomocą polecenia EditCopy lub skrótu kla­wia­turowego Ctrl+C (Command+C).

280. Wklej zaznaczenie z powrotem do dokumentu za pomocą polecenia EditPaste lub skrótu klawiaturowego Ctrl+V (Command+V).

Zaznaczenie zostanie wklejone jako nowy obiekt bitmapowy i umieszczone nad ob­szarem, z którego zostało skopiowane. Mimo że obiekt bitmapowy posiada ram­kę selekcji, ma takie same wymiary i kształt jak oryginalny obiekt sko­pio­wa­ny do schowka.

200. Zastosuj filtr do nowego obiektu bitmapowego, wybierając jego nazwę z me­nu Xtras.

Xtra zostanie zastosowane tylko do nowego obiektu.

201. Wybierz z menu polecenie ModifyExit bitmap mode, użyj skrótu klawiaturowego Ctrl+Shift+E (Command+Shift+E) lub kliknij znajdujący się na dole okna dokumentu przy­cisk „STOP”, aby powrócić do trybu edycji grafiki wektorowej.

Oryginalny obiekt bitmapowy oraz ten, który utworzyłeś i zastosowałeś do niego filtr są te­raz połączone w jeden obiekt. W rezultacie zmodyfikowany został jedynie zaznaczony obszar.

Stosowanie Xtras do wielu obiektów jednocześnie

Oprócz pojedynczych obiektów, Xtras można stosować również do zaznaczeń lub grup obiek­tów. Jeżeli zaznaczenie lub grupa zawiera jakiś obiekt wektorowy, zostanie on prze­kształ­cony na obiekt bitmapowy, czyli tak samo, jak w przypadku stosowania filtrów do po­jedynczych obiektów. Stosując Xtra do wielu obiektów jednocześnie, musisz pa­mię­tać o następujących rzeczach:

• Jeśli zastosujesz Xtra do zaznaczonych obiektów w trybie edycji grafiki wektorowej, zostanie ono uruchomione wielokrotnie, dla każdego obiektu z osobna. Je­żeli zaznaczysz trzy obiekty, Xtra zostanie uruchomione trzy razy (kolejno dla każdego obiektu). Jeśli klikniesz przycisk Cancel, znajdujący się w oknie dia­logowym filtra, cała operacja będzie anulowana i nie zostaną zmody­fi­ko­wa­ne żadne obiekty.

• Jeśli zastosujesz Xtra do grupy obiektów, filtr zostanie uruchomiony tylko raz, jak dla pojedynczego obiektu. Wszystkie obiekty staną się jednym obiektem bit­mapowym i nie będziesz mógł ich rozdzielić. Aby zgrupować ze sobą wiele obiek­tów, zaznacz je i wybierz z menu polecenie ModifyGroup lub użyj skrótu klawiaturowego Ctrl+G (Command+G).

	Inaczej działają jedynie filtry Adjust Color, Blur, Other i Sharpen, które są instalowane razem z Fireworks (znajdują się poniżej pierwszego se­pa­ratora w menu Xtras). Działają one z zaznaczonymi obiektami tak, jak­by były zgrupowane.

Różnica w działaniu filtrów w odniesieniu do grup i zaznaczeń obiektów jest dość przy­dat­na. Załóżmy, że utworzyłeś pięć obiektów, które chcesz wykorzystać jako przyciski in­terfejsu nawigacyjnego. Jeśli chcesz zastosować do nich wszystkich filtr z takimi sa­my­mi ustawieniami, zgrupuj je i wybierz Xtra. Jeśli jednak chcesz zastosować do nich taki sam filtr, ale z różnymi ustawieniami (żeby na przykład do każdego dodać nieco in­ną teksturę), tylko je zaznacz i zastosuj Xtra.

	Większość Xtra po uruchomieniu ma takie same ustawienia, jakie mia­ły przy ostatnim wykorzystaniu. Gdy zastosujesz filtr do grupy obiektów, przy drugim uruchomieniu Xtra będzie miał takie same usta­wie­nia, jakie nadałeś mu przy pierwszym obiekcie. Taka praca fil­trów pozwala zastosować podobny efekt do wielu różnych obiektów. W niektórych Xtras możesz również zachować ich ustawienia.

Zewnętrzne filtry XE "zewnętrzne filtry" zgodne z Photoshopem

Dotychczas dowiedziałeś się, co możesz osiągnąć z pomocą Live Effects i Xtras in­sta­lo­wa­nych wraz z Fireworks, ale to dopiero wierzchołek góry lodowej. Dostępnych jest wie­le filtrów typu modułów dodatkowych zgodnych z Photoshopem, produkowanych przez wiele róż­nych firm.

Fireworks obsługuje filtry zgodne z Photoshopem, ale niektórzy produ­cen­ci tworzą filtry przeznaczone jedynie dla Photoshopa, które nie dzia­łają w innych aplikacjach. Lista filtrów uznanych przez program za nie­zgodne znajduje się w pliku Disabled plugins.txt w katalogu Xtras Fire­works. To, że filtr nie znajduje się na tej liście, nie oznacza jesz­cze, że na pewno będzie działał w Fireworks. Zawsze, kiedy to moż­li­we, przed zakupem filtru zapytaj producenta oprogramowania, czy jest on zgodny z Fireworks.

Instalowanie XE "zewnętrzne filtry:instalowanie" pakietów zewnętrznych filtrów

Większość pakietów filtrów posiada programy instalacyjne, takie jak te dostarczane wraz z większością aplikacji, na przykład z Fireworks. Przed rozpoczęciem instalacji pa­kie­tu zamknij Fireworks. I tak będziesz musiał ponownie uruchomić Fireworks, aby móc używać tych filtrów. Gdy program instalacyjny zapyta Cię o położenie katalogu z modułami dodatkowymi Photoshopa, podaj lokalizację katalogu Xtras Fireworks wewnątrz folderu Configuration. Jeśli pakiet nie po­­sia­da programu instalacyjnego, musisz ręcznie skopiować wszystkie filtry do kata­lo­gu Xtras.

	W Windows ścieżka dostępu do katalogu programu Fireworks to prze­waż­nie: C:\Program Files\Macromedia\Fireworks 4. W Mac­OS znajduje się ona przeważnie w katalogu Macintosh HD:Applica­tions: Fi­reworks 4.

Po zakończeniu instalacji uruchom Fireworks. W menu Xtras i rozwijanej liście Effects Ca­tegory w palecie Effect (jeśli Fireworks może używać filtrów jako Live Effects) po­win­ny pojawić się nowe opcje. Przeważnie jest to podmenu zawierające wiele nowych fil­trów. Niekiedy nowe efekty umieszczane są w menu istniejących. Jeśli masz na przy­kład podmenu Distort (niektóre z filtrów Photoshopa 5 tworzą takie podmenu) i za­in­sta­lu­jesz Xtra, które również należy do tej kategorii, nie zobaczysz nazwy filtra, dopóki nie otworzysz podmenu Distort.

	Gdzie możesz znaleźć więcej filtrów? Na dobry początek odwiedź stro­nę The Plugin Site (www.thepluginsite.com), gdzie znajdziesz wiele filtrów i łączy. Inne miejsca to: Alien Skin (www.alienskin.com) HYPERLINK http://www.alienskin.com) , Furbo Filters (www.furbo-filters.com), VanDerLee (www.v-d-l.com) i oczywiście filtry zgodne z Photoshopem sprzedawane przez Adobe (www.adobe.com).

Wykorzystywanie filtrów w wielu aplikacjach XE "zewnętrzne filtry:wykorzystywanie w wielu aplikacjach"

Jeśli oprócz Fireworks używasz jeszcze jakiejś innej aplikacji do edycji grafiki, być mo­że masz już w swoim komputerze wiele filtrów, które możesz wykorzystać również w Fire­works.

Współużytkowanie filtrów przez wiele aplikacji dodaje do nich wszystkich wie­le nowych możliwości i pozwala przyspieszyć pracę, gdyż nie musisz przechodzić po­między aplikacjami, aby zastosować określony efekt.

Oprócz Fireworks jest kilka innych aplikacji, które używają filtrów zgodnych z Pho­to­shopem:

• Adobe Photoshop i Illustrator.

• Macromedia FreeHand i Director.

• Corel Photo-Paint i CorelDRAW.

Mam około sześciu lub siedmiu aplikacji używających filtrów, więc przechowuję fil­try w jednym katalogu (niezależnym od wszystkich aplikacji) i ustawiam go jako ka­ta­log modułów dodatkowych dla wszystkich aplikacji. Można również instalować filtry wielokrotnie, dla każdej aplikacji osobno.

Być może masz tylko jedną aplikację używającą standardowych filtrów, na przykład sa­me­go Photoshopa. W takim przypadku możesz wskazać Fireworks katalog modułów dodatkowych tej aplikacji jako dodatkowy katalog Xtras.

Aby zdefiniować dodatkowy katalog filtrów:

281. Wybierz z menu polecenie EditPreferences.

Zostanie otwarte okno dialogowe Preferences.

202. Kliknij zakładkę Folders (wybierz opcję Folders w MacOS) (rysunek 12.25).

Rysunek 12.25. Fireworks może używać filtrów znajdujących się w innym katalogu w Twoim komputerze, na przykład katalogu modułów dodatkowych Photoshopa

203. Zaznacz opcję Photoshop Plug-Ins.

204. Kliknij przycisk Browse znajdujący się obok opcji Photoshop Plug-Ins.

Fireworks wyświetli nawigacyjne okna dialogowe.

205. Zaznacz katalog zawierający filtry, które chcesz wykorzystać w Fireworks. Kliknij OK.

206. Aby zmiany zostały uwzględnione w menu Xtras i można było używać nowych fil­trów, musisz ponownie uruchomić Fireworks.

Wykorzystywanie skrótów (aliasów)
do katalogów modułów dodatkowych

Inną metodą definiowania dodatkowych katalogów z modułami dodatkowymi jest umieszczanie skró­tów (aliasów) do tych katalogów w katalogu Xtras Fireworks. Oprócz tego, że jest to bar­dzo intuicyjny sposób określania lokalizacji filtrów, pozwala on również na zde­fi­nio­wa­nie więcej niż jednego dodatkowego katalogu z modułami dodatkowymi (rysunek 12.26).

Aby w Windows utworzyć skrót do katalogu z filtrami, kliknij go prawym przyciskiem my­szy i przeciągnij do katalogu Xtras Fireworks. Po zwolnieniu przycisku myszy zo­sta­nie wyświetlone kontekstowe menu, z którego wybierz polecenie Make Shortcut (Utwórz skrót). W MacOS przy przeciąganiu katalogu filtrów do katalogu Xtras Fire­works wciśnij klawisze Command+Option, co spowoduje automatyczne umieszczenie alia­su do katalogu z modułami dodatkowymi.

Alien Skin Eye Candy XE "zewnętrzne filtry:Alien Skin Eye Candy"

Eye Candy to popularny pakiet filtrów, które możesz instalować jako Xtra w Fireworks. Ra­zem z Fireworks instalowany jest pakiet trzech filtrów - Eye Candy 4000 LE. Nawet jeśli nie posiadasz jeszcze pełnego pakietu Eye Candy 4000, w tym podrozdziale znajdziesz opi­sy możliwości tych filtrów i będziesz mógł ocenić jakość i potencjał oferowany przez podobne pakiety.

	Firma Alien Skin tak zoptymalizowała swój pakiet Eye Candy 4000, aby moż­na było ich używać jako Live Effects w Fireworks, a także udostępniła program do aktualizacji starszej wersji Eye Candy 3.1. Znajdziesz go na stronie firmy Alien Skin (www.alien­s­kin.com) lub bezpośrednio na stronie Eye Candy (www.eyecan­dy.com).

W tym podrozdziale zajmiemy się klasycznymi efektami, takimi jak fazowanie, zew­nęt­rzne cienie, dym, poruszenie i zniekształcanie. Filtry Eye Candy są doskonałym wpro­wa­dzeniem do wszystkich innych pakietów filtrów, ponieważ są rodzajem efektów, które można wykorzystywać do wykonywania codziennych zadań każdego projektanta gra­fiki dla Internetu.

Oto zestawienie niektórych możliwości filtrów Eye Candy:

• Każdy z filtrów posiada zestawy gotowych ustawień, pozwalające na ich szyb­kie stosowanie. Dodatkowo możesz zapisywać własne parametry filtrów w liście goto­wych ustawień i wykorzystywać je w przyszłości.

• Dynamiczny podgląd umożliwia powiększanie i pomniejszanie grafiki w celu do­konywania precyzyjnych modyfikacji.

• Wszystkie filtry z pakietu Eye Candy mają wspólny interfejs, więc nie musisz się uczyć obsługi każdego z filtrów osobno (rysunek 12.27).

Rysunek 12.26. Umieść skróty (aliasy) do katalogów z filtrami w katalogu Xtras Fireworks, aby umożliwić Fireworks korzystanie z tych filtrów

Central folder of filters — Główny katalog filtrów

Alias in Photoshop's Plug-ins folder — Alias w katalogu modułów dodatkowych Photoshopa

Alias in Fireworks' Xtras folder — Alias w katalogu Xtras Fireworks

Alias in FreeHand's Xtras folder — Alias w katalogu Xtras FreeHand

Rysunek 12.27. Filtry Eye Candy słyną z dynamicznego interfejsu i łatwości w korzystaniu z gotowych ustawień. Na ilustracji widać logo Fireworks „rozpalane” za pomocą filtra Fire

Filter-specific control sliders — Suwaki zmieniające się w zależności od używanego filtra

Zoom out button — Pomniejsz

Zoom Setting display — Skala powiększenia

Zoom in button — Powiększ

Help button — Pomoc

Cancel button — Anuluj

OK button — Przycisk OK

About button — Informacje o programie

Auto preview checkbox — Pole automatycznego podglądu

Preview button — Przycisk podglądu

Before view — Widok przed zastosowaniem filtra

Preset option list — Lista gotowych ustawień

After view — Widok po zastosowaniu filtra

Save preset button — Zapisz ustawienia

Delete preset button — Usuń ustawienia

W tabeli 12.3 znajdziesz opisy działania wszystkich filtrów wchodzących w skład pa­kie­tu Eye Candy. Większość z nich jest podobna dla wersji 4000 i starszej 3.1. Jednak w wersji 4000 filtry zostały uzupełnione o nowe właściwości.

	Wiele filtrów Eye Candy dodaje elementy poza obszarem zaznaczonym, dla­te­go też ich działanie w dużym stopniu zależy od zaznaczenia utworzonego w obiek­cie bitmapowym i odległości pomiędzy tym obiektem a kra­wę­dzia­mi obszaru roboczego.

Jiggle

Filtr Jiggle tworzy niepowtarzalne zniekształcenie obrazka oparte na losowo rozmiesz­cza­nym „wrzeniu”. Tworzony w ten sposób deseń wygląda o wiele bardziej przypadkowo i organicznie (mniej komputerowo) niż wiele innych zniekształcających filtrów. Zaznaczony obszar może po zastosowaniu filtra wyglądać tak jakby wrzał, był żelowany lub rozbity.

Aby użyć filtra Jiggle, zaznacz obrazek i:

282. Wybierz z menu polecenie XtrasEye Candy 4000 (lub 3.1)Jiggle.

Zostanie otwarte okno dialogowe Jiggle (rysunek 12.28).

Rysunek 12.28. Filtr Jiggle tworzy organicznie wyglądające zniekształcenia poprzez zastosowanie efektu wrzenia. Trzeci obrazek (po prawej) jest oryginalnym obrazkiem z filtrowanym obrazkiem zastosowanym jako maska alfa. W przezroczystych obszarach obrazka wyświetlany jest zmieniający się kolor obszaru roboczego

Original image — Obrazek oryginalny

Jiggled image — Obrazek po zastosowaniu filtra Jiggle

Jiggled image as alpha mask — Filtrowany obrazek użyty jako maska alfa

207. Za pomocą kontrolek dostosuj ustawienia efektu:

• Bubble Size slider (Rozmiary baniek). Ustawia częstotliwość znie­kształ­ceń. Im mniejsza wartość, tym bliżej siebie rozłożone zniekształcenia.

• Warp Amount (Stopień zniekształcenia). Steruje stopniem zniekształcenia zaznaczenia.

Tabela 12.3.

Alien Skin Eye Candy 4000

Filtr	Opis
Antimatter (Odwrotność)	Odwraca jasność obrazka nie wpływając przy tym na jego barwy i nasycenie. Na przykład ciemna czerwień staje się jasną czerwienią, ale wciąż pozostaje czerwienią
Bevel Boss (Carve, Inner Bevel i Outer Bevel w 3.1) (Faza)	Wytłacza lub rzeźbi zaznaczony obszar w obiekcie. W wersji 4000 znajduje się dodatkowo edytor fazowania, umożliwiający dostosowanie efektu
Chrome (Chrom)	Efekt metalizowania, symulujący chrom, srebro, złoto i inne metale
Corona (tylko w 4000) Korona	Tworzy efekty astronomiczne, jak chmury gazowe i wybuchy na słońcu
Cutout (Wycinanie)	Wycina obszar zaznaczenia w obrazku i dodaje do niego cień. Zaznaczenie wygląda wówczas jak wnęka w obrazku
Drip (tylko w 4000) (Kapanie)	Wyrafinowana wersja efektu świeżej farby
Fire (Ogień)	Tworzy realistyczny efekt płonącego obszaru zaznaczenia lub całego obiektu
Fur (Futro)	Nanosi na obrazek losowo rozmieszczane kępki futra
Glass (Szkło)	Symuluje nałożenie arkusza kolorowego szkła
Gradient Glow (Glow w 3.1) (Poświata)	Otacza krawędzie obiektu lub zaznaczenia półprzezroczystą poświatą. W wersji 4000 znajduje się dodatkowo edytor gradientu, umożliwiający dostosowanie efektu
HSB Noise (Szum HSB)	Dodaje do obrazka szum poprzez zmianę jego barw, nasycenia, jasności i przezroczystości
Jiggle (Wstrząśnięcie)	Tworzy efekt wrzenia, żelowania lub rozbicia
Marble (tylko w 4000) (Marmur)	Tworzy teksturę marmurową
Melt (tylko w 4000) (Topienie)	Obiekty wyglądają tak, jakby się roztapiały
Motion Trail (Poruszenie)	Tworzy wrażenie ruchu poprzez utworzenie smug biegnących w jednym kierunku na zewnątrz obiektu
Shadowlab (Drop Shadow i Perspective Shadow w 3.1) (Laboratorium cieni)	Dodaje cień zewnętrzny lub naturalny cień perspektywiczny do zaznaczonego obszaru lub całego obiektu
Smoke (Dym)	Tworzy dym wychodzący z zaznaczonego obszaru lub całego obiektu
Squint (Zez)	Rozmywa zaznaczony obszar lub cały obiekt, które wyglądają, jakby były oglądane przez widza o słabym wzroku
Star (Gwiazda)	Tworzy gwiazdy i inne wielokątne kształty
Swirl (Wirówka)	Dodaje do obrazka losowo rozmieszczone wiry
Water Drops (Krople wody)	Dodaje do obrazka losowo rozmieszczone krople wody
Weave (Plecionka)	Stosuje do obrazka efekt plecionki
Wood (tylko w 4000) (Drewno)	Tworzy teksturę drewna

• Twist (Skręt). Steruje poziomem skręcenia efektu, mierzonym w stopniach.

• Rozwijana lista Movement Type (Rodzaj poruszenia). Można z niej wy­brać sposób zniekształcania obrazka. Do wyboru mamy Bubbles (Bańki) — równomierne zniekształcenie, Brownian Motion (Ruchy Browna) — efekt braku uporządkowania i Turbulence (Turbulencja) — bardzo wyraźne zniekształcenia obrazka.

208. Za pomocą przycisku Save Preset możesz zapisać własne ustawienia efektu. Kliknij OK po zakończeniu.

Efekt zostanie zastosowany do obrazka.

Shadowlab (Laboratorium cieni) — Perspective Shadow w 3.1

Zwykłe zewnętrzne cienie są wszechobecne w grafice. Filtr Eye Candy 4000 Shadowlab lub jego poprzednik w 3.1 Perspective Sha­dow umożliwia tworzenie bardziej realistycznych cieni imitujących te, jakie są two­rzo­ne przez światło słoneczne.

Po zastosowaniu efektu zaznaczenie wygląda tak, jakby zos­ta­ło podniesione oraz oświetlone od góry i z przodu. Cień jest przyporządkowywany do obiektu, tworząc w ten sposób wrażenie trójwymiarowej perspektywy.

Aby użyć filtru Shadowlab lub Perspective Shadow, zaznacz obiekt i:

283. Wybierz z menu polecenie XtrasEye Candy 4000Shadowlab lub XtrasEye Candy 3.1Perspective Shadow.

Zostanie otwarte okno dialogowe Shadowlab lub Perspective Shadow.

209. Wybierz jeden z gotowych zestawów ustawień efektu lub ustaw pożądane atry­bu­ty za pomocą następujących kontrolek:

• Vanishing Point Direction (Kierunek punktu zbiegu) - określa kierunek cie­nia rzucanego przez obszar zaznaczony. Cień zawsze będzie padał za tym obszarem.

• Vanishing Point Distance (Odległość punktu zbiegu) - określa odległość znaj­dującego się na horyzoncie punktu oddalającego się od obszaru zaznaczonego. Im niż­sze wartości, tym cień znajduje się bliżej obiektu.

• Shadow Lenght (Długość cienia) - definiuje długość cienia, nie wpływając przy tym na jego grubość. Im niższe wartości, tym krótszy cień.

• Blur (Rozmycie) - steruje rozmyciem krawędzi cienia. Wysokie wartości po­wodują większe rozmycie cienia i utworzenie efektu oddalonego źródła światła.

• Opacity (Krycie) - steruje przezroczystością całego cienia.

• Color (Kolor) - zmienia kolor cienia.

210. Jeśli chcesz, możesz za pomocą przycisku Save Preset zapisać swoje usta­wie­nia filtra. Po zakończeniu kliknij przycisk OK (znacznik).

Efekt zostanie zastosowany do obrazka (rysunek 12.29).

Rysunek 12.29. Filtry Candy 4000 Shadowlab i Eye Candy 3.1 Perspective Shadow umożliwiają tworzenie realistycznych, trójwymiarowych cieni. Po lewej stronie ilustracji znajduje się oryginalny obiekt wektorowy, zaś po prawej - obiekt bitmapowy po zastosowaniu filtra Perspective Shadow

Original object — Obiekt oryginalny

Perspective Shadowed object — Obiekt z cieniem perspektywicznym

Kai's Power Tools 5 XE "zewnętrzne filtry:Kai's Power Tools 5"

Filtry z pakietu Kai's Power Tools 5 wyróżnia fakt, że pozwalają one dokonywać eks­tre­malnych modyfikacji obrazków. Po zastosowaniu jednego z Xtras można uzyskać obra­zek wyglądający zupełnie inaczej niż oryginalna grafika. Prawdę mówiąc, sporo pracy kosz­tuje takie ustawienie filtra, aby obrazki były rozpoznawalne.

	Kai w nazwie Kai's Power Tools to Kai Krause, człowiek-legenda wśród grafików komputerowych, który stworzył pakiet Kai's Power Tools.

Oto najważniejsze możliwości, jakie daje pakiet KPT 5:

• Kompleksowe maskowanie i opcje przezroczystości.

• Kompleksowe trójwymiarowe oświetlenie i opcje dotyczące otoczenia obiektu.

• Interaktywne okna podglądu.

• Wbudowane ustawienia filtrów wraz z ich miniaturowymi podglądami.

• Wspólny dla wszystkich filtrów pakietu interfejs użytkownika (rysunek 12.30).

	W kolorowej wkładce możesz zobaczyć, jakie możliwości daje filtr FraxPlorer.

Rysunek 12.30. Interfejs filtrów z pakietu KPT 5 może wydawać się na początku skomplikowany, ale zawiera wiele użytecznych opcji. Filtr zaprezentowany na ilustracji to FraxPlorer

Filter-specific ... panels — Panele specyficzne dla danego filtra

KPT preferences button — Preferencje KPT

Filter preferences button — Preferencje filtra

Preview window — Okno podglądu

KPT Web ... button — Łącze do strony internetowej KPT

Credits button — Informacje o twórcach pakietu

Preset button — Wbudowane ustawienia

Interface ... dots — Przyciski wyboru układu interfejsu filtra

Setting ... dots — Przyciski zapisu układu interfejsu

Cancel button — Anuluj

OK button — Przycisk OK

Pakiet KPT 5 zawiera również pakiet Kai's Power Tools 3 składający się z 19 użytecznych modułów dodatkowych, który czyni KPT 5 jeszcze bardziej war­toś­ciowym.

W tabeli 12.4 znajduje się zestawienie wszystkich filtrów z pakietu KPT 5.

RadWarp

Filtr KPT RadWarp symuluje efekt fotograficzny nazywany beczką. Możesz dodać do gra­fiki efekt „rybiego oka”, aby utworzyć fantastyczne warianty grafiki, lub efekt prze­ciw­ny do „rybiego oka”, z lekkim, niepożądanym efektem beczki.

	Nawet jeśli utworzysz jakieś zaznaczenie, wszystkie filtry KPT 5 oddziałują na cały obiekt bitmapowy. Jeśli chciałbyś zastosować efekt jedynie do wy­branego fragmentu obrazka, przeczytaj w podrozdziale „Fałszywe zaznaczenia”, jak sobie z tym możesz poradzić.

Tabela 12.4.

Kai's Power Tools 5

Filtr	Opis
Blurrrr (Rozmycie)	Zawiera prawie wszystkie możliwe efekty rozmycia: wirówki, powiększenia, spirale i poruszenia
Noize	Różne efekty szumu, m.in. szum przezroczysty
RadWarp	Tworzy lub poprawia efekt „rybiego oka”
Smoothie	Oferuje wiele metod łatwego i szybkiego oczyszczania postrzępionych krawędzi
Frax4D	Tworzy trój- lub czterowymiarowe fraktale. Czterowymiarowy fraktal wygląda jak „poskręcana” trójwymiarowa wersja
FraxFlame	Efekt tworzony z fraktali imitujący ogień. W rezultacie powstają obrazki wyglądające jak fotografie sztucznych ogni robione przy długim czasie naświetlania
FraxPlorer	Niesamowity eksplorator fraktali umożliwiający tworzenie w czasie rzeczywistym filmów fraktalnych. Możesz go wykorzystać do tworzenia wspaniałych tekstur i obrazków tła lub po prostu do zabawy
FiberOptix	Nakłada na obrazek trójwymiarowe włókna, dołączając do nich maskę. Możesz tworzyć „kosmate” obiekty i łatwo je komponować z pozostałymi elementami grafiki
Orb-It	Tworzy bardzo szczegółowe, trójwymiarowe kule. Możesz go wykorzystać do tworzenia baniek, kropel deszczu, soczewek i zniekształceń
ShapeShifter	Tworzy z masek trójwymiarowe kształty, np. mapy otoczenia i tekstury

Aby użyć filtru RedWarp, zaznacz obiekt bitmapowy i:

284. Wybierz z menu polecenie XtrasKPT 5RadWarp.

Zostanie otwarte okno dialogowe RadWarp (rysunek 12.31).

211. Ustaw żądane parametry efektu za pomocą następujących kontrolek:

• Alpha slider (Suwak alfa) - steruje dodawaniem okrągłych zniekształceń;

• Beta slider (Suwak beta) - steruje dodawaniem kwadratowych znie­kształceń;

• X Center (Poziomy środek) - ustawia poziomy środek położenia znie­kształceń;

• Y Center (Pionowy środek) - ustawia pionowy środek położenia znie­kształceń.

Rotacja powoduje obrócenie obrazka.

212. Kliknij OK, aby zastosować efekt.

Efekt zostanie zastosowany do obrazka.

Rysunek 12.31. Filtr RedWarp dostarcza wiele zabawy i potrafi tworzyć skrajne efekty, na przykład bardzo dziwnie wyglądające twarze
		Standardowo wszystkie okna dialogowe KPT 5 są otwierane w trybie peł­no­ekranowym, ale jeśli chcesz, możesz je skalować do prede­fi­nio­wa­nych rozmiarów. Przytrzymaj klawisz Ctrl (Command) i wciśnij kla­wisz 1 dla wymiarów 640×480, 2 dla 800×600, 3 dla 1024×768, 4 dla 1152×870, 5 dla 1280×1024 lub 0 dla trybu pełnoekranowego. Układy okien są rów­nież ustawiane jako Panel Auto Popup, co moim zdaniem jest roz­pra­sza­jące. Kliknij nazwę filtra wyświetlaną na górze jego okna dialo­go­we­go, aby wybrać opcje panelu. Jeśli posiadasz monitor pracujący w nis­kiej roz­dzielczości, najlepszym wyborem jest tryb Panel Solo.
		Położenie środków zniekształceń możesz także modyfikować, prze­cią­ga­jąc je za pomocą myszy w oknie podglądu.

ShapeShifter

Podczas pracy z obiektami wektorowymi w Fireworks możesz wykorzystywać Live Effects do stosowania zadziwiających, trójwymiarowych efektów. Jeśli kiedykolwiek pró­bowałeś uzyskać taki sam efekt za pomocą Live Effects stosowanych do obiektów bit­mapowych, prawdopodobnie byłeś zawiedziony wynikami. Filtr Shape­Shifter z pakietu KPT 5 umożliwia tworzenie obiektów bitmapowych, które mogą śmia­ło konkurować z obiektami wektorowymi.

Aby użyć filtra ShapeShifter, zaznacz obiekt i:

285. Wybierz z menu polecenie XtrasKPT 5ShapeShifter.

Zostanie otwarte okno dialogowe ShapeShifter (rysunek 12.32).

Rysunek 12.32. Wykorzystanie filtra ShapeShifter do obiektów bitmapowych pozwala osiągnąć ich trójwymiarowy wygląd, który może konkurować z podobnymi efektami tworzonymi za pomocą Live Effects stosowanymi do obiektów wektorowych

213. Kliknij miniaturowy podgląd znajdujący się w panelu Main Shape, aby zaim­por­tować maskę. Maski określają sposób dodawania trójwymiarowych kształ­tów do obrazków. Za pomocą atrybutów Bevel Scale i Height zdefiniujesz wiel­kość efe­ktu 3D. Można wybierać spośród trzech różnych trybów fazo­wania.

	Niestety filtry KPT 5 nie mogą wykorzystywać obrazków zapisanych w for­macie PNG jako masek. Jeżeli chcesz utworzyć maskę dla KPT 5, wy­eksportuj ją z Fireworks w formacie TIFF.

214. W panelu 3D Lighting dodaj źródła światła za pomocą przycisku +. Możesz prze­ciągać źródła światła w inne położenia, aby zmienić położenia odblasków i cie­ni tworzonych w obrazku.

215. W panelu Bump Map dodaj do obrazka trójwymiarową teksturę oraz ustaw jej ska­lę i wysokość. Skalowanie powoduje powiększenie tekstury. Wysokość de­fi­­niuje wielkość trójwymiarowego efektu tworzonego przez nakładaną teksturę.

216. W panelu Glow dodaj kolorowy blask do obrazka. Możesz określić prze­su­nię­cie blasku względem obrazka i modyfikować jego przezroczystość.

217. W panelu Shadow dodaj cień do obrazka. Podobnie jak w przypadku blasku, mo­żesz przesunąć cień względem obrazka, wybrać jego kolor i określić prze­zro­czystość.

	Za pomocą ikony oka znajdującej się w panelu Glow możesz wy­świe­tlać i ukrywać blask tak samo, jak ukrywałeś i wyświetlałeś warstwy za pomocą ikon oka znajdujących się w jednej z palet Fireworks - Layers.

218. W panelu Top Mask możesz zaimportować inną maskę do utworzenia efektu pła­skorzeźby na trójwymiarowym obiekcie, tworząc wrażenie odbitej pieczęci.

219. W panelu Environment Map załaduj obrazek, który zostanie wykorzystany jako ma­pa otoczenia obiektu. Obrazek ten będzie odbijany przez trójwymiarowy kształt, tak jak niebo odbija się w spokojnym jeziorze. Pozwala to zwiększyć wra­żenie głębi obrazka.

	Ustawienia mapy otoczenia również możesz modyfikować w oknie pod­­glądu za pomocą myszy.

220. Kliknij OK (znacznik), aby zastosować efekt.

Efekt zostanie zastosowany do obrazka.

Podsumowanie

Efekty można traktować jak lukier na pączku, tylko co zrobić z pączkami bez lukru? A tak bardziej poważnie - efekty odgrywają ważną rolę w grafice internetowej, a zwła­sz­cza wtedy, gdy są wykorzystywane do tworzenia różnych wersji przycisków re­agu­ją­cych na zdarzenia myszy. Fireworks pozwala na łatwe tworzenie nawet najtrud­niej­szych z nich za pomocą swoich pięciu wbudowanych efektów i wielu predefiniowanych usta­wień. Stosując efekty w swoich grafikach, powinieneś pamiętać o następujących rze­czach:

• Filtry i efekty stosowane z poziomu palety Effect można zawsze edy­tować. Filtry stosowane z menu Xtras przekształcają obiekty tekstowe i wek­torowe na bitmapy.

• Po każdej modyfikacji grafiki, Fireworks ponownie zastosuje przydzielone do niej Live Effects.

• Wszystkie efekty Fireworks mogą być definiowane za pomocą palety Effect, któ­ra w zależności od wybranego efektu udostępnia specyficzne dla niego usta­wienia.

• Efekty Inner Bevel i Outer Bevel mają podobne działanie, ale dają zupełnie róż­ne rezultaty. Efekt Inner Bevel używa koloru obiektu do utworzenia jego wew­nęt­rznych krawędzi, zaś Outer Bevel używa koloru wybranego przez użytkownika do utworzenia obwódki biegnącej na zewnątrz obiektu.

• Efekt Drop Shadow umożliwia tworzenie cieni, znajdujących się za dowolnym obiektem wektorowym, tekstowym lub bitmapowym. Cienie te mogą być duże lub małe, subtelne lub grube - wedle uznania.

• Efekt płaskorzeźby usuwa wypełnienie i obrys obiektu, a następnie tworzy kra­wę­dzie na podstawie obszaru roboczego lub obiektu. Wygląda to tak, jakby obiekt wyłaniał się z tła lub się w nie wtapiał.

• Efekt Glow tworzy blask otaczający obiekt.

• Wykorzystując kombinacje różnych narzędzi i poleceń Fireworks, można ut­wo­rzyć cień perspektywiczny dla dowolnego obiektu.

• W Fireworks możesz łatwo stosować wiele efektów do jednego obiektu.

• Utworzone własne kombinacje efektów można zapisywać w dokumencie lub jako część stylu.

• Filtry mogą być współużytkowane przez wiele zgodnych ze sobą aplikacji, co umo­żli­wia wspólne ich wykorzystywanie przez wielu współpracowników.

W następnym rozdziale dowiesz się, jak w Fireworks możesz rozmieszczać i kom­po­no­wać ze sobą różne obiekty.




Rozdział 13.
Rozmieszczanie i komponowanie obiektów

W tym rozdziale:

• Wykorzystanie warstw.

• Wyrównywanie i rozkład obiektów.

• Elementy pomocnicze.

• Grupowanie obiektów.

• Grupy maskujące i przezroczystość.

• Krycie i tryby mieszania.

• Symulowanie źródeł światła za pomocą trybów mieszania.

• Wtapianie zaznaczeń.

• Komponowanie obiektów.

Tym, co odróżnia Fireworks od innych aplikacji służących do edycji bitmap jest to, że po­szczególne elementy dokumentów są najczęściej niezależnymi obiektami wek­torowymi, jakie mogą być w każdej chwili edytowane. Poszczególne obiekty unoszą się nad obszarem roboczym i można je z łatwością ustawiać względem siebie. Jedną z najważniejszych ko­rzyś­ci jest możliwość łatwego komponowania, układania na warstwach i mieszania obiek­tów, do których można powracać w przyszłości i modyfikować dowolne ich atry­buty. Nawet najbardziej zaawansowane operacje, takie jak maskowanie, pozostawiają maskowany obrazek (i samą maskę alfa) nienaruszony i edytowalny.

	Komponowanie jest procesem polegającym na łączeniu ze sobą wielu obraz­ków w jeden obrazek, najczęściej z wykorzystaniem wtapiania, try­bów mieszania, maskowania i modyfikowania przezroczystości obraz­ków.

W tym rozdziale przyjrzymy się różnym metodom łączenia, grupowania, rozmie­szcza­nia, i wyrównywania wielu obiektów w dokumentach Fireworks.

Wykorzystanie warstw

Warstwy XE "warstwy" to istotna funkcja Fireworks, która umożliwia zorganizowanie dokumentu po­przez podzielenie go na oddzielne jednostki. Możesz pracować z każdą taką częścią do­ku­mentu oddzielnie lub, w miarę potrzeb, ukrywać je lub wyświetlać. Wyobraź sobie, że artysta maluje na oddzielnych przezroczach zamiast na jednym arkuszu papieru. Mógł­by on wówczas na jednym z przezroczy namalować jedynie elementy tła obrazka, a następnie wziąć inne przezrocze i namalować na nim odpowiednie elementy pierw­sze­go planu. Na jeszcze innych mógłby namalować elementy tekstowe i podpisać się. Po­przez uło­żenie wszystkich przezroczy w stos powstałby końcowy obrazek.

„Centrum zarządzania” warstwami w Fireworks znajduje się w palecie Layers (ry­sunek 13.1).

Rysunek 13.1. Paleta Layers skupia w jednym, wygodnym w użyciu miejscu wiele funkcji i poleceń służących do manipulowania warstwami

Show/ ... column — Kolumna Pokaż/Ukryj

Lock/ ... column — Kolumna Zablokuj/Odblokuj

Layer list — Lista warstw

Shared ... — Ikona współużytkowanej warstwy

Selection column — Kolumna selekcji

Selection icon — Ikona selekcji

Pop-up menu — Menu rozwijane

Pop-up menu button — Przycisk menu rozwijanego

New/Duplicate ... button — Przycisk Nowa/Duplikowana warstwa

New Bitmap ... button — Przycisk Nowy Obrazek Bitmapowy

Add Mask button — Przycisk Dodaj Maskę

Delete ... button — Usuń zaznaczenie

Aby ukryć lub wyświetlić paletę Layers XE "paleta:Layers" , wybierz z menu polecenie WindowLa­yers lub użyj skrótu klawiaturowego F2. Paleta Layers poz­wala sprawdzić, ile warstw znajduje się w dokumencie, które z nich są za­blo­kowane lub ukryte, a nawet - czy na bieżącej warstwie znajduje się jakieś zaznaczenie. Podobnie jak w przypadku wielu innych palet w Fireworks, paleta Layers również posiada menu rozwijane, udostępniające polecenia związane z funkcjami palety.

Podczas zapoznawania się z funkcjami palety Layers, warto korzystać z rysunku 13.1.

Po utworzeniu nowego dokumentu Fireworks, początkowo znajdują się w nim dwie warstwy:

• Web Layer (Warstwa internetowa): Specjalna warstwa przeznaczona dla ob­sza­rów aktywnych i plastrów.

• Layer 1 (Warstwa 1): Zwykła warstwa, na której do czasu utworzenia innych warstw będą umieszczane wszystkie tworzone obiekty.

Dodawanie XE "warstwy:dodawanie" warstw

Każda nowa warstwa dodawana do dokumentu jest umieszczana nad warstwą bieżącą na liście warstw. Kolejność warstw w palecie Layers odpowiada kolejności ułożenia na obszarze roboczym, czyli obiekt znajdujący się na dolnej warstwie w palecie Layers jest również najbliżej obszaru roboczego.

Aby dodać nową, czystą warstwę do dokumentu:

• Kliknij przycisk New/Duplicate Layer (Nowa/Duplikowana warstwa), znajdujący się w palecie Layers.

	Po wciśnięciu klawisza Alt (Option) w trakcie przyciskania przycisku New/Duplicate Layer, program wyświetli okno dialogowe New Layer, umożliwiając wprowadzenie własnej nazwy warstwy przed jej utworzeniem.

• Z menu rozwijanego palety Layers wybierz New Layer.

• Wybierz z menu polecenie InsertLayer.

Nazywanie warst XE "warstwy:dodawanie" w

Aby zmienić nazwę warstwy, kliknij dwukrotnie nazwę na liście warstw i wpisz nową w pojawiającym się oknie dialogowym. Naciśnij Enter (Return) lub kliknij poza obszarem tego okna, aby je zamknąć.

Duplikowanie warstwy

Nową warstwę możesz również dodać duplikując warstwę istniejącą. Wówczas po­wie­la­ne są wszystkie znajdujące się na niej obiekty. Taka praca z warstwami przypomina pracę z katalogami i plikami w Eksploratorze Windows lub w Macintosh Finder, gdzie duplikowanie pliku powoduje jego powielenie, a duplikowanie katalogu powoduje powielenie tego katalogu wraz z jego całą zawartością.

Aby zduplikować istniejącą warstwę wraz z jej zawartością, wykonaj jedną z poniższych czynności:

• Przeciągnij warstwę z listy warstw i upuść na przycisk New/Duplicate Layer w panelu Layers.

• Wciśni i przytrzymaj klawisz Alt (Option) i przeciągnij warstwę w obrębie listy warstw.

• Z menu rozwijanego panelu Layers wybierz Choose Duplicate Layer.

Zduplikowanie warstwy i ukrycie duplikatu jest szybkim sposobem tworzenia zapa­so­wych kopii wszystkich obiektów, znajdujących się na danej warstwie, przed poddaniem ich jakiejkolwiek edycji. Jeśli dokonane modyfikacje nie będą Cię satysfakcjonować, mo­żesz usunąć warstwę i wyświetlić jej kopię zapasową. Wrócisz w ten sposób do punk­tu wyjścia. Co więcej, uważam, że tworzenie co jakiś czas kopii zapasowych pozwala stworzyć bibliotekę obiektów, które mogą się przydać później. Możesz na przykład otoczyć tekstem ten sam okrąg, którego wcześniej używałeś jako maskę dla obiektu bitmapowego. Ponowne wykorzystanie takich obiektów nada spójność Twoim projektom.

Usuwanie XE "warstwy:usuwanie" warstw

Jeśli usuniesz warstwę, stracisz również wszystkie znajdujące się na niej obiekty. Jeśli zro­bisz to przez przypadek, wybierz z menu polecenie EditUndo, aby ją przywrócić.

Gdy celowo chcesz usunąć warstwę możesz to zrobić na kilka sposobów:

• Przeciągnij warstwę z listy znajdującej się w palecie Layers na przycisk Delete Selection.

• Zaznacz warstwę w liście palety Layers i kliknij przycisk Delete Selection.

• Zaznacz warstwę w liście palety Layers i wybierz polecenie Delete Layer z roz­wi­janego menu.

Zmienianie kolejności warstw XE "warstwy:zmiana kolejności"

Gdy w Twoim dokumencie znajduje się więcej niż jedna warstwa, być może zechcesz zmie­nić ich kolejność w stosie. Aby to zrobić, wystarczy, że klikniesz nazwę warstwy w liście palety Layers i przeciągniesz ją w wyższe lub niższe położenie. Warstwy znajdujące się wyżej na liście są również umieszczone wyżej w stosie na obszarze roboczym.

Edycja XE "warstwy:edycja" poszczególnych warstw

Zgodnie z ustawieniem domyślnym, wszystkie obiekty, niezależnie od tego na jakiej warstwie się znajdują, mogą być edytowane. Aby zabezpieczyć zawartość warstwy przed edytowaniem, można poszczególne warstwy zablokować lub ukryć. Nie można edytować obiektów znajdujących się na warstwach zablokowanych lub ukrytych.

Aby zablokować lub odblokować warstwę, kliknij w kolumnie Lock/Unlock palety Layers, obok nazwy war­stwy, którą chcesz zablokować. Po zablokowaniu warstwy, obok jej nazwy w kolumnie Lock/Unlock wyświetlana jest ikona kłódki i nie można zaznaczać ani modyfikować żadnych obiektów znaj­du­ją­cych się w oknie dokumentu. Gdy warstwa jest odblokowana, nic się nie pojawia w kolumnie Lock/Unlock obok nazwy warstwy.

Aby wyświetlić lub ukryć warstwę, kliknij w kolumnie Show/Hide palety Layers obok nazwy warstwy, którą chcesz ukryć lub wyświetlić. Gdy w kolumnie tej znajduje się ikona oka, warstwa jest wyświetlana. Gdy nie ma tam ikony oka, ukrywana jest war­stwa i wszystkie znajdujące się na niej obiekty.

	Ukryta warstwa jest automatycznie blokowana. Jeśli więc ukryjesz warstwę, nie musisz jej już blokować.

W rozwijanym menu palety Layers znajdują się polecenia umożliwiające jednoczesne ukry­wanie, wyświetlanie, blokowanie lub odblokowywanie wszystkich warstw do­ku­men­tu. Możesz także wcisnąć klawisz Alt (Option) i kliknąć w kolumnie Show/Hide (Pokaż/ukryj) lub Lock/Unlock (Zablokuj/odblokuj), aby zmienić status wszystkich warstw jednocześnie.

Aby pracować tylko z jedną warstwą, możesz również użyć polecenia Single Layer Editing (Edycja pojedynczej war­stwy). Aby pracować w trybie edycji pojedynczej warstwy, wybierz polecenie Single Layer Editing z rozwijanego menu palety Layers. W trybie tym możesz zaznaczać i edytować tyl­ko te obiekty, które znajdują się na bieżącej warstwie, mimo że w oknie dokumentu wy­świetlane są wszystkie obiekty. Po wybraniu dowolnej warstwy z listy znajdującej się w palecie Layers pozostałe warstwy zachowują się tak, jakby zostały zablokowane. Me­toda ta pozwala na szybkie ograniczanie zakresu edycji w czasie pracy nad zło­żo­nymi dokumentami.

Aby tryb edycji pojedynczej warstwy pozwolił Ci naprawdę przyspieszyć pracę, po­wi­nie­neś wszystkim swoim warstwom nadać opisowe nazwy. Gdy nazwiesz je „Tło”, „Tekst” itd., będziesz mógł szybko zaznaczyć warstwę zawierającą obiekty, które chcesz poddać edycji, bez obaw o przypadkowe modyfikacje obiektów znajdujących się w innych warstwach.

W nowym menu Fireworks - Commands - znajdziesz dwa polecenia, któ­re umożliwiają pracę z pojedynczymi warstwami bez konieczności wy­korzystywania trybu Single Layer Editing. Wybierz z menu polecenie CommandsDocumentHide Other Layers, aby ukryć wszystkie war­stwy z wyjątkiem bieżącej. Wybierz z menu polecenie Com­mandsDo­cu­mentLock Other Layers, by zablokować wszystkie warstwy z wy­jąt­kiem bieżącej.

Kolumna Selection

Aby przemieścić obiekty z jednej warstwy na inną, projektanci najczęściej kopiują wy­bra­ne obiekty do schowka, zmieniają aktywną warstwę i wklejają na nią skopiowane obiek­ty. Można i tak, ale paleta Layers udostępnia inną metodę. Po zaznaczeniu obiektów w obszarze roboczym lub w palecie Layers, w kolumnie Selection, obok nazwy warstwy, na której znajdują się wyselekcjonowane obiekty wyświetlany jest mały, niebieski kwa­drat. Przeciągając go na inną warstwę, możesz przenieść do niej wszystkie zaznaczone obiekty. Jeżeli podczas przeciągania będziesz trzymał wciśnięty klawisz Alt (Option), zaznaczone obiekty zostaną skopiowane, a nie przeniesione.

Otwieranie warstw

Paleta Layers nie bez powodu korzysta z ikony katalogu. Każdy dokument jest podzielony na oddzielne warstwy, a każda warstwa jest podzielona na obiekty, które pojawiają się w palecie Layers jako podwarstwy obiektowe, wraz ze swoimi miniaturkami. Aby otworzyć jakąś warstwę i wyświetlić jej zawartość, kliknij pole plus/minus (odsłonięcie trójkąta w MacOS) w kolumnie Expand/Collapse obok nazwy warstwy (rysunek 13.2). Aby ukryć zawartość warstwy, kliknij ponownie to pole (odsłonięcie trójkąta). Aby otworzyć lub zamknąć wszystkie warstwy w dokumencie naraz, wciśnij klawisz Alt (Option) i kliknij w kolumnie Expand/Collapse. Często korzystam z tej możliwości, aby szybko zamknąć wszystkie warstwy, gdy nie chcę pracować nad pojedynczymi obiektami.

Rysunek 13.2. Każda warstwa stanowi pojemnik na znajdujące się w niej obiekty. Każdy obiekt w warstwie jest przedstawiany jako podwarstwa

Expand/ ... column — Kolumna Rozwiń/Zwiń

Closed layer — Warstwa zamknięta

Current layer — Warstwa aktualna

Open and ... — Przyciski rozszerzania palety — otwarty i zamknięty

Object thumbnail — Miniaturka obiektu

Selected object — Obiekt zaznaczony

	W Fireworks 4 paleta Layers została bardzo zmieniona i bardziej przypomina warstwy i układ warstw w Photoshopie 6, niż warstwy w Fireworks 3. Można obecnie wybierać poszczególne obiekty w stosie, tak jakby były warstwami, jak również zmieniać kolejność obiektów w stosie, przemieszczając je w górę lub w dół listy warstw.

Wiele z metod, z których korzystamy do pracy z warstwami w palecie Layers, może być również używanych do pracy z podwarstwami obiektowymi. Podczas pracy należy pamiętać, że można:

• Dodać nową podwarstwę. Wystarczy stworzyć nowy obiekt na obszarze roboczym, korzystając z jednej z typowych metod, np. importowania, rysowania, kopiowania i wklejania itp. Każdy nowy obiekt jest dodawany do dokumentu, a program dodaje nową podwarstwę obiektową do warstwy bieżącej, wraz z miniaturką. Aby stworzyć nowy, pusty obiekt bitmapowy bezpośrednio nad aktualnie zaznaczonym obiektem, wystarczy kliknąć przycisk New Bitmap Image w palecie Layers.

• Nazwać obiekt. Kliknij dwukrotnie nazwę rodzaju obiektu, np. „rectangle” (prostokąt) w liście warstw i wpisz nową nazwę, a następnie wciśnij klawisz Enter (Return).

• Zmienić kolejność obiektów w stosie. Przeciągnij podwarstwę obiektową w górę lub w dół listy warstw palety Layers. Zauważ, że można przemieszczać obiekty w górę i w dół w obrębie warstwy lub przenosić je na inne warstwy (rysunek 13.3). Przeciąganie pomiędzy warstwami będzie łatwiejsze, gdy otworzysz zarówno warstwę źródłową, jak i docelową. Pozwoli to również na wybranie miejsca, w jakim ma znaleźć się przemieszczany obiekt w stosie warstwy docelowej.

Rysunek 13.3. Warstwy i podwarstwy obiektowe w palecie Layers przedstawiają kolejność w stosie dokumentu
		Przeciąganie pomiędzy warstwami będzie łatwiejsze, gdy otworzysz zarówno warstwę źródłową, jak i docelową. Pozwoli to również na wybranie miejsca, w jakim ma znaleźć się przemieszczany obiekt w stosie warstwy docelowej.

• Duplikować podwarstwę obiektową. Wciśnij klawisz Alt (Option) i przeciągnij podwarstwę w górę lub w dół listy warstw. Zostanie utworzona kopia, a obiekt oryginalny nie zostanie zmieniony. Kopię można nawet przenieść do innej warstwy.

	Korzystając z klawisza Shift, możesz tworzyć wiele zaznaczeń podwarstw, tak jak w przypadku obiektów w obszarze roboczym.

• Ukryć obiekt. Kliknij ikonę oka w kolumnie Show/Hide, obok podwarstwy obiektu w palecie Layers. Wybierając polecenie View⇒Hide Selection, można również ukryć obiekty zaznaczone. Aby ponownie wyświetlić te obiekty, wybierz polecenie View⇒Show All.

• Usunąć obiekt. Zaznacz obiekt — na obszarze roboczym lub w palecie Layers — i kliknij przycisk Delete Selection w palecie Layers.

	Niektórych użytkowników może nieco denerwować, że zgodnie z ustawieniem domyślnym paleta Layers jest w pełni rozwinięta po otwarciu dokumentu Fireworks. Derren Whiteman stworzył prosty skrypt, zmieniający ustawienia, dzięki czemu paleta Layers będzie zwinięta. Ten skrypt, a także odpowiedni do przywrócenia ustawień domyślnych, znajdziesz na stronie www.derren.com/geek/fireworks.

Warstwa internetowa XE "warstwy:warstwa internetowa"

Wszystkie dokumenty Fireworks posiadają warstwę o nazwie Web Layer XE "Web Layer" , na której mo­żesz tworzyć wszystkie obiekty internetowe, takie jak obszary aktywne i plastry. Mo­żesz zmieniać położenie internetowej warstwy w stosie, przeciągając ją w górę lub w dół w liście warstw palety Layers, ale nie możesz jej usunąć. Warstwa Web Layer jest zaw­sze współużytkowana przez wszystkie klatki dokumentu.

	Więcej informacji o korzystaniu z warstwy Web Layer znajdziesz w roz­dziale 20. i 21. Jeśli chcesz się dowiedzieć więcej o współużytkowaniu warstw przez klatki dokumentu i o samych klatkach, zerknij do roz­działu 23.

Obszary aktywne możesz tworzyć za pomocą narzędzi Hotspot znajdujących się w pa­le­cie narzędziowej, ale możliwe jest także tworzenie ich w oparciu o zwykłe obiekty bitmapowe i wektorowe za po­mocą palety Layers. Jest to szybki sposób dodawania obszarów aktywnych do obiek­tów, jeśli chcesz, aby miały one takie same rozmiary jak obiekty.

Aby utworzyć obszary aktywne w oparciu o istniejące obiekty:

286. Zaznacz w oknie dokumentu obiekty, w oparciu o które chcesz utworzyć ob­szary aktywne.

W prawej kolumnie palety Layers, obok nazwy warstwy, na której znajdują się zaznaczone obiekty zostanie wyświetlona ikona selekcji (niebieski kwa­drat).

221. Przeciągnij ikonę selekcji do tej samej kolumny warstwy Web Layer.

Jeśli zaznaczonych było wiele obiektów, Fireworks zapyta Cię, czy chcesz ut­wo­rzyć jeden czy wiele obszarów aktywnych. Pojedynczy obszar aktywny pow­staje w wyniku połączenia ze sobą wszystkich zaznaczonych kształtów.

Na internetowej warstwie zostaną utworzone obszary aktywne, a oryginalne obiek­ty pozostaną niezmienione.

Wyrównanie i rozkład obiektów XE "wyrównanie i rozkład obiektów"

Najczęściej wykorzystywane techniki przy projektowaniu układu dokumentów to wy­rów­nywanie i rozkład obiektów. Powinieneś już znać te techniki, jeśli pracowałeś wcześ­niej z jakąkolwiek aplikacją graficzną lub programem do składu komputerowego. Pod­czas pracy w trybie edycji wektorowej w Fireworks, wszystkie obiekty „pływają” nad obszarem roboczym i mogą być łatwo rozmieszczane względem innych.

Wykorzystanie „teoretycznej” ramki ograniczającej

Do wyrównywania wyselekcjonowanych obiektów wykorzystywana jest „teoretyczna” pro­stokątna ramka, otaczająca zaznaczone obiekty (rysunek 13.4). Ramka ta opisywana jest znaj­du­jącymi się w niej obiektami. Górna jej krawędź tworzona jest na podstawie naj­wyż­sze­go punktu najwyżej położonego obiektu zaznaczenia, lewa krawędź ramki jest tworzona na podstawie najbardziej w lewo wysuniętego punktu obiektu znajdującego się po lewej stro­nie zaznaczenia itd. Teoretyczna ramka wykorzystywana jest przez program do wyrów­ny­wania i rozkładania znajdujących się wewnątrz niej obiektów. Warto o tym pamiętać przy korzystaniu z polecenia Align.

Rysunek 13.4. Teoretyczna ramka ograniczająca selekcję jest wykorzystywana do wyrównywania znajdujących się w niej obiektów po wybraniu polecenia z podmenu Modify⇒Align

Theoretical ... — Teoretyczna ramka otaczająca zaznaczenie

Gdy będziesz chciał wyrównać obiekty do lewej, wszystkie zostaną przesunięte do le­wej krawędzi teoretycznej ramki ograniczającej zaznaczenie. Podobnie, jeśli wyrównasz obiek­ty do góry, zostaną one przesunięte do górnej krawędzi ramki ograniczającej. Należy pamiętać, że wyrównywanie obiektów w Fireworks nie ma nic wspólnego z wyrów­ny­wa­niem obiektów względem strony lub obszaru roboczego, spo­ty­ka­nym w wielu innych aplikacjach. W Fireworks obiekty są wyrównywane względem innych zaznaczonych obiektów. Jeśli zaznaczysz tyl­ko jeden obiekt, polecenia służące do wyrównywania obiektów będą niedostępne.

	W dalszej części niniejszego rozdziału dowiesz się jak wyrównywać pojedynczy obiekt w stosunku do obszaru roboczego.

Aby wyrównać zaznaczone obiekty do lewej, prawej, górnej lub dolnej krawędzi ramki se­lekcji, zaznacz te obiekty i wybierz odpowiednie polecenie wyrównania:

• Wyrównanie do lewej: Aby wyrównać wszystkie obiekty do najbardziej wy­su­niętego w lewo obiektu (rysunek 13.5), wybierz z menu polecenie ModifyAlignLeft lub użyj skrótu klawiaturowego Ctrl+Alt+1 (Command+Option+1).

Rysunek 13.5. Polecenie Modify⇒Align⇒Left powoduje przesunięcie wszystkich zaznaczonych obiektów z rysunku 13.4 do lewej krawędzi teoretycznej ramki ograniczającej

Theoretical ... — Teoretyczna ramka otaczająca zaznaczenie

• Wyrównanie do prawej: Aby wyrównać wszystkie obiekty do najbardziej wy­suniętego w prawo obiektu, wybierz z menu polecenie ModifyAlignRight lub użyj skrótu klawiaturowego Ctrl+Alt+3 (Command+Option+3).

• Wyrównanie do góry: Aby wyrównać wszystkie obiekty do najwyżej po­ło­żo­ne­go obiektu (rysunek 13.6), wybierz z menu polecenie ModifyAlignTop lub użyj skrótu klawiaturowego Ctrl+Alt+4 (Command+Option+4).

• Wyrównanie do dołu: Aby wyrównać wszystkie obiekty do najniżej po­ło­żo­ne­go obiektu, wybierz z menu polecenie ModifyAlignBottom lub użyj skrótu klawiaturowego Ctrl+Alt+6 (Command+Option+6).

Rysunek 13.6. Polecenie Modify⇒Align⇒ Top powoduje wyrównanie wszystkich zaznaczonych obiektów z rysunku 13.4 do górnej krawędzi teoretycznej ramki ograniczającej

Theoretical ... — Teoretyczna ramka otaczająca zaznaczenie

W Fireworks znajdują się dwa polecenia wy­równania, używane do centrowania obiektów. Tu również, program nie centruje obiektów w stosunku do obszaru roboczego, ale do teoretycznej linii poziomej lub pionowej przechodzącej przez zaznaczenie. Aby lepiej zrozumieć działanie tych poleceń, wyobraź sobie krzyż narysowany w teoretycznej ramce wyrównania, przedstawionej na rysunku 13.4. Linie tworzące krzyż reprezentują pionową i poziomą linię centrowania, do której obiekt może być wyrównywany.

• Pionowe wyśrodkowanie: Aby wyrównać wszystkie obiekty względem teo­re­ty­cznej pionowej linii selekcji, wybierz z menu polecenie Modi­fy AlignCen­ter Vertical lub użyj skrótu klawiaturowego Ctrl+Alt+2 (Com­mand +Option+2).

	Pamiętaj, że używany przy wyrównywaniu teoretyczny środek nie jest środ­kiem obszaru roboczego lecz zaznaczenia.

• Poziome wyśrodkowanie: Aby wyrównać wszystkie obiekty względem teo­re­tycz­nej poziomej linii selekcji (rysunek 13.7), wybierz z menu polecenie ModifyAlignCenter Horizontal lub użyj skrótu klawiaturowego Ctrl+Alt+5 (Command+Option+5).

Rysunek 13.7. Po wybraniu polecenia Modify⇒Align⇒Center Horizontal, obiekty zaznaczone na rysunku 13.4 zostaną wyrównane względem teoretycznej linii poziomej

Theoretical alignment... — Teoretyczna ramka otaczająca zaznaczenie

Theoretical vertical ... — Teo­re­ty­czna pionowa linia selekcji

Theoretical horizontal ... — Teo­re­tycz­na pozioma linia selekcji

Możesz także dokonywać dystrybucji wyselekcjonowanych obiektów, co staje się szcze­­gólnie przydatne, gdy masz kilka obiektów, na przykład cały rząd przycisków, które po­win­ny być rozmieszczone w jednakowych odległościach od siebie. Aby rozłożyć rów­no­miernie obiekty, zaznacz je i wybierz odpowie­dnie polecenie rozkładu:

• Rozkład poziomy: Aby równomiernie rozłożyć obiekty w poziomie, wybierz z me­nu polecenie ModifyAlignDistribute Widths lub użyj skrótu kla­wia­tu­ro­wego Ctrl+Alt+7 (Command+Option+7) (rysunek 13.8).

Rysunek 13.8. Zaznaczone obiekty można za pomocą polecenia Distribute Widths rozłożyć równomiernie w poziomie. Obiekty, pierwszy z prawej i pierwszy z lewej nie są przesuwane, gdyż określają szerokość zaznaczenia

Before — Przed

Width ... — Szerokość zaznaczenia

After — Po

• Rozkład pionowy: Aby równomiernie rozłożyć obiekty w pionie, wybierz z me­nu polecenie ModifyAlignDistribute Heights lub użyj skrótu klawia­tu­ro­we­go Ctrl+Alt+9 (Command+Option+9).

Wyrównywanie względem obszaru roboczego

Chociaż w Fireworks narzędzia służące do wyrównania dają duże możliwości, polecenia w podmenu Modify⇒Align nie pozwalają na wyrównywanie względem obszaru roboczego. Co zrobić, jeżeli chcesz wyrównać pojedynczy obiekt wzglę­dem lewej krawędzi obszaru roboczego, lub umieścić go dokładnie w środku obszaru roboczego? Na szczęście istnieje polecenie i prosta metoda, które pozwolą dokonać dowolnej zmiany.

W Fireworks znajduje się polecenie, które pozwala łatwo wyśrodkować zaznaczone obiek­ty względem obszaru roboczego. Zaznacz obiekty i wybierz z menu polecenie Com­mandsDocumentCenter in Document a obiekty zostaną umieszczone dokładnie w środku obszaru roboczego. Ta poręczna metoda doskonale prezentuje elastyczność programu Fireworks.

	Więcej informacji o menu Commands znajdziesz w rozdziale 19.

W przypadku bardziej trudnych wyrównań, np. wyrównanie zaznaczonych obiektów do lewej krawędzi obszaru roboczego, narysuj prostokąt o kształcie i rozmiarze obszaru roboczego i następnie wyrównaj obiekty do tego prostokąta. Optycznie efekt będzie taki sam jak przy wyrównaniu do obszaru roboczego, a dodatkową zaletą jest możliwość narysowania obwódki wokół dokumentu przez niewielkie zmniejszenie rozmiaru prostokąta (rysunek 13.9). Prostokąt wyrównania można przechować na jego własnej warstwie, co pozwala go łatwo ukrywać, pokazywać, blokować lub usuwać.

Rysunek 13.9. Chociaż nie można wyrównywać obiektów względem obszaru roboczego, można stworzyć prostokąt o rozmiarze obszaru roboczego i do niego wyrównać obiekty, uzyskując taki sam efekt
		Fireworks traktuje krawędzie obszaru roboczego jak prowadnice. Po wybraniu polecenia View⇒Guides⇒Snap to Guides, przeciągane zaznaczenie zostanie dosunięte do krawędzi obszaru roboczego. Wyrównaj obiekty względem siebie, a następnie zaznacz je i przeciągnij w pobliże krawędzi obszaru roboczego, aby uzyskać efekt wyrównania do obszaru roboczego.

Elementy pomocnicze

Fireworks oferuje wiele metod precyzyjnego rozmieszczania obiektów w obszarze ro­bo­czym. Linijki pozwalają na lokalizację prowadnic, do których mogą być następnie przy­ciągane obiekty. Możesz także utworzyć siatkę dokumentu, która także jest bardzo po­mocnym elementem we właściwym rozmieszczaniu obiektów.

Linijki

Linijki XE "Linijki" są standardową funkcją, spotykaną w prawie każdej aplikacji graficznej. Linijki (te trzymane w ręku) są również powszechnie wykorzystywane w tradycyjnym pro­jek­to­waniu na papierze. Pozwalają bowiem na śledzenie wymiarów obiektów i ich położenia względem obszaru roboczego z dużo większą precyzją niż ta, jaką zapewnia ludzkie oko.

Aby wyświetlić lub ukryć linijki, wybierz z menu polecenie ViewRulers lub użyj skró­tu klawiaturowego Ctrl+Alt+R (Command+Option+R). Linijki są wyświetlane wzdłuż gór­nej i lewej krawędzi dokumentu (rysunek 13.10).

Rysunek 13.10. Przeciągnięcie punktu zerowego do obiektu wysuniętego najbardziej do góry i na lewo w grupie wyrównywanych obiektów upraszcza obliczenia używane przy ich wyrównywaniu
Zero-point marker — Znacznik punktu zerowego Horizontal ruler — Linijka pozioma Vertical ruler — Linijka pionowa Zero-point cursor — Kursor punktu zerowego
		W czasie przeciągania myszą w obszarze roboczym, na linijkach mo­żesz obserwować współrzędne położenia kursora. Funkcja ta przydaje się przy rysowaniu nowych obiektów, które powinny być precyzyjnie roz­mieszczone względem obszaru roboczego.

Domyślnie punkt zerowy (punkt, w którym linijka pozioma styka się z pionową) jest usta­wiany na 0 pikseli, ale przeciągając znacznik punktu zerowego możesz zmienić jego po­łożenie w dokumencie. Znacznik punktu zerowego po wyświetleniu linijek znajduje się w górnym lewym rogu okna dokumentu. Jeśli wszystkie obiekty znajdujące się w do­kumencie powinny znajdować się w odległości co najmniej 20 pikseli od górnej kra­wędzi dokumentu i co najmniej 20 pikseli od jego lewej krawędzi, przesunięcie punk­tu zerowego w położenie 20×20 pikseli znacznie ułatwi Ci obli­cze­nia, które będziesz musiał wykonać później przy wyrównywaniu obiektów. Aby przy­wró­cić oryginalne położenie punktu zerowego, kliknij dwukrotnie jego znacznik.

Prowadnice

Prowadnice XE "prowadnice" są po prostu liniami, które możesz umieszczać w ważnych punktach swoich do­kumentów, takich jak marginesy lub punkty środkowe. Prowadnice nie są drukowane ani eksportowane i są wyświetlane nad wszystkimi warstwami dokumentu. Są one na­rzę­dziami stworzonymi z myślą o ułatwieniu rozmieszczania obiektów. Jeżeli na przy­kład wiele obiektów powinno znajdować się w odległości 20 pikseli od górnej kra­wę­dzi Two­jego dokumentu, utworzenie w takim położeniu poziomej prowadnicy poz­wo­li szyb­ko zorientować się, gdzie powinny zostać umieszczone te obiekty.

Tworzenie XE "prowadnice:tworzenie" prowadnic

Do dodania nowej prowadnicy nie jest Ci potrzebne żadne inne narzędzie oprócz my­szy. Kliknij i przeciągnij poziomą linijkę, a w miejscu zwolnienia przycisku myszy zo­sta­nie utworzona nowa pozioma prowadnica.

Wszystkie poziome prowadnice są równoległe do poziomej linijki dokumentu, więc prze­ciąganie tej linijki powoduje tworzenie poziomych prowadnic. Niekiedy może to być nieco mylące, gdyż poziome prowadnice są najczęściej tworzone po sprawdzeniu ich położenia na linijce pionowej. Innymi słowy - możesz umieścić poziomą pro­wad­ni­cę w odległości 20 pikseli od górnej krawędzi, kierując się współrzędnymi wyświetlanymi w linijce pionowej. Aby uchronić się przed tworzeniem poziomych prowadnic poprzez prze­ciąganie ich z pionowych linijek, wyobraź sobie, że prowadnice są duplikatami li­ni­jek, z których są przeciągane: poziome z poziomych, pionowe z pionowych.

Aby dodać nową prowadnicę do dokumentu:

287. Jeśli w dokumencie nie są wyświetlane linijki, wybierz z menu polecenie View Rulers lub użyj skrótu klawiaturowego Ctrl+Alt+R (Command+Op­tion+R), aby je wyświetlić.

288. Przeciągnij poziomą linijkę, aby utworzyć nową prowadnicę poziomą. Prze­ciąg­nij pionową linijkę, aby utworzyć nową prowadnicę pionową (rysunek 13.11). Gdy przeciągniesz myszą do miejsca, w którym powinna znajdować się pro­wadnica, zwolnij przycisk myszy, aby ją tam umieścić.

Rysunek 13.11. Tworząc prowadnice w ważnych miejscach projektu, uprościsz wyrównywanie obiektów

Vertical ... — Prowadnica pionowa

Horizontal ... — Prowadnica pozioma

Blokowanie i ukrywanie prowadnic

Po utworzeniu kilku prowadnic możesz stwierdzić, że przeszkadzają Ci one w pracy. Pro­wadnice nie są umieszczane na warstwach dokumentu, nie wystarczy więc za­blo­ko­wać lub ukryć warstwy, aby ukryć prowadnice lub uniemożliwić ich edycję. Staranne roz­mieszczanie prowadnic i późniejsze przeciąganie ich w inne położenia kłóci się z ich prze­znaczeniem - oszczędzaniem czasu projektanta.

Aby wyświetlić lub ukryć prowadnice, wybierz z menu polecenie ViewGuides⇒Show Guides lub użyj skrótu klawiaturowego Ctrl+średnik (Command+średnik). Okresowe ukrywanie pro­wadnic pozwala lepiej zorientować się, jak będzie wyglądał końcowy obrazek.

Aby zablokować wszystkie prowadnice, uniemożliwiając w ten sposób ich edytowanie, wy­bierz z menu polecenie ViewGuidesLock Guides lub użyj skrótu klawia­tu­ro­wego Ctrl+Alt+średnik (Command+Option+średnik).

Przyciąganie XE "prowadnice:przyciąganie" do prowadnic

Prawdziwe możliwości prowadnic ujawniają się dopiero przy przyciąganiu do nich obiektów. Gdy utworzysz prowadnice we wszystkich ważnych punktach swojego dokumentu, jego uk­ład będzie tworzony niemal automatycznie przy przeciąganiu obiektów za pomocą myszy.

Aby włączyć lub wyłączyć przyciąganie obiektów do najbliżej położonej prowadnicy, wy­bierz z menu polecenie ViewGuidesSnap to Guides lub użyj skrótu kla­wia­turowego Ctrl+Shift+średnik (Command+Shift+średnik).

Kolory prowadnic

Jeśli w Twoim dokumencie znajduje się mnóstwo zielonych obiektów, zielone pro­wad­ni­ce (ustawienie domyślne) będą trudno rozpoznawalne. Na szczęście, mogą one mieć dowolne kolory. Po wy­bra­niu koloru kontrastującego z kolorami wykorzystywanymi w dokumencie pro­wad­ni­ce będą lepiej widoczne i odseparowane od pozostałych elementów dokumentu. Nie bę­dziesz musiał wówczas co chwilę ukrywać prowadnic, aby zobaczyć, jak wygląda two­rzo­na grafika.

Aby zmienić kolor prowadnic:

289. Wybierz z menu polecenie ViewGuidesEdit Guides.

Fireworks wyświetli okno dialogowe Guides (Grids and Guides) (rysunek 13.12).

Rysunek 13.12. W oknie dialogowym Guides (Grids and Guides) możesz wybrać inny kolor prowadnic
		W MacOS, zamiast dwóch osobnych okien: Guides i Grids, wyświe­tla­ne jest jedno okno dialogowe - Grids and Guides z dwoma zakład­ka­mi: Grids i Guides.

222. Użyj próbnika kolorów, aby wybrać nowy kolor, w jakim będą wyświetlane pro­wadnice i kliknij przycisk OK.

Dla wygody użytkownika wszystkie opcje prowadnic zostały zawarte w jednym oknie dia­logowym - Guides (Grids and Guides). Opcja Show Guides pozwala ukrywać lub wy­świetlać prowadnice, zaznaczenie opcji Snap to Guides włącza przyciąganie obiek­tów do prowadnic, zaś zaznaczenie opcji Lock Guides powoduje zablokowanie wszys­tkich prowadnic. W oknie tym znajdują się również opcje dotyczące prowadnic plas­trów.

Usuwanie XE "prowadnice:usuwanie" prowadnic

Pojedynczą prowadnicę możesz usunąć z dokumentu za pomocą techniki „przeciągnij i upuść”, podobnie jakbyś ją dodawał. Złap ją po prostu za pomocą myszy i przeciągnij po­za obszar dokumentu. Obojętnie, w którą stronę ją przeciągniesz: w lewo, prawo, w gó­rę czy w dół - zostanie usunięta z dokumentu.

Korzystając z okna dialogowego Guides (Grids and Guides), możesz usunąć za jednym ra­zem wszystkie prowadnice znajdujące się w dokumencie. Aby usunąć wszystkie pro­wad­nice:

290. Wybierz z menu polecenie ViewGuidesEdit Guides.

Fireworks wyświetli okno dialogowe Guides (Grids and Guides) (rysunek 13.12).

223. Kliknij przycisk Clear All, aby usunąć wszystkie prowadnice z dokumentu. Klik­nij OK.

	Przycisk Clear All powoduje usunięcie wszystkich prowadnic wycią­ga­nych z linijek, ale nie usuwa prowadnic plastrów.

Siatka XE "siatka"

Siatka jest elementem pozwalającym na tworzenie jeszcze bardziej precyzyjnych ukła­dów graficznych. Obiekty są przeważnie rozmieszczane według pewnego regularnego wzo­ru. Siatka dzieli dokument na mniejsze, łatwiejsze w zarządzaniu części, pomagając w ten sposób w śledzeniu relacji pomiędzy poszczególnymi elementami całego układu gra­fiki. Siatka nie jest umieszczana na żadnej warstwie. Nie jest także drukowana ani eks­portowana. Jest jedynie pomocą wizualną, ułatwiającą projektowanie grafiki.

Aby wyświetlić lub ukryć siatkę, wybierz z menu polecenie ViewGrid⇒Show Grid lub użyj skrótu kla­wiaturowego Ctrl+Alt+G (Command+Option+G).

Przyciąganie XE "siatka:przyciąganie" do siatki

Możesz zdefiniować przyciąganie obiektów do siatki, podobnie jak to robiłeś z pro­wad­ni­cami. Po włączeniu tej funkcji zauważysz, że linie siatki przyciągają obiekty jak mag­ne­sy. Wszystkie obiekty jednego dokumentu przyciągane są do tej samej siatki, więc bez specjalnego wysiłku możesz tworzyć bardzo precyzyjne projekty graficzne.

Aby włączyć przyciąganie obiektów do siatki, wybierz z menu polecenie ViewGridSnap to Grid lub użyj skrótu klawiaturowego Ctrl+Alt+Shift+G (Com­mand+Option+Shift+G).

Kolor i rozmieszczenie linii siatki

Podobnie jak w przypadku prowadnic, możesz modyfikować kolor siatki, aby odróżnić ją od pozostałych elementów dokumentu. Domyślnym kolorem siatki dla każdego no­we­go dokumentu jest kolor czarny.

Jeśli tworzysz pasek nawigacyjny zawierający wiele przycisków o szerokości 100 i wy­so­kości 50 pikseli, ustaw siatkę tak, aby jej linie były rozmieszczone co 100 pikseli w po­ziomie i co 50 pikseli w pionie. Będziesz mógł wówczas szybko osza­co­wać wizualnie położenie każdego przycisku. Gdy dodatkowo włączysz opcję Snap to Grid (Przy­cią­gaj do siatki), projekt paska powstanie niemalże automatycznie. Zgodnie z ustawieniem domyślnym, linie siat­ki są rozmieszczane co 36 pikseli w poziomie i tyle samo w pionie.

Aby zmodyfikować siatkę:

291. Wybierz z menu polecenie ViewGridEdit Grid.

Fireworks wyświetli okno dialogowe Edit Grid (Grids and Guides) (rysunek 13.13).

224. Za pomocą rozwijanego próbnika wybierz kolor, jaki zostanie wykorzystany do wyświetlenia siatki.

Rysunek 13.13. Ustaw opcje siatki w oknie dialogowym Edit Grid (Grids and Guides)

W oknie dialogowym Edit Grid (Grids and Guides) możesz również zmienić wi­dzialność siatki lub włączyć przyciąganie do niej obiektów.

225. W oknie oznaczonym poziomą strzałką wpisz wartość odstępów pomiędzy pio­no­wymi liniami siatki.

226. W oknie oznaczonym pionową strzałką wpisz wartość odstępów pomiędzy po­zio­mymi liniami siatki.

227. Kliknij przycisk Apply (Zastosuj), aby wyświetlić zmiany bez konieczności opu­szczania okna dialogowego Edit Grid (Grids and Guides). Kliknij OK.

Grupowanie obiektów

Grupowanie XE "grupowanie" polega na tworzeniu pojedynczego obiektu, składającego się z wielu in­nych obiektów. Grupę taką możesz następnie traktować jako pojedynczy obiekt i sto­so­wać do niej Live Effects lub modyfikować jej tryby mieszania itd.

Obiekty znajdujące się w grupie zachowują względem siebie nie­zmien­ne położenia i pozycje w stosie. Do czasu zmodyfikowania całej grupy, jej po­szcze­gólne obiekty zachowują również własne ustawienia efektów. Jeżeli połowa obie­k­tów posiada cienie zewnętrzne, a Ty zastosujesz go do całej grupy, wszystkie obiek­ty będą miały cień zewnętrzny. Fireworks zastosuje zewnętrzny cień do całej gru­py, tak jakby jej elementy były pojedynczym obiektem. Możesz także za­zna­czać i modyfikować poszczególne obiekty wchodzące w skład grupy bez konieczności ich rozgrupowania.

Grupowanie obiektów zapewnia lepszą kontrolę nad tworzeniem grafiki. Możesz na przy­kład utworzyć logo firmy składające się z wielu obiektów tekstowych i wek­to­ro­wych, a następnie zgrupować te obiekty i manipulować całym logo, jakby było ono po­je­dynczym obiektem. Zawsze grupuj ze sobą obiekty, którymi nie musisz zajmować się oddzielnie. Umożliwi to jednoczesne manipulowanie wszystkimi obiektami znajdu­ją­cy­mi się w grupie.

Aby zgrupować dwa lub więcej obiektów, zaznacz je i wybierz z menu polecenie ModifyGroup lub użyj skrótu klawiaturowego Ctrl+G (Command+G). Zgrupowane obiek­ty będą teraz zachowywały się jak pojedynczy obiekt. Zastosowanie Live Effects lub modyfikacja krycia będą oddziaływały teraz na całą grupę, jakby była ona po­je­dyn­czym obiektem (rysunek 13.14).

Rysunek 13.14. Zastosowanie Live Effects lub zmiana przezroczystości grupy obiektów pokazuje, że działa ona jak pojedynczy obiekt

Group — Grupa

With glow — Z blaskiem

With drop shadow — Z cieniem zewnętrznym

With inner bevel — Z fazą wewnętrzną

50% opacity — Krycie 50%

Po utworzeniu grupy możesz ją w każdej chwili rozgrupować. Aby rozgrupować grupę, wy­bierz z menu polecenie ModifyUngroup lub użyj skrótu klawiaturowego Ctrl+Shift+G (Com­mand+Shift+G).

	Jeśli zastosujesz efekt, zmienisz krycie lub tryb mieszania całej grupy, pa­miętaj, że po rozgrupowaniu wszystkie te zmiany zostaną utracone.

Aby zmodyfikować pojedynczy obiekt znajdujący się w grupie, możesz rozłączyć grupę lub zaznaczyć tylko jeden obiekt za pomocą narzędzia Subselection. Jeżeli przemieścisz go do innej warstwy, zostanie on usunięty z grupy. Aby zaznaczyć wszystkie elementy skła­dowe grupy, wybierz z menu polecenie EditSubselect. Żeby zaznaczyć grupę, do któ­rej należy wyselekcjonowany obiekt, wybierz z menu polecenie EditSuperselect.

W Fireworks istnieją trzy różne typy grup: grupy zwykłe (które właśnie omawialiśmy), obiekty z maskami (które zaraz omówimy) i symbole (które zostały opisane w rozdziale 24.). Z każdym rodzajem grupy możesz używać technik zaznaczania bezpośredniego i za­znaczania grup.

Maski alfa

W dużym skrócie - maska alfa XE "grupowanie:grupy maskujące" jest obrazkiem 8-bitowym w skali szarości, używanym do opisywania stopnia przezroczystości innego obrazka. Czarne obszary maski alfa reprezentują obszary nieprzezroczyste obrazka po zastosowaniu maskowania, a obszary białe reprezentują obszary przezroczyste. 256 odcieni szarości odpowiada różnym poziomom przezroczystości — ciemnoszary jest prawie nieprzezroczysty, a jasnoszary jest prawie przezroczysty.

Jeśli tworzyłeś już kiedyś obrazek w formacie GIF z jasnym tłem i umieszczałeś go na stro­nie WWW posiadającej ciemne tło, oznacza to, że stawałeś już przed wyzwaniem skom­ponowania przezroczystego obrazka z tłem. Krawędzie obrazka, w których koń­czył się kolor przezroczystości były wygładzane za pomocą zarówno jaśniejszego, jak i ciem­niejszego koloru. Po umieszczeniu takiego obrazka nad tłem w zupełnie innym ko­lorze, wokół niego wyświetlana była zapewne widoczna aureola.

Problem ten został rozwiązany w Fireworks za pomocą 8-bitowych masek alfa i for­ma­tu PNG, które umożliwiają komponowanie przezroczystych obrazków z tłem o dowolnym ko­lorze, ponieważ przezroczystość jest w nich definiowana dla każdego piksela (ry­sunek 13.15).

Standardowe obrazki tworzone w Fireworks posiadają trzy 8-bitowe kanały (po jednym dla trzech kolorów: czerwonego, zielonego i niebieskiego), co daje w rezultacie 24-bi­to­wy obrazek RGB. Gdy dodasz do takiego obrazka 8-bitowy kanał opisujący poziom prze­zroczystości (tzw. kanał alfa), otrzymasz 32-bitowy obrazek (tabela 13.1), który w ten sam sposób określa kolory jak obrazek 23-bitowy, ale dodatkowo zawiera informacje o przezroczystości.

Tabela 13.1.

Kanały i głębia bitowa

Obrazek	Kanały	Głębia bitowa
Skala szarości	1 dla skali szarości	8-bitowa
True Color	1 czerwony, 1 zielony, 1 niebieski	24-bitowa
True Color z maską alfa	1 czerwony, 1 zielony, 1 niebieski, 1 dla skali szarości (jako maska)	32-bitowa

Każdy piksel maski alfa ma wartość z przedziału od 0 do 255, definiującą poziom jego prze­zroczystości. Przezroczystość ta zmienia się od całkowitego krycia (czarny lub 0) do całkowitej przezroczystości (biały lub 255). Wszystkie odcienie szarości znajdujące się po­mię­dzy bielą i czernią są traktowane jako „odcienie” przezroczystości. Fireworks wy­ko­rzys­tuje wartość każdego piksela maski do definiowania poziomu przezroczystości pik­se­li znajdujących się w niższych warstwach grupy maskującej, co z kolei determinuje spo­sób mieszania tych pikseli z pikselami tła.

Rysunek 13.15. Przedstawione w Macromedia Flash, 32-bitowe obrazki PNG stworzone w Fireworks mogą być umieszczane nad tłem w dowolnym kolorze i nie tracą swej przezroczystości. Z kolei GIF-y, gdy zostaną umieszczone nad tłem dużo jaśniejszym lub ciemniejszym od tego, dla którego były tworzone, będą otoczone aureolą

32-bit PNG — 32-bitowy obrazek PNG

GIF with white ... — GIF z kolorem białym definiującym przezroczystość

32-bit PNG — 32-bitowy obrazek PNG

GIF with black ... — GIF z kolorem czarnym definiującym przezroczystość

Jeśli nie pracowałeś jeszcze z 32-bitowymi obrazkami PNG, a jesteś przyzwyczajony do ograniczonej przezroczystości oferowanej przez format GIF, zaskoczy Cię łatwość, z ja­ką maski alfa pozwalają komponować przezroczyste obiekty.

Obecnie nie istnieje żadna przeglądarka internetowa, która potrafiłaby ob­sługiwać kanał alfa wbudowany w obrazki PNG. Przezroczystość al­fa jest jednak bardzo przydatna w czasie pracy w Fireworks i przy eks­por­to­waniu przezroczystości do innych aplikacji, takich jak Macro­me­dia Director i Flash. Do Directora i Flasha można importować pliki zapi­sy­wa­ne w źródłowym formacie PNG Fireworks i nie trzeba ich ekspor­to­wać w zwykłym formacie PNG.

Mówiąc w skrócie, praca z maskami w Fireworks obraca się wokół palet Layers i Object. W palecie Layers znajdują się kontrolki i polecenia związane z maskami, a także miniaturki masek obiektów, obok miniaturek tych obiektów. Po kliknięciu miniaturki maski możesz ją edytować, a w palecie Object pojawią się opcje związane z maskowaniem. W trybie wektorowym, obiekty z maskami mają w środku uchwyty Move Handle, które umożliwiają przeciąganie obiektów z maskami na inne miejsce, bez przesuwania masek.

Poniżej znajdziesz opis różnych kontrolek maskowania.

Tworzenie masek wektorowych

W związku z możliwości edycji, zawsze gdy tylko jest to możliwe korzystam z masek wektorowych. Maski wektorowe pozwalają radykalnie zmieniać wygląd obiektu z maską, przy użyciu standardowych technik edycji obiektów wektorowych, jak wypełnienia, obrysy czy Live Effects. Narzędzia transformacji, z kolei, pozwalają skalować, przechylać i zniekształcać maski wektorowe. Jako maski wektorowe można stosować również obiekty tekstowe, co może dawać bardzo interesujące efekty.

	W rozdziale 10. znajdziesz więcej informacji o efektach maskowania tekstu.

Aby utworzyć maskę wektorową:

1. Wybierz obiekt, który chcesz maskować (rysunek 13.16).

2. Utwórz obiekt, który chcesz wykorzystać jako maskę oryginalnego obiektu (ry­sunek 13.17). Wymiary maski definiują wymiary końcowego obiektu z maską. W białych obszarach maski otrzymany obiekt będzie całkowicie prze­zro­czys­ty, zaś w czarnych obszarach maski - całkowicie nieprzezroczysty. Wszy­stkie po­śred­nie odcienie szarości definiują różne poziomy przezroczystości grupy maskującej.

3. Umieść maskę w odpowiednim miejscu w stosunku do maskowanego obiektu.

4. Zaznacz maskę i wybierz z menu polecenie EditCut lub użyj skrótu klawiaturowego Ctrl+X (Com­mand+X).

5. Zaznacz obiekt, do którego chcesz zastosowac maskę i wybierz polecenie Modify⇒Mask⇒Paste as Mask.

6. Wybierz polecenie Window⇒Object, by wyświetlić paletę Object. Wybierz Grayscale Appearance.

Rysunek 13.16. Sztuczne ognie nie są wtapiane w paskowane tło
Rysunek 13.17. Wypełnienie gradientowe pozwala utworzyć maskowany obiekt z płynną przezroczystością

Jeśli uzyskasz maskę od­wrot­ną niż oczekiwałeś, możesz szybko odwrócić maskę za pomocą efek­tu Invert, który znajdziesz w palecie Effect.

Maska zostanie zastosowana do oryginalnego obiektu (rysunek 13.18).

Maski bitmapowe

Metod tworzenia masek bitmapowych w Fireworks jest prawie tak dużo jak metod tworzenia bitmap. Niezależnie od przyjętej metody, zawsze uzyskamy prosty 8-bitowy obrazek w skali szarości, który będzie maską dla innego obiektu. Podobnie jak w przypadku innych masek alfa, czarny obszar maski będzie w obiekcie końcowym nieprzezroczysty, biały będzie przezroczysty, a odcienie szarości będą opisywać różne poziomy przezroczystości.

Dodawanie maski bitmapowej

W palecie Layers znajduje się szereg kontrolek maskowania, a wśród nich prosty przycisk Add Mask (Dodaj maskę), który służy do utworzenia nowej, pustej maski bitmapowej, zaznaczonej do edycji. Jeżeli poszukiwana przez nas maska jest na tyle prosta, że można ją przeciągnąć przy użyciu narzędzi Fireworks, dodanie maski jest dobrym początkiem.

Rysunek 13.18. Stopniowe przejście maski od koloru czarnego do białego zostało przekształcone na stopniowe przejście od krycia do przezroczystości, co umożliwiło wtopienie maskowanego obiektu w tło

Aby dodać maskę bitmapową do obiektu:

1. Zaznacz obiekt, do którego chcesz zastosować maskę.

2. Wybierz polecenie Window⇒Layers lub użyj skrótu klawiaturowego F2, aby wyświetlić paletę Layers.

3. Jeżeli jest taka potrzeba, kliknij kolumnę Expand/Collapse w palecie Layers, aby otworzyć warstwę bieżącą i zobaczyć zaznaczony obiekt.

4. Kliknij przycisk Add Mask w palecie Layers.

Program utworzy pustą maskę bitmapową i zastosuje ją do zaznaczonego obiektu. Maska jest również gotowa do edycji.

	W dalszej części niniejszego rozdziału znajdziesz informacje o edytowaniu masek.

Polecenia Reveal All i Hide All

Pracę z maskami można szybko rozpocząć, korzystając z poleceń Reveal All (Pokaż wszystko)i Hide All (Ukryj wszystko).

Aby skorzystać z poleceń Reveal All i Hide All:

1. Zaznacz obiekt, do którego chcesz zastosować maskę.

2. Aby zastosować zupełnie białą maskę, wybierz polecenie Modify⇒Mask⇒Reveal All; aby zastosować zupełnie czarną maskę, wybierz polecenie Modify⇒Mask⇒Hide All.

Program tworzy maskę i zaznacza ją do edycji.

Polecenia Reveal Selection i Hide Selection

Za pomocą poleceń Reveal Selection (Pokaż zaznaczenie) i Hide Selection (Ukryj zaznaczenie) możemy zmieniać zaznaczenia na maski bitmapowe, co bardzo upraszcza stosowanie prostych masek bitmapowych.

W celu stworzenia maski bitmapowej za pomocą poleceń Reveal Selection lub Hide Selection:

1. Utwórz zaznaczenie za pomocą jednego z narzędzi selekcji, np. Marquee.

2. Wybierz polecenie Modify⇒Mask⇒Reveal Selection, aby pokazać piksele znajdujące się wewnątrz zaznaczenia. Aby ukryć piksele znajdujące się wewnątrz zaznaczenia, wybierz polecenie Modify⇒Mask⇒Hide Selection.

Program utworzy odpowiednią maskę i zaznaczy ją do edycji.

Technika Fireworks: Metoda kontrastu

Podstawowym celem tworzenia maski bitmapowej jest usunięcie tła z obrazka, w celu wyizolowania postaci lub obiektu na pierwszym planie. Po zduplikowaniu obrazka i zwiększeniu kontrastu w duplikacie, często można odizolować obszar planu pierwszego i tła, co pomaga w stworzeniu odpowiedniej maski.

Aby stworzyć maskę za pomocą metody kontrastu:

1. Zduplikuj obiekt bitmapowy, do którego chcesz zastosować maskę (rysunek 13.19). Maska zostanie utworzona z duplikatu.

Rysunek 13.19. Tworzenie maski rozpoczynamy od zduplikowania obiektu oryginalnego

2. Zaznacz duplikat i wybierz polecenie Commands⇒Creative⇒Convert to Grayscale, aby dokonać jego konwersji na skalę szarości.

3. Wybierz polecenie Window⇒Effect, aby wyświetlić paletę Effect.

4. Z listy Effect Category w palecie Effect wybierz Adjust Color⇒Brightness/Contrast. Program otworzy okno dialogowe Brightness/Contrast.

5. Ustaw suwak kontrastu na 100%.

6. Dostosuj ustawienia suwaka Brightness tak, aby obiekt zbliżył się wyglądem do wyglądu żądanej maski, o ostro zarysowanych obszarach planu pierwszego i tła (rysunek 13.20). W zależności od obrazka, potrzebne regulacje mogą być niewielkie lub znaczne.

Rysunek 13.20. Maksymalnie zwiększamy kontrast, a następnie dopasowujemy poziom jasności w celu odizolowania elementów planu pierwszego od tła
		W niektórych przypadkach lepszą kontrolę daje skorzystanie z efektów Levels niż z Brightness/Contrast.

7. Wybierz polecenie Modify⇒Convert to Bitmap, aby dokonać konwersji obiektu wraz z jego efektami na obiekt bitmapowy.

	Po konwersji na bitmapę, powstająca maska bitmapowa nie będzie mogła być edytowana.

8. Użyj narzędzia Paint Bucket i (lub) narzędzia Eraser w celu wyczyszczenia maski, wypełniając lub usuwając piksele według potrzeb, tak aby maska była ukończona (rysunek 13.21).

Rysunek 13.21. Za pomocą narzędzi Paint Bucket i (lub) Eraser wyczyść i wykończ maskę

9. Umieść maskę w odpowiednim miejscu w stosunku do maskowanego obiektu.

	Korzystając z poleceń w podmenu Modify⇒Align, możesz dokładnie wyrównać maskę i obiekt.

10. Zaznacz maskę i wybierz polecenie Edit⇒Cut lub skorzystaj ze skrótu klawiaturowego Ctrl+X (Command+X), aby wyciąć obiekt do schowka.

11. Zaznacz obiekt, do którego chcesz zastosować maskę i wybierz polecenie Edit⇒Paste as Mask, aby ją zastosować ze schowka (rysunek 13.22).

Rysunek 13.22. Po zastosowaniu maski, tło znika zupełnie

Edytowanie masek

Po utworzeniu obiektu z maską — niezależnie czy był to obiekt bitmapowy, czy wektorowy — można go łatwo wybierać i modyfikować, korzystając z palety Layers.

Aby zmodyfikować maskę:

1. Wybierz polecenie Window⇒Layers, aby wyświetlić paletę Layers, i polecenie Window⇒Object, aby wyświetlić paletę Object. Podczas edycji maski obie powinny być widoczne, aby wszystko było „pod ręką”.

2. Kliknij miniaturkę maski w palecie Layers. Możesz również zaznaczyć obiekt — w obszarze roboczym lub z palety Layers i z menu rozwijanego palety Layers wybrać polecenie Edit Mask.

	Dwukrotne kliknięcie uchwytu Move Handle, pojawiającego się w środku obiektu z maską, również umożliwia edycję maski.

Program zaznaczy maskę do edytowania w obszarze roboczym.

Jeżeli edytujesz maskę bitmapową, w nagłówku palety Object pojawi się napis „Bitmap Mask”; program wejdzie w tryb bitmapowy i wyświetli obwódkę edycji maski wokół obszaru roboczego (rysunek 13.23).

Podczas edycji maski wektorowej, w nagłówku palety Object pojawi się napis „Vector Mask”.

Rysunek 13.23. Wśród kontrolek maskowania znajdują się palety Layers i Object, a także obwódka edycji maski, która pojawia się w obszarze roboczym w trakcie edytowania maski bitmapowej

Mask Edit Border — Obwódka edycji maski

Object panel — Paleta Object

Layers panel —Paleta Layers

Mask edit indicator — Wskaźnik edycji maski

Object thumbnail — Miniaturka obiektu

Link button — Przycisk łączenia

Mask thumbnail — Miniaturka maski

3. Dokonaj edycji maski, korzystając z narzędzi do edycji bitmapowej, znajdujących się w palecie narzędziowej, jak podczas edycji obrazka bitmapowego. Mimo tego, że sama maska nie jest przedstawiana w obszarze roboczym, widać efekty modyfikacji na niej dokonywanych.

4. Jeżeli chcesz, możesz zastosować do maski efekty Live Effects lub Xtras.

5. Korzystając z polecenia Modify⇒Convert to Bitmap, możesz dokonać konwersji maski wektorowej na bitmapową, jeżeli jest taka potrzeba.

6. Jeżeli chcesz, możesz zmienić sposób stosowania maski, korzystając z kontrolek w palecie Object:

• Jeżeli dokonujesz edycji maski wektorowej, wybierz, czy ma maska ma być stosowana przy użyciu konturów wektora (opcjonalnie z przedstawionym wypełnieniem i obrysem), czy przy użyciu skali szarości. Korzystanie ze skali szarości pozwala w sposób efektywny traktować maski wektorowe jak bitmapowe.

• W przypadku masek bitmapowych, wybierz czy ma być używany kanał alfa bitmapy, czy widok skali szarości.

7. Po zakończeniu usuń zaznaczenie z maskowanego obiektu, wybierając polecenie Edit⇒Deselect lub korzystając ze skrótu klawiaturowego Ctrl+D (Command+D)

	Podczas edycji maski bitmapowej, możesz wyjść z trybu edycji grafiki bitmapowej, aby zakończyć edycję maski. W przypadku maski wektorowej, wystarczy, że klikniesz pusty fragment obszaru roboczego, aby zakończyć edycję.

Opcje edycji maski nie kończą się na edycji samej maski. Podczas edycji maski należy pamiętać o poniższych kwestiach:

• Wybranie miniaturki maski w palecie Layers pozwala na jej edytowanie, natomiast wybranie miniaturki obiektu pozwala na edytowanie obiektu niezależnie od maski.

• Kliknięcie przycisku łączenia Link, pomiędzy miniaturkami obiektu i maski (rysunek 13.23), pozwala na odłączenie maski od obiektu i umożliwia ich niezależne rozmieszczenie. Po kliknięciu pustego miejsca między rozłączonymi miniaturkami ponownie możemy je połączyć.

• Kliknij i przeciągnij uchwyt Move Handle (rysunek 13.24), pojawiający się w środku maskowanego obiektu w trybie wektorowym, aby ustawić obiekt znajdujący się pod maską, bez przemieszczania maski. Jest to szczególnie przydatne przy kadrowaniu obiektu bitmapowego maską wektorową, gdyż pozwala to na zmianę lokalizacji bitmapy w obrębie „ramki” wektorowej.

Rysunek 13.24. Uchwyt Move Handle służy do przesuwania obrazka znajdującego się pod spodem bez przemieszczania jego maski

Move Handle — Uchwyt Move Handle

• Aby chwilowo wyłączyć maskę, zaznacz jej miniaturkę lub obiekt przez nią maskowany i wybierz polecenie Modify⇒Mask⇒Disable Mask lub wybierz polecenie Disable Mask z rozwijanego menu palety Layers. Na miniaturce maski pojawi się czerwony znak X, sygnalizujący, że maska jest wyłączona. Aby przywrócić maskę, wybierz polecenie Modify⇒Mask⇒Enable Mask lub wybierz polecenie Enable Mask z rozwijanego menu palety Layers.

• Aby usunąć maskę na stałe, oprócz skorzystania z polecenie Undo, możesz zaznaczyć miniaturkę maski lub obiekt przez nią maskowany i wybrać polecenie Modify⇒Mask⇒Delete Mask lub wybrać polecenie Delete Mask z rozwijanego menu palety Layers.

Wskazówki dotyczące maskowania

Obiekty z maskami są kreatywnym i potężnym narzędziem, z którym możesz prze­pro­wa­dzać wiele różnych eksperymentów. Wypróbuj poniższe wskazówki:

• Zastosuj efekty lub style do obiektu wektorowego, a następnie użyj go jako mas­ki.

• Zmień ustawienia obrysu lub wypełnienia maski wektorowej.

• Użyj obiektu tekstowego jako maski.

• Zastosuj wypełnienie teksturą do maski.

• Zastosuj Xtra do maski.

Technika Fireworks: tworzenie ramek do zdjęć

Podczas pracy z obiektami bitmapowymi w Fireworks często zdarza się, że chcesz ska­dro­wać obrazek do mniejszych rozmiarów. Możesz to zrobić za pomocą narzędzia Crop albo też utworzyć i skopiować zaznaczenie, ale techniki te mają destrukcyjne działanie. Obiekt bitmapowy zostanie wówczas nieodwracalnie zmodyfikowany. Jeżeli będziesz chciał na przykład przywrócić później z powrotem 100 pikseli obrazka lub dodać po 10 pik­seli wzdłuż wszystkich krawędzi obrazka, aby utworzyć ich rozmycie, nie będziesz za­dowolony z przeprowadzonego kadrowania. Wszystkie informacje zostaną w czasie ka­drowania bezpowrotnie usunięte z obrazka.

Sposobem na obejście tych problemów są obiekty z maskami. Pozwalają one nie tylko nieniszcząco kadrować obrazek, ale także wykorzystywać Live Effects i inne metody do tworzenia ciekawych ramek. Modyfikując obiekt wektorowy i uży­wa­jąc go jako maski alfa, możesz uzyskać bardziej precyzyjną kontrolę nad kształtem i prze­zroczystością obrazka.

Aby utworzyć ramkę obrazka, otwórz obrazek w Fireworks i:

292. Wybierz z menu polecenie ModifyExit Bitmap Mode lub użyj skrótu klawia­tu­ro­we­go Ctrl+Shift+E (Command+Shift+E), aby przejść do trybu edycji grafiki wektorowej.

293. Użyj narzędzi rysunkowych, aby narysować nad obrazkiem prostokąt o nieco mniej­szych wymiarach niż obrazek (rysunek 13.25). Obszar znajdujący się poza prostokątem nie będzie widoczny po maskowaniu.

294. Wybierając polecenie Modify⇒Ungroup, przekonwertuj prostokąt w regularny obiekt wektorowy.

	Jako maski możesz również użyć okręgu lub wielokąta. Nie wymagają one rozgrupowania w punkcie 3.

Rysunek 13.25. Za pomocą prostokąta zdefiniuj obszar fotografii, który powinien zostać zachowany w końcowym obrazku

295. Za pomocą dolnej próbki znajdującej się w palecie narzędziowej zdefiniuj czar­­ny kolor wypełnienia prostokąta.

W tym miejscu można trochę poeksperymentować, wypełniając kształt różnymi gra­dientami lub teksturami. Pamiętaj, że wszystkie czarne obszary będą cał­ko­wi­cie widoczne w końcowym obrazku, zaś białe obszary - całkowicie niewidoczne. Im ciemniejsze wypełnienie, tym bardziej przezroczysty staje się koń­co­wy obrazek.

228. Zaznacz prostokąt i za pomocą polecenia ModifyAlter PathFeather Fill rozmyj jego kra­wędzie.

W tym miejscu również możesz poeksperymentować i zamiast rozmywania zastosować do swo­­­jego kształtu jakieś efekty, style, Xtras lub różne obrysy. Jeśli masz za­in­sta­lowane filtry Photoshopa 5, spróbuj użyć filtru Distort, Brush Strokes, Sketch i Stylize. Jeśli zaś używasz pakietu Alien Skin Eye Candy, spróbuj za­sto­sować filtr Jiggle.

229. Umieść maskę w odpowiednim miejscu w stosunku do maskowanego obiektu.

230. Zaznacz maskę i wybierz polecenie Edit⇒Cut lub użyj skrótu klawiaturowego Ctrl+X (Command+X), aby wyciąć ją do schowka.

231. Zaznacz obiekt, który ma być maskowany i wybierz polecenie Edit⇒Paste as Mask, aby zastosować do niego maskę.

	Polecenie Paste as Mask jest również dostępne w innym menu: Modify⇒Mask⇒Paste as Mask.

Obiekt z maską ma ten sam rozmiar i kształt, co obiekt czarno-biały służący do rysowania (rysunek 13.26).

Rysunek 13.26. Ramki tworzone poprzez zastosowanie efektów do obiektów wektorowych i wykorzystanie ich jako maski alfa dla obrazków

Original image — Obrazek oryginalny

Feathered rectangle ... — Maska wektorowa w postaci prostokąta z rozmyciem

Feathered circle ... — Maska wektorowa w postaci okręgu z rozmyciem

Eye Candy Jiggle ... — Filtr Eye Candy Jiggle zastosowany do maski bitmapowej

Eye Candy Marble ... — Filtr Eye Candy Marble zastosowany do maski bitmapowej

Krycie XE "krycie" i tryby mieszania

Najważniejsze narzędzia wykorzystywane w komponowaniu obrazków to krycie i tryby mie­szania. Poprzez modyfikowanie tych właściwości można połączyć dwa obraz­ki ze sobą. Nadając pierwszemu obrazkowi niższe wartości krycia możesz spra­wić, że będzie przez niego widać obrazek znajdujący się pod spodem. Zaś za pomocą try­bów mieszania można „podkradać” kolory z jednego obrazka do drugiego. Po wy­ko­na­niu kilku prostych poleceń możesz wkomponować w tło pływający obiekt wektorowy lub zaznaczenie bitmapowe.

	Dobre wyniki daje najczęściej rozmycie obiektów przed ich kom­po­no­wa­niem. Po zmiękczeniu krawędzi łatwiej jest usunąć linię podziału po­między dwoma obrazkami. Wypróbuj tryby mieszania z obrysami, tek­sturami i efektami Fireworks.

Po zaznaczeniu obiektu, za pomocą palety Layers XE "inspektor:Object" (rysunek 13.27) możesz ustawiać wie­le jego właściwości krycia i tryb mieszania.

Rysunek 13.27. W palecie Layers znajdują się kontrolki umożliwiające sterowanie kryciem i trybem mieszania zaznaczonych obiektów

Opacity setting — Ustawienie krycia

Opacity slider — Suwak krycia

Blending ... — Lista trybów mieszania

Sterowanie XE "krycie:sterowanie" kryciem

Im bardziej obiekt będzie przezroczysty, tym więcej obszarów tła będzie przez niego wi­dać. W ten sposób zaczyna się długa droga wiodąca do skomponowania dwóch obraz­ków.

Sterowanie kryciem w Fireworks jest bardzo proste. Zaznacz obiekt, otwórz paletę Layers za pomocą polecenia menu WindowLayers lub skrótu klawiaturowego F2 i przesuń suwak krycia. Przy wartości 100 brak jest prze­zro­czys­toś­ci i jest pełne krycie. Po przeciągnięciu suwaka w dół i ustawieniu wartości kry­cia równej 1, obiekt jest prawie niewidoczny w Fireworks (rysunek 13.28). Aby obra­zek był całkowicie niewidoczny, wpisz wartość 0 w pole tekstowe przezroczystości i wciśnij klawisz Enter (Return).

Rysunek 13.28. Za pomocą suwaka krycia w palecie Layers możesz zmieniać poziom krycia obiektów. Postać po lewej stronie posiada 100-procentowe krycie. Krycie postaci po prawej stronie wynosi 10%
100% opacity — 100% krycia 75% ... — 75% krycia 50% ... — 50% krycia 25% ... — 25% krycia 10% ... — 10% krycia
		Jeśli określisz ustawienia przezroczystości przed zaznaczeniem ja­kie­go­kolwiek obiektu, ustawisz domyślne wartości krycia wszy­s­tkich nowo tworzonych obiektów. Jeżeli przez przypadek usta­wisz 10-procentowe lub mniejsze krycie, być może nie będziesz nawet wi­dział rysowanych obiektów. Jeśli tak się stanie, usuń zaznaczenia wszy­s­tkich obiektów za pomocą polecenia EditDeselect i przesuń su­wak prze­zroczystości w palecie Layers z powrotem do wartości 100.

Wykorzystanie trybów mieszania XE "krycie:tryby mieszania"

Tryby mieszania w różny sposób manipulują kolorami pikseli obrazków pierwszego pla­nu i kolorami pikseli tła, aby je ze sobą wymieszać. Zanim rozpoczniesz korzystać z try­bów mieszania, powinieneś poznać używaną w nich terminologię:

• Blend color (Kolor mieszany). Kolor zaznaczonego obiektu, przeważnie obie­k­tu pierwszego planu.

• Base color (Kolor bazowy). Kolor znajdujący się pod zaznaczonym obiektem, prze­ważnie kolor obiektu znajdującego się w tle.

• Result color (Kolor wynikowy). Kolor powstały w wyniku połączenia koloru mie­sza­ne­go z kolorem bazowym.

Dla ułatwienia, w tym podrozdziale będę używał terminów: pierwszy plan, tło i rezultat.

Jak zdążyłeś się przekonać, Fireworks umożliwia w dowolnej chwili modyfikowanie po­ziomu krycia obiektów z poziomu suwaka Opacity palety Layers. Krycie obiektu ma także wpływ na sposób mieszania jego kolorów.

Tryby mieszania można stosować do pojedynczego obiektu lub do całych grup obiek­tów. Jeśli ustawisz dla obiektu wybrany tryb mieszania, a następnie zgrupujesz ten obiekt z innymi, jego tryb mieszania zostanie usunięty, gdyż obiekt przejmie tryb mie­sza­nia używany w grupie (rozdzielenie grupy spowoduje przywrócenie trybów mie­sza­nia poszczególnych obiektów). Jeśli często wykorzystujesz tryby mieszania, zamiast gru­pować obiekty, do ich oddzielania i organizowania możesz wykorzystać warstwy. Poz­woli to również uzyskiwać ciekawe rezultaty poprzez modyfikowanie kolejności po­szcze­gólnych warstw.

W zależności od typu zaznaczonego obiektu, sposoby działania trybów mieszania róż­nią się między sobą:

• Tryb edycji grafiki wektorowej. Tryb mieszania jest zastosowywany do za­zna­czonego obiektu.

• Tryb edycji grafiki bitmapowej. Jeśli utworzyłeś wcześniej zaznaczenie, tryb mie­szania jest stosowany do zaznaczonych pikseli. Jeżeli nie ma żadnego zaznaczenia, tryb mieszania jest stosowany do obrysów i wypełnień, które będziesz ry­sował.

Zaznacz obiekt i zmień ustawienia trybu mieszania w palecie Layers. Jeśli nie za­zna­czysz żadnego obiektu, zmiana trybu spowoduje ustawienie domyślnego trybu mie­szania dla wszystkich nowo tworzonych obiektów.

Tryby mieszania

Tryby mieszania mogą być początkowo niezrozumiałe, gdyż wykorzystują skom­pli­ko­wa­ne obliczenia matematyczne. Na początek, najlepiej porównać rezultaty ich działania (ry­sunek 13.29).

Rysunek 13.29. Porównanie dwunastu trybów mieszania dostępnych w Fireworks. W środku ilustracji znajduje się oryginalny obrazek
Erase — Erase (Usuwanie) Multiply — Multiply (Mnożenie) Screen — Screen (Mnożenie odwrotności) Darken — Darken (Ciemniejsze) Lighten — Lighten (Jaśniejsze) Difference — Difference (Różnica) Tint — Tint (Odcień) Invert — Invert (Odwrotność) Luminosity — Luminosity (Luminancja) Color — Color (Kolor) Saturation — Saturation (Nasycenie) Hue — Hue (Barwa)
		W kolorowej wkładce znajdziesz barwną ilustrację psów przedsta­wio­nych na rysunku 13.19.

Na początku może wydawać się, że dwanaście trybów mieszania to bardzo wiele, ale więk­­szość z nich posiada swoje przeciwieństwo lub inne, w jakiś sposób powiązane z nimi tryby. Po opanowaniu zasady działania jednego z trybów będziesz na dobrej dro­dze, aby poznać je wszystkie.

Kolor pierwszego planu i kolor tła to kolory pikseli, a nie obiektów. Przy stosowaniu try­bu mieszania porównywane są ze sobą pojedyncze piksele obiektów pierwszego pla­nu i tła.

Multiply (Mnożenie) i Screen (Mnożenie odwrotności)

Tryb Multiply mnoży kolor pierwszego planu przez kolor tła. Może on nadać mie­sza­ne­mu obrazkowi głębsze i bogatsze poziomy tonalne. W rezultacie zawsze powstaje ciem­niej­szy kolor. Jeśli kolor pierwszego planu lub tła to czerń, rezultat również będzie czar­ny, a kiedy jeden z nich będzie biały, tryb Multiply nie wykona żadnych zmian.

Tryb Screen jest przeciwieństwem trybu Multiply. W rezultacie powstają wyblakłe od­cie­nie. Tryb ten działa na zasadzie odwrócenia koloru pierwszego planu i pomnożenia go przez kolor tła. Podczas gdy tryb Multiply zawsze daje ciemniejsze kolory, Screen ofe­ruje jaśniejsze. Jeżeli kolorem pierwszego planu i tła będzie biel, rezultat również bę­dzie biały. Jeśli oba będą czarne, zastosowanie trybu Screen nie spowoduje żad­nych zmian.

Darken (Ciemniejsze), Lighten (Jaśniejsze) i Difference (Różnica)

Tryb Darken porównuje kolor pierwszego planu z kolorem tła i zatrzymuje jedynie ciemniejsze od­cienie, zaś tryb Lighten działa wprost przeciwnie: porównuje kolor pierwszego planu z kolorem tła i zatrzymuje jedynie jaśniejsze odcienie.

Tryb Difference porównuje kolory pierwszego planu z tłem i odejmuje ciemniejsze ko­lo­ry od jaśniejszych. W rezultacie mogą czasami powstawać ciekawe i zaska­ku­ją­ce efek­ty kolorystyczne.

Hue (Barwa), Saturation (Nasycenie), Color (Kolor)
i Luminosity (Luminacja)

Tryb Hue łączy wartość barwy koloru pierwszego planu z luminancją i nasyceniem ko­lo­ru tła. W rezultacie, uzyskiwany jest kolor pierwszego planu, ale tak ciemny lub tak jas­ny jak kolor tła.

Tryb Saturation łączy nasycenie koloru pierwszego planu z luminancją i barwą koloru tła.

Tryb Color łączy barwę i nasycenie koloru pierwszego planu z luminancją koloru tła. Za­cho­wywane są przy tym odcienie szarości, tryb ten jest więc dobrym sposobem na do­da­wanie kolorów do czarno-białych zdjęć lub zabarwianie kolorowych zdjęć.

Tryb Luminosity łączy luminancję koloru pierwszego planu z barwą i nasyceniem koloru tła.

Invert (Odwrotność) i Tint (Odcień)

Tryby Invert i Tint w mieszaniu nie wykorzystują w ogóle koloru pierwszego planu. W try­bie Invert kolory obiektów pierwszego planu są zastępowane za pomocą od­wró­co­nych kolorów tła. W trybie Tint do koloru tła dodawane są odcienie szarości.

Erase (Usuwanie)

Usuwa wszystkie kolory pikseli tła, pozostawiając jedynie znajdujący się pod nimi ob­szar roboczy.

Technika Fireworks: symulowanie źródeł światła za pomocą trybów mieszania

Jednym z najważniejszych elementów potrzebnych do utworzenia dobrego efektu trój­wy­miarowego jest źródło światła. Grę świateł i cieni można utworzyć poprzez mie­sza­nie obiektu wypełnionego czarno-białym gradientem z innym obiektem. Do obrazka do­da­wa­ny jest wówczas możliwy do sterowania zakres świateł i cieni. Umożliwia to do­sto­so­wywanie „oświetlenia” do określonych obiektów graficznych.

Aby użyć trybów mieszania do symulowania świateł czy cieni i utworzyć obiekty takie, jak te przedstawione na rysunku 13.30:

Rysunek 13.30. Zmieszaj obiekt z innym obiektem, wypełnionym gradientem, aby zasymulować źródło światła
		W kolorowej wkładce znajdziesz barwne ilustracje prezentujące sy­mu­lo­wane źródła światła.

296. Utwórz nową, pustą warstwę, klikając przycisk New Layer, który znajdziesz w pa­lecie Layers. Kliknij dwukrotnie nową warstwę wyświetlaną w liście i na­z­wij ją Obiekt1.

232. Na warstwie Obiekt1 narysuj obiekt za pomocą jednego z geometrycznych na­rzę­dzi rysunkowych (Rectangle - Prostokąt, Ellipse - Elipsa lub Polygon - Wie­lokąt). Obiekt ten będzie bazowym obiektem efektu (nie źródłem świa­tła).

233. Za pomocą palety Fill nadaj obiektowi wypełnienie Solid i dodaj do niego tek­stu­rę, na przykład Parchment (Pergamin). Natężenie tekstury ustaw na 100%.

	Zamiast jednolitego wypełnienia z teksturą możesz wykorzystać wypeł­nie­nie deseniem.

234. Wybierz z menu polecenie EditClone, aby utworzyć kopię obiektu znajdującą się dokładnie nad oryginałem.

235. Dla nowego obiektu wybierz w palecie Fill wypełnienie gradientowe Radial o naz­wie White, Black. Usuń teksturę (jeśli jest), przeciągając suwak Amount of tex­ture do wartości 0%.

236. Wybierz polecenie Window⇒Layers, aby otworzyć paletę Layers. Zmień tryb mieszania na Multiply i zmodyfikuj „na oko” wartość krycia w zależności od koloru oryginalnego obiektu.

237. W obiekcie zostaną wy­­świetlone uchwyty, pozwalające modyfikować wypełnienie. Przeciągnij okrą­gły uchwyt wypełnienia gradientowego i zmień jego położenie tak, aby śro­dek białej części wypełnienia znajdował się w miejscu, w którym ma padać naj­jaś­niejsze „światło”. Jeżeli będzie to konieczne, przeciągnij kwadratowy uch­wyt edycyjny, aby ustalić kąt gradientu. W ten sposób dostosowałeś źródło światła.

	Możesz za pomocą narzędzia Select Behind zaznaczyć oryginalny obiekt (ten z teksturą lub wypełniony deseniem) i zastosować do nie­go jeden z efektów fazowania. Zróżnicowana wysokość fazy może mieć duży wpływ na realistyczny, trójwymiarowy wygląd Twoich obiek­tów.

238. Jeśli chcesz, możesz zaznaczyć oba obiekty i zmienić ich położenia. Zablokuj war­stwę Obiekt1 i nie umieszczaj na niej żadnych innych obiektów. Oba znaj­du­jące się na niej obiekty muszą być zawsze razem przesuwane, ale nie można ich zgrupować, ponieważ spowodowałoby to utracenie ustawień trybów mie­sza­nia i w rezultacie efektu oświetlenia. Przechowywanie tych obiektów w od­dziel­nej warstwie ułatwia korzystanie z trybu Single Layer Mode w trakcie póź­niejszych edycji.

W przykładzie tym wykorzystałem gradient radialny, ale tym możesz wykorzystywać róż­ne typy gradientów, co pozwoli Ci uzyskać naprawdę doskonałe efekty (na przykład wy­buchające gwiazdy). Co więcej - edytując gradient i zamieniając czystą biel na sto­no­wane odcienie szarości, możesz tworzyć jeszcze bardziej subtelne oświetlenie. Nie oba­wiaj się także eksperymentowania z różnymi trybami mieszania.

	Więcej informacji o gradientach znajdziesz w rozdziale 11.

Technika Fireworks: wtapianie zaznaczeń

Najczęściej wykonywaną czynnością podczas edycji grafiki bitmapowej jest prze­no­sze­nie elementów z jednych obrazków do innych, w którym muszą zostać umieszczone nad in­nym tłem. Wtapianie zaznaczenia może uczynić ten proces bardziej wydajnym, ukryje po­strzępienia krawędzi i pozwoli odrzucić wszystkie niepożądane, „zabłąkane” piksele.

Aby skopiować obrazek pierwszego planu z jednego dokumentu i umieścić go w innym:

297. Otwórz dokument źródłowy i dokument docelowy w Fireworks. W dokumencie źród­ło­wym powinien znajdować się Twój element pierwszego planu. Dokument do­ce­lowy powinien już mieć odpowiednie tło.

298. W dokumencie źródłowym użyj narzędzi Lasso lub Polygon Lasso do ut­wo­rze­nia zaznaczenia (rysunek 13.31). Zaznacz element pierwszego planu naj­do­kład­niej jak potrafisz.

Rysunek 13.31. Kopiowanie zmiękczonego zaznaczenia do innego dokumentu

239. Wybierz z menu polecenie Modify⇒MarqueeFeather, w oknie dialogowym Feather Se­lec­tion wpisz wartość 10 i kliknij przycisk OK. Spowoduje to wygładzenie se­lek­cji i ukrycie wszystkich postrzępionych krawędzi.

240. Wybierz z menu polecenie EditCopy lub użyj skrótu klawiaturowego Ctrl+C (Command+C), aby skopiować zaznaczenie do schowka.

241. Przejdź do docelowego dokumentu. Wybierz z menu polecenie ModifyExit Bitmap Mode, użyj skrótu klawiaturowego Ctrl+Shift+E (Command+Shift+E) lub klik­nij przycisk „STOP” znajdujący się na dolnej krawędzi okna doku­men­tu, aby przejść do trybu edycji grafiki wektorowej (jeśli jeszcze w nim nie jesteś).

242. Wybierz z menu polecenie EditPaste lub użyj skrótu klawiaturowego Ctrl+V (Command+V), aby wkleić zaznaczenie ze schowka do dokumentu jako nowy obiekt bitmapowy.

243. Przesuń nowy element do miejsca, w którym ma być położony.

Technika Fireworks: komponowanie obiektów XE "komponowanie obiektów"

Zaprezentowanie pojedynczych elementów w postaci jednego obrazka wymaga naj­częś­ciej wykorzystania kilku różnych technik kompozycyjnych. W naszym przykładzie uży­je­my obiektów z maskami, krycia, trybów mieszania i warstw z teksturami i zew­nęt­rzny­mi cie­niami do połączenia siedmiu lub ośmiu oddzielnych obiektów w jeden koń­co­wy obrazek.

	Jeśli przed przystąpieniem do ćwiczeń chcesz zobaczyć, jak będzie wy­glądał ich rezultat, zerknij do kolorowej wkładki.

Zaczniemy od utworzenia najniżej położonego elementu kompozycji, czyli obszaru ro­bo­czego, który w naszym przypadku będzie czarny (rysunek 13.32).

Rysunek 13.32. Poprzez przeświecające obiekty znajdujące się na samej górze widać teksturę obiektów tła, zaś zewnętrzny cień wtapia się w obszar roboczy

Background ... — Obiekt tła

Drop ... — Cień zewnętrzny

Canvas — Obszar roboczy

W końcowym obrazku widoczny będzie jedynie niewielki fragment obszaru roboczego. Obiekt tła po­sia­da wypełnienie z siatkową teksturą, przez które widać będzie później inne elementy, co spotęguje wrażenie głębi. Dodamy do niego również zewnętrzny cień, który pozwoli utwo­rzyć łagodne przejście pomiędzy nim samym i obszarem roboczym. Unikanie pros­tych linii i zbyt widocznych krawędzi (lub ich ukrywanie) pomoże stworzyć wrażenie spój­ności oddzielnych elementów kompozycji.

Na kolejnej warstwie znajduje się czerwono-czarny deseń. Aby wtopić go w obiekt tła, uży­łem maski alfa, żeby deseń przechodził od góry do dołu odpowiednio od cał­ko­wi­te­go krycia do całkowitej przezroczystości. Efekt taki można osiągnąć poprzez wyko­rzys­ta­nie obiektu z maską, którego maska została pokazana na rysunku 13.33. Tam, gdzie mas­ka jest czarna, znajdujący się pod nią obiekt jest nieprzezroczysty, w jej białych obszarach obiekt jest całkowicie przezroczysty. Odcienie szarości zapewniają różne po­zio­my przezroczystości.

Rysunek 13.33. Pokazany na rysunku obiekt wektorowy wypełniony gradientem, poprzez użycie go jako maski, pozwolił na utworzenie przejścia czerwono-czarnego desenia od krycia do przezroczystości

Object — Obiekt

Mask — Maska

Aby połączyć maskę i obiekt w obiekt z maską (rysunek 13.34), wystarczy zaznaczyć oba obiekty i wybrać z menu polecenie ModifyMaskPaste as Mask. Przez maskę będzie teraz widać obiekt tła. Wszystkie obiekty wyglądają tak, jakby by­ły jedną całością, a nie odrębnymi elementami. Maskę wektorową oczywiście wciąż można edytować.

Rysunek 13.34. Przesuwając uchwyt wypełnienia gradientowego maski, można dostosować krycie obiektu znajdującego się pod spodem

Trzy różne wersje logo Fireworks (rysunek 13.35) znajdują się na osobnych war­s­twach. Big Crinkley Logo posiada otwory, przez które widać tło, zaś efekt fazowania poz­wolił „unieść” je nad obszarem roboczym i dał wrażenie głębi. Real Logo (można je szyb­ko pobrać ze strony internetowej Fireworks lub innego miejsca) wygląda na nieco po­strzępione, ale zostanie prawie całe przykryte przez Hand-Drawn Logo, przez które z ko­lei będzie widać kolory obiektu znajdującego się pod spodem. Zastosowane do Hand-Drawn Logo zewnętrzny cień i wewnętrzna faza dają wrażenie głębi i tworzą ła­god­ne przejście pomiędzy tym obiektem i znajdującym się poniżej Real Logo.

Rysunek 13.35. Dzięki przezroczystości, zewnętrznym cieniom i fazowaniu elementy pierwszego planu dobrze wyglądają po ułożeniu ich w stosy

Big ... — Big Crinkley Logo

Hand ... — Hand-Drawn Logo z efektami Real Logo

Real ... — Real Logo

„Skórzany” wygląd dolnej połowy dokumentu sprawia, że wydaje się ona dobrym miej­scem dla obiektów tekstowych. Wybrana przeze mnie czcionka Heavy Rotation (rysunek 13.36) jest tak zbudowana, że wygląda jakby została w coś wciśnięta. Ustawienie 50-pro­centowego krycia obiektu tekstowego pozwoliło wyświetlić część znajdującej się po­niżej tekstury i zawęzić tekst. Wrażenie iluzji spotęgowane zostało za­sto­so­wa­niem do obiektu tekstowego trybu mieszania Screen, który odwraca kolor pierwszego pla­nu i mnoży go przez kolor tła.

Końcowy rezultat - uzyskany z wykorzystaniem obiektów z maskami, przezroczystości, try­bów mieszania, warstw, tekstur i efektów, takich jak zewnętrzne cienie - możesz zo­ba­czyć na rysunku 13.37.

Podsumowanie

Fireworks oferuje wiele opcji umożliwiających łączenie wielu różnych obiektów w celu uzy­skania obiektów bardziej złożonych lub efektów specjalnych. Rozmieszczając i kom­ponując obiekty w Fireworks, powinieneś pamiętać o następujących rzeczach:

Rysunek 13.36. Ustawienia krycia i trybów mieszania dostępne w palecie Layers pomogły wtopić obiekt tekstowy (u góry)w teksturę tła (u dołu)

100% opacity — 100% krycia

Screen ... — Tryb mieszania Screen

50% opacity — 50% krycia

Rysunek 13.37. Do połączenia wielu obiektów w ten zintegrowany, wielowarstwowy obrazek zostało wykorzystanych wiele technik kompozycji

• Warstwy pomagają organizować dokument, co uła­twia zaznaczanie i edytowania podobnych obiektów.

• Paleta Layers jest „centrum zarządzania” warstwami.

• Poszczególne warstwy dokumentu możesz ukrywać, wyświetlać lub ­blo­ko­wać.

• Warstwy mogą zawierać podwarstwy obiektów. Podwarstwy możesz pokazywać, ukrywać, przemieszczać kopiować i usuwać — podobnie jak warstwy

• Do precyzyjnego rozmieszczania obiektów w obszarze roboczym możesz wy­ko­rzystywać linijki, siatkę dokumentu i prowadnice.

• Obiekty mogą być grupowane. Grupa obiektów zachowuje się tak samo jak po­je­dynczy obiekt.

• Maski dają ogromne możliwości sterowania przezroczystością obiektów.

• Tryby mieszania pozwalają szybko i łatwo mieszać ze sobą różne obiekty.

• Stosując jednocześnie wiele technik kompozycji, możesz w Fireworks połączyć róż­ne obiekty w jeden spójny obrazek.

W następnym rozdziale opisane zostanie przechwytywanie i importowanie obrazków do Fireworks.




Część IV
Organizacja procesu tworzenia




Rozdział 14.
Przechwytywanie i import grafiki

W tym rozdziale:

• Skanowanie.

• Praca z cyfrowymi aparatami fotograficznymi i kamerami wideo.

• Umieszczanie obiektów z innych aplikacji.

• Importowanie bitmap i plików Photoshopa.

• Importowanie grafiki wektorowej.

• Praca z klipartami.

• Zrzuty ekranowe.

• Otwieranie animacji.

Łatwość przenoszenia informacji pomiędzy aplikacjami ma ogromny wpływ na charakter i wydajność pracy projektanta. W Fireworks możesz całą grafikę utwo­rzyć od podstaw, a nawet umieszczać w niej elementy tworzone w innych programach, ta­kich jak Macromedia FreeHand, lub zdjęcia z różnych kolekcji, a także obrazki pochodzące bez­pośrednio ze skanera lub aparatu cyfrowego.

Z punktu widzenia projektanta, dołączanie do grafiki elementów, które pochodzą z wie­lu różnych źródeł pozwala nadać dokumentom większą głębię i kontrast oraz uczynić je bardziej interesującymi dla odbiorcy. Proste kształty wektorowe mogą być łączone ze zło­żo­nymi fotografiami oraz organicznymi teksturami. Po ich połączeniu, możesz używać wszystkich narzędzi rysunkowych i funkcji eksportu.

Rozdział rozpoczyna się omówieniem zagadnień związanych z urządzeniami do prze­chwy­tywania grafiki, takich jak skanery lub kamery cyfrowe. Przyjrzymy się również zrzu­tom ekranowym i dowiesz się, jak za pomocą techniki „przeciągnij i upuść” lub ko­-


pio­wania i wklejania umieszczać w Fireworks obrazki z innych aplikacji. Omówimy im­portowanie bitmap i grafiki wektorowej. Przeanalizujemy również niektóre techniki im­por­to­wa­nia animacji.

Wprowadzenie
do przechwytywania obrazów

Pozyskiwanie obrazków z urządzeń takich jak skanery lub aparaty cyfrowe jest prawie ma­gicznym procesem, chyba że istnieją problemy w komunikacji pomiędzy sprzętem i oprogramowaniem. W Fireworks konwersacja taka obsługiwana przez jest standard TWAIN. TWAIN XE "TWAIN" jest standardem niezależnym od platformy, umożliwiającym pobie­ra­nie obrazków z różnych urządzeń, takich jak skanery, aparaty cyfrowe itp. Fireworks dla MacOS obsługuje także moduły dodatkowe Photoshop Acquire. Jeśli Twój skaner lub aparat cy­frowy używa tego modułu dodatkowego, przeczytaj podrozdział zatytułowany „Instalowanie modułów dodatkowych Photoshop Acquire”.

Co kryje się pod nazwą TWAIN? Chodzą pogłoski, iż jest to skrót od Tech­nology Without An Interesting Name (Technologia nie posia­da­ją­ca ciekawej nazwy). TWAIN można traktować jako miejsce, w którym sprzęt spotyka się z oprogramowaniem. Twórcy standardu twierdzą, że TWAIN to po prostu nazwa, która nie ma żadnego innego zna­cze­nia. Jeśli chcesz dowiedzieć się czegoś więcej o standardzie TWAIN, od­­wiedź stronę jej twórców znajdującą się pod adresem www.twain.org.

Urządzenia obsługujące XE "TWAIN:urządzenia obsługujące" TWAIN

Jeśli przy uruchamianiu Fireworks dostępny jest moduł TWAIN lub moduł dodatkowy Photoshop Acquire (tylko na MacOS), do menu File zostanie dodane polecenie Scan (rysunek 14.1). Jeśli do komputera podłączonych jest więcej urządzeń używających modułu TWAIN, w Fireworks będziesz mógł wybrać urządzenie, z którego chcesz korzystać.

	Jeśli posiadasz skaner lub cyfrową kamerę, a podmenu Scan nie jest do­stępne, sprawdź, czy poprawnie zostało zainstalowane urządzenie i je­go oprogramowanie. Jeśli będzie to konieczne, przeczytaj doku­men­tację techniczną urządzenia.

Aby wybrać źródło TWAIN w Fireworks:

244. Wybierz z menu polecenie FileScanTwain Source.

Fireworks wyświetli okno dialogowe Select a source (rysunek 14.2).

Rysunek 14.1. Jeśli dostępny jest moduł TWAIN lub moduł dodatkowy Photoshop Acquire, Fireworks doda do menu File podmenu Scan

Photoshop ... — Moduły dodatkowe Photoshop Acquire

Rysunek 14.2. W oknie dialogowym Select a source wybierz źródło TWAIN, z którego chcesz przechwytywać obrazki

245. Wybierz urządzenie obsługujące TWAIN, z którego Fireworks ma pobierać obrazki. Kliknij przycisk OK.

	Jeśli jeszcze nie kupiłeś żadnego skanera ani aparatu cyfrowego ale masz to w planach, wybierz z menu polecenie HelpFireworks Support Center, aby otworzyć witrynę Fireworks. W sekcji Tech Notes witryny znajdziesz listę sprzętu, który został prze­tes­to­wa­ny pod kątem współpracy z Fireworks.

Instalowanie modułów dodatkowych Photoshop Acquire
(tylko dla MacOS)

W MacOS komunikacja Fireworks ze skanerami i aparatami cyfrowymi jest zapew­nia­na przez moduły dodatkowe Photoshop Acquire. Moduł dodatkowy Photoshop Acquire obsługuje wiele róż­nych urządzeń (zwłaszcza tych, które nie współpracują z modułem TWAIN). Aby użyć jed­nego z nich w Fireworks:

• Zainstaluj moduł dodatkowy Photoshop Acquire w katalogu Xtras, znajdującym się katalogu Configuration programu Fireworks.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

• Zainstaluj moduł dodatkowy Photoshop Acquire w katalogu Photoshopa Plug-Ins lub in­nym katalogu na dysku twardym. Następnie wybierz w Fireworks po­le­cenie EditPreferences, wybierz zakładkę Folders (lista opcji w MacOS) i zaznacz opcję Photoshop Plug-ins, a następnie odszukaj katalog, w którym znajduje się moduł dodatkowy Acquire.

	Możesz także odwołać się w Fireworks do modułów dodatkowych znajdujących się w zewnętrznym katalogu poprzez umieszczenie skrótu (aliasu) do tego ka­talogu w folderze Xtras.

Po wykonaniu jednego z powyższych zadań, Fireworks doda do menu File podmenu Scan. Wybierz z tego menu jeden z modułów dodatkowych Photoshop Acquire, aby rozpocząć ska­no­wanie.

Niektóre moduły dodatkowe Photoshop Acquire mogą nie działać poprawnie w Fire­works, gdyż zostały wyprodukowane i przetestowane pod kątem współ­­pracy z Photoshopem. Jeśli jakiś moduł dodatkowy Acquire nie działa, sprawdź, czy na stronie internetowej producenta nie znajdują się uak­tu­alnione wersje modułów dodatkowych, zgodne z Photoshopem. Możesz tam tak­że sprawdzić, czy Twoje urządzenie współpracuje z modułem TWAIN.

Skanowanie XE "skanowanie"

Skanery są urządzeniami umożliwiającymi przechwytywanie drukowanych doku­men­tów - od rysunków, poprzez bardziej złożone obrazy aż po fotografie. Możesz zeska­no­wać obrazek i wykorzystać go bez żadnych zmian w Fireworks albo zmodyfikować za po­mocą narzędzi rysunkowych, efektów, Xtras, a następnie wyeksportować i opubli­ko­wać w Internecie.

	Skanowanie dla publikacji drukowanych wymaga innego podejścia niż ska­nowanie dla publikacji internetowych. Dla drukarza, obrazek w for­mie elektronicznej jest dopiero początkiem całego procesu druku. Fire­works jest narzędziem przeznaczonym prawie wyłącznie do two­rze­nia grafiki internetowej, więc wszystkie zagadnienia są omawiane w tym rozdziale pod kątem publikacji internetowych.

Skanowanie obrazka jest procesem polegającym na przekształceniu drukowanego obraz­ka na obrazek ekranowy (taki, który można wyświetlić na ekranie komputera). Większość pro­blemów związanych ze skanowaniem wynika z mieszania pojęć związanych z dru­kiem z tymi, które dotyczą grafiki ekranowej. Najczęściej pomyłki takie dotyczą roz­dziel­czości grafiki. Rozdzielczość oznacza „liczbę punktów”, która jest bardzo ważna przy skanowaniu, gdyż zarówno obrazki przeznaczone do druku, jak i do wyświetlania na ekranie składają się wyłącznie z punktów.

Rozdzielczość XE "skanowanie:rozdzielczość" jest mierzona inaczej dla obrazków drukowanych i inaczej dla ekrano­wych. Rozdzielczość w druku jest mierzona liczbą punktów mieszczących się w jednym calu i jest wyrażana w punktach na cal (dots per inch) - w skrócie dpi. Przykładem może być 300 dpi. Rozdzielczość ekranowa jest mierzona liczbą punktów składających się na cał­ko­wi­tą wysokość i szerokość obrazka. Na przykład 640×480 pikseli. Jeśli zaznaczysz obra­zek w Fireworks i wybierzesz z menu polecenie ModifyImage Size, zostanie otwarte okno dialogowe Image Size (Wielkość obrazka) (rysunek 14.3), w którym wyświetlane są zależności pomiędzy rozdzielczością w druku i rozdzielczością ekranową. Jeżeli okre­ślisz rozdzielczość jako 100 dpi, obrazek o wymiarach 500×400 pikseli w druku będzie miał rozmiary 5×4 cale.

Rysunek 14.3. W oknie dialogowym Image Size wyświetlane są zależności pomiędzy rozdzielczością ekranową (w pikselach) i rozdzielczością w druku

Oto lista niektórych rozdzielczości, z jakimi możesz zetknąć się podczas skanowania:

• Rozdzielczość drukowanego obrazka, mierzona w dpi. Górna granica szcze­gó­łów, jakie może zawierać drukowany obrazek.

• Rozdzielczość skanowania, mierzona w dpi. Zanim rozpoczniesz skanowanie obraz­ka, musisz określić rozdzielczość skanowania, która z kolei określa, jak ska­ner powinien przekształcić drukowany obrazek (mierzony w calach) na obra­zek ekranowy (mierzony w pikselach). Rozdzielczość skanowania wyno­szą­ca 100 dpi mówi skanerowi, aby każdy cal drukowanego obrazka podzielił na 100 części i przekształcił je na 100 pikseli obrazka ekranowego. W ko­lej­nych podrozdziałach przyjrzymy się jeszcze bliżej rozdzielczości skanowania.

• Maksymalna optyczna rozdzielczość skanera, mierzona w dpi. Górna granica tego, co „widzi” skaner podczas skanowania. Skaner, którego mak­symalna rozdzielczość optyczna wynosi 300 dpi może podzielić jeden cal ska­­nowanego obrazka na 300 części. Mniejsze szczegóły nie są zauważane przez skaner.

• Interpolowana rozdzielczość skanowania, mierzona w dpi. Maksymalna zdol­ność skanera do „odgadywania” szczegółów, których nie „widzi”. Jeśli usta­wisz skaner 300 dpi na rozdzielczość 600 dpi, będzie on próbował odgad­nąć, jakie powinny być brakujące piksele. Jest to proces podobny do po­now­ne­go próbkowania obrazków skalowanych do większych rozmiarów i powinieneś raczej go unikać, ponieważ powoduje przekłamania w skanowanej grafice.

• Rozdzielczość ekranowa obrazka, mierzona w pikselach. Każdy piksel obrazka ekra­no­wego jest reprezentowany przez jeden piksel ekranu monitora kom­pu­terowego, zatem rozdzielczość ekranowa obrazka jest taka sama jak jego roz­miary. Obrazek o wymiarach 640×480 pikseli posiada rozdzielczość wy­no­szącą również 640×480 pikseli.

• Rozdzielczość wyświetlania, mierzona w pikselach. Monitor komputerowy mo­że pracować w rozdzielczości na przykład 800×600 lub 1024×768 pikseli. Wy­miary monitora w milimetrach są przeważnie nieznane i nieistotne.

Często występuje błędne przekonanie, że standardowa rozdzielczość mo­nitorów komputerowych to 72 dpi. Wczesne monitory Mac faktycznie miały roz­dzielczości równe 72 dpi. Stała się ona standardem, ponieważ Ma­cin­toshe wiodły prym w przemyśle poligraficznym oraz miały monitory jed­nakowych typów i o takich samych rozmiarach. Obecnie monitory kom­puterowe mają bardzo różne rozmiary i rozdzielczości. 19-calowy mo­nitor pracujący z rozdzielczością 640×480 pikseli wyświetli zu­peł­nie inną liczbę punktów na cal niż monitor 14-calowy pracujący w roz­dziel­czości 1024×768 pikseli.

Proces skanowania XE "skanowanie:proces skanowania"

Po rozpoczęciu skanowania w Fireworks wyświetlane jest okno dialogowe specyficzne dla skanera lub modułu dodatkowego Acquire, w którym możesz określić ustawienia danego skanowania. Nie­które skanery pozwalają wybierać spośród różnych interfejsów. Jeden interfejs może być prostym i szybkim w obsłudze oknem dialogowym, zaś inny może zawierać ogrom­ną liczbę opcji dla zaawansowanych użytkowników. Niektóre skanery posiadają rów­nież dodatkowe interfejsy działające na zasadzie kreatorów, takich jak ten na rysunku 14.4, które pozwalają określić wymagane opcje przy użyciu prostego i przystępnego ję­zy­ka. Zamiast określać ustawienia odrastrowania (w celu usunięcia regularnych wzorów właś­ci­wych dla niektórych rodzajów druku) wystarczy, że podasz skąd pochodzi oryginalny obrazek - na przykład z magazynu lub gazety codziennej. Oprogramowanie samo do­bie­rze odpowiednie parametry.

Najprawdopodobniej będziesz chciał nauczyć się obsługiwać zaawansowany interfejs ska­nera, aby mieć większą kontrolę nad ustawieniami skanowania i uzyskiwać dzięki temu lepsze rezultaty. Najważniejsza wśród tych ustawień jest rozdzielczość skano­wa­nia oraz głębia kolorów. W kolejnych podrozdziałach przyjrzymy się bliżej tym usta­wie­niom oraz omówimy pokrótce niektóre inne opcje.

Wybór rozdzielczości XE "skanowanie:wybór rozdzielczości" skanowania

Mówiąc najprościej - rozdzielczość skanowania definiuje rozmiar końcowego obrazka na ekranie. W tabeli 14.1 zostały przedstawione zależności pomiędzy rozmiarami ory­gi­nalnego, drukowanego obrazka i rozmiarami końcowego, ekranowego obrazka przy róż­nych rozdzielczościach skanowania.

Rysunek 14.4. Program Scan Wise firmy Agfa jest przeznaczony dla początkujących użytkowników i pozwala im określać potrzebne opcje za pomocą prostych poleceń

Tabela 14.1.

Wyniki skanowania przy różnych rozdzielczościach

Wymiary drukowanego obrazka (cale)	Rozdzielczość skanowania (dpi)	Wymiary ekranowego obrazka (piksele)
5×7	10	50×70
5×7	20	100×140
5×7	50	250×350
5×7	100	500×700
5×7	150	750×1050
5×7	200	1000×1400
5×7	300	1500×2100

Każda z tych trzech informacji mierzona jest w inny sposób:

• Obrazek drukowany. Jest mierzony w calach. W publikacjach drukowanych cal jest jednostką stałą. Jeśli utworzysz stronę o wymiarach 8.5×11 cali i wy­dru­kujesz ją w różnych rozdzielczościach, strona nadal będzie miała wy­miary 8.5×11 cali, ale na każdym wydruku będzie znajdowała się inna liczba punk­tów.

• Rozdzielczość skanowania. Jest mierzona w punktach na cal (dpi). Powstaje w wyniku przekształcenia drukowanego obrazka (mierzonego w calach) na obra­zek ekranowy (mierzony w punktach lub pikselach). Ile pikseli ekra­no­we­go obrazka ma się znajdować w każdym calu drukowanego obrazka? 50? Więc ustaw rozdzielczość skanowania na 50 dpi.

• Obrazek ekranowy. Jest mierzony w pikselach. W publikacjach ekranowych pik­sel (czyli punkt) jest wielkością stałą. Jeśli utworzysz obrazek o wymiarach 640×480 pikseli i będziesz go oglądał przy różnych rozdzielczościach ekra­no­wych, obrazek wciąż będzie miał wymiary 640×480 pikseli, ale na każdym z ekra­nów będzie miał inne wymiary w calach.

Określanie idealnej rozdzielczości

Aby określić idealną rozdzielczość skanowania:

299. Określ mierzoną w pikselach szerokość ekranowego obrazka.

300. Podziel tę liczbę przez szerokość drukowanego obrazka mierzoną w calach.

Wynik otrzymanych obliczeń jest rozdzielczością skanowania mierzoną w punk­­tach na cal.

Jeśli nie jesteś pewien rozmiarów końcowego obrazka, lepiej podaj wartość więk­­szą niż mniejszą. Późniejsze stworzenie mniejszego obrazka będzie mniej szkodliwe niż tworzenie zbyt dużego. Najlepiej rozpocząć od rozdzielczości skanowania wynoszącej 100 dpi, gdyż wówczas łatwo jest przeliczać cale na piksele. Druko­wa­ny obrazek o wymiarach 3×5 cali będzie miał po skanowaniu wy­miary 300×500 pikseli. Jeśli obrazek o wymiarach 300×500 pikseli oka­że się zbyt duży lub zbyt mały, możesz zacząć dostosowywać roz­dziel­czość skanowania.

Przekroczenie rozdzielczości drukowanego obrazu

Określając rozdzielczość skanowania, zapamiętaj rozdzielczość drukowanego obrazka, któ­ry chcesz skanować. Zwiększanie rozdzielczości skanowania powyżej rozdzielczości dru­kowanego obrazka lub maksymalnej rozdzielczości optycznej skanera powoduje, że nie będą już przechwytywane szczegóły grafiki. Na przykład:

• Jeśli obrazek został wydrukowany w rozdzielczości 200 dpi, zwiększenie roz­dziel­czości skanowania do 300 dpi nie doda do niego większej ilości szcze­gó­łów. Zaskanuj obrazek w rozdzielczości 200 dpi i, jeśli będzie to konieczne, prze­skaluj do większych rozmiarów w Fireworks.

• Jeśli maksymalna rozdzielczość optyczna skanera wynosi 300 dpi, nie będziesz mógł przechwycić więcej niż 300 punktów z każdego cala skanowanego obraz­ka. Wiele skanerów pozwala wybrać większą rozdzielczość skanowania niż są w sta­nie rzeczywiście osiągnąć, ale działają one na zasadzie interpolacji, czyli „od­gadywania” brakujących informacji. Interpolacja działa na takich samych za­sadach, jakbyś zeskanował obrazek w maksymalnej rozdzielczości optycznej i przeskalował go w Fireworks.

Wybór głębi kolorów XE "skanowanie:wybór głębi bitowej"

Wybór głębi kolorów zależy od typu skanowanego dokumentu. Przeważnie skanery po­sia­dają trzy główne ustawienia kolorów: skanowanie czarno-białe (ang. line art.), skala sza­rości i kolor. Niekiedy możesz mieć również możliwość określenia głębi bitowej dla skanowania szarego i kolorowego. Skanowanie z wyższą głębią bitową pozwala uzyskać więk­szą liczbę kolorów i ich dokładniejsze odwzorowanie, ale tworzone są wówczas pli­ki o większych rozmiarach.

Tryb czarno-biały

W trybie czarno-białym (line art.) skanowane są czarno-białe obrazki, nie posiadające żad­nych odcieni szarości. Obrazki takie to m.in. komiksy, szkice lub wykresy. W tym try­bie wykorzystywana jest 1-bitową głębia kolorów. Innymi słowy - każdy piksel jest włą­czony lub wyłączony, czyli czarny lub biały.

Skala szarości

Obrazki w skali szarości (grayscale) zawierają różne odcienie szarości. Posiada ona 8-bi­tów, co oznacza, że obrazek może mieć do 256 odcieni szarości. Jest to najlepsze usta­wienie przy skanowaniu fotografii czarno-białych.

Kolor

Kolory są wykorzystywane przy skanowaniu dowolnych kolorowych obrazków. Prze­waż­nie wykorzystywana jest 24-bitowa głębia kolorów, choć niektóre skanery umo­żli­wia­ją ustawienie głębi 36-bitowej. 24-bitowa głębia oznacza, że każdy piksel obrazka może mieć jeden z 16,7 miliona kolorów. 36-bitowe skanery mogą rozpoznać 68,7 miliarda ko­lo­rów. Zeskanuj obrazek przy maksymalnym ustawieniu głębi bitowej i usuń zbędne ko­lory podczas eksportowania obrazka w formacie GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group lub PNG (Portable Network Graphics) do wy­ko­rzystania w Internecie.

	Więcej informacji o głębi kolorów znajdziesz w rozdziale 7.

Inne opcje skanowania

Jeśli chcesz się dowiedzieć, jakie opcje i funkcje posiada Twój skaner, przeczytaj dołą­czo­ną do niego dokumentację techniczną.

Oto lista niektórych, najczęściej występujących opcji:

• Preview window (Okno podglądu). Okno, w którym możesz obejrzeć podgląd ory­ginału przed rozpoczęciem skanowania. Przeważnie w oknie tym można stwo­rzyć ramkę ograniczającą obszar skanowania. Niektóre aplikacje do ska­no­wania automatycznie tworzą ramkę wokół obiektów na skanowanym obra­zie. Ramkę tą oczywiście można również modyfikować ręcznie.

• Brightness and Contrast (Jasność i kontrast). Używaj tych ustawień tylko w przy­padku, gdy oryginał jest wyjątkowo jasny lub ciemny, albo ma za słaby kontrast.

• Image enhancements (Poprawianie obrazka). Na przykład usuwanie kurzu, rys i mory.

• Orientation (Orientacja). Możesz mieć możliwość odbicia pionowego lub po­zio­mego skanowanego obrazka.

• Ustawienia różnych typów oryginalnych obrazków - przezroczy lub slajdów.

• Gamma correction (Korekcja gamma). Większość komputerów pracujących pod kontrolą systemu MacOS używa korekcji gamma 1,8, podczas gdy w sys­te­mach Windows używana jest korekcja gamma 2,2.

• Decreen (Odrastrowanie). Umożliwia lepsze skanowanie materiałów pocho­dzą­cych z gazet i czasopism, usuwając z nich regularne wzory, cha­rakterystyczne dla danego papieru.

Powyższe opcje zostały zilustrowane na rysunku 14.5.

Rysunek 14.5. Okno dialogowe z ustawieniami opcji skanowania. Każdy skaner lub aparat cyfrowy posiada własny, specyficzny dla niego interfejs. Zwróć uwagę na ramkę selekcji ograniczającą obszar skanowany do części podstawy skanowania

Scanning bed — Podstawa skanowania

Scan area — Obszar skanowania

Skanowanie bezpośrednio do Fireworks

Aby skanować bezpośrednio do Fireworks:

301. Umieść oryginalny dokument w skanerze.

302. Jeśli używasz źródła TWAIN i posiadasz wiele korzystających z niego urzą­dzeń, wybierz z menu polecenie FileScanTwain Source i wybierz odpo­wied­nie urządzenie.

303. Jeśli używasz TWAIN-a, wybierz z menu polecenie FileScanTWAIN Acquire. Jeżeli zaś korzystasz z modułu dodatkowego Photoshop Acquire (tylko w MacOS), wy­bierz z menu polecenie FileScan, a następnie nazwę tego modułu.

Zostanie otwarte okno dialogowe z opcjami skanera.

304. W oknie dialogowym skanera dostosuj ustawienia skanowania, takie jak roz­dziel­czość, głębia kolorów itd. Więcej informacji o wyświetlanych w oknie dialo­go­wym opcjach skanera możesz znaleźć w jego dokumentacji technicznej. Kliknij przycisk OK.

Urządzenie rozpocznie skanowanie i przesyłanie danych do Fireworks. Po zakończeniu ska­nowania, obrazek pojawi się jako nowy dokument.

Aparaty cyfrowe XE "aparaty cyfrowe"

Coraz częściej obrazki występują w postaci cyfrowej. Korzyści wynikające z tworzenia obraz­ków dla Internetu za pomocą aparatów cyfrowych są oczywiste: brak kosztów zwią­zanych z zakupem filmu lub wydrukami, prawie natychmiastowy dostęp do foto­gra­fii i brak spadku jakości, który się zdarza przy skanowaniu uprzednio wydru­ko­wa­nych obrazków. Nieważne, czy jesteś doskonałym fotografikiem, czy nie masz o tym po­jęcia, graficy komputerowi coraz częściej stają za obiektywem aparatu nawet po to, aby zrobić szybko kilka zdjęć potrzebnych do firmowego intranetu.

Czynniki, które trzeba wziąć pod uwagę przy skanowaniu, mają swoje znaczenie również w przy­padku wykonywania zdjęć aparatami cyfrowymi. Do komunikacji z aparatem wykorzystywany jest tak­że TWAIN lub moduł dodatkowy Photoshop Acquire i wyświetlane jest ok­no dialogowe z wieloma opcjami pomagającymi przenosić obrazki z aparatu do Fire­works.

Różnica pomiędzy aparatami cyfrowymi i skanerami polega na tym, że w przypadku apa­ratu nie trzeba się martwić o rozdzielczość druku. Jest ona określana (jak w przy­pad­ku obrazków ekranowych) w pikselach. Przeważnie wykorzystuje się maksymalną roz­dziel­czość aparatów cyfrowych, aby utworzyć obrazek jak najlepszej jakości, który bę­dzie można następnie edytować w Fireworks. Duże obrazki można pomniejszać bez utra­ty ich jakości, natomiast zmiana rozmiarów w drugą stronę może już powodować obniżenie ja­koś­ci. Przeważnie obrazki internetowe mają małe rozmiary i oferowana przez więk­szość apa­ratów rozdzielczość 640×480 pikseli lub wyższa jest zupełnie wystar­czająca.

Przechwytywanie obrazków bezpośrednio do Fireworks

Aby przechwycić obrazek z aparatu cyfrowego bezpośrednio do Fireworks:

305. Zrób zdjęcie.

	Jeśli Twój aparat daje taką możliwość, utwórz zdjęcie w bezstratnym for­macie zamiast w jednym ze stratnych formatów graficznych, takich jak JPEG. JPEG powinien być rozważany jedynie jako format koń­co­we­go pliku. Przy eksportowaniu takich obrazków z Fireworks mogą pow­sta­wać zauważalne zniekształcenia.

246. Podłącz aparat do komputera zgodnie z jego dokumentacją. Aparaty posia­da­ją­ce port USB mogą być podłączane podczas pracy do komputerów PC i Macintoshy i są natychmiast dostępne. Aby ustalić połączenie z aparatem korzystającym ze star­­szego interfejsu komunikacyjnego, będziesz musiał najpierw wyłączyć komputer.

247. Jeśli używasz źródła TWAIN i posiadasz wiele korzystających z niego urzą­dzeń, wybierz z menu polecenie FileScanTwain Source i wybierz odpo­wied­nie urządzenie.

248. Jeśli używasz TWAIN-a, wybierz z menu polecenie FileScanTWAIN Acquire. Jeżeli zaś korzystasz z modułu dodatkowego Photoshop Acquire (tylko na MacOS), wy­bierz z menu polecenie FileScan, a następnie nazwę tego modułu.

Aparat rozpocznie przesyłanie miniaturowych wersji obrazków do swojego opro­gramowania (rysunek 14.6).

Rysunek 14.6. Aparaty cyfrowe najczęściej przesyłają najpierw miniaturowe wersje znajdujących się w nich obrazów

Po załadowaniu do oprogramowania miniatur wszystkich zdjęć, zostanie wyświetlone okno dialogowe, w którym będziesz mógł określić odpowiednie opcje i wybrać zdję­cia, które chcesz przesłać do Fireworks (rysunek 14.7).

Rysunek 14.7. W oknie dialogowym aparatu, możesz wybierać zdjęcia, które chcesz przesłać do Fireworks

249. W oknie dialogowym aparatu wybierz zdjęcia, które chcesz przesłać do Fire­works. Więcej informacji o wyświetlanych w tym oknie opcjach znajdziesz w do­kumentacji technicznej aparatu. Kliknij przycisk OK.

Cyfrowe kamery wideo XE "cyfrowe kamery wideo"

Wiele cyfrowych kamer wideo oferuje również możliwość wykonywania statycznych zdjęć, dzięki czemu są rozwiązaniem alternatywnym dla zwykłych aparatów cyfrowych. W try­bie statycznym jedna klatka przechwytywana jest przy największej rozdzielczości ka­me­ry. Powstały w ten sposób obrazek zapisywany jest przeważnie na siedmiu sekun­dach taśmy, co pozwala uzyskać lepszą jakość niż ta, jaką ma jednoklatkowe zdjęcie. Na korzyść stosowania kamer cyfrowych zamiast aparatów przemawia fakt, że kamera wi­deo potrafi przechować 500 zdjęć na godzinnej cyfrowej taśmie wideo przy jednym ła­dowaniu baterii, podczas gdy aparaty cyfrowe zapisują maksymalnie do 100 zdjęć i „po­żerają” mnóstwo baterii.

Cyfrowe kamery wideo pozwalają także na szybsze przesyłanie danych do komputera lub innych kamer za pomocą interfejsu IEEE 1394 XE "IEEE 1394" , często nazywanego FireWire XE "FireWire" lub i.Link. Są standardem w komputerach Macintosh, z wyjątkiem iBooków i bywają dołą­czane do wielu komputerów PC przez firmy Sony, Compaq i inne. Interfejsy FireWire mo­gą być także dołączane do komputerów posiadających wolne sloty kart. Podłączenie ka­mery po­lega na połączeniu jej z komputerem za pomocą odpowiedniego przewodu. Du­żo kamer wideo posiada 4-pinowe gniazda, zaś w większości komputerów znajdują się gniazda 6-pinowe. W takiej sytuacji nie jest potrzebny żaden kabel przejściowy, gdyż wystarczy niedrogi kabel z 4-pinową wtyczką z jednej strony i 6-pinową wtyczką z drugiej.

Mimo że nie możesz przesyłać zdjęć z kamery cyfrowej bezpośrednio do Fireworks, tak jak to robiłeś w przypadku aparatu i skanera, wiele kamer i interfejsów FireWire oferuje nie­zbęd­ne do tego oprogramowanie. Przeważnie dane z cyfrowej kamery są prezentowane na ekra­nie w czasie rzeczywistym. Taki podgląd umożliwia wybieranie zdjęć, które chcesz prze­słać z cyfrowej taśmy wideo do pliku graficznego znajdującego się w komputerze. W programie VideoShop (rysunek 14.8) w tym celu wystarczy w chwili wyświetlenia od­powiedniego obrazu kliknąć przycisk oznaczony małym aparatem fotograficznym.

Rysunek 14.8. Przeglądanie nieruchomych obrazów pochodzących z cyfrowej kamery wideo w programie VideoShop

Gdy zdjęcie zostanie zapisane jako plik graficzny na dysku twardym (przeważnie w for­ma­cie TIFF, PICT lub BMP), możesz go łatwo otworzyć w Fireworks. Zdjęcia są zaw­sze przechowywane w postaci cyfrowej, więc ich przenoszenie z taśmy na dysk nie po­wo­duje utraty jakości.

	Upewnij się, że przy przechwytywaniu nieruchomych obrazów z cyfrowej ka­mery korzystasz z właściwego trybu. Pojedyncze klatki pochodzące z zapisu wideo reprezentują tylko jedno półpole obrazu i z tego powodu otrzy­­mane z nich „zrzuty” będą niskiej jakości.

Wstawianie obiektów z innych aplikacji

Do tej pory opisywałem sposoby importowania dokumentów za pomocą urzą­dzeń zewnętrznych, ale zapewne zastanawiasz się, co zrobić, jeśli elementy, które chciałbyś dołą­czyć do swojego dokumentu widać na ekranie komputera, ale znajdują się w innej aplikacji? Fire­works oferuje dwie metody wstawiania do swoich dokumentów elementów z innych apli­kacji: kopiowanie i wklejanie oraz metodę „przeciągnij i upuść”.

Kopiowanie i wklejanie

Najprostszą i najczęściej wykorzystywaną metodą przenoszenia informacji pomiędzy róż­nymi aplikacjami jest wykorzystanie schowka systemowego oraz poleceń Cut XE "Cut" (Wy­tnij), Copy XE "Copy" (Kopiuj) i Paste XE "Paste" (Wklej).

Do Fireworks możesz wklejać następujące formaty danych:

• Obrazki bitmapowe

• Grafikę wektorową z programów Macromedia FreeHand i Adobe Illustrator (tyl­ko w Windows)

	Podczas wklejania grafiki wektorowej w MacOS, Fireworks prze­kształ­ca ją na obrazek bitmapowy. Aby przenieść grafikę wektorową, bę­dziesz mu­siał w takim przypadku użyć techniki „przeciągnij i upuść”.

• Tekst w formacie ASCII

Aby skopiować element z innej aplikacji i wkleić go do Fireworks:

306. Zaznacz w aplikacji źródłowej obiekt lub piksele, które chcesz skopiować.

307. Wybierz z menu polecenie EditCopy lub użyj skrótu klawiaturowego Ctrl+C (Command+C).

Zaznaczenie zostanie skopiowane do schowka.

308. W Fireworks wybierz z menu polecenie EditPaste lub użyj skrótu kla­wia­tu­ro­wego Ctrl+V (Command+V).

250. Jeśli wklejane zaznaczenie będzie miało inną rozdzielczość druku niż dokument Fire­works, program wyświetli okno dialogowe (rysunek 14.9) z pytaniem, czy chcesz, aby Fireworks przeprowadził ponowne próbkowanie obrazka, aby do­sto­sować go do docelowego dokumentu. Kliknij przycisk Resample, by za­cho­wać oryginalne wymiary obrazka, w razie potrzeby dodając lub odejmując z nie­go piksele. Kliknij przycisk Don't Resample, gdy chcesz utrzymać ory­gi­nal­ną liczbę pikseli, co może zwiększyć lub zmniejszyć rozmiar obrazka w sto­sunku do wymiarów, jakich się spodziewałeś.

Rysunek 14.9. Jeśli zaznaczenie ma inną rozdzielczość w druku niż dokument docelowy, Fireworks automatycznie zaproponuje ponowne próbkowanie obrazka

Zaznaczenie zostanie umieszczone w aktywnym dokumencie i wyśrodkowane względem ob­szaru roboczego.

	Jeśli chciałbyś zaznaczeniem wypełnić nowy, pusty obszar roboczy, naj­pierw skopiuj elementy ze źródłowej aplikacji, a następnie utwórz no­wy dokument Fireworks. W oknie dialogowym tworzenia nowego do­ku­mentu Fireworks przyjmie wymiary, jakie ma zawartość schowka.

Przeciągnij i upuść

Do Fireworks możesz przeciągać obiekty pochodzące z dowolnych aplikacji ob­słu­gu­ją­cych technikę „przeciągnij i upuść XE "przeciągnij i upuść" ” OLE w Windows lub technikę „przeciągnij i upuść” w MacOS. Przeciągane obiekty są traktowane jako bitmapy, chyba że po­cho­dzą z programów wektorowych, takich jak Macromedia FreeHand lub Adobe Illu­stra­tor. Oto lista niektórych aplikacji obsługujących technikę „przeciągnij i upuść”:

• Macromedia Flash

• Adobe Photoshop

• Microsoft Word.

Jeśli nie jesteś pewien, czy określona aplikacja obsługuje technikę „przeciągnij i upuść”, będziesz musiał to sprawdzić. Przy przeciąganiu elementu w Windows, po umie­szczeniu go nad docelową aplikacją zostanie wyświetlony (lub nie) kursor wska­zu­ją­cy, że możesz upuścić ten element. W MacOS, gdy będziesz mógł upuścić przeciągany ele­ment, pojawi się odpowiedni dźwięk. Być może przez docelową aplikację w MacOS zostaną wy­generowane także jakieś wskazówki wizualne.

Aby przeciągnąć do Fireworks obiekt pochodzący z innej aplikacji:

309. Upewnij się, czy w Fireworks otwarty jest dokument, w którym chcesz umiesz­czać przeciągane elementy.

310. Umieść okna źródłowej aplikacji i Fireworks obok siebie tak, abyś mógł wy­god­nie przeciągać pomiędzy nimi elementy (rysunek 14.10).

Rysunek 14.10. Obiekt wektorowy FreeHand został przeciągnięty jako obiekt wektorowy do Fireworks i tam zastosowano do niego Live Effect Inner Bevel (Wewnętrzna faza) oraz wypełnienie teksturą Fiber (Włókna)

251. W źródłowej aplikacji zaznacz obiekt (obiekty), który chcesz przeciągnąć do Fireworks.

252. Kliknij zaznaczony obiekt (obiekty) i przytrzymaj przycisk myszy, aby go „podnieść”.

253. Trzymając wciśnięty przycisk myszy, umieść kursor nad docelowym doku­men­tem Fireworks.

254. Zwolnij przycisk myszy, aby upuścić obiekt (obiekty) w Fireworks.

Obiekty zostaną wyśrodkowane względem obszaru roboczego i staną się częścią doku­mentu Fireworks.

	Za pomocą techniki „przeciągnij i upuść” możesz także kopiować obie­k­ty pomiędzy dwoma otwartymi dokumentami Fireworks.

Importowanie plików zewnętrznych XE "importowanie zewnętrznych plików"

Przeciąganie obiektów pomiędzy różnymi aplikacjami to wygodna funkcja, ale niekiedy za­chodzi potrzeba importowania do Fireworks całych plików. Importowanie jest tak prostym pro­ce­sem jak otwieranie plików PNG. Różnice występują w zależności od tego, czy importowana jest grafika bitma­po­wa czy też wektorowa.

Import plików do Fireworks można realizować za pomocą polecenia File⇒Import a także poprzez przeciąganie plików z Eksploratora w Win­dows lub Findera w MacOS i upuszczanie ich w oknie dokumentu Fire­works.

Pliki grafiki bitmapowej XE "importowanie zewnętrznych plików:pliki bitmapowe"

Importowane pliki grafiki bitmapowej zostają umieszczane w Fireworks jako obiekty bit­mapowe. W tabeli 14.2 znajdziesz zestawienie plików bitmapowych obsługiwanych przez Fireworks.

	Możliwość importowania (i eksportowania) formatu WBMP (Mapa bitowa typu wireless) pozwala na pracę z formatem obrazków dla urządzeń bezprzewodowych (WAP), np. telefonów bezprzewodowych.

Importowanie obrazków bitmapowych do istniejących dokumentów

Aby zaimportować obrazek bitmapowy do istniejącego dokumentu Fireworks:

311. Wybierz z menu polecenie FileImport lub użyj skrótu klawiaturowego Ctrl+R (Com­mand+R). Możesz także wybrać polecenie InsertImage.

Fireworks wyświetli okno dialogowe Import File (rysunek 14.11).

Rysunek 14.11. Gdy odszukasz i zaznaczysz plik do importu, w oknie dialogowym Import File wyświetlany jest jego podgląd

255. W oknie dialogowym Import File zaznacz wybrany plik i kliknij przycisk Import.

256. Umieść kursor nad dokumentem, do którego chcesz zaimportować plik.

Kursor zostanie zamieniony na kursor importu, wyglądający jak kątownik.

Tabela 14.2.

Pliki bitmapowe, które mogą być importowane do Fireworks

Format	Rozszerzenie pliku	Kod typu pliku w MacOS	Uwagi
Format Fireworks	.png	PNGf	Plik PNG zawiera informacje, które mogą być odczytywane tylko przez Fireworks, na przykład dane o wektorach. Jest to format domyślny dla Fireworks 3 i 4
Fireworks 2.0	.png	PNGf	Po otwarciu jest konwertowany na nowszą wersję i nie może być ponownie zapisany w formacie Fireworks 2
Fireworks 1.0	.png	PNGf	Po otwarciu jest konwertowany na nowszą wersję i nie może być ponownie zapisany w formacie Fireworks 1. Tło dokumentu jest umieszczane na własnej warstwie
Portable Network Graphic	.png	PNGf	Standardowy dokument PNG nie zawierający dodatkowych informacji dla Fireworks
Dokument Photoshopa	.psd	8BPS	Jedynie w wersji 3.0 lub nowszych. Zachowane zostają warstwy, edytowalny tekst i efekty warstw, oprócz warstw edytowalnego tekstu z Photoshopa 6
GIF	.gif	GIFf	Graphics Interchange File Format. Może być statyczny lub animowany. Każda klatka animowanego GIF-a jest umieszczana w oddzielnej klatce dokumentu Fireworks
JPEG	.jpg, .jpeg, .jpe, .jfif	JPEG	Unikaj importowania obrazków w formacie JPEG ze względu na ich stratną kompresję i niską jakość
Targa	.tga	TPIC	Format graficzny popularny w systemach UNIX-owych
WBMP	.wbm	WBMP	Format mapy bitowej typu wireless. Używany w urządzeniach bezprzewodowych
TIFF	.tif lub .tiff	TIFF	Tag Image File Format. Wysoka jakość i bezstratna kompresja, podobnie jak w formacie PNG
Bitmapa Microsoft	.bmp	BMP	Standardowy format graficzny w systemach operacyjnych Windows 3.0 i późniejszych
PICT (tylko w MacOS)	.pict, .pic, .pct, .p	PICT	Standardowy format graficzny w systemach Ma OS 1-9. łączy grafikę bitmapową z wektorową. Fireworks traktuje wszystkie wektory jako bitmapy

257. Umieść kursor w miejscu, w którym powinien się znajdować lewy górny wierz­chołek importowanej grafiki i wykonaj jedną z poniższych czynności:

• Kliknij raz, jeśli chcesz umieścić obrazek w jego oryginalnych rozmiarach.

• Jeśli chcesz dopasować obrazek do określonego obszaru dokumentu, kliknij i przeciągnij, aby narysować ramkę definiującą ten obszar. Fireworks do­sto­suje obrazek do zdefiniowanego obszaru, zachowując przy tym jego pro­por­cje.

Obrazek zostanie umieszczony w dokumencie jako nowy obiekt bitmapowy.

Importowanie plików XE "importowanie zewnętrznych plików:pliki Photoshopa" Photoshopa

Większość plików bitmapowych obsługiwanych przez Fireworks można importować za­miennie - zaimportowanie zarówno pliku PNG, jak i pliku TIFF, spowoduje umie­szcze­nie w Fireworks pojedynczego obiektu bitmapowego. Trochę inaczej działają do­ku­menty Photoshopa, gdyż zawierają one informacje o warstwach i dlatego też mogą po­siadać wiele obiektów bitmapowych. Pliki Photoshopa zawierają również inne, wyjątkowe atrybuty, takie jak edytowalny tekst lub efekty warstw, które mają swoje odpowiedniki w Fireworks.

Podczas importowania, warstwy Photoshopa są obecnie zamieniane na obiekty Fireworks, a nie na warstwy Fireworks. Chociaż nazwy są różne, jednak warstwy Photoshopa i obiekty Fireworks pełnią w swych aplikacjach podobne funkcje. Po zaimportowaniu wielu plików Photoshopa do dokumentu Fireworks, każdy dokument zostanie umieszczony we własnej warstwie Fireworks, zachowując indywidualne elementy każdego dokumentu jako obiekty Fireworks.

Efekty warstw są podobne do Live Effects Fireworks - tworzą edytowalne fazowania, zew­­nętrzne cienie i blaski. Podczas importowania plików Photoshopa do Fireworks, wszys­tkie efekty warstw zostają przekonwertowane na odpowiadające im Live Effects. Utrzy­mana jest możliwość ich edycji (rysunek 14.12). Warto zauważyć, że cztery warstwy, znajdujące się w dokumencie Photoshopa, zostały zamienione na cztery oddzielne obiekty Fireworks, w jednej jego warstwie.

Rysunek 14.12. W importowanych dokumentach Photoshopa utrzymane zostają ich warstwy, efekty warstw (konwertowane na Live Effects) oraz edytowalny tekst
		Fireworks 4 pozwala obecnie na eksportowanie do formatu plików Photoshopa, dzięki czemu istnieje możliwość wymiany w obie strony. Więcej informacji znajdziesz w rozdziale 15.

Chociaż konwersja dokumentu Photoshopa na dokument Fireworks może być bardzo dokładna, w palecie Import preferencji Fireworks można dopasować ten proces do charakteru naszej pracy. Aby zmodyfikować sposób, w jaki Fireworks importuje dokument Photoshopa:

312. Wybierz z menu polecenie EditPreferences lub użyj skrótu klawiaturowego Ctrl+U (Command+U).

Fireworks wyświetli okno dialogowe Preferences.

258. W oknie dialogowym Preferences wybierz zakładkę Import (w Windows) lub opcję importu (w MacOS).

Zostanie otwarte okno opcji preferencji importu (rysunek 14.13).

Rysunek 14.13. Opcje preferencji importu umożliwiają określenie, jak Fireworks importuje plik Photoshopa

259. W sekcji Layers (Warstwy): Wybierz opcję Convert to Fireworks Objects, aby wszystkie war­stwy Photoshopa zostały zamienione na obiekty Fireworks. Zaznacz opcję Share Layer Between Frames, aby warstwy Fireworks, zawierające nowe obiekty, były współużytkowana przez wszys­tkie klatki dokumentu. Wybierz opcję Convert to Frames, aby wszystkie war­stwy Photoshopa zostały rozłożone na klatki Fireworks.

260. W sekcji Text (Tekst): Wybierz opcję Editable, aby edytowalny tekst Pho­to­shopa został przekształcony na obiekty tekstowe Fireworks, a opcję Maintain Appearance, by edytowalny tekst został przekształcony na obiekty bitmapowe Fire­works. Opcji tej używaj tylko wtedy, gdy nie będziesz chciał edytować teks­tu. Jego wygląd będzie wówczas jak najbardziej zbliżony do wyglądu teks­tu znajdującego się w dokumencie Photoshopa. Przydaje się to również, gdy nie masz zainstalowanych wszystkich potrzebnych czcionek.

	Photoshop 6 używa nowego rodzaju formatu tekstu, zatem tekst w dokumencie Photoshopa 6 nie będzie mógł być edytowany po otwarciu go w Fireworks (a nawet w Photoshop 5). Jeśli tekst w dokumencie Photoshopa nie znajduje się warstwie teks­to­wej, czyli nie jest edytowalny nawet w Photoshopie - nie będzie moż­na go edytować w Fireworks.

261. Zaznacz opcję Use Flat Composite Image, aby zignorować wszystkie specjalne atry­buty dokumentu Photoshopa i zaimportować go jako pojedynczy obiekt bit­mapowy, jakby był zapisany na przykład w formacie TIFF. Opcja ta poz­wa­la uzyskać maksymalne podobieństwo do oryginalnego dokumentu Photoshopa i jest dobrym wyborem, jeśli wykorzystujesz Fireworks jedynie do opty­ma­li­za­cji i eksportu dokumentów Photoshopa.

262. Kliknij OK.

Aby zaimportować dokument Photoshopa do dokumentu Fireworks:

1. Wybierz z menu polecenie FileImport lub użyj skrótu klawiaturowego Ctrl+R (Command+R).

Fireworks wyświetli okno dialogowe Import File

2. Wyszukaj i zaznacz plik Photoshopa, który chcesz importować. Kliknij Open.

3. Umieść kursor nad dokumentem, do którego chcesz zaimportować plik.

Kursor zostanie zamieniony na kursor importu, wyglądający jak kątownik.

1. Umieść kursor w miejscu, w którym powinien się znajdować lewy górny wierz­chołek importowanej grafiki i wykonaj jedną z poniższych czynności:

• Kliknij raz, jeśli chcesz umieścić obrazek w jego oryginalnych rozmiarach.

• Jeśli chcesz dopasować obrazek do określonego obszaru dokumentu, kliknij i przeciągnij, aby narysować ramkę definiującą ten obszar. Fireworks do­sto­suje obrazek do zdefiniowanego obszaru, zachowując przy tym jego pro­porcje.

Dokument Photoshopa zostanie umieszczony w dokumencie Fireworks.

Fireworks może importować dokumenty Photoshopa 3, 4, 5 i 6. We wcześ­niejszych wersjach Photoshop był aplikacją przeznaczoną je­dy­nie dla MacOS i miał także inny format plików. Kodem typu doku­men­tu Photoshopa 2.5 i jego wcześniejszych wersji był 8BIM - a nie nowszy 8BPS - i zazwyczaj dokumenty te nie posiadały rozszerzenia pliku. Za­nim przystąpisz do zaimportowania takiego dokumentu do Fireworks, otwórz go w Photoshopie 3 lub późniejszym i zapisz go w nowszym for­macie.

Mimo że Fireworks nie potrafi bezpośrednio importować plików zapisywanych w for­ma­tach źródłowych aplikacji innych niż Photoshop, wiele programów służących do edy­cji grafiki bitmapowej, na przykład Painter, umożliwia eksportowanie swoich doku­men­tów w formacie Photoshopa. Następnie pliki takie można importować do Fireworks z utrzymaniem ich warstw.

	Popularną alternatywą dla Photoshopa jest Corel Photo-Paint, który po­trafi zapisywać swoje pliki jako dokumenty Photoshopa i za­cho­wy­wać informacje o ich warstwach. Niestety Fireworks importuje doku­men­ty Photoshopa tworzone w Photo-Paint jako spłaszczone obrazki bitmapowe.

Pliki grafiki wektorowej XE "importowanie zewnętrznych plików:pliki wektorowe"

Jeśli preferujesz rysowanie w tradycyjnych programach wektorowych, Fireworks jest do­skonałą aplikacją do ukończenia takiej grafiki i przygotowania jej do wykorzystania w Internecie. Obiekty wektorowe po zaimportowaniu nadal pozostają obiektami wek­to­ro­wymi, tak jakbyś je utworzył w samym Fireworks.

W tabeli 14.3 znajdziesz zestawienie typów plików wektorowych, które można im­por­to­wać do Fireworks. Są to formaty plików najpopularniejszych programów wekto­ro­wych. Jednym z formatów grafiki wektorowej, którego brak obsługi w Fireworks daje się we znaki jest otwarty standard wektorowy firmy Macromedia - Shockwave Flash (.swf). Aby przenieść obiekty z Flasha do Fireworks, trzeba je wyeksportować z Flasha ja­ko dokument Adobe Illustratora, a następnie zaimportować do Fireworks. Inny dość częs­to spotykany format, którego nie można importować do Fireworks to Windows Meta­ File (.wmf), który jest często wykorzystywanym formatem w grafikach używanych jako kliparty dla użytkowników Windows. Gdy chcesz otworzyć takie pliki w Fire­works, najpierw musisz to zrobić w innej aplikacji, a następnie wyeksportować w je­d­nym z formatów wymienionych w tabeli 14.3.

Tabela 14.3.

Typy plików wektorowych, które można importować do Fireworks

Format	Rozszerzenie pliku	Kod typu pliku w MacOS	Uwagi
Dokument FreeHand	.fh7 lub .fh8	AGD3	Format grafiki wektorowej tworzonej w programie FreeHand 7 lub 8
Dokument Illustratora 7	.ai	uMsk	Standardowy format plików Adobe Illustratora 7
Dokument CorelDRAW 8	.cdr	CDR8	Aby plik wektorowy programu CorelDRAW mógł zostać otworzony w Fireworks, musi zostać zapisany bez wbudowanych bitmap i kompresji obiektów
Encapsulated PostScript	.eps	EPSF	Format, który może być eksportowany przez większość aplikacji. Firework otwiera i importuje pliki EPS tylko jako obiekty bitmapowe i nie zachowuje informacji wektorowych

Importowanie plików wektorowych

Aby zaimportować plik wektorowy z programu Macromedia FreeHand, Adobe Illu­stra­tor lub CorelDRAW do istniejącego dokumentu Fireworks:

313. Wybierz z menu polecenie FileImport lub użyj skrótu klawiaturowego Ctrl+R (Command+R).

Fireworks wyświetli standardowe okno dialogowe importu.

263. W oknie dialogowym Import zaznacz dokument, który chcesz zaimportować i klik­nij przycisk Open.

Zostanie otwarte okno dialogowe Vector File Options (Opcje pliku wekto­ro­we­go) (rysunek 14.14) zawierające sugerowane ustawienia importowanego do­ku­mentu.

264. W oknie dialogowym Vector File Options zmień, jeśli chcesz, wymiary i roz­dziel­czość grafiki wektorowej. Wymiary grafiki możesz modyfikować za po­mo­cą pól tekstowych Scale (Skala), Width (Szerokość) i Height (Wysokość). W po­lu tekstowym Resolution możesz wpisać nową rozdzielczość grafiki.

265. Określ, czy program ma stosować anti-aliasing dla ścieżek i (lub) tekstu i jaki ma być rodzaj tego wygładzenia, korzystając z pól wyboru Anti-Alias i z listy opcji Anti-Alias Type.

266. W części File Conversion (Konwersja pliku) za pomocą rozwijanej listy Page Import określ, jak mają być importowane strony dokumentu. Wybierając z listy po­zycję Open a Page i wpisując numer strony w polu tekstowym Page, możesz okre­ślić, która strona dokumentu ma zostać zaimportowana do Fireworks. Po wy­braniu pozycji Open Pages as Frames poszczególne strony dokumentu bę­dą rozkładane na klatki Fireworks.

Rysunek 14.14. W oknie dialogowym Vector File Options możesz określić opcje importu grafiki wektorowej

267. W części File Conversion za pomocą rozwijanej listy Layers Import określ, jak ma­ją być importowane warstwy dokumentu. Wybierz opcję Ignore Layers, aby wszys­tkie warstwy grafiki spłaszczyć w dokumencie Fireworks do jednej war­stwy. Po wybraniu opcji Remember Layers zostaną one zachowane w doku­men­cie Fire­works. Wybierz opcję Open Layers as Frames, aby poszczególne war­stwy impor­towanej grafiki zostały rozłożone na klatki dokumentu Fire­works.

268. Zaznacz pola wyboru Include Invisible Layers i Include Background Layers, aby za­importować do Fireworks odpowiednio warstwy niewidzialne i warstwę tła.

269. W sekcji Render as Image znajdziesz opcje dotyczące importu złożonych obiek­tów wektorowych. Usuń zaznaczenia wszystkich opcji, aby w każdych wa­­runkach zostały zachowane wszystkie informacje o wektorach.

270. Umieść kursor nad dokumentem, do którego chcesz zaimportować plik.

Kursor zostanie zamieniony na kursor importu, wyglądający jak kątownik.

271. Umieść kursor w miejscu, w którym powinien się znajdować lewy górny wie­rz­chołek importowanej grafiki i wykonaj jedną z poniższych czynności:

• Kliknij raz, jeśli chcesz umieścić obrazek w jego oryginalnych rozmiarach.

• Jeśli chcesz dopasować obrazek do określonego obszaru dokumentu, kliknij i przeciągnij, aby narysować ramkę definiującą ten obszar. Fireworks do­sto­suje obrazek do zdefiniowanego obszaru, zachowując przy tym jego pro­porcje.

Wszystkie informacje o wektorach zostaną umieszczone w dokumencie Fireworks jako no­wy obiekt wektorowy.

Importowanie plików EPS

Większość aplikacji służących do przygotowywania publikacji jest w stanie eksportować do plików EPS (Encapsulated PostScript). Plik EPS zawiera informacje o wektorach, jednak otwarcie go w Fireworks powoduje spłaszczenie całego pliku do jednego obiektu bitmapowego.

	Importowanie plików EPS jest nowością w Fireworks 4, która ułatwia przygotowanie dokumentów do publikacji w sieci WWW.

Aby zaimportować plik EPS do istniejącego dokumentu Fireworks:

1. Wybierz z menu polecenie FileImport lub użyj skrótu klawiaturowego Ctrl+R (Command+R).

Fireworks wyświetli okno dialogowe Import File

2. W oknie dialogowym importu zaznacz plik EPS, który chcesz importować. Kliknij Open.

Program otworzy okno dialogowe EPS File Options (rysunek 14.15).

Rysunek 14.15. W oknie dialogowym EPS File Options możesz określić, w jaki sposób będzie importowany dokument EPS

3. W oknie dialogowym EPS File Options zmień, jeśli chcesz, wymiary i roz­dziel­czość importowanego obrazka. Wymiary możesz modyfikować za po­mo­cą pól Width (Szerokość) i Height (Wysokość). W po­lu tekstowym Resolution możesz wpisać nową rozdzielczość. Aby zachować proporcje wysokości do szerokości obrazka, zaznacz pole Constrain Proportions.

4. Określ, czy program ma stosować anti-aliasing, korzystając z pola wyboru Anti-Alias. Kliknij OK.

5. Umieść kursor nad dokumentem, do którego chcesz zaimportować plik.

Kursor zostanie zamieniony na kursor importu, wyglądający jak kątownik.

6. Umieść kursor w miejscu, w którym powinien się znajdować lewy górny wie­rz­chołek importowanej grafiki i wykonaj jedną z poniższych czynności:

• Kliknij raz, jeśli chcesz umieścić obrazek w jego oryginalnych rozmiarach.

• Jeśli chcesz dopasować obrazek do określonego obszaru dokumentu, kliknij i przeciągnij, aby narysować ramkę definiującą ten obszar. Fireworks do­sto­suje obrazek do zdefiniowanego obszaru, zachowując przy tym jego pro­porcje.

Wszystkie informacje z pliku EPS zostaną umieszczone w dokumencie jako no­wy obiekt bitmapowy.

	W przypadku importowania pliku EPS zawierającego tekst stworzony w programie Freehand 9.0.1 lub Quark 4.1.1, tekst wyświetlany w Fireworks 4 korzysta z czcionki Courier. Można temu zaradzić, importując plik EPS do Photoshopa, a następnie otwierając dokument Photoshopa w Fireworks. Nowsze wersje Fireworks być może rozwiążą ten problem.

Praca z klipartami

Prace komercyjne najczęściej muszą być wykonywane w pewnych, nieprzekraczalnych ter­minach, co często wyklucza tworzenie całych dokumentów od zera. A zresztą, po co two­rzyć coś, co już istnieje? Elementy takie jak ikony i przyciski mogą być bardzo szyb­ko tworzone w oparciu o istniejące kliparty, które można modyfikować w Fire­works i dostosowywać do określonego dokumentu.

Na dysku instalacyjnym Fireworks znajduje się bardzo obszerna kolekcja klipartów: prawie dwa tysiące różnych dokumentów Fireworks. Można je przeszukiwać za pomocą bazy danych Extensis Portfolio zapisanej w pliku Fireworks 4 Clipart.fdb. Dokumenty otwie­rane są w darmowej przeglądarce Extensis Portfolio (także znajdującej się na CD
-ROM-ie Fireworks), w której wyświetlane są miniaturowe podglądy wszystkich kli­par­tów (rysunek 14.16). Użyj jej do odszukania odpowiedniego dokumentu. Kliknij mi­nia­tu­rę dwukrotnie, aby ją zobaczyć w pełnym wymiarze. Kliknij ją prawym przyciskiem myszy (kliknij z wciśniętym klawiszem Command na Mac­OS) i z kon­tekstowego menu wybierz polecenie Edit Original, aby otworzyć dokument do edy­cji w Fireworks. Po otwarciu miniatury w Fireworks możesz przeciągać ją do innych do­kumentów.

Rysunek 14.16. Klikając prawym przyciskiem myszy (klikając z wciśniętym klawiszem Command na MacOS) miniaturę w przeglądarce Extensis Portfolio możesz szybko wyświetlić dokument w pełnych wymiarach lub otworzyć go do edycji w Fireworks. Pełnowymiarowy podgląd klipartu jest wyświetlany także po dwukrotnym kliknięciu jego miniatury
		Kliparty znajdziesz w katalogu Goodies/Clipart na CD-ROM-ie Fire­works, zaś przeglądarkę Extensis Portfolio w katalogu Portfolio Browser.

Kolekcje klipartów są często dołączane do innych programów wektorowych, takich jak Free­Hand i CorelDRAW. Corel słynie z obszernych kolekcji (10.000 i więcej) kli­par­tów dołączanych do jego produktów. Kliparty w formatach FreeHand, CorelDRAW i Illu­strator mogą być łatwo importowane do Fireworks.

Dostępnych jest również wiele innych kolekcji klipartów i to zarówno na płytach CD-
-ROM, jak i w Internecie. Przy wyborze kolekcji upewnij się, czy kliparty są zapisane w for­macie, który będzie można zaimportować do Fireworks oraz wybieraj kliparty wek­to­rowe, które będziesz mógł modyfikować w Fireworks.

Firma Extensis oferuje także pełną wersję programu Portfolio umo­żli­wia­jącego organizowanie plików w bazach danych. Możesz go znaleźć pod adresem www.extenis.com. Dla MacOS, dostępny jest program, który za jedną ósmą ceny Portfolio daje po­dob­ne do niego możliwości. Jest to iView Multimedia firmy Script Soft­ware, dostępny pod adresem www.scriptsoftware.com.

Pliki tekstowe XE "importowanie zewnętrznych plików:pliki tekstowe"

Fireworks potrafi pracować z wieloma różnymi formatami graficznymi, ale potrafi tak­że obsługiwać tekst i importować dwa typy plików tekstowych: Rich Text Format (RTF) i ASCII. Import każdego z tych typów odbywa się poprzez wybranie z menu po­le­cenia FileImport i odszukanie odpowiedniego pliku.

RTF to źródłowy format edytora Microsoft Word, dlatego też potrafi przenosić in­for­ma­cje o formatowaniu tekstu, takie jak typ czcionki, pogrubienie lub kursywę. Większość in­nych edytorów tekstu również potrafi zapisywać pliki w formacie RTF. Jeżeli chcesz utrzy­mać formatowanie tekstu, używaj formatu RTF.

Pliki ASCII zawierają prosty tekst bez żadnego formatowania, który może być odczy­ty­wa­ny z małymi lub bez żadnych przekształceń przez wszystkie aplikacje obsługujące tekst. Pliki tekstowe ASCII świetnie nadają się, jeśli chcesz przenieść blok tekstu, w którym nie musi zostać zachowane formatowanie, z in­nej aplikacji do Fireworks.

	Więcej informacji o importowaniu i wykorzystywaniu tekstu w Fire­works znajdziesz w rozdziale 10.

Najczęściej występujące problemy

Fakt, że Fireworks potrafi importować określone formaty dokumentów nie oznacza jesz­cze, że przekształcenie oryginalnego pliku na dokument Fireworks będzie zawsze da­wało idealne rezultaty. Konwersja danych pomiędzy aplikacjami wymaga od użyt­kow­nika wielu kompromisów.

Brakujące czcionki

W idealnej sytuacji dokument nie powinien być importowany bez swego bagażu czcionek (lub plików czcionek w Windows). Ale nie jest to reguła. Gdy otworzysz lub za­im­por­tujesz dokument zawierający czcionki niedostępne w Twoim systemie operacyjnym, Fireworks wyświetli okno dialogowe Missing Fonts (Brakujące czcionki) (rysunek 14.17).

Rysunek 14.17. Okno dialogowe Missing Fonts umożliwia zastąpienie brakujących czcionek nowymi, gdy wymaga tego otwierany dokument

Aby zastąpić brakującą czcionkę, wybierz jej nazwę w polu Change Missing Font i naz­wę nowej czcionki w polu To. Powtórz ten proces dla każdej czcionki znajdującej się w liś­cie okna dialogowego Missing Fonts. W każdej chwili za pomocą przycisku Restore mo­żesz przywrócić oryginalny stan okna Missing Fonts. Jeśli chcesz otworzyć do­ku­ment bez wykonywania żadnych zamian czcionek, wybierz przycisk No Change. Klik­nij przycisk OK.

Jeśli użyjesz przycisku No Change, będziesz mógł edytować, a nawet zapisywać do­ku­men­ty z nienaruszonymi informacjami o czcionkach. Umożliwi to późniejsze ich otwie­ra­nie w systemie, w którym znajdują się wszystkie potrzebne czcionki.

	Jeżeli w dokumencie wykorzystywane są czcionki Type 1 (PostScript) przed jego otwarciem powinieneś zainstalować lub uruchomić pro­gram Adobe Type Manager.

Odstępy w tekście

Możesz swobodnie założyć, że wiele właściwości dokumentów wektorowych związanych z drukiem będzie przekształcanych w sposób niezadowalający. Właściwości te to m.in.:

• Postscriptowe obrysy, wypełnienia i efekty.

• Odstępy pomiędzy znakami, interlinia i kerning.

Lepsze rezultaty można uzyskać poprzez przekształcenie tekstu na ścieżki przed zapi­sa­niem dokumentu i zaimportowaniem go do Fireworks, choć wtedy tekst nie będzie mógł być edytowany w Fireworks. Jeśli chcesz, aby pozostał on edytowalny, z pozycjo­no­wa­niem tekstu - a nawet z jego tworzeniem - poczekaj do czasu zaimportowania doku­men­tu do Fireworks.

Wieloplatformowe pliki

Prawie wszystkie dokumenty, które można otwierać i importować do Fireworks są wie­lo­platformowe. Na pierwszy rzut oka może się wydawać, że sugeruję, iż możesz zig­no­ro­wać wszystkie różnice pomiędzy platformami, ale tak naprawdę chodzi o to, że w nie­któ­rych sytuacjach możesz pracować z plikami pochodzącymi z innych platform. Nie ma tutaj pro­blemów nie do pokonania, ale pamiętanie o kilku rzeczach pomoże Ci zaoszczędzić tro­chę czasu i dotrzymać terminów.

Importowanie plików z MacOS do Fireworks dla Windows

Pliki w MacOS nie muszą mieć rozszerzeń, ale mają je w Windows. Mimo że większość użyt­kow­ników MacOS zna ten problem i może dodać właściwe rozszerzenie przed „tran­spor­tem” pliku, czasami może się zdarzyć, że będziesz próbował zaimportować do Fire­works dla Windows plik nieposiadający rozszerzenia. Jeśli wiesz, jaki to jest typ pliku, możesz sam dodać do niego rozszerzenie. Gdy jednak go nie znasz, będziesz musiał zapytać o to użytkownika MacOS, od którego pochodzi plik, lub spróbować zgadnąć. Fireworks dla Windows nie zaimportuje pliku nieposiadającego właściwego rozszerzenia.

Zdarzyć się może również, że otrzymasz plik posiadający cztero- zamiast preferowane przez Windows trzyznakowe rozszerzenie. Przykładowo - jeśli otrzymasz plik z roz­sze­rze­niem .jpeg zamiast .jpg, Windows raz potraktuje je jako takie same rozszerzenia, a kie­dy indziej - nie. Fireworks dla Windows potrafi importować pliki JPEG z roz­sze­rze­niami .jpg, .jpeg lub .jpe, ale nie rozpoznaje rzadziej spotykanego rozszerzenia .jfif.

Fireworks dla Windows nie potrafi importować plików PICT (.pict, .pct, .pic lub .p), mi­mo że mogą być one importowane i eksportowane przez Fireworks dla MacOS.

Importowanie plików Windows do Fireworks dla MacOS

Przy przenoszeniu dokumentów z systemu Windows na MacOS, MacOS dodaje właś­ci­we kody typu pliku i Macintosh Creator, oparte na rozszerzeniach plików. Nawet jeśli okre­ślony typ pliku nie jest wymieniony w preferencjach File Exchange, po wybraniu pole­cenia FileImport Fireworks dla MacOS i tak go zaimportuje, jeśli będzie posiadał właś­ciwe rozszerzenie.

Możesz do plików ręcznie dodawać kody typów plików i kreatora, za pomocą pro­gra­mów narzędziowych, takich jak File Buddy, FinderPop lub Snitch. Dodanie do kreatora Fire­works kodu MKBY spowoduje, że plik będzie otwierany w Fireworks po jego dwukrotnym kliknięciu.

Zrzuty ekranowe XE "zrzuty ekranowe"

Przechwytywanie całego lub tylko części ekranu monitora do schowka lub pliku jest sze­roko stosowane przy tworzeniu ilustracji do książek komputerowych. Niekiedy zrzu­ty ekranowe przydają się również w procesie projektowania grafiki. Kopiowanie i wkle­ja­nie elementów pomiędzy dwoma różnymi aplikacjami może powodować utratę ich właś­ciwego formatowania, ale zrzut ekranowy wykonany w jednej z nich, może zostać łat­wo wklejony lub zaimportowany do innej. Jeśli zdarzy Ci się otrzymać plik, zapisany w dziwnym formacie (specjalność klientów), być może będziesz mógł go obejrzeć
w prze­glądarce, ale nie będziesz mógł go przekonwertować na format obsługiwany przez Fire­works. W takiej sytuacji musisz wykonać zrzut ekranowy i wkleić lub za­im­por­­to­wać obrazek do Fireworks.

Wykonanie zrzutu ekranowego okna przeglądarki i wysłanie go pocztą elektroniczną jest do­brym sposobem na przesłanie klientowi projektu strony, która nie została jeszcze umie­szczona w Internecie. Możesz również utworzyć w ten sposób portfolio, pre­zen­tu­ją­ce Twoje dokonania w projektowaniu dla Internetu. Zrzuty okna przeglądarki można tak­że, po odpowiednim przeskalowaniu, wykorzystywać jako ikony łącz do odpowiednich stron WWW.

Wbudowane narzędzia
do tworzenia zrzutów ekranowych

W systemach Windows i MacOS znajdują się wbudowane narzędzia do wykonywania zrzu­tów ekranowych. Narzędzia Windows są na tyle funkcjonalne, że pozwalają na wy­ko­nanie tego zadania, natomiast w narzędziach systemu MacOS znajduje się kilka funkcji, któ­re można uznać za „ponadobowiązkowe”.

Windows

Braki w funkcjonalności narzędzi Windows do wykonywania zrzutów nadrabiane są ich uży­tecznością. Cały proces skupiony jest wokół łatwego do zapamiętania klawisza o naz­wie PrintScreen, Prt Scrn lub podobnej. Wciśnięcie klawisza PrintScreen po­wo­du­je sko­piowanie do schowka obrazu całego ekranu monitora. Używając kombinacji kla­wi­­szy Alt+PrintScreen, skopiujesz do schowka jedynie obraz aktywnego okna lub okna dia­logowego. Następnie zawartość schowka możesz wkleić do Fireworks.

	Po wybraniu z menu polecenia FileNew, Fireworks zaproponuje Ci utwo­rzenie dokumentu o rozmiarach, jakie ma zawartość schowka. Aby program automatycznie przyjął właściwe rozmiary obszaru robo­cze­go, zrzut ekranowy wykonaj przed utworzeniem nowego doku­mentu.

MacOS

W MacOS możesz przechwycić obraz całego ekranu, pojedynczego okna aplikacji lub ok­na dialogowego albo wybranej części ekranu jako plik graficzny w formacie PICT lub do schowka.

Aby wykonać zrzut ekranowy w MacOS i zapisać go jako plik graficzny w głównym ka­talogu, znajdującym się na partycji startowej twardego dysku, wciśnij klawisze Shift+Command i wykonaj jedną z poniższych czynności:

• Wciśnij klawisz 3, aby przechwycić obraz całego ekranu.

• Wciśnij klawisz 4 i narysuj za pomocą myszy obszar zaznaczenia, aby przechwycić je­dy­nie zawartość utworzonego zaznaczenia.

• Włącz klawisz Caps Lock, wciśnij klawisz 4 i kliknij okno aplikacji lub okno dia­logowe, aby przechwycić jedynie obraz tego okna.

Aby zrzut ekranowy umieścić w schowku zamiast zapisywać go w pliku graficznym, wy­konaj powyższe instrukcje, ale do kombinacji Shift+Command dodaj jeszcze kla­wisz Control.

Jeżeli zrzut ekranowy przechwycisz do schowka, wklej jego zawartość do Fireworks. Jeśli przechwycisz go do pliku, wyświetl zawartość startowej partycji dysku i prze­ciąg­nij plik na ikonę aplikacji Fireworks. W Fireworks możesz wybrać polecenie FileOpen lub FileImport, odszukać plik zawierający zrzut i otworzyć go.

Wyspecjalizowane aplikacje

Istnieje wiele wyspecjalizowanych aplikacji posiadających mnóstwo dodatkowych funk­cji wykorzystywanych do tworzenia zrzutów ekranowych. Do funkcji tych należą m.in.: zmiana palety „w locie”, przechwytywanie pojedynczych menu lub okien dia­lo­gowych w Windows. Pozwalają one również na wybór formatu pliku, w ja­kim zosta­nie zapisany zrzut, umożliwiając niekiedy zapisanie go jako pliku filmowego. Jed­ną z takich aplikacji dla MacOS jest Snapz Pro firmy Ambrosia Software (rysunek 14.18). Program ten został użyty do wykonania wszystkich zrzutów ekranowych znaj­du­jących się w tej książce. Dla systemu Windows również dostępnych jest wiele apli­ka­cji umoż­liwiających wykonywanie zrzutów ekranowych. Większość z tych narzędzi to apli­kacje typu shareware lub freeware, które można znaleźć w wielu witrynach inter­netowych.

Rysunek 14.18. Snapz Pro na MacOS oferuje wiele różnych opcji tworzenia zrzutów ekranowych i możliwość zapisywania ich w różnych formatach plików, wliczając w to filmy QuickTime

Otwieranie animacji XE "otwieranie animacji"

Otwarcie animowanego GIF-a za pomocą polecenia FileOpen działa zgodnie z oczekiwaniami - wszystkie klatki animowanego GIF-a stają się dostępne jako klatki do­ku­mentu Fireworks. Po otwarciu animowanego GIF-a możesz go zmodyfikować, zop­ty­ma­lizować i wyeksportować dla Internetu.

	Więcej informacji o animacjach w Fireworks znajdziesz w rozdziale 23, zaś o eksportowaniu w rozdziale 15.

Jeśli jednak zaimportujesz animowanego GIF-a do istniejącej animacji, spotka Cię nie­spo­dzianka. Zaimportowana zostanie tylko pierwsza jego klatka. Jeżeli więc chcesz zaim­portować jedną animację do innej, jedynym rozwiązaniem tego problemu jest otwar­cie obu animacji w Fireworks i kopiowanie oraz wklejanie obiektów aż do chwili uzy­skania zadowalających Cię rezultatów.

Importowanie wielu plików jako nową animację XE "otwieranie animacji:Importowanie wielu plików jako nową animację"

Większość programów animacyjnych umożliwia eksportowanie swoich animacji jako serii pojedynczych dokumentów: jedna klatka tworzy jeden dokument. Jeżeli animacja zaj­muje dziesięć klatek, wyeksportowanych zostanie dziesięć dokumentów o po­dob­nych nazwach i numerach od 1 do 10. Wszystkie te pliki możesz otworzyć w Fireworks ja­ko animację, zaznaczając opcję Open as Ani­ma­tion w oknie dialogowym Open. Każdy plik stanie się osobną klatką w Fireworks i utworzona zostanie w ten sposób animacja.

Załóżmy, że utworzyłeś zachwycającą, pełnokolorową animację w swoim ulubionym pro­gramie 3D i chciałbyś ją zamienić na animowanego GIF-a, a później wykorzystać w In­ter­necie. Twój program 3D nie posiada jednak zbyt wielu funkcji internetowych i two­rzony w nim GIF zawsze używa ditheringu oraz posiada pełną 256-kolorową pa­letę. Dużo bardziej zoptymalizowanego GIF-a mógłbyś utworzyć w Fireworks. Po­wi­nie­neś więc wyeksportować animację jako serię wysokiej jakości bitmap w formacie PNG lub TIFF, a następnie zaimportować tę serię do Fireworks.

Zaimportowanie grupy plików jako nowej animacji spowoduje prze­kształ­cenie wszystkich tych plików na bitmapy. Stanie się tak nawet jeśli są to pliki PNG, które zawierają informacje o wektorach i zostały utwo­rzone w Fireworks. Problem ten można rozwiązać za pomocą pro­gra­mu Macromedia Flash. Przykład takiej procedury znajdziesz w pod­roz­dziale „Importowanie animacji utworzonych w programie Flash”.

Aby otworzyć grupę niezależnych dokumentów jako animację:

314. Wybierz z menu polecenie FileOpen lub użyj skrótu klawiaturowego Ctrl+O (Command+O).

Fireworks wyświetli okno dialogowe Open (rysunek 14.19).

272. Odszukaj folder, który zawiera serię animacji.

		Jeśli importowane pliki są ponumerowane (na przykład film01.png, film02.png itd.), Fireworks rozłoży je na klatki we właściwej ko­lej­ności. Jeżeli nie są ponumerowane, będą importowane w kolejności alfabetycznej.
Rysunek 14.19. Pliki zaimportowane po włączeniu opcji Open as Animation w oknie dialogowym Open staną się klatkami w dokumencie Fireworks

273. Zaznacz pliki, które chcesz otworzyć. Aby zaznaczyć wszystkie pliki w katalogu, naciśnij Ctrl+A (Command+A). Aby dodać lub usunąć pojedynczy plik, wciśnij klawisz Ctrl (Shift) i kliknij ten plik.

274. Sprawdź, czy zaznaczona jest opcja Open as Animation (Otwórz jako animację). Kliknij przycisk Open.

Zostanie utworzony nowy dokument Fireworks, a wszystkie wybrane pliki staną się po­szcze­gólnymi klatkami dokumentu.

	Sprawdź działanie swojej animacji poprzez włączenie odtwarzania za po­mocą kontrolek znajdujących się u dołu okna dokumentu. W palecie Frames mo­żesz ustalić czasy trwania poszczególnych klatek animacji.

Importowanie animacji utworzonych w programie Flash XE "otwieranie animacji:importowanie animacji utworzonych w programie Flash"

Program Macromedia Flash jest bardziej wyszukanym narzędziem animacyjnym niż Fire­works, ale jego funkcje eksportu animowanych GIF-ów wypadają bardzo słabo w po­równaniu z funkcjami, które są dostępne w Fireworks.

Jeśli chciałbyś użyć narzędzi Fireworks do edycji wektorowych elementów animacji Flash, musisz zaimportować animacje Flash jako wektory. W idealnej sytuacji mógłbyś wy­eksportować animację Flash jako sekwencję plików Adobe Illustratora i za­im­por­to­wać ją do Fireworks za pomocą polecenia File⇒Open z włączoną opcją Open as Ani­ma­tion. Jednak opcja Open as Animation zawsze przekształca wszystkie obiekty wek­to­ro­we na bitmapy. Sposobem na obejście tego problemu jest wyeksportowanie filmu Flash ja­ko wielowarstwowego dokumentu Adobe Illustratora, w którym każda warstwa jest od­dziel­ną klatką filmu i przekształcenie tych warstw na klatki podczas importu do Fire­works. W naszym przykładzie używamy programu Flash, ale podobne zasady obo­wią­zu­ją również dla innych aplikacji przeznaczonych do tworzenia wektorowych animacji.

	Jeśli utrzymanie informacji o wektorach nie jest dla Ciebie aż tak waż­ne, możesz wyeksportować film Flash jako sekwencję PNG i otworzyć ją w Fireworks z zaznaczoną opcją Open as Animation w oknie dialogowym Open.

Aby zaimportować do Fireworks animację Flash z utrzymaniem informacji o wek­torach:

315. Wyeksportuj animację Flash jako film Flash SWF.

316. Utwórz nowy dokument Flash i zaimportuj do niego film SWF.

Wszystkie warstwy filmu Flash zostaną spłaszczone i otrzymasz wiele jedno­war­stwowych klatek animacji.

275. Wyeksportuj film Flash jako sekwencję programu Adobe Illustrator (Adobe Illu­strator Sequence).

276. Utwórz nowy dokument Flash i zaimportuj do niego sekwencję Adobe Illu­stra­to­ra. Zaznacz wszystkie pliki sekwencji, klikając je po kolei z wciśniętym klawiszem Ctrl (Command). Kliknij przycisk OK.

Klatki filmu Flash zostaną przekształcone na warstwy. Klatka 1 będzie war­stwą Layer 1, klatka 2 zostanie zamieniona na Layer 2 itd.

277. Wyeksportuj film Flash jako plik Adobe Illustratora.

Powstanie w ten sposób plik, który będziesz mógł zaimportować do Fireworks. Flash potrafi eksportować siedem różnych typów plików wektorowych, zaś do Fire­works można importować trzy typy takich plików(oraz EPS jako obiekt bitmapowy), ale pliki Adobe Illu­stra­to­ra są ich jedynym wspólnym mianownikiem.

	Wybierz pliki typu Adobe Illustrator, a nie - Adobe Illustrator Se­quence.

278. W Fireworks wybierz z menu polecenie FileOpen lub użyj skrótu klawia­tu­ro­we­go Ctrl+O (Command+O).

Zostanie otwarte okno dialogowe Open.

279. Zaznacz utworzony przy wykonywaniu piątego polecenia plik Adobe Illu­stra­tora. Kliknij przycisk OK.

Fireworks wyświetli okno dialogowe Vector File Options (Opcje plików wek­to­rowych).

280. W części File Conversion (Konwersja pliku) z rozwijanej listy Layers Import (Im­port warstw) wybierz opcję Convert Layers to Frames (Konwertuj warstwy na klatki), aby każda warstwa pliku Adobe Illustratora została zaimportowana jako osobna klatka dokumentu Fireworks.

281. W części Render as Images (Przekształć w bitmapy), usuń zaznaczenia opcji Groups Over (Grupy większe niż) i Tiled Fills Over (Wypełnienia deseniem więk­sze niż). Kliknij przycisk OK.

Animacja Flash zostanie zaimportowana jako animacja Fireworks z zachowaniem wszys­tkich informacji o wektorach. Wszystkie obiekty będą edytowalne co oznacza, że bę­dziesz mógł je modyfikować za pomocą narzędzi Fireworks i wyeksportować plik ja­ko animowanego GIF-a.

Podsumowanie

Do dokumentów Fireworks mogą być dołączane elementy pochodzące z wielu źródeł. Im­portując różne elementy do Fireworks, powinieneś pamiętać o następujących rze­czach:

• Za pomocą urządzeń korzystających ze standardu TWAIN, takich jak skanery i apa­raty cyfrowe, możesz przechwytywać obrazy bezpośrednio do Fireworks. W MacOS możesz w tym celu wykorzystywać również moduły dodatkowe Photoshop Acquire.

• Najważniejszym parametrem, który trzeba wziąć pod uwagę przy skanowaniu jest rozdzielczość (liczba punktów na cal).

• Za pomocą kopiowania i wklejania lub techniki „przeciągnij i upuść” możesz prze­nosić do Fireworks elementy innych aplikacji.

• Do Fireworks można importować bogatą listę typów plików bitmapowych i wektorowych.

• Fireworks potrafi importować dokumenty Photoshopa 5 wraz z informacjami o warstwach, z zachowaniem edy­to­wal­ności tekstu i efektów warstw. Potrafi również eksportować do formatu pliku Photoshopa.

• Fireworks zawiera bogatą kolekcję klipartów oraz dającą do nich dostęp prze­glą­darkę Portfolio.

• Zrzuty ekranowe są bardzo prostym, ale użytecznym narzędziem.

• Animowane GIF-y powinny być otwierane, a nie importowane. Po otwarciu w Fireworks umieszczany jest bowiem cały animowany GIF, zaś importowanie umie­szcza w Fireworks jedynie jego pierwszą klatkę.

• Jako animacje można importować serie plików. Aby zachowane zostały za­war­te w importowanych plikach informacje o wektorach, będziesz musiał wykonać kil­ka dodatkowych czynności.

W następnym rozdziale przyjrzymy się eksportowaniu obrazków z Fireworks.




Rozdział 15.
Eksport i optymalizacja

W tym rozdziale:

• Podstawy eksportu.

• Optymalizowanie kolorów indeksowanych.

• Praca ze zdjęciami.

• Wykorzystanie podglądu eksportu.

• Wywoływanie kreatora eksportu.

• Inne funkcje eksportu.

Wieloplatformowy - niemalże uniwersalny - dostęp do Internetu wiąże się z wieloma ogra­niczeniami. Mimo że istnieje wiele różnych formatów plików graficznych, prze­glądarki aktualnie potrafią wyświetlać tylko trzy z nich: GIF, JPEG i PNG. Co więcej
- tyl­ko formaty GIF i JPEG są naprawdę szeroko akceptowane. Szerokość pasma w Sieci również jest mocno ograniczona. Chociaż coraz większa liczba użyt­kow­ników Internetu korzysta z szybkich i stałych połączeń, większość z nich nadal łą­czy się z Siecią, wykorzystując modemy 56 kbps.

Ograniczenia te sprawiają, że szczególnego znaczenia nabiera optymalizacja i eksport gra­fiki. Grafika wykonana w Fireworks powinna zostać wyeksportowana we właś­ciwym formacie, zaś jej plik musi mieć jak najmniejszy rozmiar fizyczny. Firma Ma­cromedia, tworząc Fireworks, zdawała sobie sprawę, jak ważne są funkcje eksportu. Więk­szość funkcji programu jest nastawiona na uzyskanie jak najlepiej wyglądającej gra­fiki oraz zapisanie jej we właściwym formacie i w jak najmniejszym pliku. W tym roz­dziale opisane zostały doskonałe funkcje programu umożliwiające kompresję stratną formatu GIF i blokowanie kolorów. Fireworks wszystkim ograniczeniom Internetu na­daje formę prawie artystyczną.

	W tym rozdziale przyjrzymy się podstawowym zagadnieniom zwią­za­nym z eksportowaniem i optymalizacją grafiki. Bardziej szczegółowe in­formacje dotyczące eksportowania grafiki z obszarami aktywnymi i plas­trami znajdziesz w części V. Jeśli chcesz się dowiedzieć więcej o eks­portowaniu animacji, zerknij do rozdziału 23.

Funkcje optymalizacji

Mimo że istnieje możliwość wykorzystywania na stronach WWW grafiki zapisanej w źród­łowym formacie Fireworks - PNG, jest to działanie niepraktyczne. Obrazki PNG tworzone w Fireworks za pomocą polecenia Save zawierają, oprócz prostego obrazka bitmapowego PNG, również dodatkowe informacje specyficzne dla Fireworks. Daje to wspaniałe możliwości otwierania i edytowania w Fireworks, ale rozmiar pliku uniemożliwia jego umieszczenie na stronie WWW. Do publikacji naszej pracy niezbędne jest skorzystanie z polecenia Export, które umożliwia stworzenie szeregu typów plików z obrazkami, zarówno w formacie bitmapowym, jak i wektorowym. Niektóre z tych formatów, jak GIF lub JPEG, nadają się do publikacji na stronach WWW, jednak inne, jak BMP lub Photoshop, bardziej nadają się do przemieszczania naszej pracy pomiędzy różnymi aplikacjami graficznymi.

Rysunek 15.1. Po stworzeniu dokumentu PNG Fireworks (w środku) za pomocą polecenia Save, można utworzyć z niego całą otaczającą go rodzinę formatów plików, korzystając z polecenia Export. Formaty „prywatne” pozwalają na przesyłanie do innej aplikacji, a formaty „publiczne” są gotowe do publikacji na stronach WWW lub w sieci bezprzewodowej — w przypadku map bitowych typu wireless (WBMP)

Wybranie odpowiedniego typu pliku to nie jedyna czynność, jaką trzeba wykonać przy eksportowaniu. Bardzo ważna jest tak­że optymalizacja XE "optymalizacja" . Optymalizacja jest procesem polegającym na utworzeniu jak naj­le­piej wyglądającego i jednocześnie jak najmniejszego pliku. Optymalizowane obrazki są szyb­ciej ładowane, nie tracąc przy tym jakości. W związku z tym, że w procesie optymalizacji dane są odrzucane, należy unikać otwierania i edytowania tzw. plików publicznych, przedstawionych na rysunku 15.1. Wykonaną pracę należy przechowywać i przemieszczać pomiędzy aplikacjami przy użyciu plików prywatnych. Plik prywatny powinieneś traktować jako oryginał grafiki, zaś plik publiczny jako fo­to­gra­fi­czną kopię, gotową do współużytkowania.

Optymalizacja i eksport skupione są w Fireworks wokół zakładek podglądu, znajdu­ją­cych się w oknie dokumentu palet Optimize (Optymalizacja) i Color Table (Tabela kolo­rów) oraz - przy tworzeniu animacji, palety Frames (Klatki). Przed wyeksportowaniem koń­cowego pliku za pomocą polecenia FileExport należy dostosować ustawienia pa­ra­me­trów, które są dostępne w tych paletach. Wszystkie ustawienia zostaną zapisane do póź­niejszego wykorzystania wraz z plikiem PNG. Ustawienia eksportu są taką samą częś­cią dokumentu, jak użyte wypełnienia i obrysy.

Najtrudniejszą częścią optymalizacji jest znalezienie kompromisu pomiędzy jakością gra­fiki a rozmiarem pliku. Fireworks oferuje podgląd porównujący grafikę w różnych for­matach z różnymi paletami kolorów lub ustawieniami kompresji. Optymalizacja każ­de­go obrazka, który ma zostać umieszczony na stronie WWW to bardzo ważna część pra­cy projektanta, gdyż czym mniejszy rozmiar pliku, tym krótszy czas ładowania stro­ny co oznacza, że odwiedzający stronę, będą mogli szybciej zobaczyć efekty Twojej pracy.

W kolejnych podrozdziałach bardzo szczegółowo zajmiemy się poszczególnymi funk­cja­mi eksportu, a tymczasem zamieszczam typową procedurę optymalizacji pliku:

282. Utwórz grafikę, biorąc pod uwagę jej optymalizację; skaluj i kadruj obrazki do jak najmniejszych rozmiarów i twórz duże obszary jednolitych kolorów lub po­zio­me paski kolorów, aby końcowy GIF miał jak najmniejsze rozmiary.

283. W palecie Optimize wybierz format pliku, który będzie odpowiedni dla Twojej gra­fiki. Dla ilustracji i prac zawierających duże obszary jednolitych kolorów wy­bieraj formaty z indeksowanymi kolorami, takie jak GIF, zaś dla prac z roz­bu­dowanymi przejściami tonalnymi, na przykład fotografii - pełnokolorowe for­maty, takie jak JPEG.

284. W obrazkach z kolorami indeksowanymi za pomocą palet Optimize i Color Tab­le jak najbardziej zredukuj liczbę kolorów grafiki. Jest to podstawa metoda re­dukcji rozmiaru plików obrazków z kolorami indeksowanymi. Im mniej ko­lo­rów, tym mniejszy rozmiar pliku.

285. Dla formatu JPEG wykorzystaj znajdujący się w palecie Optimize suwak Qua­li­ty (Jakość) do ustawienia jak najniższej - a jednocześnie akceptowalnej - jakości ob­razka, aby uzyskać jak najmniejszy rozmiar pliku.

286. Ustaw pozostałe opcje znajdujące się w palecie Optimize, takie jak przeplot w for­macie GIF lub wygładzanie w formacie JPEG.

287. Wybierz z menu polecenie FileExport, aby wyeksportować dokument i utwo­rzyć zoptymalizowany plik.

Paleta Optimize

Paleta Optimize XE "paleta:Optimize" jest centrum zarządzania procesem optymalizacji grafiki w Fireworks, za­wierającym prawie wszystkie kontrolki niezbędne do ustawienia opcji eksportu. Wy­bierz format eksportowanego pliku i zmodyfikuj charakterystyczne dla tego formatu usta­wienia. Ustawienia zdefiniowane w palecie Optimize, oddziaływać będą na cały do­ku­ment Fireworks. Gdy jednak zaznaczysz pojedynczy plaster, będziesz mógł ustalić pa­rametry optymalizacji, które będą dotyczyły wyłącznie tego plastra.

Jeśli nie widzisz palety Optimize na ekranie (rysunek 15.2), wybierz z menu polecenie Win­dowOptimize, aby ją wyświetlić. Przy optymalizacji obrazków trzeba wziąć pod uwa­gę wiele różnych czynników, ale prawdopodobnie największą rolę odgrywa tutaj for­mat pliku. W Fireworks wyboru formatu pliku można dokonać za pomocą rozwijanej lis­ty Export File Format, znajdującej się w palecie Optimize. Wybranie określonego for­ma­tu spowoduje wyświetlenie wszystkich dostępnych dla niego opcji, takich jak Bit Depth (Głębia bitowa) lub Quality (Jakość). Po wybraniu formatu GIF, dostępne staną się kontrolki przezroczystości, zaś po wybraniu formatu JPEG zostaną usunięte kon­trol­ki przezroczystości, a wyświetlany będzie suwak Quality (Jakość).

Paleta Optimize umożliwia także w dowolnej chwili zapisanie własnych ustawień eks­por­tu. Ustawienia te zostaną dodane do rozwijanej listy Saved Settings. Wybranie do­wol­nego zestawu ustawień, a następnie zmodyfikowanie dowolnego parametru (z wy­jąt­kiem Mat­te), spowoduje utworzenie własnych ustawień. Aby zachować własne ustawienia eks­portu, kliknij Save Settings (Zapisz ustawienia) — ikona z dyskietką — u dołu palety Optimize. Zostanie ot­war­te proste okno dialogowe Preset Name, w którym możesz wpisać nazwę własnych usta­wień. Gdy już ją wpiszesz i klikniesz przycisk OK, ustawienia zostaną dodane do lis­ty i będziesz mógł je w każdej chwili wywołać. Aby usunąć bieżące zachowane usta­wie­nia, kliknij Delete Current Saved Settings (ikona z kubłem na śmieci).

Rysunek 15.2. Praktycznie wszystkie opcje eksportu można ustawić w palecie Optimize

Export ... — Rozwijana lista formatów eksportowanych plików

Saved Settings option list — Rozwijana lista zachowanych ustawień

Pop-up ... — Menu rozwijane

Saved Settings button — Zachowaj ustawienia

Delete ... — Usuń bieżące zachowane ustawienia

	Poszczególnym funkcjom palety Optimize przyjrzymy się bliżej w czasie pra­cy z określonymi formatami eksportu w kolejnych podrozdziałach.

Paleta Color Table

Paleta Color Table XE "paleta:Color Table" (Tabela kolorów) zaczyna być wykorzystywana przy optymalizacji obraz­ków z indeksowanymi kolorami, na przykład GIF-ów lub 8-bitowych PNG. For­ma­ty te posiadają własne palety kolorów. Ograniczanie występujących w nich kolorów jest podstawową metodą zmniejszania rozmiarów plików indeksowanych obrazków. Łat­wy dostęp do palet kolorów zapewnia paleta Color Table, która pozwala na do­da­wa­nie, usuwanie i blokowanie określonych kolorów.

Jeśli nie ma na ekranie palety Color Table (rysunek 15.3), można ją wyświetlić za po­mo­cą polecenia WindowColor Table. Wybierając z rozwijanego menu palety polecenie Re­build Color Table, spowodujesz wyświetlenie próbek kolorów, które występują w bie­żą­cej palecie eksportu. U dołu palety Color Table wyświetlana jest liczba kolorów uży­wa­nych w dokumencie.

Rysunek 15.3. W palecie Color Table wyświetlana jest eksportowana paleta kolorów dla 8-bitowych indeksowanych obrazków

Swatches — Próbki

Rebuild Color Table — Odbuduj paletę kolorów

Pop-up menu — Menu rozwijane

Number of colors — Liczba kolorów

Podgląd w obszarze roboczym

Znajdująca się w oknie dokumentu zakładka Preview XE "Preview" (rysunek 15.4), oferuje podgląd do­kumentu zgodny z ustawieniami jego optymalizacji, które zostały ustalone w palecie Op­timize. Podgląd wyświetlany na zakładce Preview jest tak zbliżony do oryginalnego wi­doku, że sam łapię się czasami na tym, że próbuję używać narzędzi edycyjnych przed uprzed­nim opuszczeniem podglądu.

Rysunek 15.4. Podgląd zoptymalizowanej grafiki można wyświetlić za pomocą jednego kliknięcia myszą. Jest to możliwe dzięki umieszczeniu okien podglądu bezpośrednio w oknie dokumentu
Podgląd przy ustawieniach korekcji gamma różnych systemów ope­racyjnych Oprócz możliwości podglądu grafiki przy różnych ustawieniach eks­por­tu, Fireworks pozwala zobaczyć, jak Twoja praca będzie wyglądała zarówno na plat­formie Windows, jak i MaOS. Systemy Windows wykorzystują ko­rek­cję gamma równą 2,2, zaś w większości systemów MacOS korekcja ta wynosi 1,8. Różnica w ustawieniach korekcji gamma, która re­gu­lu­je jasność wyświetlania, może sprawić, że ten sam obrazek będzie jaś­niejszy w MacOS niż w Windows. W dowolnym momencie pracy w Fireworks (a nie tylko w trakcie uży­wa­nia jednej z za­kładek podglądu w oknie dokumentu) użytkownik Win­dows może wybrać z menu polecenie ViewMacintosh Gamma, zaś użytkownik MacOS - polecenie ViewWindows Gamma, aby zasy­mu­lować w oknie dokumentu wygląd grafiki wyświetlanej na innej plat­for­mie. Podgląd pracy przy obu ustawieniach korekcji gamma pozwala ustrzec się niespodzianek przy oglądaniu grafiki na innej platformie niż ta, na której została utworzona.

Podgląd różnych formatów eksportu

Zdolność Fireworks do wyświetlania obok siebie porównań efektów różnych ustawień eks­portu obrazka często jest decydującym czynnikiem przy optymalizacji grafiki. W niniejszym rozdziale kilkakrotnie natkniesz się na stwierdzenie, że optymalizacja gra­fi­ki po­lega na odnajdywaniu kompromisu pomiędzy jej jakością i jak najmniejszym roz­mia­­rem pliku. Można go osiągnąć z wykorzystaniem podglądów Fireworks.

Zakładki 2-Up (Podwójny podgląd) i 4-Up (Poczwórny podgląd) pozwalają porównać oba czynniki, które odgrywają ważną rolę przy eksporcie grafiki: wygląd i rozmiar pli­ku. Podawany jest rozmiar pliku w kilobajtach oraz przybliżony czas jego ściągania za po­mocą modemu 28,8 kbps. Korzyści z wizualnej prezentacji dokumentów są oczy­wis­te, ale towarzyszące jej informacje o rozmiarze pliku również nie pozostają bez zna­cze­nia dla użytkownika. Wszystkie modyfikacje dokonywane w palecie Optimize są na­tych­miast ponownie przeliczane i przedstawiane w postaci uaktualnionego rozmiaru pliku.

Jeśli grafika zawiera wiele klatek, wyświetlany jest jedynie rozmiar pli­ku klatki bieżącej, chyba że eksportowanym formatem będzie ani­mo­wa­ny GIF (Animated GIF). Wielu klatek używają na przykład obrazki reagu­jące na zdarzenia myszy i każda ich klatka jest eksportowana ja­ko oddzielny obrazek. Aby uzyskać rozmiar całej, składającej się z wielu kla­tek grafiki, będziesz musiał dodać do siebie rozmiary po­szcze­gólnych klatek.

Każda z trzech zakładek podglądu znajdujących się w oknie dokumentu oferuje inny typ podglądu dokumentu.

Zakładka Preview

Za pomocą polecenia WindowNew Window można otworzyć drugie okno tego samego do­kumentu. Następnie kliknij w nowym oknie zakładkę Preview XE "Preview" (rysunek 15.5). Gdy jed­no okno dokumentu będzie ustawione na tryb Original (Oryginalny), zaś drugie na Pre­view (Podgląd), wszystkie modyfikacje dokonywane w oknie Original będą natych­miast wyświetlane w oknie Preview.

Rysunek 15.5. Wybierz z menu polecenie WindowNew Window, aby utworzyć kolejne okno dokumentu. Jedno okno ustaw na Original, zaś drugie na Preview

Set to Original tab — Tryb Original

Set to Preview tab — Tryb Preview

Zakładka 2-Up

Zakładka 2-Up (Podwójny podgląd) dzieli okno dokumentu w pionie na dwie części, wy­świetlając w ten sposób dwa różne widoki tej samej pracy (rysunek 15.6). W lewym panelu wy­świe­tla­ny jest oryginalny obrazek, zaś w prawym jego zoptymalizowana - zgodnie z usta­wie­niami w palecie Optimize - wersja. Lista opcji u dołu każdego panelu umożliwia dokonanie wyboru — czy przedstawiać widok oryginalny (wygląd pracy w Fireworks), czy podgląd eksportu. Umieszczenie drugiego podglądu w lewym panelu umożliwia dokładne porównanie dwóch zestawów ustawień eksportu, bez oglądania obrazka oryginalnego. Po zaznaczeniu myszką danego panelu, Fireworks rysuje wokół niego obwódkę. Zmiany w palecie Optimize wpływają tylko na ustawienia w zaznaczonym panelu.

Rysunek 15.6. Zgodnie z ustawieniem domyślnym, zakładka 2-Up przedstawia jednocześnie oryginalny i zoptymalizowany wygląd grafiki
		Podczas korzystania z podglądu 2-Up mo­żesz dostosowywać rozmiary okien, aby otrzymać pełny podgląd grafiki.

Zakładka 4-Up

Zakładka 4-Up (Poczwórny podgląd) (rysunek 15.7) oferuje cztery podglądy, z których każ­dy zajmuje w przybliżeniu jedną czwartą okna dokumentu. W lewym górnym rogu wy­świetlany jest początkowo oryginalny widok dokumentu, zaś w trzech pozostałych podglądy zop­ty­malizowanego dokumentu. Poza tym zakładka 4-Up działa tak jak zakładka 2-Up.

Rysunek 15.7. W zakładce 4-Up możesz wybrać panel, w którym będą wyświetlane wszystkie zmiany ustawień w palecie Optimize. Na tej ilustracji zaznaczony jest panel znajdujący się w prawym dolnym rogu

Selected pane — Panel zaznaczony

Widok 4-Up jest szczególnie przydatny przy optymalizacji i eksporcie obrazków w for­ma­cie JPEG. Format ten jest dosyć kapryśny - zredukowanie jakości do 70% może spowodować gwałtowne pogorszenie jakości jednego obrazka, podczas gdy in­ny będzie wciąż dobrze wyglądał po zmniejszeniu jego jakości do 50%. Najlepsze usta­wienia jakości określonego obrazka w formacie JPEG można osiągnąć z wyko­rzys­ta­niem jednoczesnego podglądu grafiki przy trzech różnych ustawieniach optymalizacji.

	Aby uzyskać dobry widok dokument (zwłaszcza jeśli jest on mały), być mo­że będziesz musiał zmienić wymiary okna dokumentu. Część każ­de­go z paneli podglądu jest zajmowana przez informacje o rozmiarach pli­ku, które mogą zajmować większość okna dokumentu o wy­mia­rach 200×200 pikseli lub mniejszego.

Panoramowanie

Jeśli obrazek jest zbyt duży, aby można go było wyświetlić w całości w oknie podglądu, mo­żesz wykorzystać narzędzie Hand (Rączka) do jego przewijania. Gdy wybierzesz obra­zek w oknie podglądu za pomocą narzędzia Hand, kursor zostanie zamieniony na rącz­kę, którą będzie można przeciągać obrazek i wyświetlać jego inne części. Moż­li­wość takiego panoramowania narzędziem Hand staje się szczególnie przydatna przy wy­świe­tlaniu podglądów wielu ustawień. Wówczas przewinięcie jednego z podglądów po­woduje automatyczne przewinięcie wszystkich pozostałych (rysunek 15.8). Bardzo pros­te staje się wówczas porównanie rezultatów różnych ustawień optymalizacji obrazka.

Rysunek 15.8. Jeżeli przewiniesz jeden z wielu podglądów, pozostałe także zostaną przewinięte

Powiększanie

Jedną z funkcji eksportu w Fireworks jest blokowanie kolorów. Możesz zablokować ko­lor dowolnego piksela, zaznaczając go i klikając Lock Color (Zablokuj kolor), znajdujący się w palecie Color Table. Ale jak zidentyfikować właściwy piksel? Oczywiście, musisz go powiększyć. Narzędzie Zoom i kontrolki widoku okna dokumentu pracują tak sa­mo zarówno z oryginalnym widokiem obrazka, jak i z jego zoptymalizowanymi pod­glą­da­mi. Aby powiększyć widok, wybierz narzędzie Zoom i kliknij obrazek lub wybierz ska­lę powiększenia z rozwijanej listy, znajdującej się wśród kontrolek widoku. Aby po­mniej­szyć widok, kliknij obrazek narzędziem Zoom z wciśniętym klawiszem Alt (Option) lub wy­bierz z rozwijanej listy mniejszą skalę powiększenia.

	Pamiętaj, że Twoje grafiki internetowe prawie zawsze będą oglądane w ich oryginalnych wymiarach. Mimo że o wyborze formatu eks­por­to­wa­­nego pliku możesz decydować na podstawie powiększonego wi­do­ku grafiki, skala tego widoku jest nieistotna dla ostatecznego wy­glądu grafiki.

Jeśli korzystasz z dwóch lub czterech różnych widoków grafiki, zmiana powiększenia jed­nego z nich spowoduje zmianę powiększenia wszystkich pozostałych (rysunek 15.9).

Rysunek 15.9. Po powiększeniu jednego z widoków, wszystkie pozostałe także zostaną powiększone
		W celu przewinięcia podglądu powiększonego widoku bez konieczności wy­łą­cza­nia narzędzia Zoom, wciśnij i przytrzymaj klawisz spacji, aby tym­cza­sowo przełączyć się na narzędzie Hand.

Kontrolki odtwarzania klatek

Kontrolki podobne do tych, jakie można spotkać w magnetowidach mogą być używane nie­zależnie od tego, jaka zakładka jest aktualnie wykorzystywana do oglądania do­ku­mentu. Podczas optymalizacji w jednej z zakładek podglądu, kontrolki klatek mogą być wy­korzystywane do szybkiego przywoływania określonych klatek do optymalizacji lub ich sekwencyjnego odtwarzania.

Oto lista kontrolek położonych od lewej do prawej:

• First Frame (Pierwsza klatka). Wyświetla pierwszą klatkę obrazka.

• Play/Stop (Odtwarzaj/Zatrzymaj). Odtwarza wszystkie klatki po kolei. Pod­czas odtwarzania ikona znajdująca się na przycisku zamieniana jest na kwa­drat. Kliknięcie tego kwadratu powoduje zatrzymanie odtwarzania.

• Last Frame (Ostatnia klatka). Wyświetla ostatnią klatkę obrazka.

• Current Frame (Aktualna klatka): Wyświetla numer bieżącej klatki obrazka.

• Previous Frame (Poprzednia klatka). Wyświetla klatkę znajdującą się przed aktualnie wyświetlaną.

• Next Frame (Następna klatka). Wyświetla klatkę znajdującą się za aktualnie wyświetlaną.

Oprócz oglądania poszczególnych klatek animacji, często wykorzystuję kontrolki do po­ruszania się pomiędzy poszczególnymi klatkami w przyciskach reagujących na zda­rze­nia myszy. Pamiętaj, że każda klatka obrazka jest oddzielnym plikiem i może być indywidualnie optymalizowana.

Sterowanie klatkami - oprócz kontrolek znajdujących się w oknie do­ku­mentu - umożliwiają również kontrolki palety Frames. Funkcje ani­ma­cji i eksportu zostaną opisane w części VI książki.

Eksportowanie kolorów indeksowanych

Obrazki posiadające duże obszary jednolitych kolorów (przeważnie ilustracje, w prze­ciwieństwie do fotografii), które mogą posiadać ograniczoną liczbę kolorów są eks­por­towane w formatach plików z kolorami indeksowanymi XE "kolory indeksowane" . Formaty z kolorami indek­so­wanymi posiadają najwyżej 256 różnych kolorów, tzw. kolor 8-bitowy. Infor­macje o tym, które z 256 kolorów znajdują się w określonym pliku obrazka prze­cho­wywane są w indeksie kolorów. Stąd właśnie bierze się nazwa kolor indeksowany (indexed color).

Kluczową funkcją plików z kolorami indeksowanymi jest to, iż ich indeksy mogą być tak redukowane, aby zawierały jedynie kolory wykorzystywane w obrazku. Re­dukcja liczby kolorów ma zasadniczy wpływ na rozmiar fizyczny pliku. Właściwie jest to podstawowa metoda optymalizacji plików z kolorami indeksowanymi. Pełny do­stęp do indeksu kolorów daje jedna z palet Fireworks - Color Table (Tabela kolorów).

Gdy w grafice z kolorami indeksowanymi wymagane jest stworzenie wrażenia większej niż 256 liczby kolorów, można wykorzystać dithering (rozpraszanie). Rozproszone ko­lo­ry są tworzone za pomocą deseni składających się z pikseli o dwóch lub więcej różnych ko­lorach. Oko ludzkie nie jest wówczas w stanie odróżnić poszczególnych pikseli i postrzega je jako nowy kolor.

W tabeli 15.1 znajduje się zestawienie formatów plików z kolorami indeksowanymi, któ­re mogą być eksportowane z Fireworks.

Z wszystkich powyższych formatów tylko GIF i PNG 8 mogą być wykorzystywane w In­ternecie. GIF jest obecnie najpopularniejszym i najbardziej odpo­wied­nim dla Internetu formatem, gdyż jest obsługiwany przez ogromną liczbę przeglądarek in­ternetowych. Pod wieloma względami lepszym od GIF-a jest format PNG, ale jego funk­cje przezroczystości nie są jeszcze obsługiwane przez przeglądarki internetowe.

Zarówno GIF, jak i PNG są przystosowane do wykorzystywania przezroczystości, ale obec­ne przeglądarki słabo odczytują przezroczystość formatu PNG. Funkcja ta jest szcze­gólnie przydatna w Internecie, gdyż umożliwia tworzenie grafik o nieregularnych kształ­tach, jak również tworzenie wrażenia nakładających się na siebie obrazków. W obu formatach: GIF i PNG można opcjonalnie stosować przeplot. Obrazki z prze­plo­tem wy­świetlane są stopniowo, w miarę ładowania strony na komputer użytkownika.

Tabela 15.1.

Formaty plików z indeksowanymi kolorami

Format	Opis
GIF	Graphics Interchange Format. Najpopularniejszy w Internecie format z kolorami indeksowanymi. Doskonale obsługiwany przez przeglądarki internetowe; małe pliki; 1-bitowa przezroczystość
Animowany GIF	Podobny do zwykłego GIF-a z tą różnicą, że zawiera wiele różnych obrazków wyświetlanych szybko jeden po drugim, tworząc w ten sposób animację
PNG 8	Portable Network Graphic. Oferuje funkcje podobne do GIF-a, ale jego przezroczystość nie jest obsługiwana przez przeglądarki internetowe
WBMP	1-bitowy (czarno-biały) format pliku przeznaczony dla stron wykorzystujących protokół WAP (Wireless Aplication Protocol), wyświetlanych na urządzeniach przenośnych o małych ekranach i ograniczonej głębi kolorów
TIFF 8	Tag Image File Format. Nieodpowiedni dla Internetu, ale szeroko stosowany w publikacjach drukowanych
BMP 8	Bitmapa Microsoftu. Format graficzny systemów Microsoft Windows. Nieodpowiedni dla Internetu, ale wykorzystywany do przenoszenia grafiki pomiędzy różnymi aplikacjami w systemach Windows
PICT 8	Format graficzny systemów MacOS. Zawarte w nim informacje o wektorach (tylko Macintosh) nie są obsługiwane przez Fireworks. Nieodpowiedni dla Internetu, ale wykorzystywany do przenoszenia grafiki pomiędzy różnymi aplikacjami w systemach MacOS

W 1-bitowym formacie WBMP każdy piksel jest przechowywany jako włączony lub wyłączony. Podczas oglądania obrazka WBMP na szarym wyświetlaczu urządzenia przenośnego mamy dzięki temu do czynienia z paletą jasno szarą i ciemno szarą. Niestety, pliki WBMP eksportowane z Fireworks mają puste ikony, ale zawsze można je rozpoznać po ich rozszerzeniu — „.wbmp”

	Obsługa eksportu — i importu — formatu mapy bitowej typu wireless (WBMP) jest nowością w Fireworks 4. Poszerza to zakres urządzeń, dla których może być tworzona grafika, o urządzenia wykorzystujące protokół WAP (Wireless Application Protocol).

Proces eksportu wszystkich obrazków z kolorami indeksowanymi jest bardzo zbliżony. Je­dynie format GIF posiada więcej opcji. Właśnie z powodu liczby opcji oraz tak dużej po­pularności w Internecie, w kolejnych podrozdziałach szerzej zajmiemy się formatem GIF. Gdy nauczysz się eksportować obrazki w formacie GIF, wiedzę tę będziesz mógł łat­wo wykorzystać do eksportu każdego innego formatu. Gdy w palecie Optimize wy­bie­rzesz inny format zamiast GIF, Fireworks usunie wszystkie zbędne kontrolki i po­zos­tawi jedynie potrzebne funkcje.

Paleta kolorów XE "paleta kolorów"

Paleta jest grupą kolorów używanych w obrazku. Fireworks oferuje w rozwijanej liście In­dexed Palette palety Optimize dziewięć różnych palet kolorów oraz opcję Custom umo­żliwiającą modyfikowanie wbudowanych palet. Po zmodyfikowaniu palety możesz ją zapisać i dodać do listy Indexed Palette.

Każda z dziewięciu palet (dostępnych dla wszystkich indeksowanych formatów plików, nie tylko dla GIF-a) daje dostęp do różnych grup kolorów. W grafikach internetowych wy­korzystywane są przeważnie palety WebSnap Adaptive (Internetowa adaptacyjna) oraz Web 216, zaś wszystkie pozostałe przydają się w innych sytuacjach. Oto ze­sta­wie­nie dziewięciu wbudowanych palet Fireworks:

• Adaptive XE "paleta kolorów:Adaptive" (Adaptacyjna): Analizuje wszystkie kolory używane w obraz­ku i wyszukuje 256 najbardziej odpowiednich. Nazwa adaptacyjna wzię­ła się stąd, że zamiast stałego zestawu kolorów, paleta ta używa 256 ko­lo­rów najlepiej dostosowanych do obrazka. Jeśli jest to możliwe, Fireworks przy­dzie­la wstępnie do obrazka paletę Web 216, a następnie pozostałe kolory, które mo­gą być niebezpieczne dla Internetu. Paleta Adaptive składa się więc z ko­lo­rów bezpiecznych i niebezpiecznych dla Internetu.

• WebSnap Adaptive XE "paleta kolorów:WebSnap Adaptive" (Internetowa adaptacyjna): Podobna do palety Adaptive w tym sensie, że obie są pale­ta­mi, w których wybrane kolory są jak najbliższe oryginalnym. Po wstępnym do­pasowaniu kolorów bezpiecznych dla Internetu, pozostałe kolory są analizowane wzglę­dem ich wartości szesnastkowych. Wszystkie kolory bliskie kolorowi bez­piecznemu dla Internetu (których wartości są najwyżej o siedem większe lub mniej­sze od wartości koloru bezpiecznego dla Internetu) są za­mie­niane na ten kolor. Paleta ta nie daje absolutnej pewności, że wszystkie kolory będą bez­pieczne dla Internetu, ale większość z nich taka właśnie jest.

Jak właściwie Fireworks decyduje o tym, jakie kolory znajdują się w za­kre­sie, który może zostać wykorzystany w palecie WebSnap Adaptive? Róż­nica siedmiu wartości jest obliczana na podstawie modelu RGB. Za­łóżmy na przykład, że jeden z kolorów posiada wartości R = 100, G = 100 i B = 105 - średnia szarość. W palecie WebSnap Adaptive war­toś­ci tego koloru zostaną zamienione na R = 102, G = 102 i B = 102, gdyż różnice pomiędzy nimi są mniejsze lub równe siedmiu (R = 2, G = 2, B = 3, co w sumie daje 7). Jeśli jednak kolor byłby nieco in­ny, na przykład R = 99, G = 100, B = 105, różnica pomiędzy nimi by­ła­by już zbyt duża, aby zamienić kolor oryginalny na kolor bezpieczny dla Internetu. W takim przypadku w obrazku użyty zostanie kolor ory­ginalny.

• Web 216 XE "paleta kolorów:Web 216" : Wszystkie kolory obrazka są przekształcane na najbliższe im kolory bezpieczne dla Internetu.

• Exact XE "paleta kolorów:Exact" (Dokładna). Używa oryginalnych wartości RGB kolorów. Przydatna je­dy­nie do pracy przy obrazkach posiadających mniej niż 256 kolorów. W przy­pad­ku obrazków z większą liczbą kolorów Fireworks wyświetli ostrzeżenie, mó­wiące, że powinieneś użyć palety Adaptive.

• Macintosh XE "paleta kolorów:Macintosh" . Gdy monitor jest ustawiony na wyświetlanie 256 kolorów, pasuje do palety używanej przez system operacyjny MacOS.

• Windows XE "paleta kolorów:Windows" . Gdy monitor jest ustawiony na wyświetlanie 256 kolorów, pasuje do palety używanej przez system operacyjny Windows.

• Grayscale (Skala szarości). Konwertuje obrazek na grafikę w skali szarości, o maksymalnie 256 odcieniach szarości.

• Black&White XE "paleta kolorów:Black&White" (Czarno-biała). Redukuje obrazki do dwutonowych. Opcja Dit­her (Dithering) jest po wybraniu tej palety ustawiana automatycznie na 100%, ale możesz ją modyfikować.

• Uniform XE "paleta kolorów:Uniform" (Jednolita). Wybierane są kolory występujące w spektrum w postępie ma­tematycznym. Paleta ta ma niewielkie zastosowanie w Internecie, ale może być wykorzystywana do nadawania obrazkom efektu posteryzacji poprzez usu­nię­cie dużej liczby kolorów i zredukowanie wartości funkcji Dither, która jest auto­matycznie ustawiana na 100%.

• Custom XE "paleta kolorów:Custom" (Własna). Po załadowaniu zapisanej palety lub zmodyfikowaniu jed­nej ze standardowych, Fireworks nadaje palecie nazwę Custom. Modyfikacji pa­let można dokonywać za pomocą rozwijanego menu palety Options.

Jaką więc paletę powinieneś wybrać dla swojego obrazka? Prawdopodobnie najlepiej jest utworzyć grafikę w Fireworks z wykorzystaniem palety kolorów bezpiecznych dla In­ternetu, a następnie wyeksportować ją z paletą WebSnap Adaptive. Zyskasz wówczas pew­ność, że obrazek jak najbardziej wierny oryginałowi przy oglądaniu przez użyt­kow­ników posiadających monitory pracujące z 24-bitową lub większą głębią kolorów, a tak­że przez tych, których systemy nadal mogą wyświetlać jedynie 256 kolorów.

Pamiętaj, że nawet jeśli użyjesz w swojej grafice jedynie kolorów bezpiecznych dla In­ter­netu, końcowy rezultat może nieco odbiegać od Twoich oczekiwań. Fireworks przy wy­gładzaniu, tworzeniu zewnętrznych cieni i blasków generuje dodatkowe kolory, któ­re mogą nie być bezpieczne dla Internetu. Dlatego właśnie palety Adaptive i WebSnap Adap­tive pozwalają uzyskać najlepsze odwzorowanie kolorów obrazka we wszystkich prze­glądarkach internetowych.

Liczba kolorów

Jednym z najszybszych sposobów na zmniejszenie rozmiaru pliku jest zredukowanie licz­by kolorów obrazka. Przypomnijmy, że GIF jest formatem 8-bitowym co oznacza, że mo­że zawierać maksymalnie 256 kolorów, czyli 8 bitów informacji. Miłośnicy ma­te­ma­ty­ki wiedzą, że 256 to wynik podniesienia liczby 2 do ósmej potęgi. Każdy dodatkowy bit informacji powoduje wykładniczy przyrost liczby kolorów i rezerwuje określony przedział pamięci (zwiększając jednocześnie rozmiar pliku). Dlatego właśnie w roz­wijanej liście Number of Colors (Liczba kolorów) znajdują się pozycje: 2, 4, 8, 16, 32, 64, 128 i 256 (kolejne potęgi dwójki).

Paleta Color Table XE "paleta:Color Table"

Aby zapewnić całkowitą kontrolę nad poszczególnymi kolorami obrazka, kontrolki pa­lety Color Table umożliwiają dodawanie, edytowanie i usuwanie kolorów oraz zapi­sy­wanie i ładowanie całych ich palet. Fireworks pozwala na zaznaczenie próbki okre­ślo­nego koloru, a następnie jego zablokowanie, zamianę na najbliższy kolor bezpieczny dla Internetu lub przekształcenie na przezroczystość za pomocą jednego z przycisków dos­tępnych w palecie Color Table lub poleceń, które znajdują się w jej rozwijanym menu.

Zablokowanie jednego lub większej liczby kolorów grafiki pozwala upewnić się, że za­cho­wane zostaną wszystkie najważniejsze (używane w znakach firmowych klienta lub waż­ne dla całego projektu) kolory obrazka. Po zablokowaniu kolor nie będzie mógł zos­tać zmieniony bez względu na wybraną paletę. Możesz na przykład wyświetlić swój obra­zek, używając palety Web 216, zablokować wszystkie kolory, a następnie prze­łą­czyć paletę na Adaptive, aby poszerzyć zakres kolorów przy jednoczesnym zachowaniu wszys­tkich ko­lo­rów bezpiecznych dla Internetu. W próbkach kolorów bezpiecznych dla In­ter­ne­tu wy­świe­tlany jest mały romb, zaś dla zablokowanych kolorów w prawym dolnym rogu prób­ki pojawi się mały kwadrat (rysunek 15.10).

Rysunek 15.10. Paleta Color Table umożliwia kontrolowanie obrazków z indeksowanymi kolorami

Swatches ... — Informacja o konieczności odbudowy próbek kolorów

Web-safe color — Kolor bezpieczny dla Internetu

Locked color — Kolor zablokowany

Delete color button — Usuń kolor

Lock color button — Zablokuj kolor

Snap to ... — Zamień na kolor bezpieczny dla Internetu

Transparent — Przezroczysty

Edit color — Edytuj kolor

Kliknięcie piksela narzędziem Pointer w oknie podglądu powoduje za­zna­czenie jego koloru w palecie Color Table.

W tabeli 15.2 znajduje się zestawienie wszystkich poleceń rozwijanego menu palety Co­lor Table. Niektóre z tych poleceń reprezentowane są również za pomocą przy­cisków.

	Wszystkie powyższe polecenia dostępne są także w kontekstowym me­nu wyświetlanym po kliknięciu próbki koloru prawym przyciskiem my­szy (kliknięciu z wciśniętym klawiszem Control na Macu).

Sortowanie względem „popularności”

W rozwijanym menu palety Color Table dostępne jest polecenie Sort by Popularity, któ­re jest bardzo pomocne przy zmniejszaniu rozmiaru pliku poprzez odrzucenie pewnej licz­by kolorów. Standardowo wszystkie próbki są wyświetlane w przypadkowej ko­lej­noś­ci. Po wybraniu z rozwijanego menu polecenia Sort by Popularity, w lewym górnym ro­gu palety jako pierwsze wyświetlane są najczęściej wykorzystywane kolory, zaś w pra­wym dolnym rogu - kolory najmniej wykorzystywane w obrazku. Ułatwia to wy­bór tych, które powinny zostać usunięte. Możesz kliknąć z wciśniętym klawiszem Shift dwa kolory, aby zaznaczyć te i wszystkie znajdujące się pomiędzy nimi kolory lub użyć kla­wisza Ctrl (Command), aby zaznaczyć wiele niesąsiadujących ze sobą kolorów.

Tabela 15.2.

Zestawienie poleceń rozwijanego menu palety Color Table

Polecenie	Przycisk	Opis
Rebuild Color Table - Odbuduj tabelę kolorów	Nie	Odbudowuje tabelę próbek kolorów zgodnie z ustawieniami palety Optimize
Add Color - Dodaj kolor	Tak	Umożliwia wstawianie do bieżącej palety dodatkowych kolorów wybieranych z systemowego próbnika kolorów
Edit Color - Edytuj kolor	Tak	Otwiera systemowy próbnik kolorów i umożliwia wybranie koloru, którym zostanie zastąpiony kolor zaznaczonej próbki
Delete Color - Usuń kolor	Tak	Usuwa zaznaczony kolor (kolory) z palety
Replace Palette Entry - Usuń wpis z palety	Nie	Zamienia zaznaczony kolor na kolor wybrany za pomocą systemowego próbnika
Snap to Web Safe (Zamień na kolor bezpieczny dla Internetu)	Tak	Konwertuje zaznaczone kolory na najbliższe im kolory bezpieczne dla Internetu
Transparent - Przezroczysty	Tak	Zamienia zaznaczony kolor na przezroczystość
Lock Color - Zablokuj kolor	Tak	Zachowuje bieżący kolor niezmieniony podczas jakichkolwiek przekształceń palety, takich jak redukcja głębi bitowej. Kolor ten może być nadal edytowany
Unlock All Colors - Odblokuj wszystkie kolory	Nie	Odblokowuje wszystkie kolory, umożliwiając w ten sposób ich edycję
Sort by Luminance - Sortuj względem luminancji	Nie	Sortuje wszystkie próbki znajdujące się w palecie od najjaśniejszej do najciemniejszej
Sort by Popularity - Sortuj względem „popularności”	Nie	Sortuje wszystkie próbki znajdujące się w palecie od koloru najbardziej do najmniej wykorzystywanego
Unsorted - Bez sortowania	Nie	Przywraca standardowe rozmieszczenie próbek
Remove Edit - Cofnij zmiany	Nie	Przywraca wszystkie oryginalne kolory próbek
Remove All Edits - Cofnij wszystkie zmiany	Nie	Przywraca oryginalne ustawienia całej palety
Load Palette - Załaduj paletę	Nie	Umożliwia załadowanie palety kolorów z pliku Adobe Color Table (ACT) lub GIF-a
Save Palette - Zapisz paletę	Nie	Zapisuje bieżącą paletę jako plik Color Table

Matte XE "Matte" (Tło)

Przy oprawianiu fotografii w ramki, bardzo często są one umieszczane nad pewnym tłem, zapewniającym kontrast. Fotografia rzuca się wówczas bardziej w oczy. Fire­works wykorzystuje tę koncepcję i umożliwia projektantom eksportowanie swoich obraz­ków z wykorzystaniem różnych kolorów obszaru roboczego (bez konieczności mo­dyfikacji tego obszaru). Jednym z najczęściej występujących problemów doty­czą­cych przezroczystych GIF-ów jest niepożądana aureola, która powstaje przy tworzeniu zew­nętrznych cieni lub innych przejść kolorów nad różnymi odcieniami tła. Tradycyjną
me­todą zapobiegania takim problemom jest zmiana obszaru roboczego w programie gra­ficznym na taki, który będzie pasował do koloru tła strony internetowej. Roz­wią­za­nie to sprawdza się doskonale w niektórych sytuacjach, ale projektanci internetowi bar­dzo częs­to muszą wykorzystać tę samą grafikę w wielu różnych sytuacjach i umieszczać ją nad różnymi kolorami tła. Funkcja Matte pozwala na zachowanie jednej, głównej gra­fi­ki i eksportowanie dowolnej liczby jej kopii, które będą umieszczane na różnych tłach (rysunek 15.11).

Rysunek 15.11. Funkcja Matte umożliwia eksportowanie obrazków posiadających różne tła bez konieczności modyfikacji oryginalnego obrazka

Wybranie koloru Matte jest bardzo proste. Kliknij przycisk ze strzałką, który znajduje się obok opcji Matte, aby wyświetlić rozwijany próbnik kolorów. Wybierz jeden spo­śród tych, które znajdują się w próbniku lub użyj narzędzia Eyedropper do pobrania ko­lo­ru z ekranu. Aby przywrócić opcji Matte przezroczystość, kliknij znajdujący się w roz­wijanym próbniku przycisk No Color (Brak koloru).

Stratna kompresja GIF XE "stratna kompresja GIF"

Być może pamiętasz, że format GIF używa kompresji bezstratnej. Do czego więc służy znaj­dująca się w palecie Optimize opcja Loss (Strata)? Nazwa Lossy GIF nie oznacza ja­kie­goś nowego formatu plików, ale metodę optymalizacji obrazków. Umożliwia ona za­pi­sanie grafiki w pliku GIF o małym rozmiarze fizycznym. Przy określaniu idealnego ustawienia Loss bardzo przydatne są podglądy przedstawione na rysunku 15.12. Zazwyczaj zaczynam od ustawienia krańcowego, np. 60 lub 70 procent, a następnie stopniowo zmniejszam je, aż uzyskam możliwy do akceptacji wygląd obrazka.

Rysunek 15.12. W lewym dolnym panelu, stratna kompresja została ustawiona na 30% i już zaczyna być widoczna. W prawym dolnym panelu, jej wartość wynosi 60% i jej rezultaty są już nie do przyjęcia

Przekonałem się, że opcja Loss daje dobre wyniki z niektórymi obrazkami, zaś z innymi nie wypada najlepiej. Niekiedy - dopóki nie ustawisz wysokiej wartości opcji Loss
- po­trafi ona nawet zwiększyć rozmiar końcowego pliku. W przypadkach, gdy uda Ci się znacznie zmniejszyć rozmiar pliku określonego obrazka, ucieszysz się, że w swo­im zestawie narzędzi posiadasz opcję Loss.

Dithering XE "Dithering"

Jednym ze sposobów (niekoniecznie najlepszym) usuwania obszarów jednolitych kolo­rów, które powstają w wyniku słabej zdolności obsługi koloru przez format GIF, jest za­sto­sowanie opcji Dither (Dithering). Po włączeniu tej opcji, Fireworks symuluje nowe ko­lory za pomocą deseni tworzonych z istniejących kolorów, czyli dzieje się to do­kład­nie tak samo jak w przypadku tworzenia wypełnienia Web Dither. Ponieważ nie można ogra­ni­czyć obszaru działania ditheringu i jest on stosowany do całej grafiki, jego rezultaty mo­gą być widoczne w końcowym obrazku. Dithering powoduje powstawanie wyraź­nych „kropek” (rysunek 15.13) i zwiększenie rozmiaru pliku. Poziom ditheringu można re­gulować za pomocą suwaka Dither Amount lub poprzez wpisanie żądanej wartości bez­pośrednio w odpowiednie pole tekstowe.

Rysunek 15.13. Do obrazka po prawej został zastosowany dithering o wartości 100%, co spowodowało wyraźne „kropkowanie” obszarów jednolitych kolorów

Type of ... — Rozwijana lista typów przezroczystości

Set ... — Ustaw kolor przezroczystości

Remove ... — Usuń kolor z indeksu przezroczystości

Add ... — Dodaj kolor do indeksu przezroczystości

Przezroczystość XE "przezroczystość"

Jednym z powodów, dla których format GIF jest stosowany o wiele częściej niż JPEG, jest możliwość zdefiniowania dowolnego koloru, a co za tym idzie również obszaru, obrazka GIF jako przezroczystości. Jak zostało już wcześniej wspomniane, przezroczystość jest funkcją umożliwiającą two­rze­nie grafik o nieregularnych kształtach. Do tworzenia przezroczystych obszarów w obraz­kach GIF można wykorzystywać kontrolki Fireworks pokazane na rysunku 15.14.

Rysunek 15.14. W palecie Optimize znajdują się kontrolki przezroczystości dla formatów ją obsługujących, jak GIF

Oto dostępne w Fireworks kontrolki przezroczystości:

• Type of Transparency option list (Lista Typ przezroczystości). Możesz wybrać je­den z typów przezroczystości: No Transparency (Brak przezroczystości), Index Trans­parency (Indeksowana przezroczystość) lub Alpha Transparency (Przezroczystość alfa). Domyślnie jako prze­zro­czys­tość przyjmowany jest kolor obszaru roboczego grafiki.

• Add Color to Index Transparency (Dodaj kolor do indeksu przezro­czys­tości). Umożliwia tworzenie przezroczystości z dodatkowych kolorów, wybie­ra­nych z próbek kolorów lub próbkowanych z obrazka.

• Remove Color from Index Transparency (Usuń kolor z indeksu przezro­czys­tości). Przekształca przezroczyste kolory z powrotem na oryginalne. Moż­na je pobierać z palety próbek lub bezpośrednio z obrazka.

• Set Transparent Index Color button (Ustaw kolor przezroczystości). Umo­żli­wia zdefiniowanie pojedynczego koloru jako przezroczystości. Kolor ten moż­na pobrać z palety próbek lub bezpośrednio z obrazka.

Gdy kolor zostanie zdefiniowany jako przezroczystość, jego próbka i piksele w widoku Preview są zastępowane przez szaro-białą szachownicę (rysunek 15.15). Jako prze­zroczystość możesz zdefiniować dowolną liczbę kolorów.

Rysunek 15.15. Jedną z ważniejszych funkcji formatu GIF jest możliwość zdefiniowania w nim dowolnych kolorów jako przezroczystych obszarów, co pomaga wkomponować obrazek GIF w stronę internetową

Aby uczynić wybrane obszary obrazka GIF przezroczystymi:

317. Kliknij zakładkę Preview okna dokumentu, aby wyświetlić podgląd grafiki.

318. Wybierz z menu polecenie WindowOptimize, aby wyświetlić paletę Optimize.

319. Wybierz pozycję GIF z rozwijanej listy Export Format, która znajduje się w pa­le­cie Optimize.

320. Aby jako przezroczystość zdefiniować kolor obszaru roboczego, wybierz z roz­wi­janej listy Type of Transparency opcję Index Transparent.

321. Aby jako przezroczystość zdefiniować inny kolor niż kolor obszaru roboczego, klik­nij przycisk Set Transparent Index Color i wybierz kolor z palety próbek lub po­bierz go za pomocą kroplomierza z podglądu obrazka.

	Jeśli chcesz utworzyć mały przezroczysty obszar obrazka, powiększ go za pomocą narzędzia Zoom przed wybraniem koloru przezroczystości.

288. Aby zdefiniować więcej kolorów jako przezroczystość, kliknij przycisk Add Co­lor to Index Transparency i wybierz kolory z palety próbek lub pobierz je z pod­glą­du obrazka.

289. Aby przekształcić przezroczysty kolor z powrotem na oryginalny, kliknij przy­cisk Remove Color from Index Transparency i wybierz kolor z palety próbek lub pobierz go z podglądu obrazka.

290. Aby mieć jeszcze większą kontrolę nad przezroczystością obrazka, wybierz ko­lor lub kolory z palety Color Table i kliknij przycisk Transparent.

Jak zostało wspomniane w opisie rozwijanej listy Type of Transparency, dostępne są dwa typy przezroczystości: Index Transparency (Indeksowana przezroczystość) i Alpha Trans­parency (Przezroczystość alfa). Index Transparency umożliwia zdefiniowanie jako przezroczystość dowolnego koloru. Można ją traktować jak przełącznik Włą­cz-Wyłącz. Alpha Transparency umożliwia stopniowanie przezroczystości - możesz two­rzyć różne odcienie kolorów. Więcej informacji o przezroczystości alfa znajdziesz w podrozdziale poświęconym formatowi PNG.

W formacie GIF przeważnie stosowana jest indeksowana przezroczystość, gdyż prze­zroczystość alfa obsługiwana jest jedynie przez format PNG. Twórcy Fireworks pozo­sta­wili jednak dostępną dla formatu GIF również przezroczystość alfa, pozwalającą uzy­skać nieco odmienne efekty. Po wybraniu opcji Alpha Transparency rejestrowany jest nowy kolor obszaru roboczego i zamieniany na przezroczystość. Czym takie działanie róż­ni się od przekształcenia koloru roboczego na przezroczystość, jakie ma miejsce w przy­padku opcji Index Transparency? Szybko zrozumiesz działanie tej funkcji i do­ce­nisz jej możliwości, gdy utworzysz obrazek, którego część będzie miała taki sam kolor jak tło (na przykład białe oczy przy białym kolorze obszaru roboczego). Prze­zro­czys­tość alfa, zastosowana w Fireworks do formatu GIF, pozostawia paletę kolo­rów nie­zmie­­nioną i zamienia na przezroczystość jedynie kolor obszaru roboczego (rysu­nek 15.16).

Rysunek 15.16. Opcja Alpha Transparency umożliwiła utworzenie przezroczystości z białego koloru obszaru roboczego i pozwoliła na zachowanie koloru obszarów białych w pozostałych elementach grafiki
		Jeśli po wybraniu opcji Alpha Transparency nie zauważyłeś, aby został za­re­jestrowany jakiś nowy kolor, sprawdź, czy włączona jest opcja Op­ti­mized. Jeśli tak, oznacza to, że Fireworks połączył inne kolory, aby za­chować w grafice niezmienną liczbę kolorów.

Usuwanie nieużywanych kolorów

Opcja Remove Unused Colors (Usuń nieużywane kolory) (domyślnie włączona) jest funk­cją dostępną jedynie w Fireworks, umożliwiającą usuwanie z palety powta­rza­ją­cych się lub nieużywanych w grafice kolorów. Pozwala ona znacznie zredukować roz­miar pliku, zwłaszcza w przypadku korzystania z jednej ze stałych palet kolorów, takich jak Web 216 lub z palety jednego z systemów operacyjnych. Polecenie Remove Unused Co­lors znajdziesz w rozwijanym menu palety Optimize.

Przeplot XE "Przeplot"

Znajdująca się w rozwijanym menu palety Optimize opcja Interlaced umożliwia two­rze­nie obrazków GIF, które są wyświetlane stopniowo w miarę pobierania ich z Internetu. W miarę przesyłania danych z serwera do przeglądarki internetowej, wyświetlanych jest co­raz więcej szczegółów obrazka. Mimo że wyeksportowanie grafiki z opcją Interlace nie powoduje jej szybszego ładowania z Internetu, pozwoli jednak osobom odwiedzającym stro­nę zorientować się, że odbywa się jakiś proces. Dołączanie przeplotu do gra­fiki jest kwestią gustu - jedni projektanci nie utworzą żadnej strony bez wyko­rzys­ta­nia tej opcji, inni są jej zdecydowanymi przeciwnikami.

Ustawienia zachowane (Saved Settings)

Cztery z sześciu dostępnych ustawień, które znajdują się w rozwijanej liście Saved Set­tings w palecie Optimize, dotyczy formatu GIF:

• GIF Web 216. Format GIF używający palety Web 216.

• GIF WebSnap 256. Format GIF używający palety WebSnap Adaptive i mak­sy­malnie 256 kolorów.

• GIF WebSnap 128. Format GIF używający palety WebSnap Adaptive i mak­sy­malnie 128 kolorów.

• GIF Adaptive 256. Format GIF używający palety Adaptive i maksymalnie 256 ko­lorów. Włączona zostaje opcja Optimized.

Używaj tych ustawień jako obowiązujących przy eksporcie grafiki w formacie GIF lub wy­korzystaj je jako punkt wyjścia do tworzenia własnych ustawień optymalizacji.

Technika Fireworks: tworzenie obrazków przeznaczonych do wyeksportowania w formacie GIF

Zanim rozpoczniesz pracę z paletą Optimize, możesz utworzyć obrazek „przyjazny” dla for­matu GIF, zwracając szczególną uwagę na tworzące go wzory pikseli, a także dowiedzieć się jak for­mat GIF kompresuje te piksele. Poświęcenie czasu na utworzenie obrazka bardziej przy­jaznego dla formatu GIF pozwala niekiedy uzyskać mniejsze rozmiary pliku niż za po­mocą metod oferowanych przez narzędzia eksportu Fireworks.

Najprostszym sposobem na utworzenie dokumentu odpowiedniego dla formatu GIF jest do­łączenie dużych obszarów jednolitego koloru. Wszystkie zmiany pomiędzy pikselami są mniej kompresowane niż duże obszary jednolitych kolorów. Korzyści, które wy­ni­ka­ją ze stosowania w formacie GIF dużych obszarów jednolitych kolorów, za­de­mon­struję na małym eksperymencie. Utwórz nowy dokument o wymiarach 400×400 pik­se­li i wy­bierz kolor obszaru roboczego. Kliknij zakładkę Preview w oknie dokumentu i zwróć uwagę na mały rozmiar eksportowanego pliku - około 600 bajtów, czyli 0,6 K (być może będziesz musiał rozciągnąć okno dokumentu, aby zobaczyć informacje o roz­miarze pliku). Przejdź z powrotem do zakładki Original i za pomocą narzędzia Pen­cil narysuj znak X, który będzie stykał się ze wszystkimi narożnikami dokumentu. Klik­nij zakładkę Preview, a zobaczysz, że rozmiar pliku wzrósł do około 1,74 K, czyli pra­wie trzykrotnie. A wszystko przez cienki znak X.

Innymi elementami zawierającymi duże obszary jednolitego koloru, doskonałymi do wy­eksportowania w formacie GIF są poziome linie. GIF kompresuje piksele od lewej do prawej, więc poziome linie składające się z pikseli o takich samych kolorach, będą dos­konale kompresowane. Bez kompresji, linia składająca się z czerwonych pikseli jest wy­rażana za pomocą informacji typu „czerwony piksel, czerwony piksel, czerwony pik­sel, czerwony piksel, czerwony piksel.” Widzisz więc, że do opisu pięciu pikseli musi zo­stać użyte dość długie wyrażenie. Z wykorzystaniem kompresji GIF, ta sama linia mo­że zostać opisana za pomocą wyrażenia „czerwony piksel x 5.” Już taki opis pozwala od­rzucić wiele informacji, a przy zapisie „czerwony piksel x 300” różnica staje się jesz­cze bardziej zauważalna. Oczywistym jest więc, że wykorzystanie w dokumentach po­zio­mych linii pozwoli znacznie zredukować rozmiar pliku GIF.

Najprostszym sposobem na umieszczenie w obrazku większych ilości poziomych linii jest zastąpienie złożonych, chaotycznych wypełnień teksturami, takich jak Fiber, ty­mi, któ­re zawierają poziome linie (rysunku 15.17). Oba dokumenty są prawie takie sa­me, z tym wyjątkiem, że koło po lewej zostało wypełnione 50-procentową teksturą Fiber, zaś ko­ło po prawej - 50-procentową teksturą Lines. Przy takich samych ustawieniach eks­por­tu, dokument zawierający wypełnienie teksturą Lines ma cztery razy mniejszy roz­miar pliku.

Rysunek 15.17. Zastąpienie wypełnienia Fiber za pomocą tekstury składającej się z poziomych linii zredukowało rozmiar eksportowanego pliku z 19 kB do mniej niż 6 kB (rozmiary plików wyświetlane są obok zakładek podglądu). Spowodowane jest to dobrą kompresją długich poziomych linii składających się z podobnych pikseli w formacie GIF

Kolejnym sposobem na tworzenie obrazków bardziej „przyjaznych” dla formatu GIF jest redukowanie obszarów „zabłąkanych” pikseli. Niekiedy w obszarach jednolitych ko­lorów znajdują się losowo rozmieszczone piksele posiadające inne odcienie tego ko­lo­ru. Przy oglądaniu obrazka w jego naturalnych wymiarach, piksele te mogą być nie­za­uwa­żalne, ale powodują zmniejszenie zdolności kompresji formatu GIF. Czas poświę­co­ny na obej­rzenie obrazka przy dużym powiększeniu i usuwaniu „zabłąkanych” pikseli na pew­no nie pójdzie na marne.

Wiele „zabłąkanych” pikseli pozostaje w obrazkach, które oryginalnie by­ły zapisane w formacie JPEG. Niekiedy obrazki przechodzą przez wie­le różnych rąk, zanim trafią w Twoje. Mam klientów, którzy mimo mo­ich protestów dostarczają prace graficzne, posiadające duże ob­sza­ry jednolitych kolorów (czyli doskonałe dla formatu GIF) w formacie JPEG. Co więcej - nie posiadają już oryginalnych plików zapisanych w for­macie PNG lub TIFF. Format JPEG jest dobry dla fotografii, ale znie­­­kształ­ca obszary jednolitych kolorów, tworząc w ten sposób wiele nie­­da­jących się skompresować „zabłąkanych” pikseli. Używaj poniżej opi­­sanej te­chni­ki do redukowania lub usuwania zabłąkanych pikseli i zaw­sze żądaj od swoich klientów obrazków zapisanych w formacie GIF.

Do usuwania zabłąkanych pikseli możesz użyć narzędzia Pencil (rysunek 15.18). Zmia­na koloru zabłąkanych pikseli na takie, jaki ma cały jednolity obszar pozwoli utworzyć więk­sze ilości jednolitych poziomych linii i zredukować rozmiar eksportowanego pliku.

Aby usunąć zabłąkane piksele:

322. Wybierz narzędzie Pencil z palety narzędziowej.

323. Z próbnika koloru obrysu znajdującego się w palecie narzędziowej wybierz kro­plomierz i pobierz kolor dominujący w jednolitych obszarach obrazka.

Rysunek 15.18. Powiększ obrazek i usuń wszystkie zabłąkane piksele, aby utworzyć większe obszary jednolitych kolorów, które są lepiej kompresowane przy eksporcie formatu GIF

324. Użyj narzędzia Pencil do pomalowania zabłąkanych pikseli kolorem jedno­li­tych obszarów.

325. Powtórz kroki od 2 do 3, dopóki nie usuniesz wszystkich zabłąkanych pikseli.

	Po powiększeniu obrazka wybierz z menu polecenie WindowNew Win­dow, aby utworzyć nowy, 100-procentowy widok obrazka, w którym bę­dziesz mógł śledzić wszystkie zmiany grafiki w jej naturalnych roz­miarach.

Eksportowanie obrazków fotograficznych

Fotografie są najczęściej wyświetlane w 24-bitowym trybie True Color i są zapisywane prze­ważnie w formacie JPEG, zamiast w formatach posiadających ograniczone palety lub indeksowane kolory, takich jak GIF. Fotograficzne obrazki posiadają subtelne przej­ścia tonalne, których nie można odtworzyć za pomocą małych ilości kolorów i które mo­gą być rozpraszane (dithering) przez przeglądarki użytkowników pracujących ze standardem 256 kolorów.

Co więcej - format JPEG doskonale kompresuje obrazki posiadające łagodne przejścia to­nalne do niewiarygodnie małych rozmiarów plików bez zauważalnej utraty jakości. Fakt, że format JPEG jest doskonały w tych zastosowaniach, w których GIF wypada ra­czej kiepsko, sprawia, że oba świetnie się uzupełniają i można je uznać za kom­ple­men­tar­ne wśród formatów grafiki internetowej.

W tabeli 15.3 znajduje się zestawienie pełnokolorowych formatów plików, które można eks­portować z Fireworks.

Ze wszystkich formatów wymienionych w tabeli 15.3, tylko JPEG i PNG mogą być wykorzystywane w Internecie. Maski alfa zawarte w 32-bitowym PNG są ignorowane przez przeglądarki, które odczytują wówczas jedynie 24 bity formatu PNG. Jeśli chcesz, aby obrazek był wyświetlany w jak najlepszej jakości i nie zależy Ci na zmniejszeniu rozmiaru pliku, użyj formatu PNG 24. Jeśli jednak najważniejsza jest dla Ciebie szyb­kość przesyłania danych, najlepszym wyborem jest format JPEG, zapewniający dos­ko­nałą jakość fotograficznych obrazków przy o wiele większej redukcji rozmiaru pliku niż ta, jaką zapewnia format PNG.

Tabela 15.3.

Pełnokolorowe formaty eksportu

Format		Opis
JPEG		Format plików graficznych opracowany przez Joint Photographic Experts Group. Używany dla prawie wszystkich pełnokolorowych obrazków stosowanych w Internecie. Jego stratna kompresja pozwala maksymalnie zredukować rozmiar fizyczny pliku
PNG 24, PNG 32		Portable Network Graphic. Oferuje stratną kompresję dającą większe rozmiary plików niż kompresja JPEG, ale zapewnia doskonałą jakość grafiki
TIFF 24, TIFF 32		Tag Image File Format. Format nie mający zastosowania w Internecie, ale często wykorzystywany w poligrafii
BMP 24		Bitmapa Microsoft. Format systemów operacyjnych Windows. Nie znajduje zastosowania w Internecie, ale doskonale sprawdza się przy przenoszeniu grafiki pomiędzy różnymi aplikacjami systemu Windows
PICT 24 (tylko Macintosh)		Format graficzny systemów MacOS. Zawarte w nim informacje o wektorach nie są obsługiwane przez Fireworks. Nie znajduje zastosowania w Internecie, ale doskonale sprawdza się przy przenoszeniu grafiki pomiędzy różnymi aplikacjami systemu MacOS
		Format pliku Photoshopa może także zawierać obrazki fotograficzne, jak również warstwy i inne atrybuty. Kwestie eksportu dokumentu Photoshopa z Fireworks są omówione w dalszej części rozdziału.

Aby zmienić głębię bitową eksportowanego obrazka, wybierz format z mniejszą głębią bi­tową z rozwijanej listy Export Format, znajdującej się w palecie Optimize. Przy­kła­do­wo - zamiast PNG 32 wybierz PNG 24. Podczas gdy zmiana 24-bitowej na 8-bitową głębię ko­lo­rów oznacza zmniejszenie liczby obsługiwanych kolorów, zmiana z głębi 32-bitowej na 24-bi­tową powoduje zachowanie niezmienionej liczby kolorów, a usuwa jedynie maskę alfa. Ostatnie 8 bitów każdego 32-bitowego obrazka to zawsze kanał alfa - 8-bitowa ska­la szarości definiująca przezroczystość obrazka.

	Więcej informacji o maskach alfa znajdziesz w rozdziale 13.

JPEG XE "JPEG"

Podczas gdy format GIF zmniejsza rozmiary plików poprzez zredukowanie liczby uży­wa­nych w obrazku kolorów, format JPEG to samo zadanie wykonuje poprzez od­rzu­­ca­nie pikseli. W metodzie tej wykorzystywany jest algorytm stratnej kompresji. Nazwa „stra­tna” bierze się stąd, że im niższa jakość obrazka tym traconych jest wię­cej jego pik­seli. Stosowany w JPEG algorytm jest bardzo dobry, gdyż poprzez zmniej­sza­nie parametru JPEG Quality (Jakość) pozwala na znaczne zredukowanie rozmiaru eks­portowanego pliku.

Oto inne charakterystyczne cechy formatu JPEG:

• W obrazkach JPEG może być wyświetlanych ponad 16 milionów kolorów. Tak sze­roki (24-bitowy) zakres kolorów pozwala na odwzorowanie subtelnych przejść tonalnych fotograficznych obrazków.

• Mimo że w obrazku JPEG można wyświetlić prawie każdy kolor, żaden z nich nie może zostać przekształcony na przezroczystość. Jeśli więc obrazek wy­świe­tlany w przeglądarce powinien posiadać przezroczyste obszary, musi być za­pisany w formacie GIF.

• Aby obrazek JPEG mógł być stopniowo wyświetlany w miarę pobierania go z In­ternetu, musi zostać zapisany jako Progressive JPEG (Progresywny JPEG). Obra­zek jest wówczas tworzony stopniowo na ekranie monitora, podobnie jak GIF z przeplotem. Progresywne obrazki JPEG mają trochę lepszy algorytm kom­presji i mogą być zapisywane w plikach o mniejszych rozmiarach.

	Internet Explorer nie obsługuje w pełni progresywnych obrazków JPEG. Wy­świetla je jak zwykłe JPEG.

Jakość XE "JPEG:jakość"

Podstawową metodą modyfikowania rozmiarów plików JPEG jest zmiana wartości pa­ra­metru Quality (Jakość). W Fireworks parametr Quality jest wyrażany w wartościach pro­centowych, w zakresie od 0 do 100%. Im wyższe wartości, tym mniejsza kompresja pli­ku i odwrotnie, im mniejsze wartości, tym odrzucanych jest więcej pikseli obrazka. Zaw­sze warto spróbować zredukować rozmiar pliku JPEG poprzez zmniejszanie war­toś­ci Quality, którą możesz także wpisać bezpośrednio w polu tekstowym. Algorytm kom­presji JPEG jest tak dobry, że rozmiary prawie wszystkich obrazków, które za­wie­ra­ją przejścia tonalne, można zmniejszyć bez zauważalnej utraty jakości (rysunek 15.19).

Rysunek 15.19. W każdym z czterech podglądów zostały wykorzystane inne ustawienia jakości formatu JPEG. Dopiero po znacznym zmniejszeniu jakości obrazek (w prawym dolnym rogu) stał się nie do przyjęcia

Z drugiej strony - zwiększanie wartości Quality ponad jej początkową wartość nie daje żadnych rezultatów. Algorytm JPEG doskonale radzi sobie z odrzucaniem pik­se­li i re­du­kowaniem rozmiarów plików, ale nie można dodać pikseli, aby zwiększyć ja­kość obrazka (zwiększysz jedynie rozmiar pliku i czas jego pobierania z Internetu).

	Po wykorzystaniu algorytmu JPEG, mała kompresja nie powoduje za­uwa­żalnej utraty jakości obrazka. Najpierw zanikają subtelne różnice w jasności i zabarwieniu grafiki. Im większa kompresja, tym obrazek sta­je się ciemniejszy i ma coraz mniejszy zakres kolorów.

Dobrym sposobem na porównanie różnych ustawień kompresji obrazków JPEG jest wy­korzystanie podglądu 4-Up. W lewym górnym panelu podglądu wyświetlany jest ory­ginalny dokument, który można potraktować jako punkt odniesienia dla wszystkich po­równań. W innym panelu podglądu możesz zredukować jakość do około 75%. Jeśli obra­zek nadal jest do zaakceptowania, w innym panelu zredukuj jakość do 50%. Przy ta­kich wartościach zaczniesz prawdopodobnie zauważać niepożądane efekty, więc w czwar­tym panelu możesz użyć pośrednich ustawień jakości, na przykład 65%. Upew­­nij się, że obrazek jest wyświetlany w naturalnych wymiarach. Powinieneś oglą­dać go tak sa­mo, jak będzie wyświetlany u internautów.

	Pamiętaj, że możesz rozciągnąć okno dokumentu, aby zwiększyć roz­mia­ry paneli podglądu.

Jakość selektywna

Ustawienie Selective Quality funkcjonuje jak ustawienie Quality, z tą różnicą, że jego wartość ma zastosowanie tylko do obszarów zakrytych maską JPEG. Pozwala to na odizolowanie obszarów planu pierwszego i zastosowanie do nich wysokich ustawień Selective Quality, równocześnie stosując niskie ustawienia jakości dla pozostałej części obrazka. Mówiąc krótko, poświęcamy jakość mniej istotnych obszarów obrazka na rzecz wyższej jakości elementów ważniejszych.

	Fireworks 4 w wielu przypadkach umożliwia tworzenie jeszcze mniejszych obrazków JPEG, przy wykorzystaniu kombinacji dwóch ustawień — Selective Quality dla tekstu, przycisków i określonych obszarów określanych maską JPEG, oraz Quality dla reszty obrazka.

Maskę JPEG można utworzyć przy użyciu zaznaczenia Marquee, wybierając Modify⇒Selective JPEG⇒Save Selection as JPEG Mask. Fireworks przedstawia maskę JPEG, zgodnie z ustawieniem domyślnym, jako różową przeświecającą nakładkę (rysunek 15.20)

Rysunek 15.20. Po dokonaniu konwersji zaznaczenia prostokątnego na maskę JPEG, program koloruje ją na różowo

Jeżeli wcześniej już tworzyłeś obrazek JPEG zawierający tekst lub grafikę w jednolitym kolorze, wiesz, że proces kompresji JPEG wywiera niszczący wpływ na obrazki typu GIF. Tekst i obszary jednolitego koloru zmieniają się, tworząc brzydką mieszaninę. Ustawienia Selective Quality można dobrać tak, aby były one stosowane do obiektów tekstowych i do Button Symbols (symboli przycisków) naszych dokumentów, bez potrzeby indywidualnego zasłaniania maską JPEG każdego elementu. W tym celu należy wybrać polecenie Modify⇒Selective JPEG⇒Settings, aby wyświetlić okno dialogowe Selective JPEG Settings (rysunek 15.21), a następnie zaznaczyć pole Preserve Text Quality (Zachowaj jakość tekstu) i (lub) pole Preserve Button Quality (Zachowaj jakość przycisków). W tym samym oknie można również włączyć i wyłączyć ustawienia Selective Settings.

Rysunek 15.21. W oknie dialogowym Selective JPEG Settings określamy, czy ustawienie Selective Setting ma obejmować również tekst i przyciski
		Aby otworzyć okno dialogowe Selective JPEG Settings można również kliknąć przycisk Edit Selective Quality Options, pojawiający się w palecie Optimize, gdy jest ona ustawiona na JPEG.

Rysunek 15.22 przedstawia efekt działania ustawień Quality i Selective Quality, przy wykorzystaniu obrazka i maski z rysunku 15.20.

Rysunek 15.22. Tekst i obszar pod maską JPEG są wyraźne i ostre, gdyż ich ustawienia Selective Quality wynoszą 90. Pozostała część obrazka jest zaciemniona w związku z ustawieniem Quality wynoszącym 25

XE "JPEG:wyostrzanie krawędzi"

Wyostrzanie krawędzi XE "JPEG:wyostrzanie krawędzi"

Grafiki internetowe często są połączeniem fotografii, ilustracji i tekstu. JPEG jest właś­ci­wym formatem dla obrazków posiadających wiele przejść tonalnych, takich jak fo­to­gra­fie, ale tekst nakładany na zdjęcia może być w tym formacie nieostry, gdyż JPEG o wie­le lepiej radzi sobie z kompresją stopniowego przejścia koloru niż z kompresją obrazków, posiadających ostre kra­wę­dzie i nagłe zmiany kolorów. Przeszkody te pozwala przezwyciężyć opcja Fireworks - Sharpen JPEG Edges (Wyostrzanie krawędzi JPEG), którą można znaleźć w roz­wi­ja­nym menu palety Optimize.

Jak wskazuje nazwa tej opcji, Sharpen JPEG Edges przywraca niektóre ostre kra­wę­dzie, które mogły zostać utracone podczas kompresji JPEG. Wyostrzanie to jest naj­bar­dziej zauważalne w tekście i prostych obiektach graficznych, takich jak prostokąty, któ­re są nakładane na fotografie (rysunek 15.23). Wyostrzanie krawędzi jednak znacznie zwiększa rozmiary plików i czasami lepiej jest po prostu podnieść wartość ustawienia Quality dla całego obrazka.

Rysunek 15.23. Dla obrazków fotograficznych zawierających ostre krawędzie, jak np. tekst, w celu uniknięcia zbyt dużego rozmycia warto zastosować opcję Sharpen JPEG Edges, znajdująca się w menu rozwijanym palety Optimize

Wygładzanie XE "JPEG:wygładzanie"

Im bardziej JPEG zostanie skompresowany, tym więcej będzie w nim „klocków”. W mia­rę wzrostu kompresji, algorytm JPEG odrzuca coraz więcej podobnych pikseli i w pewnym momencie zostają utracone stopniowe przejścia pomiędzy kolorami, a w zamian pow­stają bloki jednolitych kolorów.

Funkcja Smoothing (Wygładzanie) lekko rozmywa cały obrazek tak, aby powstające w cza­sie kompresji zabłąkane piksele były jak najmniej zauważalne. Zakres wartości znaj­dującej się w palecie Optimize opcji Smoothing to 0-8. Wygładzanie daje dwie ko­rzyś­ci: redukuje liczbę „klocków” powstających czasami w wyniku kompresji JPEG i nie­co zmniejsza rozmiar pliku.

Podobnie jak opcja Sharpen JPEG Edges sprawdza się najlepiej w obrazkach zawie­ra­ją­cych wiele prostych linii i tekstu, opcja Smoothing pracuje doskonale z grafikami za­wie­rającymi wiele linii krzywych i gładkich kształtów.

Progresywny JPEG XE "JPEG:progresywny JPEG"

Dla wielu osób, głównym zastosowaniem opcji Progressive JPEG (Progresywny JPEG) jest stopniowe wy­świetlanie obrazków, czyli takie samo, jakie ma opcja Interlaced w formacie GIF. Dos­tępna w rozwijanym menu palety Optimize opcja Progressive JPEG ma jednak dużo wię­cej możliwości: oferuje algorytm kompresji drugiej generacji, który w wielu przy­pad­kach przy zachowaniu tej samej jakości pozwala osiągnąć mniejsze rozmiary plików. Pro­gre­syw­ny JPEG został opracowany przez firmę Netscape, ale jest obsługiwany także przez now­sze wersje przeglądarek Microsoft.

	Internet Explorer obsługuje progresywne JPEG, ale nie wyświetla ich rów­nolegle w trakcie pobierania ich z Internetu. Dla użytkownika obrazek taki wy­da­je się zwykłym JPEG.

W praktycznych zastosowaniach opcja Progressive JPEG wielokrotnie umożliwiła mi osiąg­nięcie mniejszych rozmiarów plików, ale nie było to regułą. Wybór tej opcji uza­leż­niałem przeważnie od tego, czy klient chciał, aby obrazek był wyświetlany stop­nio­wo w trakcie pobierania z Internetu, czy też najpierw został pobrany, a dopiero wtedy wy­świetlony.

PNG XE "PNG" 32 i PNG 24

PNG jako format internetowy dopiero wchodzi w użycie, jeśli wziąć pod uwagę jego obsłu­gę przez główne przeglądarki internetowe. Format ten daje jednak wiele możli­wość grafice internetowej. łącząc grafikę bitmapową i wektorową, PNG ma mało strat­ny algorytm kompresji (jak GIF) i może obsługiwać miliony kolorów (jak JPEG). Co wię­cej - PNG oferuje metodę przeplotu pozwalającą na szybsze wyświetlanie obrazków niż oferowane przez formaty GIF i JPEG oraz obsługę przezroczystości przewyższającą in­ne formaty plików.

Jednym z najbardziej wartościowych aspektów PNG jest to, że zapisane w tym formacie ob­razki wyglądają bardzo podobnie w różnych systemach komputerowych. Przeważnie gra­fiki tworzone w Windows są jaśniejsze w MacOS, zaś grafiki tworzone w MacOS w Win­dows są ciemniejsze. PNG oferuje obsługę korekcji gamma, która jest odpo­wie­dzial­na za wygląd obrazka wyświetlanego w różnych systemach operacyjnych.

Jeszcze do niedawna przeglądarki internetowe obsługiwały format PNG jedynie za po­mo­cą rozszerzeń. Kiedy PNG został uznany jako nowy internetowy format graficzny przez World Wide Web Consortium (W3C), w czwartych wersjach przeglądarek Nets­cape i Microsoft została zawarta obsługa tego nowego formatu. Prawdopodobnie naj­waż­niejsze jest jednak to, że program do tworzenia stron WWW firmy Macromedia - Dream­weaver oferuje źródłową obsługę PNG. Wstawiane w tym formacie obrazki mo­gą być oglądane w oknie dokumentu, jak obrazki w formatach GIF i JPEG. Powstał rów­nież program Fireworks, który nie tylko umożliwia eksportowanie tworzonej w nim grafiki w for­macie PNG, ale używa PNG jako własnego formatu plików.

Mimo że popularność PNG ciągle rośnie, obsługa zapewniana przez przeglądarki jest zbyt mało rozpowszechniona, aby zapewnić całkowitą niezależność tego formatu. PNG po­siada wiele funkcji, na przykład przezroczystość alfa, które nie są w pełni obsłu­gi­wa­ne przez najważniejsze przeglądarki internetowe. Dość interesujące jest to, iż Fireworks wy­przedził większość innych programów graficznych w możliwościach obsługi PNG. Greg Roelofs, jeden z twórców formatu PNG nazwał Fireworks „najlepszym z dos­tępnych edytorów obsługujących PNG”.

W przeciwieństwie do indeksowanej przezroczystości, w której wybrane piksele mogą być tylko całkowicie przezroczyste lub całkowicie nieprzezroczyste, przezro­czys­tość alfa umożliwia tworzenie pośrednich przezroczystości, które mogą posiadać jeden z dwu­stu pięćdziesięciu sześciu odcieni. Funkcja ta umożliwia łatwe komponowanie 32-bi­towych obrazków z innymi. Mimo że PNG nie jest jeszcze najlepszym wyborem dla grafiki in­ternetowej, doskonale sprawdza się w tworzeniu grafiki przeznaczonej dla prezentacji mul­timedialnych, takich jak filmy Shockwave i Flash, gdzie animowane obiekty często są umieszczane jeden nad drugim lub komponowane z tłem. Aplikacje Director i Flash umo­żliwiają importowanie tworzonych w Fireworks plików PNG oraz ich nagłówków.

Źródłowy format PNG Fireworks jest formatem rozszerzonym, gdyż mo­że zawierać dodatkowe efekty, tekst i inne dane zawarte w nagłówku każ­dego pliku. Inne programy umożliwiające wyświetlanie plików PNG mo­gą obsługiwać podstawowy obrazek Fireworks, ale nie pozwalają na jego edycję. Aby format PNG wyświetlić w Internecie, najlepiej jest wy­eks­portować obrazek w podstawowym formacie PNG, który traci wszys­tkie dodatkowe informacje dla Fireworks i maksymalnie zmniej­sza rozmiar pliku.

Inne formaty plików

Zagadnienie związane z eksportem obrazków PNG 24 i PNG 32 są aktualne także przy eksportowaniu z Fireworks obrazków w formatach TIFF, BMP i PICT (tylko w MacOS). Eksport tych plików jest bardzo prosty i wymaga jedynie zdefiniowania pa­ra­metru Matte.

Praca w oknie Export Preview

Optymalizacja i podgląd obrazków bezpośrednio w środowisku roboczym Fireworks jest wygodnym rozwiązaniem, ale wszystkie funkcje eksportu można znaleźć również w jed­nym, centralnym punkcie programu - w oknie dialogowym Export Preview XE "Export Preview" (Podgląd eks­portu) (rysunek 15.24). Oferuje ono również kilka dodatkowych funkcji nie­do­stęp­nych w środowisku roboczym.

W oknie Export Preview znajdują się trzy zakładki:

• Options (Opcje). Główny panel służący do optymalizacji obrazków. Możesz w nim zdefiniować format pliku, głębię bitową, kompresję, przezroczystość i inne pa­ra­me­try grafiki. Znajdują się tu także kontrolki, dotyczące obsługi kolorów, które umo­żliwiają ich blokowanie, edytowanie i usuwanie. Wszystkie kontrolki dzia­ła­ją tak samo jak te dostępne w paletach Optimize i Color Table.

• File (Plik). Pozwala sterować dwoma właściwościami eksportowanych plików: ska­lowaniem i parametrycznym kadrowaniem. Eksportowane obrazki można ska­lować zarówno za pomocą wartości procentowych, jak i bardziej pre­cy­zyj­nie - w pikselach. Kadrowanie grafiki odbywa się poprzez wpisanie współ­rzęd­nych X i Y lewego górnego wierzchołka oraz szerokości i wysokości no­we­go ob­szaru. Eksportowane obrazki można także kadrować wizualnie w obszarze pod­glądu.

Rysunek 15.24. Okno dialogowe Export Preview skupia w jednym miejscu wszystkie funkcje eksportu Fireworks i oferuje kilka dodatkowych opcji, niedostępnych w środowisku roboczym

Tabbed panels — Panele z zakładkami

Optimization ... — Ustawienie optymalizacji

Current ... — Bieżące ustawienia

Preview auto-update — Automatyczne aktualizowanie podglądu

Saved ... — Lista zapisanych ustawień

Preview Area — Obszar podglądu

Pointer ... — Wskaźnik (Rączka)

Crop — Kadrowanie

Zoom — Powiększenie

Single ... — Pojedynczy podgląd/Wiele podglądów

Frame ... — Sterowanie klatkami

• Animation (Animacja). Zawiera wszystkie ustawienia dotyczące animo­wa­nych GIF-ów, takie jak czas trwania poszczególnych klatek, metodę usuwania kla­tek oraz zapętlanie. Większość tych opcji dostępnych jest także w palecie Frames (Klatki), w trakcie pracy w obszarze roboczym.

Zawsze widoczny obszar podglądu pozwala wizualnie porównać różne ustawienia eks­por­tu oraz kadrować grafikę. Znajdują się tutaj także narzędzia przewijania (Wskaźnik), powię­kszania (lupka) oraz kontrolki, podobne do tych spotykanych w magnetowidach, umo­żliwiające odtwarzanie animacji i innych wieloklatkowych plików. Przyglądając się funk­cjom dostępnym w oknie Export Preview możesz doświadczyć déjá vu. Większość z tych kontrolek jest taka sama lub podobna do tych, których używałeś w trakcie pracy w obszarze roboczym. Ma to swoje uzasadnienie - nie musisz uczyć się od samego po­cząt­ku obsługi okna Export Preview.

Jak zostało wcześniej wspomniane, w oknie dialogowym Export Preview znajdują się do­datkowe, specjalne funkcje eksportu, takie jak kadrowanie i skalowanie ekspor­to­wa­nych obrazków.

Kadrowanie

Narzędzie Export Area XE "Export Area" (Eksportowany obszar), znajdujące się w palecie narzędziowej, wydaje się logicznym miejscem definiowania ekspor­to­wa­nych obszarów w oknie dokumentu, ale użycie tego narzędzia w oknie Export Preview jest dopiero pierwszym krokiem na drodze do eksportowania obrazków. Innymi słowy - mi­mo że narzędzie Export Area jest stosowane w oknie dokumentu, nie jest ono ele­mentem bezpośredniego podglądu i eksportu.

Istnieją dwie metody eksportowania skadrowanych wersji dokumentów. Możesz na­ry­so­wać ramkę kadrowania w oknie dokumentu za pomocą narzędzia Export Area i klik­nąć dwukrotnie ten obszar, aby otworzyć okno Export Preview lub najpierw otworzyć ok­no Export Preview i tam skadrować obrazek w obszarze podglądu. Po kliknięciu przy­cis­ku Export Area, znajdującego się w obszarze podglądu Export Preview, obrazek zos­ta­nie otoczony znaną już ramką kadrowania (rysunek 15.25). Eksportowany obszar jest ogra­niczany za pomocą ośmiu uchwytów. Oryginalny obrazek w czasie eksportu nie jest kadrowany ani modyfikowany w żaden sposób.

Rysunek 15.25. W Fireworks możesz wizualnie kadrować obrazki bezpośrednio w oknie Export Preview
		W przeciwieństwie do narzędzia Crop znajdującego się w palecie na­rzę­dziowej, narzędzie do kadrowania dostępne w oknie Export Preview nie może być używane do powiększania obszaru roboczego.

W trakcie kadrowania obrazka w oknie Export Preview, w panelu File (Plik) wy­świe­tla­ne są współrzędne X i Y lewego górnego wierzchołka oraz wysokość i szerokość eks­por­to­wa­nego obszaru. Numeryczne informacje o kadrowaniu są aktualizowane po każ­dej zmianie położenia uchwytów kadrowania. Możesz również skadrować obrazek za pomocą pre­cyzyjnych wartości numerycznych wprowadzanych w odpowiednie pola tekstowe, znaj­dujące się w sekcji Export Area.

	Możesz także kadrować obrazki poprzez stworzenie ramki kadro­wa­nia w oknie dokumentu za pomocą narzędzia Export Area (aparat foto­gra­ficzny, który znajduje się w grupie narzędzia Pointer) i dwukrotne klik­nięcie powstałego obszaru. Zostanie wówczas otwarte okno dia­lo­go­we Export Preview, w którym będziesz mógł wyeksportować ska­dro­wa­ny obrazek bez żadnego wpływu na jego oryginalną wersję.

Aby wizualnie skadrować obrazek:

326. Wybierz narzędzie Export Area, znajdujące się poniżej obszaru podglądu lub op­cję Export Area w zakładce File. Obrazek zostanie otoczony ramką z uchwy­ta­mi kadrowania.

327. Przeciągnij uchwyty w nowe położenia tak, aby w obszarze podglądu wy­świe­tla­ny był ten fragment obrazka, który chcesz wyeksportować.

328. Wybierz dowolne narzędzie (Pointer lub Zoom) lub kliknij przycisk Set De­faults (Ustaw wartości domyślne) albo Next, aby zatwierdzić kadrowanie.

Aby numerycznie skadrować obrazek:

329. W zakładce File zaznacz opcję Export Area.

330. Zdefiniuj nowe współrzędne lewego górnego wierzchołka grafiki poprzez wpi­sa­nie nowych wartości w polach tekstowych X i (lub) Y, a następnie wciśnij kla­wisz Tab, aby zatwierdzić te wartości.

331. Zdefiniuj nowe wymiary obrazka poprzez wpisanie nowych wartości w polach teks­towych W (Width - Szerokość) i H (Height - Wysokość), a następnie wciś­nij klawisz Tab, aby zatwierdzić te wartości.

Obie metody kadrowania: wizualną i numeryczną można wykorzystywać razem lub nie­zależnie od siebie. Kliknij zakładkę File, wybierz narzędzie Export Area i wizualnie ska­druj eksportowany obszar. Po zwolnieniu przycisku myszy automatycznie zostaną uak­tualnione numeryczne wartości wyświetlane w zakładce File. I odwrotnie - zmiana war­tości numerycznych spowoduje utworzenie nowej ramki kadrowania.

Skalowanie eksportowanych obrazków

Zbyteczna wydaje się uwaga, że „grafika internetowa występuje w wielu kształtach i roz­­miarach”, ale należy jednak wspomnieć, że ta sama grafika internetowa często występuje w różnych kształtach i rozmiarach. Wielokrotne wykorzystywanie tych samych ele­men­tów graficznych jest często spotykaną praktyką we wszystkich mediach, a szczególnego zna­czenia technika ta nabiera w projektowaniu dla Internetu. Fireworks i jego okno dia­lo­gowe Export Preview pozwalają na łatwe eksportowanie grafik utworzonych poprzez ska­lowanie lub kadrowanie głównego pliku.

Kontrolki skalowania znajdziesz na zakładce File okna dialogowego Export Preview. Gra­fikę można przeskalować, podając wartości procentowe lub jej dokładne wymiary w pik­selach. Domyślnie skalowanie odbywa się z zachowaniem niezmiennych proporcji po­między wysokością i szerokością grafiki, ale możesz wyłączyć opcję Constrain i zmie­­niać te wymiary niezależnie.

Aby przeskalować obrazek:

332. Kliknij zakładkę File okna dialogowego Export Preview.

333. Aby procentowo przeskalować obrazek, użyj suwaka % lub wpisz odpowiednią war­tość bezpośrednio w polu tekstowym.

Wartości suwaka % należą do zakresu od 1 do 200%, ale w polu tekstowym mo­żesz wpisać dowolną inną wartość.

291. Aby przeskalować obrazek do dokładnych wymiarów, wpisz odpowiednie war­toś­ci w polach tekstowych W (Width - Szerokość) i (lub) H (Height - Wyso­kość).

Jeżeli zaznaczona jest opcja Constrain, wpisz wartość tylko w jednym polu teks­towym i wciśnij klawisz Tab. Drugi wymiar zostanie automatycznie obli­czo­ny na podstawie oryginalnych proporcji obrazka.

292. Aby zmienić proporcje obrazka, usuń zaznaczenie opcji Constrain i powtórz po­przednią czynność.

Jedną z moich ulubionych metod optymalizacji jest skalowanie obraz­ków przed eksportem do 50% ich oryginalnej wielkości i umie­szcza­nie na stronie WWW w dwa razy większym rozmiarze. Podwojenia rozmiarów gra­fiki można dokonać za pomocą znacznika img. Działania takie wy­wo­łują przeważnie łatwe do zauważenia zniekształcenia obrazka, ale częs­to są one do przyjęcia, zwłaszcza w przypadku obrazków posia­da­ją­cych duże obszary jednolitych kolorów. Jedno jest pewne - nie ma szyb­szego sposobu na zmniejszenie rozmiarów eksportowanego pli­ku. Wypróbuj tę technikę i zobacz, czy sprawdzi się w Twoich zasto­so­waniach.

Korzystanie z kreatorów eksportu

Fireworks posiada ogromną liczbę różnych funkcji eksportu, która może być niekiedy przy­tłaczająca dla początkujących projektantów grafiki internetowej. Jeśli nie jesteś pe­wien, jak najlepiej rozpocząć optymalizację swoich obrazków, pozwól, aby przez cały pro­ces poprowadził Cię kreator eksportu (Export Wizard XE "Export Wizard" ). Oprócz oryginalnego kreatora Ex­port Wizard, który jest bardzo pomocny przy wyborze właściwego formatu pliku, Fire­works posiada także kreatora Export to Size Wizard (Kreator eksportu do rozmiaru), umo­żliwiającego ograniczanie rozmiarów plików.

Jeśli jesteś gotów do wyeksportowania swojej grafiki, ale nie wiesz jak to zrobić, wy­wo­łaj kreatora eksportu Fireworks, który nie tylko pomoże Ci określić najlepszy dla Two­ich zastosowań format pliku, ale dostarczy wielu innych wskazówek. Doświadczeni pro­jektanci grafiki także mogą korzystać z kreatora eksportu, aby szybko przygotować so­bie grunt pod dalszą optymalizację.

Bez względu na wybór dokonany przez kreatora eksportu, zawsze poprowadzi on użyt­kow­nika do okna Export Preview, opisywanego szczegółowo w poprzednich podroz­dzia­łach. Możesz zaakceptować ustawienia proponowane przez kreatora eksportu (i klik­nąć przycisk Next, aby zakończyć operację) lub przed eksportem zmodyfikować nie­które ustawienia.

Oto trzy główne zastosowania kreatora eksportu:

• Pomoc w wyborze odpowiedniego formatu pliku.

• Przedstawianie sugestii dotyczących optymalizacji obrazka, prezentowanych po dokonaniu wyboru for­matu pliku.

• Rekomendacja trybów eksportu, które umożliwiają zredukowanie pliku do okre­ślonych rozmiarów.

Aby użyć kreatora eksportu do wybrania właściwego formatu pliku:

334. Wybierz z menu polecenie FileExport Wizard.

Zostanie wyświetlony początkowy ekran kreatora eksportu (rysunek 15.26).

Rysunek 15.26. Kreator eksportu jest dobrym punktem wyjścia przy wyborze parametrów eksportu

293. Pozostaw zaznaczoną opcję Select an export format (Wybierz format eksportu) i kliknij przycisk Continue.

294. Pojawi się kolejny ekran kreatora eksportu pozwalający wybrać przeznaczenie grafiki:

• The Web (Internet). Ogranicza opcje eksportu do najpopularniejszych for­ma­tów internetowych: GIF i JPEG.

• An image-editing application (Aplikacja do edycji grafiki bitmapowej). Wy­biera najlepszy format dla edycji obrazka w innej aplikacji, na przykład Pho­toshopie. Najczęściej Fireworks wybiera format TIFF.

• Desktop publishing application (Aplikacja do składu komputerowego). Wy­biera format najlepiej sprawdzający się w druku, a jest to przeważnie TIFF.

• Dreamweaver. Tak samo jak opcja The Web, ogranicza opcje eksportu do naj­popularniejszych formatów internetowych: GIF i JPEG.

	Jeśli dokument składa się z klatek, kreator eksportu zapyta Cię, czy chcesz go wyeksportować jako animowanego GIF-a, przycisk rea­gu­jący na zdarzenia myszy obsługiwane przez JavaScript czy też jako po­jedynczy obrazek.

295. Po dokonaniu wyboru kliknij przycisk Continue.

Fireworks wyświetli wyniki analizy obrazka wraz z sugestiami, dotyczącymi moż­liwości późniejszego zawężenia selekcji, jeśli zaproponowany zostanie wię­cej niż jeden format pliku.

	Jeśli dla dokumentu, który składa się z wielu klatek, wybierzesz for­mat Animated GIF (Animowany GIF), będziesz musiał kliknąć okno Pre­view, aby w palecie Options wyświetlić szczegółowe informacje o pli­ku.

296. Kliknij przycisk Exit, aby otworzyć okno dialogowe Export Preview i do­koń­czyć proces eksportu.

Jeśli jako miejsce przeznaczenia dla eksportowanego pliku wybierzesz opcję The Web lub Dreamweaver, Fireworks przedstawi porównanie dwóch formatów plików: GIF i JPEG. Plik wyświetlany w górnej części okna Preview ma najmniejszy rozmiar fizyczny. Fire­works jest dość ostrożny w tej części kreatora eksportu i nie próbuje drastycznie zre­du­ko­wać rozmiaru pliku kosztem jakości obrazka.

Jeśli chciałbyś, aby program ograniczył eksportowany format pliku do określonych roz­mia­rów, zaznacz wyświetlaną w pierwszym ekranie kreatora eksportu opcję Target Export File Size (Docelowy rozmiar eksportowanego pliku). Po włączeniu tej opcji bę­dziesz musiał w odpowiednim polu tekstowym wpisać docelowy rozmiar pliku, który zaw­sze mierzony jest w kilobajtach. Po zdefiniowaniu rozmiaru pliku kliknij przycisk Con­tinue, aby Fireworks mógł obliczyć pozostałe ustawienia eksportu.

Gdy Fireworks próbuje dostosować ustawienia eksportu grafiki do określonego roz­mia­ru pliku, eksportuje obrazek nawet do dwunastu razy, aby osiągnąć jak najlepszy roz­miar pli­ku przy jak najmniejszej kompresji. Mimo że metoda ta jest bardzo szybka, pro­ces eks­por­tu dużej grafiki może potrwać nawet kilka minut. Dla grafiki przeznaczonej do wy­ko­rzys­ta­nia w Internecie, Fireworks proponuje do wyboru dwa pliki o roz­miarach równych lub mniejszych od zdefiniowanych.

Oprócz możliwości określenia rozmiaru pliku w kreatorze Export Wizard, możesz także za pomocą przycisku, znajdującego się w panelu Options okna dialogowego Export Pre­view, wywołać kreatora Export to File Size Wizard (Kreator eksportu do rozmiaru). Kre­ator ten otwiera proste okno dialogowe, w którym możesz wpisać żądany rozmiar pli­ku. Za­sadnicza różnica pomiędzy nim a opcją Export File Size kreatora Export Wizard po­le­ga na tym, że kreator Export to File Size pracuje jedynie z bieżącym formatem pliku (nie są oferowane żadne alternatywy). W konsekwencji kreator Export to File Size jest szyb­szym narzędziem, ale przeznaczonym dla zaawansowanych użytkowników, którzy ro­zu­mieją różnice pomiędzy formatami plików.

Dodatkowe opcje eksportu XE "dodatkowe opcje eksportu"

W większości przypadków grafika jest eksportowana z Fireworks w postaci pojedynczych obrazków, dokumentów HTML z osobnymi plastrami obrazka lub jako pozycja Deamweaver Library. Fire­works oferuje jednak kilka dodatkowych opcji eksportu. Eksportować można:

• Warstwy, klatki lub plastry Fireworks jako warstwy kaskadowego arkusza stylów (CSS) w dokumencie HTML, które można wykorzystywać w prze­glądarkach obsługujących dynamiczny HTML (DHTML).

• Warstwy lub plastry Fireworks jako dokument HTML dla łatwego importu do Macromedia Director.

• Warstwy dokumentu Fireworks jako osobne pliki obrazków.

• Ramki Fireworks jako osobne pliki obrazków.

• Cztery ramki przycisku reagującego na zdarzenia myszy jako format Image Well, który jest używany przez Lotus Domino Designer.

• Grafikę wektorową jako film Flash.

• Grafikę wektorową w formacie Adobe Illustrator.

• Cały dokument Fireworks jako wielowarstwowy dokument Photoshopa, odpowiedni dla dalszej edycji w Photoshopie.

Wszystkie dodatkowe metody eksportu znajdują się na liście opcji Save as type (Save As w MacOS) w oknie dialogowym Export (rysunek 15.27). Aby otworzyć okno dialogowe Export, wybierz polecenie FileExport.

Rysunek 15.27. Lista opcji Save as type (Save As) w oknie dialogowym Export jest pomocna w wielu różnych sytuacjach
		Niezależnie od tego, którą funkcję eksportu chcesz wyko­rzystać, format pliku i inne ustawienia optymalizacji determinowane są bieżącymi ustawieniami palety Optimize.
		Pozycje HTML and Images oraz Dreamweaver Library, znajdujące się na liście opcji Save as type w oknie dialogowym Export, są opisane w rozdziale 21.

Eksportowanie jako warstwy CSS XE "Eksportowanie jako warstwy CSS"

Warstwa to termin dość często spotykany w grafice internetowej. Dla użytkownika Photoshopa, jest ona jednostką umożliwiającą przechowywanie pojedynczych elemen­tów graficznych. W Fireworks „warstwa” może przechowywać dowolną liczbę obiek­tów i jest bardzo przydatnym narzędziem organizacyjnym. W dynamicznym HTML-u i na­rzędziach do tworzenia stron WWW, takich jak Dreamweaver, „warstwa” jest ro­dza­jem pojemnika, który może być precyzyjnie sytuowany, ukrywany, wyświetlany lub poruszany po ekranie. Te typy warstw są tworzone z wykorzystaniem stan­dar­du znanego jako Cascading Style Sheets (Kaskadowe arkusze stylów - CSS). Fire­works umożliwia zapisanie dowolnych elementów grafiki — warstw, klatek i plastrów, wraz z kodem HTML, opartym na CSS. Funkcja ta pozwala na uzyskanie różnych efektów, na przykład „latających” przycisków (rysunek 15.28).

Rysunek 15.28. Widoczne na rysunku przyciski zostały wyeksportowane z Fireworks jako oddzielne warstwy CSS i są animowane w Dreamweaverze

Aby wyeksportować elementy grafiki Fireworks jako warstwy CSS:

335. W palecie Optimize określ format pliku i ustawienia optymalizacji.

336. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export.

297. Z listy Save as type (Save As) wybierz CSS Layers.

Program przedstawi dalsze opcje związane z eksportowaniem warstw CSS.

298. Z listy opcji Source wybierz elementy Fireworks, które chcesz eksportować jako warstwy CSS. Do wyboru masz: Fireworks Layers (War­stwy), Fireworks Slices (Plastry) lub Fireworks Frames (Klatki).

299. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych.

Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka.

300. Jeżeli eksportujesz ramki, zaznacz pole Current Frame Only, aby ograniczyć operację eksportu tylko do bieżącej ramki.

301. Zaznacz pole Put Images in Subfolder, aby program umieścił pliki obrazków w ich własnym katalogu.

Kliknij przycisk Browse, aby wybrać odpowiedni katalog.

302. Kliknij przycisk Save.

Po ukończeniu procesu eksportu otrzymasz pojedyncze obrazki i kod HTML wymagany do rozmieszczenia ich na własnych warstwach CSS. Aby użyć warstw na stronie WWW, musisz dołączyć do niej wygenerowany przez Fireworks kod HTML. Zadanie to możesz wykonać w dowolnym programie do tworzenia stron WWW, który oferuje bez­pośredni dostęp do kodu HTML. Początkowo wygląd kodu może Cię przerażać, ale ważne są tylko otwierające i zamykające go zdania wyrażone w prostym języku angielskim. W dogodnym dla Ciebie edytorze tekstu lub HTML zaznacz kod występujący między wierszem

<! ---------- BEGIN COPYING THE CODE HERE ---------- >

i wierszem

<! ---------- STOP COPYING THE CODE HERE ---------- >

Po zaznaczeniu skopiuj go, a następnie otwórz stronę HTML i wklej zawartość schowka w dowolnym miejscu części <body>. Teraz możesz już manipulować warstwami w pro­gra­mie do tworzenia stron WWW.

Użytkownicy Dreamweavera nie muszą wykorzystywać okna HTML Sour­ce (Źródło HTML) ani żadnego innego narzędzia tekstowego, aby ko­piować i wklejać kod generowany przez Fireworks. W Dream­wea­verze wystarczy znaleźć znaczniki Invisible Elements (Niewidzialne ele­men­ty) otaczające kod nowej warstwy, a po obu stronach warstwy zos­tanie wyświetlony symbol reprezentujący w Dreamweaverze ko­men­tarz języka HTML. Zaznacz wszystkie takie symbole, a następnie sko­piuj je i wklej do dokumentu. Aby użyć tej techniki, musisz włączyć op­cję Invisible Elements.

Eksportowanie dla programu Director XE "Eksportowanie pojedynczych plastrów"

Fireworks stanowi główny element w Director Shockwave Internet Studio firmy Macromedia i jako taki zawiera dodatkowe funkcje upraszczające tworzenie i edytowanie bitmap do wykorzystania w programie Director. Przyciski i elementy reagujące na zdarzenia myszy stworzone w Fireworks mogą być eksportowane jako obrazki i HTML, które mogą być następnie importowane do Macromedia Director. Program Director konwertuje następnie behawiory Fireworks na behawiory programu Director. Dodatkowo każdy obiekt lub każda warstwa Fireworks w programie Director ma swój anti-aliasing i przezroczystość alfa.

	Eksportowanie do programu Director było uprzednio możliwe jako dodatek do Fireworks 3, teraz w Fireworks 4 jest standardem.

Aby wyeksportować dokument Fireworks dla programu Director:

337. Wybierz polecenie File⇒Export.

Pojawi się okno dialogowe Export.

338. Z listy opcji Save as type (Save As) wybierz Director (.htm).

303. Z listy Source wybierz Firework Frames lub Fireworks Layers.

304. Zaznacz opcję Trim images, aby eksportować poszczególne elementy na jak najmniejszym rozmiarze obszaru roboczego.

305. Kliknij przycisk Save (Zapisz).

	Do importowania kodów HTML generowanych w Fireworks niezbędny jest Director 7 lub nowszy, a czasami również Director Xtra. Sprawdź dokumentację programu Director lub stronę WWW Macromedia.

Eksportowanie plików XE "Eksportowanie plików"

Niekiedy będziesz musiał podzielić elementy składowe twojej grafiki (warstwy i klatki) na pojedyncze pliki graficzne. Niektóre z tych elementów będziesz praw­do­po­dob­nie musiał wykorzystać w innych częściach witryny internetowej lub przetworzyć w in­nej aplikacji przed ich ponownym umieszczeniem w Fireworks. Jakikolwiek jednak był­by powód takiego działania, Fireworks oferuje prostą metodę generowania poje­dyn­czych plików graficznych.

	W rozdziale 20. dowiesz się jak eksportować pojedynczy plaster jako plik obrazka.

Aby wyeksportować elementy dokumentu Fireworks jako oddzielne pliki:

339. W palecie Optimize określ format pliku i ustawienia optymalizacji.

340. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export.

306. Aby eksportować ramki jako pliki, z listy Save as type (Save As) wybierz Frames to Files; aby eksportować warstwy jako pliki, wybierz Layers to Files.

307. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych.

Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka.

308. Kliknij przycisk Save.

	Ustawiając w odpowiednich paletach widzialność warstw i klatek, mo­żesz decydować o tym, które z nich zostaną wyeksportowane. Wi­dzial­ność jest reprezentowana za pomocą ikony oka znajdującej się w skraj­nej lewej kolumnie palety, obok nazwy klatki lub warstwy. Jeśli przed wybraniem polecenia Export warstwa lub klatka była nie­widzialna - nie zostanie wyeksportowana.

Eksportowanie w formacie Image Wells XE "Eksportowanie w formacie Image Wells"

Format Image Wells jest używany w programie Lotus Domino Designer do two­rze­nia elementów, reagujących na zdarzenia myszy. Podczas gdy Fireworks do opra­co­wa­nia poszczególnych stanów przycisku (normalny, pod wskaźnikiem myszy, wciśnięty, wciś­nięty pod wskaźnikiem myszy) używa klatek, Domino Designer posługuje się obraz­kami w formacie Image Wells. Image Well jest pojedynczym plikiem graficznym skła­dającym się z poszczególnych klatek oddzielanych od siebie za pomocą pionowej linii o szerokości jednego pik­sela (rysunek 15.29).

Rysunek 15.29. Grafika wyeksportowana w formacie Image Well może być wykorzystywana w programie Lotus Domino Designer do tworzenia elementów reagujących na zdarzenia myszy
		Obrazek zapisany w formacie Image Well jest bardzo podobny do czte­rech stanów przycisku w Fireworks, ale nie jest taki sam. Dwa ostatnie sta­ny przycisku: pod wskaźnikiem myszy i wciśnięty pod wskaźnikiem my­szy są umieszczone odwrotnie niż w Fireworks. Fireworks „ro­zu­mie” tę różnicę i eksportuje obrazki Image Wells w odpowiednim for­macie.

Funkcja ta jest szczególnie przydatna do konwersji istniejących wieloklatkowych obraz­ków do formatu Image Well, który może być wykorzystywany jako przyciski, reagujące na zdarzenia myszy. Aby wyeksportować grafikę w formacie Image Well:

341. W palecie Optimize określ format pliku i ustawienia optymalizacji.

342. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export.

309. Z listy Save as type (Save As) wybierz Flotus Domino Designer.

310. Wybierz Fireworks Frames, Fireworks Layers lub Fireworls Slices z listy opcji Source, aby utworzyć Image Well odpowiednio z klatek, warstw lub plastrów.

311. Zaznacz opcję Trim Images, aby eksportowane elementy miały jak najmniejsze roz­miary obszarów roboczych.

Jeżeli opcja Trim Images nie będzie zaznaczona, każdy z eksportowanych pli­ków będzie miał wielkość oryginalnego obrazka.

312. Kliknij przycisk Save.

Fireworks zapisze dokument jako Image Well w formacie, określonym w palecie Optimize.

Eksportowanie wektorów XE "Eksportowanie wektorów"

Obiekty wektorowe mogą być eksportowane jako filmy Flash SWF lub jako dokumenty Adobe Illustratora. Format Flash może być oglądany bezpośrednio w większości przeglądarek internetowych, natomiast format Illustratora może być importowany do większości aplikacji do rysowania, jak Adobe Illustrator czy Macromedia FreeHand.

Pamiętać należy o tym, że w Fireworks podczas pracy z wektorami program wy­ko­rzys­tuje wektorowe linie tylko jako „szkielet”, na którym umieszczane są bitmapy i efekty bit­mapowe, takie jak zewnętrzne cienie i fazy. Możliwość eksportu szkieletu grafiki jest przy­datną funkcją, ale eksportowane obiekty są najczęściej tylko trochę zbliżone do ich odpo­wiedników w Fireworks (rysunek 15.30).

Rysunek 15.30. Obiekt Fireworks (po lewej) jest kształtem wektorowym, ale jego wygląd jest uzależniony od efektów i ustawień obrysu. Po wyeksportowaniu w formacie Flash SWF, w obiekcie pozostają jedynie wektorowe linie

Aby wyeksportować kształt wektorowy z Fireworks:

343. Wybierz File⇒Export.

Program wyświetli okno dialogowe Export.

344. Aby wyeksportować jako plik Flash, wybierz Macromedia Flash SWF z listy Save as type (Save As). Aby wyeksportować w formacie Illu­stra­to­ra, wybierz Illustrator 7.

	Eksport dla Illustratora jest zgodny z Adobe Illustratorem 7 i może nie dawać oczekiwanych rezultatów w przypadku aplikacji korzystających z wcześniejszych lub późniejszych wersji formatu Illustratora.

313. Kliknij przycisk Option, aby ustawić opcje eksportu, specyficzne dla danego formatu.

Fireworks wyświetli okno dialogowe specyficzne dla eksportowanego formatu (ry­sunek 15.31).

Rysunek 15.31. W zależności od wybranego formatu plików ustaw opcje eksportu wektorów w oknie dialogowym Macromedia Flash SWF Export Options (po lewej) lub w oknie Illustrator Export Options

314. Jeśli chcesz wyeksportować grafikę jako plik Macromedia Flash SWF, ustaw następujące opcje:

• W sekcji Objects (Obiekty) wybierz opcję Paths (Ścieżki), aby wyeks­por­to­wać ścieżki lub opcję Maintain Appearance (Utrzymaj wygląd), aby wyeks­por­tować obrazki JPEG. Jeżeli wybierzesz opcję Maintain Appearance, za po­mocą suwaka JPEG Quality możesz zdefiniować jakość eksportowanych JPEG-ów.

• W sekcji Text (Tekst) określ, czy chcesz utrzymać możliwość edycji tekstu (Maintain Editability) czy też przekonwertować go na ścieżki (Convert to Paths).

• W sekcji Frames określ, czy chcesz wyeksportować wszystkie klatki doku­men­tu (All) czy też jedynie ich zakres (From:...to).

• W polu tekstowym Frame Rate wpisz docelowe tempo odtwarzania klatek lub skorzystaj z ustawienia domyślnego, wynoszącego 15.

Kliknij przycisk OK.

315. Jeśli chcesz wyeksportować grafikę jako dokument Illustratora 7, ustaw na­stępujące opcje:

• W sekcji Frames (Klatki) określ, czy chcesz wyeksportować jedynie bie­żą­cą klatkę dokumentu (Export Current Frame Only) czy też wszystkie klatki Fireworks jako warstwy Illustratora (Convert Frames to Layers).

• Jeżeli będziesz chciał wykorzystać eksportowany plik w programie Macro­me­dia FreeHand, zaznacz pole wyboru FreeHand 8 Compatible.

Kliknij OK.

316. W oknie dialogowym Export kliknij przycisk Save.

Kształty wektorowe znajdujące się w Twoim dokumencie zostaną wyeksportowane w wy­­branym formacie.

Jeśli posiadasz odtwarzacz Flash Player, kliknij dwukrotnie plik Flash SWF, aby go otwo­rzyć. Jeśli nie masz tego odtwarzacza, możesz obejrzeć plik Flash SWF za pomocą przeglądarki internetowej, która jest wyposażona w rozszerzenie Flash Player lub w QuickTime Player.

Jeśli wyeksportujesz wektory jako dokument Illustratora 7, będziesz mógł go otworzyć w programie Illustrator, FreeHand lub innej aplikacji wektorowej.

Eksportowanie dokumentów Photoshopa

Eksportowanie dokumentów Fireworks w formacie Photoshopa umożliwia ich otwieranie i edycję w Photoshopie, przy równoczesnym zachowaniu możliwości edycji pojedynczych obiektów, obiektów tekstowych i efektów Live Effects. Można później ponownie zaimportować dokument Photoshopa do Fireworks, w celu dalszej edycji i optymalizacji. Jest to bezcenna funkcja, gdy korzystamy z obu aplikacji lub gdy korzystają z nich członkowie tej samej grupy roboczej.

	Eksportowanie formatu Photoshopa jest nowością w Fireworks 4.

Aby wyeksportować dokument Fireworks jako dokument Photoshopa:

1. Wybierz File⇒Export.

Program wyświetli okno dialogowe Export.

2. Z listy Save as type (Save As) wybierz Photoshop PSD.

	PSD odnosi się do PhotoShop Document i jest również standardowym rozszerzeniem dokumentów Photoshopa: „.psd”.

3. Z listy Settings wybierz jedno z poniższych:

• Opcja Maintain Editability over Appearance (Zachowaj możliwość edycji) prowadzi do bezpośredniej konwersji elementów Fireworks na elementy Photoshopa, ale nasza praca po otwarciu w Photoshopie może wyglądać nieco odmiennie. Opcja ta jest ustawiona jako domyślna i najczęściej daje najlepsze rezultaty.

	Zawsze, nawet po dokonaniu eksportu do formatu Photoshopa, warto zachować kopię oryginalnego dokumentu Fireworks. Szczególnie należy o tym pamiętać, wybierając opcję inną niż Maintain Editability over Appearance, gdyż wszystkie te opcje powodują odrzucenie lub spłaszczenie informacji edytowalnych.

• Opcja Maintain Firework Appearance (Zachowaj wygląd) konwertuje obiekty Fireworks na warstwy Photoshopa, ale renderuje efekty i przekształca obiekty tekstowe na obrazy bitmapowe, dzięki czemu kosztem możliwości edycji uzyskujemy zachowanie wyglądu grafiki.

• Opcja Smaller Photoshop File (Mały plik Photoshopa) dokonuje konwersji warstw Fireworks na warstwy Photoshopa, spłaszczając wszystkie obiekty na każdej warstwie Fireworks.

• Opcja Custom (Ustawienia użytkownika) umożliwia wybranie, czy zachować, czy spłaszczyć warstwy, oraz czy zachować, czy renderować tekst i efekty.

4. Po zakończeniu kliknij Save.

Fireworks wyeksportuje dokument Photoshopa, gotowy do otwarcia w tym programie.

	Importowanie plików zawierających ponad 100 warstw wymaga stosowania Photoshopa 6 lub nowszego. Korzystając z Photoshopa 5.5 lub starszego, należy spłaszczyć lub usunąć z dokumentu Fireworks niektóre obiekty lub warstwy.

Podsumowanie

Każda grafika utworzona lub zmodyfikowana w Fireworks może być wyeksportowana i wy­korzystana w Internecie lub innej aplikacji. Przy tworzeniu grafiki internetowej klu­czo­wą sprawą jest zredukowanie rozmiaru pliku, dlatego też Fireworks oferuje szeroki za­kres różnych funkcji eksportu. Podczas optymalizacji i eksportowania grafiki po­wi­nie­neś pamiętać o następujących rzeczach:

• Dobrze jest zatrzymać co najmniej dwie ostatnie wersje tworzonego pliku: jed­ną w formacie PNG Fireworks jako kopię główną i drugą w dowolnym formacie eksportowanym do wykorzystania w Internecie.

• Głównym celem eksportu grafiki jest utworzenie jak najlepiej wyglądającego obrazka o jak najmniejszym rozmiarze pliku. Na tym właśnie polega opty­ma­li­za­cja grafiki.

• Fireworks oferuje teraz dostęp do wszystkich opcji optymalizacji i eksportu bez­pośrednio w obszarze roboczym. Jest to możliwe dzięki paletom Optimize, Color Table i Frames oraz zakładkom okna dokumentu. Optymalizację i eks­port grafiki możesz również przeprowadzić za pomocą okna dialogowego Ex­port Preview, wyświetlanego po wybraniu z menu polecenia FileExport Preview.

• Fireworks oferuje możliwość porównania czterech różnych ustawień eks­por­to­wa­nej grafiki, co pozwala na szybkie ocenienie wyglądu grafiki oraz rozmiaru jej pliku i przybliżonego czasu pobierania.

• Każdy z dwóch najważniejszych formatów graficznych używanych w Inter­ne­cie: GIF i JPEG najlepiej sprawdza się z innym typem obrazków. Format GIF jest najlepszym wyborem dla grafiki z dużymi obszarami jednolitych kolorów, w których ważnym parametrem jest przezroczystość, na przykład logo. Format JPEG sprawdza się doskonale w obrazkach, które posiadają wiele poziomów to­nalnych i płynne przejścia kolorów, takich jak fotografie.

• Inny format grafiki - PNG - jest coraz szerzej akceptowany w Internecie, ale nie jest w pełni obsługiwany przez żadną przeglądarkę internetową. Format ten po­siada wiele zalet, na przykład pełną obsługę przezroczystości alfa i korekcji gam­ma, które zacierają różnice w wyświetlaniu grafiki na różnych platformach sprzę­towych.

• W czasie eksportu obrazków za pomocą okna dialogowego Export Preview moż­na je łatwo skalować i kadrować.

• Zaawansowane możliwości sterowania kolorem w Fireworks umożliwiają blo­ko­wanie lub zastępowanie kolorów w indeksowanych paletach.

• Fireworks oferuje kreatory eksportu, pomocne w eksportowaniu grafiki.

• Oprócz eksportowania standardowych obrazków, Fireworks umożliwia także eks­portowanie na wiele sposobów poszczególnych elementów grafiki, takich jak warstwy, klatki i plastry. Fireworks pozwala nawet na wyeksportowanie we­k­to­rowych obiektów jako plików Flash SWF lub dokumentów Adobe Illu­stratora.

• Fireworks umożliwia eksportowanie do formatu Adobe Photoshopa, z zachowaniem możliwości edytowania poszczególnych elementów.

W następnym rozdziale dowiesz się, jak zapewnić spójny wygląd grafiki internetowej za pomocą stylów Fireworks.




Rozdział 16.
Praca ze stylami Fireworks

W tym rozdziale:

• Podstawowe wiadomości o stylach.

• Praca z paletą Styles.

• Tworzenie własnych stylów.

• Zarządzanie bibliotekami stylów.

• Technika Fireworks: Wydobywanie tekstur i deseni ze stylów.

Może nie jest to tak oczywiste dla początkujących projektantów, ale grafika internetowa jest równie często powielana, co tworzona. Po ustaleniu określonego schematu wyglądu gra­fiki (zapewnianego przez palety kolorów, czcionki, efekty i inne atrybuty), często musi on zostać zachowany na wielu różnych stronach WWW. Konieczność utrzymania spój­nego wyglądu grafiki dyktowana jest kilkoma czynnikami:

• Utrzymanie spójnego wyglądu elementów graficznych jest jedną z naj­waż­niej­szych zasad w projektowaniu dla Internetu.

• W komercyjnych witrynach internetowych, spójny wygląd elementów gra­ficz­nych służy przekazowi określonych informacji marketingowych i utrzymaniu wi­zerunku.

• Spójność elementów graficznych ułatwia użytkownikom nawigację wewnątrz wi­tryny internetowej. Jeśli przyciski nawigacyjne na każdej stronie witryny wy­glądają tak samo, użytkownik szybko nauczy się poruszać wewnątrz wit­ry­ny, nawet jeśli odwiedza ją po raz pierwszy.

Jednak bez względu na wyżej wymienione powody, utrzymanie spójności elementów gra­ficznych wymaga wiele pracy i uwagi. Fireworks przychodzi na ratunek pro­jek­tan­tom grafiki internetowej i pozwala im zaoszczędzić wiele czasu i pracy za pomocą sty­lów. Wykorzystując style, możesz łatwo nadać dowolnemu obiektowi graficznemu okre­ślony wygląd. Pojedynczy styl może zawierać wiele różnych definiowanych przez użyt­kownika atrybutów. Co więcej - z tych samych stylów można korzystać w wielu róż­nych dokumentach. Style zaprojektowane przez firmę Macromedia są także prze­noś­ne,

co oznacza, że możesz je eksportować i importować. Funkcja ta pozwala projek­tan­tom two­rzyć biblioteki dla różnych klientów. Style bez wątpienia umożliwiają znaczne zwięk­szenie wydajności pracy każdego projektanta grafiki internetowej.

Podstawowe wiadomości XE "style:podstawowe wiadomości" o stylach

Każdy obiekt Fireworks składa się przeważnie z kilku różnych atrybutów: ścieżki, ob­ry­su, wypełnienia i jednego lub więcej efektów. Każdy z tych elementów może zostać roz­bity na kilka odrębnych części, na przykład obrys jest połączeniem typu obrysu i kon­kret­ne­go koloru. Zapewnienie spójnego wyglądu różnych obiektów graficznych wymaga zdu­pli­ko­wania wszystkich pojedynczych ustawień, co ooże być bardzo czasochłonne i po­wo­do­wać wiele pomyłek. Możesz wprawdzie skopiować obiekt do schowka, a następnie wkle­ić jego atrybuty do innego dokumentu, ale wymaga to wcześniejszego utworzenia odpo­wiedniego obiektu. Zamiast utrzymywania obiektów potrzebnych do odtworzenia ich wyglądu, Fireworks umożliwia odseparowanie atrybutów od obiektu i zachowanie ich w postaci stylu.

Fireworks oferuje bardzo nowatorską, graficzną metodę reprezentacji stylów, zapew­nia­ną przez paletę Styles (rysunek 16.1). Działając jako biblioteka atrybutów, paleta Sty­les umożliwia tworzenie, importowanie, eksportowanie, usuwanie i inne operacje na stylach.

Rysunek 16.1. Fireworks zawiera w palecie Styles standardowy zestaw stylów

Pop-up ... — Menu rozwijane

Button ... — Styl przycisku

Text ... — Styl tekstu

New ... — Nowy styl

Delete ... — Usuń styl

Style w palecie Styles są wizualnie podzielone na dwie różne grupy: style przycisków i sty­le tekstu. Jedyna różnica pomiędzy tymi dwoma typami stylów polega na tym, że sty­le tekstu zawierają dodatkowe informacje: typ, rozmiar i styl czcionki. Style przy­cis­ków są reprezentowane za pomocą kwadratowych ikon, zaś style tekstu za pomocą liter ABC, przy czym oba rodzaje reprezentacji przedstawiają rzeczywisty wygląd zawartych w sty­lach atrybutów. Fireworks posiada wbudowaną kolekcję dwudziestu stylów przy­cis­ków i dziesięciu stylów tekstu (które mogą zostać w każdej chwili przywrócone), zaś po­nad trzysta dodatkowych stylów można znaleźć na płycie instalacyjnej Fireworks oraz w Internecie, pod adresem www.macromedia.com/software/fireworks/download/styles. Je­śli domyślne style Fireworks nie spełniają Twoich oczekiwań, sprawdź, jak wyglądają po­zostałe.

	Na krążku CD-ROM, dołączonym do książki, znajdziesz dodatkową kolekcję stylów.

Mimo że paleta Styles podzielona jest na typy stylów przeznaczonych dla przycisków i dla tekstu, oba można stosować do dowolnych obiektów Fireworks. Innymi słowy sty­le przy­cisków mogą być stosowane do obiektów tekstowych, zaś style tekstu - do obiek­tów wekto­ro­wych. Wszystkie nieprzydatne informacje o stylu (takie jak kolor czcionki w przypadku obiektu wektorowego) są pomijane. Style przycisków można traktować ja­ko zwykłe style, zaś style tekstu jako „style z dodatkami”, czyli style zawierające dodatkowe in­formacje nieprze­szka­dzające w stosowaniu ich do przycisków lub innych obiektów gra­ficznych.

	Termin style jest powszechnie wykorzystywany w różnych programach kom­puterowych. W przeciwieństwie do stylów, które można znaleźć w edy­torach tekstu, style Fireworks nie przechowują połączeń po­mię­dzy ory­ginalnym stylem i obiektami, do których został on zastosowany. Je­śli zmo­dyfikujesz styl, wszystkie obiekty, do których został zastoso­wa­ny pozostaną niezmienione.

Stosowanie XE "style:stosowanie" stylów

Aby zastosować dowolny styl, musisz otworzyć paletę Styles. Możesz to zrobić w jeden z poniższych sposobów:

• Wybierz z menu polecenie WindowStyles.

• Użyj skrótu klawiaturowego Shift+F11 (Shift+F11).

• Kliknij zakładkę palety Styles, jeśli jest ukryta w grupie innych palet.

Po wyświetleniu palety Styles, zastosowanie stylu jest bardzo prostą czynnością: za­znacz obiekt, do którego chcesz zastosować styl i kliknij ikonę wybranego stylu w pa­le­cie Styles. Jeśli nie spodobają Ci się rezultaty przeprowadzonego formatowania, możesz wy­brać inny styl. Możesz nawet zduplikować obiekt i zastosować do poszczególnych kopii kilka różnych stylów, aby znaleźć ten, który Ci najbardziej odpowiada (rysunek 16.2).

		Zastosowanie jednego stylu usuwa wszystkie informacje o stylu po­przed­nim tylko wtedy, gdy oba style odnoszą się do tych samych ustawień. Ozna­cza to, że każdy styl może zawierać dowolne kombinacje usta­wień. Jednak po zastosowaniu do obiektu wielu stylów, zawierających tyl­ko kilka z możliwych ustawień, na przykład kolor wypełnienia i obry­su lub efekt, do obiektu zostanie zastosowana kombinacja tych wszys­tkich sty­lów. Załóżmy, że zastosujesz styl zawierający tylko zie­lo­ne wypeł­nie­nie, a następnie inny z efektem zewnętrznego cienia. W re­zultacie obiekt będzie posiadał zielone wypełnienie i zewnętrzny cień.
Rysunek 16.2. Zastosowanie różnych stylów do tego samego obiektu daje możliwość wybrania stylu najbardziej odpowiadającego Twoim potrzebom

Original path object — Oryginalny obiekt wektorowy

Modified with Styles — Obiekt po zastosowaniu stylów

Po zastosowaniu stylu, obiekt pozostaje od niego całkowicie niezależny. Nadal można go będzie modyfikować za pomocą ustawień dostępnych w paletach Stroke, Fill, Effects i Text. Nieważne, jakie zmiany zostaną wprowadzone do obiektu, do którego został za­sto­sowany styl, sam styl pozostanie przez cały czas niezmieniony.

Tworzenie nowych XE "style:tworzenie nowych" stylów

Korzystanie ze standardowych stylów (lub stylów znajdujących się na instalacyjnym dysku CD-ROM Fireworks) jest dobrym sposobem na szybkie tworzenie obiektów o spój­nym wyglądzie, ale niekiedy nie znajdziesz wśród nich takiego, który będzie Cię w pełni satysfakcjonował. Prawdziwą siłą stylów Fireworks jest to, że można je two­rzyć, zapisywać i wykorzystywać jako własne style. Wygląd dowolnego obiektu (jego ob­rys, wypełnienie, efekty lub ustawienia tekstu) zostanie określony przez parametr sty­lu, który będzie mógł być wykorzystywany wielokrotnie przez Ciebie i Twoich współ­pracowników.

Załóżmy, że tworzysz obiekt (powiedzmy, że przycisk) z precyzyjnie dostosowanym ob­rysem, doskonałym kolorem wypełnienia i kompleksowymi efektami złożonymi z wbu­dowanych zewnętrznych cieni i faz Fireworks oraz modułów dodatkowych Photoshopa, na przy­­kład filtrów z pakietu Kai Power Tools lub Eye Candy Alien Skin. Proces od­two­rze­nia tych ustawień może Ci zabrać nawet pięć minut, ale zamiast robić to ręcznie, mo­żesz za­znaczyć obiekt i utworzyć na jego podstawie nowy styl. Obrazek lub obiekt wek­to­ro­wy może mieć bardzo złożoną strukturę, więc utworzenie na jego podstawie stylu poz­woli Ci zaoszczędzić wiele czasu. Korzyści wynikające z tworzenia stylów są jeszcze więk­sze, gdyż wszystkie zawarte w nich efekty mogą być w dowolnym obiekcie mo­dy­fi­kowane i dostosowane do własnych potrzeb.

	Więcej o Live Effects i Xtras dowiesz się z roz­działu 12.

Aby utworzyć nowy styl:

317. Wybierz obiekt, na podstawie którego chcesz stworzyć nowy styl.

	Jeśli nowy styl chcesz utworzyć w oparciu o styl już istniejący, zasto­suj styl do wybranego obiektu, zmodyfikuj pożądane ustawienia i zacznij wykony­wa­nie procedury od drugiej czynności.

318. Jeśli nie widzisz na ekranie palety Styles, wybierz z menu polecenie Win­dowStyles, użyj skrótu klawiaturowego Shift+F11 (Shift+F11) lub klik­nij jej zakładkę, jeśli jest ukryta w grupie innych palet.

319. Kliknij znajdujący się u dołu palety Styles przycisk New Style (Nowy styl) (ar­kusz papieru). Zostanie otwarte okno dialogowe Edit Style (Edytuj styl) (rysu­nek 16.3).

Rysunek 16.3. Utwórz nowy styl zaznaczając odpowiednie opcje w oknie dialogowym Edit Style

320. W polu tekstowym Name wpisz nową nazwę dla tworzonego stylu.

Fireworks automatycznie nadaje nowym stylom nazwy Style 1, Style 2, Style 3 itd., odróżniając je w ten sposób od wbudowanych stylów, któ­re posiadają nazwy Style 01, Style 02, Style 03 itd. Możesz usu­nąć sugerowaną nazwę i wpisać własną. Musisz jednak wiedzieć, że Fire­works nie wykrywa konfliktów nazw stylów, więc może się zdarzyć, że utworzysz dwa lub więcej stylów o takich samych nazwach. Two­rzo­nym stylom staram się zawsze nadawać jak najbardziej opisowe naz­wy, które później są łatwiejsze do wywoływania i trudniej jest je po­wie­lić. Gdy przez kilka sekund pozostawisz kursor nad ikoną stylu w palecie Sty­les, Fireworks u dołu palety wyświetli nazwę tego stylu.

321. Wybierz ustawienia, które chcesz zapisać wraz z tworzonym stylem. Oto lista do­stępnych ustawień:

• Fill Type (Typ wypełnienia). Zapisuje kategorię wypełnienia (Solid - Jed­no­lite, Gradient, Web Dither - Dithering internetowy lub Pattern - Deseń), naz­wę gradientu lub desenia, ustawienia krawędzi (włączając stopień roz­my­cia) oraz wszystkie ustawienia tekstury (nazwę, natężenie i przez­ro­czystość).

• Fill Color (Kolor wypełnienia). Zapisuje kolory jednolitych wypełnień. W przy­padku wypełnień Gradient, Web Dither i Pattern, ich kolory zapi­sy­wa­ne są za pomocą opcji Fill Type.

• Stroke Type (Typ obrysu). Zapisuje kategorię i nazwę obrysu, wszystkie in­formacje o parametrach stempla (nawet jeśli został zmodyfikowany za po­mocą polecenia Edit Stroke), rozmycie krawędzi i ustawienia tekstury (jej naz­wę i natężenie).

• Stroke Color (Kolor obrysu). Zapisuje bieżący kolor obrysu obiektu.

• Effect (Efekt): Zapisuje ustawienia wszystkich (prostych: Inner Bevel, Outer Bevel, Drop Shadow, Glow, Emboss lub złożonych) Live Effects zasto­so­wa­nych do obiektu.

• Text Font (Typ czcionki). Zapisuje nazwę bieżącej czcionki obiektu te­ks­towego.

• Text Size (Rozmiar czcionki). Zapisuje bieżący rozmiar czcionki obiektu tekstowego.

• Text Style (Styl czcionki). Zapisuje styl czcionki (pogrubiona, kursywa lub pod­kreślenie obiektu tekstowego).

322. Kliknij przycisk OK.

Wiesz już, jakie informacje mogą zostać zachowane w stylu, ale powinieneś jeszcze wie­dzieć, jakich ustawień nie można w nich przechowywać (na przekór Twoim ocze­ki­waniom):

• Style umożliwiają zapisywanie gradientów, ale nie potrafią przechowywać mo­dy­fikacji uchwytów kontrolnych gradientu dokonywanych za pomocą na­rzę­dzia Paint Bucket (Wiadro z farbą).

• Za pomocą opcji Text Style nie można zachować informacji o odstępach w tekś­cie (kerningu, interlinii, poziomym skalowaniu i przesunięciu linii ba­zo­wej), wyrównaniu tekstu (poziomym, pionowym, wyrównaniu do lewej, do pra­wej, wyśrodkowaniu, rozciągnięciu i kierunku tekstu) oraz wygładzaniu.

Tworząc i stosując nowe style powinieneś pamiętać o dwóch ważnych rzeczach. Po pierw­sze - jeśli styl nie zawiera określonego ustawienia, nie jest ono zmieniane w za­zna­czo­nym obiekcie. Po drugie - brak wypełnienia, obrysu lub efektu także jest obowią­zu­ją­cym ustawieniem. Jeżeli obiekt, na którym chcesz oprzeć styl nie posiada wypełnienia, a Ty zaznaczysz w oknie dialogowym Edit Style opcję Fill Type, ze wszystkich obiek­tów, do których zastosujesz styl, zostanie usunięte wypełnienie.

Zarządzanie XE "style:zarządzanie" stylami

Każdy utworzony styl jest dostępny we wszystkich otwartych dokumentach Fireworks. Gdy nabierzesz wprawy w ich wykorzystywaniu, szybko zaczniesz tworzyć ogromne ko­lek­cje własnych stylów. Fireworks oferuje kilka poleceń (w większości zgrupo­wa­nych w rozwijanym menu palety Styles) umożliwiających zarządzanie nimi.

	Zanim zaznaczysz styl, który chcesz usunąć lub zmodyfikować, upewnij się, że w dokumencie nie został zaznaczony żaden obiekt. Spowo­do­wać by to mogło zastosowanie zaznaczonego stylu do obiektu. Aby usunąć za­znaczenia wszystkich obiektów dokumentu, kliknij w pustym miej­scu obszaru roboczego, wybierz z menu polecenie EditDeselect lub użyj skrótu klawiaturowego Ctrl+D (Command+D).

Wiesz już, że nowy styl możesz utworzyć za pomocą przycisku po­le­cenia New Style, który znajduje się u dołu palety Styles. Na prawo od niego jest przy­cisk odpowiadający poleceniu Delete Style (Usuń styl) (kosz na śmieci). Aby usunąć do­wolny styl, zaznacz jego ikonę i kliknij przycisk Delete Style.

Możesz także zaznaczyć wiele stylów jednocześnie. Wciśnij klawisz Ctrl (Command) i klikaj ikony stylów, aby dodawać je do zaznaczenia. Wciś­nij klawisz Shift, aby zaznaczyć zakres stylów; Fireworks zaznaczy wszys­tkie style położone na najkrótszej drodze pomiędzy pierwszym i os­tatnim klikniętym stylem. Jest to metoda zaznaczania częściej spo­­­ty­kana w arkuszach kalkulacyjnych niż w edytorach tekstu. Aby za­zna­­czyć cały rząd stylów, wciśnij klawisz Shift i kliknij pierwszy oraz os­ta­tni styl w rzędzie. Aby zaznaczyć tylko kilka znajdujących się w rzę­dzie stylów, klikaj je kolejno z wciśniętym klawiszem Ctrl (Com­mand). Ta­kiej samej techniki możesz użyć do zaznaczania kolumn stylów.

W rozwijanym menu palety Styles dostępnych jest siedem poleceń (rysunek 16.4):

• New Style (Nowy styl): Tworzy nowy styl w oparciu o zaznaczony obiekt. Dzia­ła tak samo jak przycisk New Style.

• Edit Style (Edytuj styl): Otwiera okno dialogowe Edit Style, w którym możesz za­znaczać lub usuwać zaznaczenia poszczególnych ustawień.

• Delete Style (Usuń styl): Usuwa zaznaczony styl lub style.

Rysunek 16.4. Za pomocą poleceń znajdujących się w rozwijanym menu palety Styles możesz zarządzać stylami Fireworks
		Okno dialogowe Edit Style możesz otworzyć także poprzez dwukrotne klik­nięcie ikony stylu w palecie Styles.

• Import Styles (Importuj style). ładuje nowy zestaw stylów po stylu aktualnie za­znaczonym w palecie. Muszą one być zachowane w formacie stylów Fire­works i nie mogą być importowane na przykład z dokumentów Fireworks.

• Export Styles (Eksportuj style). Zapisuje aktualnie zaznaczony styl lub style w for­macie stylów Fireworks.

• Resets Styles (Przywróć style). Usuwa wszystkie style dodane do palety Styles i przywraca domyślną konfigurację stylów.

• Large Icons (Duże ikony). Przełącza pomiędzy zwykłymi a dużymi ikonami sty­lów. Duże ikony są dwukrotnie większe od normalnych.

Wiesz już, jak można tworzyć i usuwać style; polecenia New Style i Delete Style dzia­ła­ją tak samo, jak odpowiadające im przyciski. Edycja istniejących stylów również jest zna­nym procesem. Wybierz z rozwijanego menu polecenie Edit Style, a zobaczysz takie sa­me opcje, jakie widziałeś w oknie dialogowym Edit Style podczas tworzenia nowego stylu. Wpro­wadź odpowiednie zmiany, kliknij przycisk OK i zmodyfikowany styl jest już go­towy do użycia.

	Polecenie Edit Style pozwala również na sprawdzenie opcji forma­to­wa­nia danego stylu jeszcze przed jego zastosowaniem. Kliknij dwukrot­nie styl lub zaznacz go i wybierz z rozwijanego menu polecenie Edit Style, aby zobaczyć, jakie opcje formatowania są w nim zaznaczone.

Wybranie polecenia Export Styles (Eksportuj style) powoduje otwarcie okna dialo­go­we­go (rysunek 16.5). Fireworks zaproponuje Ci zapisanie nowego pliku w katalogu Styles pod nazwą Custom Styles.stl (Custom Styles w MacOS), ale możesz zmienić tę nazwę i zapisać plik gdziekolwiek ze­chcesz (musisz jednak zapamiętać tę lokalizację). W MacOS rozszerzenie .stl nie jest wy­magane, ale jego wpisanie umożliwi wykorzystywanie pliku w różnych systemach ope­racyjnych i współużytkowanie go z użytkownikami systemów Windows. Sam także bę­dziesz mógł w przyszłości wykorzystać style, gdy będziesz pracował w Fireworks dla Win­dows.

Rysunek 16.5. Wyeksportuj kolekcję stylów i zapisz je jako plik stylów Fireworks z rozszerzeniem .stl

Po wybraniu polecenia Import Styles (Importuj style) otwierane jest standardowe okno dia­­logowe Open (Otwórz). Wybierz plik stylów i kliknij przycisk Open, aby je zaim­portować.

Dla użytkowników MacOS: Jeśli dostaniesz plik ze stylami Fireworks od użytkownika Windows lub pobierzesz go z Internetu, bez modułów MacOS Creator lub Type, będziesz wi­dział pus­tą ikonę pliku. Jednak dopóki plik ten będzie miał rozsze­rze­nie .stl, Fireworks rozpozna go właściwie oraz pozwoli zaimportować i wy­korzystywać. Jeżeli chcesz, możesz użyć File Exchange Control Pa­nel lub narzędzia, takiego jak File Buddy albo FinderPop, aby nadać pli­­­kowi właściwy kod kreatora - MKBY i typ STYf i przywrócić jego ikonę.

Jak zostało wspomniane wcześniej, gdy importujesz zestaw stylów Fireworks, wszys­tkie style są umieszczane po stylu aktualnie zaznaczonym w palecie. Z tego powodu, naj­częściej zaznaczam ostatni styl w palecie Styles przed zaimportowaniem kolejnych sty­lów. Możesz również utworzyć separator - jeden lub dwa style zawierające prosty obiekt bez żadnego wypełnienia, obrysu i efektów. Pusta ikona takiego stylu będzie dzia­łała jako separator oddzielający zaimportowane style od standardowych.

W katalogu Settings/Styles możesz znaleźć plik stylów o nazwie No Style.stl, który zawiera tylko jeden styl bez wypełnienia, obrysu i efek­tów. Plik ten może być wykorzystywany jako separator i pozwala na szyb­kie usunięcie wszelkich atrybutów z obiektu przed zastoso­wa­niem do niego innego stylu. Możesz także go zapisać jako pierwszy lub ostatni z eksportowanych stylów, co pozwoli na łatwiejszą iden­ty­fi­ka­cję początku lub końca ich listy.

Nazwy dwóch ostatnich poleceń znajdujących się w rozwijanym menu palety Styles: Re­set Styles (Przywróć style) i Large Icons (Duże ikony) tłumaczą ich działanie. Pole­ce­nie Reset Styles usuwa wszystkie style znajdujące się aktualnie w palecie Styles i ła­du­je w ich miejsce zestaw stylów standardowych. Polecenie to ma dość drastyczne dzia­ła­nie, dla­tego też Fireworks poprosi Cię o potwierdzenie operacji. Wybór polecenia Large Icons powoduje dwukrotne powiększenie ikon stylów w stosunku do ich standardowych roz­miarów; z kwadratów o boku 36 pikseli zostaną powiększone do 72 pikseli. Funkcja ta staje się przydatna, gdy próbujesz odróżnić dwa podobne sty­le.

Technika Fireworks:
wydobywanie tekstur i deseni ze stylów

Po bliższym przyjrzeniu się niektórym wbudowanym stylom Fireworks (zarówno stan­dardowym, jak i tym, które można znaleźć na dysku instalacyjnym Fireworks) zo­ba­czysz, że zawierają one wspaniałe desenie i tekstury. Na dysku CD-ROM, w pliku text1-201.stl, znajduje się styl o niewinnej nazwie - Style 37, który zawiera bardzo ciekawy de­seń (rysunek 16.6). Gdy spojrzysz na paletę Fill, zauważysz, że częścią stylu jest teks­tura o wiele mówiącej nazwie - Cow (Krowa). Jednak w katalogu Textures nie ist­nie­je tekstura o takiej nazwie. Skąd więc się tam wzięła? Została osadzona w stylu.

Rysunek 16.6. Wypróbuj teksturę Cow zawartą w stylu o nazwie Style 37. Najlepiej jest pracować ze zwykłym okręgiem lub tekstem sformatowanym 170-punktową czcionką Arial Black

	Plik text1-201.stl znajdziesz na CD-ROM-ie Fireworks pod Goodies/Styles/Styles/text/text1-201.stl.

Donna Casey - projektantka grafiki internetowej, której prace można zobaczyć na stro­­nie WWW, znajdującej się pod adresem www.n8vision.com, opracowała technikę umo­­żli­wia­jącą wydobywanie tekstur i deseni osadzanych w stylach. Po co miałbyś robić coś ta­kiego? Niekiedy deseń lub tekstura wygląda lepiej w połączeniu z róż­nymi usta­wie­nia­mi obry­sów i efektów, a czasami chciałbyś zastosować do obrazka jedynie teksturę lub deseń. Operację taką można przeprowadzić na jeden z dwóch sposobów. Po pierw­sze - możesz wejść w edycję stylu i usunąć wszystkie jego usta­wie­nia z wyjątkiem Fill Type (Typ wypełnienia). Jest to jedynie częściowe rozwią­za­nie. Deseń lub tekstura na­dal są obecne w innych ustawieniach. Przykładowo - te­kstura może być częścią wypeł­nie­nia typu Solid, Pattern lub Gradient. Aby zupełnie wydobyć teksturę lub deseń ze stylu i je zapisać:

345. Narysuj duży prostokąt lub kwadrat, o wymiarach około 500×500 pikseli.

Celem jest utworzenie dużego obiektu, w którym będą występowały wyraźnie pow­tórzenia desenia.

323. Z palety Styles wybierz styl, z którego chcesz wyizolować teksturę lub deseń.

Styl zostanie zastosowany do zaznaczonego obiektu.

324. W palecie Stroke, z listy kategorii obrysu wybierz pozycję None (Brak).

325. W palecie Effect, z listy kategorii efektu wybierz pozycję None (Brak).

326. Aby wydobyć teksturę ze stylu, dokonaj następujących zmian w palecie Fill:

• Ustaw kategorię wypełnienia na Solid (Jednolite).

• Ustaw czarny kolor wypełnienia.

• Ustaw natężenie tekstury na 100%.

327. Aby wydobyć deseń ze stylu, ustaw natężenie tekstury na 0%.

328. Wybierz narzędzie Crop (Kadrowanie) z palety narzędziowej.

329. Tak skadruj obiekt, aby wewnątrz niego znajdował się powtarzający się deseń.

Jest to najtrudniejsza część procedury. Będziesz musiał przeprowadzić kilka prób, aby osiągnąć zamierzony efekt. Dobrze jest zapisać plik przed roz­po­czę­ciem kadrowania obiektu. W przypadku większości tekstur, powtarzający się de­seń będzie mniejszy niż wydawał się być na początku.

330. Po zakończeniu kadrowania zapisz plik w katalogu Patterns lub w ka­talogu Textures, wewnątrz katalogu Configuration w katalogu programu Fireworks.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

331. Uruchom ponownie Fireworks, aby uaktualnić listy deseni i tekstur.

	Nowy deseń lub teksturę można wykorzystać również bez ponownego uru­chamiania Fireworks. Wybierz w tym celu pozycję Other z roz­wi­ja­nej listy deseni lub wypełnień, która znajduje się w palecie Fill i zaz­nacz nowo zapisany plik.

Nowy deseń lub tekstura powinny być teraz dostępne w paletach Stroke (Obrys) i Fill (Wy­pełnienie).

Podsumowanie

Style umożliwiają znaczne zwiększenie wydajności pracy, pozwalając na szybkie bu­do­wa­nie bibliotek ustawień formatowania oraz zapewnienie spójnego wyglądu obiektów gra­ficznych wykorzystywanych na różnych stronach znajdujących się wewnątrz tej sa­mej witryny internetowej. Oszczędzają także czas projektanta; zamiast ręcznego nada­wa­nia atrybutów pojedynczym obiektom, które powinny mieć spójny wygląd, możesz je formatować za pomocą jednego kliknięcia ikony w palecie Styles. Oto niektóre naj­waż­niejsze informacje dotyczące pracy ze stylami:

• Style dostępne są w palecie Styles.

• Styl może zawierać prawie wszystkie informacje potrzebne do odtworzenia ob­ry­su, wypełnienia i efektów grafiki oraz ustawień tekstu.

• W odróżnieniu od innych programów, takich jak Macromedia FreeHand, style Fire­works nie przechowują połączeń z obiektami, do których zostały zasto­sowane.

• Każdy nowo utworzony styl jest dostępny dla wszystkich dokumentów, dopóki nie zostanie usunięty z palety Styles.

• Style mogą być edytowane, importowane, eksportowane i zarządzane w inny spo­sób poprzez rozwijane menu palety Styles.

• Ze stylów można wydobywać zawarte w nich desenie i tekstury.

W następnym rozdziale dowiesz się, jak korzystać z symboli i bibliotek, pozwalających na wyeliminowanie monotonnych operacji wykonywanych w procesie tworzenia grafiki.




Rozdział 17.
Symbole i biblioteki

W tym rozdziale:

• Poznajemy symbole.

• Tworzenie i modyfikowanie symboli.

• Modyfikowanie kopii.

• Praca z przyciskami.

• Zarządzanie bibliotekami.

Wiele funkcji Fireworks zostało zaprojektowanych specjalnie z myślą o zmini­ma­li­zo­wa­niu liczby powtarzanych operacji w pracy projektanta internetowego. Jedną z takich funk­cji są symbole. W dużym skrócie, symbole działają jako główne kopie obiektów i są przechowywane w bibliotece symboli. Kopie symboli, nazywane „instances”, za­cho­­wu­ją połączenia z oryginalnymi symbolami, mogą więc być modyfikowane jako gru­py obiektów. Modyfikacja symbolu powoduje „odziedziczenie” wprowadzonych zmian przez wszystkie jego kopie.

Ten rozdział rozpoczyna się omówieniem podstaw korzystania z symboli, kopii i bi­blio­tek w Fireworks. Z późniejszych podrozdziałów dowiesz się, jak tworzyć, mody­fi­ko­wać oraz zarządzać symbolami, kopiami i bibliotekami.

Podstawowe wiadomości
o symbolach i kopiach

Symbole XE "symbole" Fireworks działają jak szablony pojedynczych obiektów. Symbol można trak­to­wać jak stempel, który zanurzasz w atramencie. Następnie możesz „stemplować” nie­ogra­niczoną ilość kopii symbolu, nazywanych „instances” XE "symbole:instancje" . Są to kopie sym­bo­li, które zachowują połączenia z oryginalnym symbolem. Zmodyfikowanie symbolu spo­wo­duje odziedziczenie wszystkich zmian przez jego kopie. Z drugiej strony - kopie po­siadają także pewne właściwości niezależne od symboli. Możesz na przykład sto­so­wać do nich indywidualnie narzędzia transformacji, dodawać efekty lub zmieniać prze­zro­czys­tość (rysunek 17.1). Z punktu widzenia projektanta, symbole i kopie umo­żli­wia­ją za­cho­wanie spójnego wyglądu obiektów bez utraty ich indywidualnych para­metrów.

Rysunek 17.1. Wszystkie znajdujące się na ilustracji obiekty są kopiami tego samego symbolu zmodyfikowanymi za pomocą skalowania, przekrzywiania, zmian stopnia krycia i efektów. Kopia w górnym lewym rogu nie jest zmodyfikowana i wygląda jak symbol macierzysty

Modified ... — Kopie zmodyfikowane

Symbol — Symbol

Podczas edycji symbolu w edytorze symboli, połączenie pomiędzy kopią a jej symbolem macierzystym powoduje, że dziedziczy ona te zmiany (rysunek 17.2). Kopie są automatycznie aktualizowane, aby odpowiadały swemu macierzystemu symbolowi zaraz po zamknięciu edytora symboli. Nie ma to jednak wpływu na wszelkie modyfikacje wykonane na poszczególnych kopiach, np. przez zastosowanie efektów, filtra Photoshopa czy narzędzia Transforrm.

Rysunek 17.2. Kopie z rysunku 17.1 są automatycznie aktualizowane po zmodyfikowaniu symbolu macierzystego. Chociaż wszystkie kopie zostały poważnie zmodyfikowane, wyraźnie widać modyfikację kopii podstawowej (w lewym górnym rogu)

Updated ... — Kopia zmodyfikowana i zaktualizowana

Edited ... — Zmodyfikowany symbol

Symbole są zawsze przechowywane w bibliotekach dostępnych z poziomu palety Lib­ra­ry (rysunek 17.3). Przekształcenie obiektu na symbol spowoduje umieszczenie go w pale­cie Library i pozostawienie w oknie dokumentu kopii symbolu. Paleta Library oferuje wie­le funkcji umożliwiających zarządzanie oraz modyfikowanie symboli i bibliotek. Pod­stawowe funkcje przeznaczone są jednak do zarządzania kopiami. Przeciągnięcie sym­bolu z biblioteki i upuszczenie go w oknie dokumentu spowoduje utworzenie nowej kopii, jest to więc operacja podobna do tworzenia skrótów do plików w systemie Win­dows lub aliasów w MacOS. Kopie są nawet oznaczane taką samą małą strzałką, jaką posiadają skróty w Windows i aliasy w MacOS.

Jedną z najmniej zauważalnych zalet kopii jest to, iż są one znacznie szybciej odtwa­rza­ne przez program niż oryginalne symbole. Podczas gdy symbol może być złożonym obiek­tem wektorowym o skomplikowanym obrysie i gradientowym wypełnieniu, jego kopia jest prostym obiektem bitmapowym. Wykorzystywanie wielu kopii zamiast nie­zależnych obiektów (rysunek 17.4) pozwala zwiększyć wydajność komputera, gdyż Fire­works rysuje wówczas proste obrazki bitmapowe zamiast bardziej złożonych obiek­tów wektorowych.

Rysunek 17.3. Symbole są przechowywane w palecie Library. Przeciągnięcie symbolu do okna dokumentu powoduje utworzenie kopii, reprezentowanej za pomocą małej strzałki znajdującej się wewnątrz jej ramki ograniczającej
Rysunek 17.4. Kopie są uproszczonymi, bitmapowymi wersjami oryginalnych symboli. Możesz korzystać z wielu kopii bez żadnego wpływu na wydajność pracy w Fireworks

Original ... — Oryginalny rysunek wektorowy

Instance ... — Kopia bitmapowa

Hundreds ... — Setki bitmapowych kopii

Fireworks oferuje dwa różne typy symboli:

• Graphic Symbols XE "symbole:Graphic Symbols" (Symbole graficzne). Symbole graficzne są głównymi sym­bo­lami. Z reguły, gdy mówimy o symbolach, przeważnie mamy na myśli sym­bo­le graficzne. Kopia symbolu graficznego zachowuje się tak samo jak każ­dy inny obiekt Fireworks. Możesz ją umieścić w dowolnym miejscu obsza­ru ro­bo­czego, przenieść na inną warstwę lub zmodyfikować jej dowolną właś­ciwość.

• Button Symbol XE "symbole:Button Symbol" (Symbol przycisku). Symbole przycisków są dodatkowymi sym­bolami. Symbol przycisku posiada wiele klatek, zawierających różne stany przy­cisku: Up (Normalny), Over (Pod wskaźnikiem myszy) lub Down (Wciś­nię­ty). W kopiach przycisków znajdują się ich własne plastry z przy­dzie­lo­nymi adresami URL lub behawiorami. W pewnym sensie symbol przycisku jest połączeniem poszczególnych obiektów Fireworks składających się na przy­cisk, które tworzą grupę łatwą do edycji i ponownego wykorzystania.

Operacje tworzenia i modyfikowania tych dwóch typów symboli różnią się nieco mię­dzy sobą, a każdy typ symbolu posiada własny edytor. Mają one także wiele cech wspól­nych. Kopie przycisków dziedziczą od oryginalnych symboli takie same właś­ci­wości co kopie graficzne.

Kopie umożliwiają również tworzenie zaawansowanych animacji, gdyż Fireworks po­trafi sekwencjonować dwie lub więcej kopii, tworząc pomiędzy nimi wszystkie eta­py pośrednie. Program upraszcza i przyspiesza w ten sposób proces animowania obiek­tów. Na przykład w sekwencjonowaniu pomniejszonej kopii z powiększoną, Fire­works połączy je za pomocą nowych, pośrednich kopii, które następnie mogą być łatwo rozmieszczone w poszczególnych klatkach dokumentu, tworząc w ten sposób ani­mację powiększania lub zmniejszania obiektu.

	Więcej o sekwencjonowaniu kopii przeczytasz w rozdziale 23.

Paleta Library

Paleta Library XE "paleta:Library" (rysunek 17.5) jest centrum zarządzania bibliotekami symboli Fire­works. Każdy symbol używany w bieżącym dokumencie jest wyświetlany w palecie Lib­rary i identyfikowany za pomocą odpowiedniej ikony jako symbol graficzny lub sym­bol przycisku. Jak większość innych palet Fireworks, paleta Library posiada roz­wi­ja­ne menu i może być dokowana w grupach innych palet. Aby wyświetlić paletę Lib­ra­ry, wybierz z menu polecenie WindowLibrary lub użyj skrótu klawiaturowego F11.

Oto lista najważniejszych elementów palety Library:

• Symbol list (Lista symboli). Gdy tworzysz lub importujesz symbole, są one au­to­­matycznie dodawane do listy symboli. Po utworzeniu nowego dokumentu, pa­leta Library jest kompletnie pusta. Lista symboli jest podzielona na kolumny opi­sujące różne właściwości symboli, podobne do kolumn, które możesz zo­ba­czyć przy eksploracji katalogów w systemie Windows lub MacOS, gdy wy­bie­rzesz wi­dok List (Lista). Podwójne kliknięcie symbolu w liście spowoduje ot­war­cie ok­na dia­logowego Symbol Properties (Właściwości symbolu) umożliwiającego zmia­nę nazwy symbolu oraz przekształcenie go z symbolu przycisku na sym­bol graficzny lub odwrotnie.

• Symbol preview (Podgląd symbolu). Wybór symbolu z listy powoduje wy­świe­tlenie jego podglądu. Przeciągnięcie podglądu do okna dokumentu auto­ma­tycznie wywoła utworzenie kopii symbolu w dokumencie. Dwukrotne klik­nięcie podglądu symbolu otwiera okno edycji symbolu.

Rysunek 17.5. Paleta Library jest miejscem, w którym można przechowywać i zarządzać bibliotekami symboli

Symbol preview — Podgląd symbolu

Pop-up menu button — Przycisk menu rozwijanego

Pop-up menu — Menu rozwijane

Show All ... — Pokaż wszystkie kolumny

Play ... — Odtwórz symbol

Button ... — Ikona symbolu przycisku

Graphic ... — Ikona symbolu graficznego

Symbol list — Lista symboli

New Symbol ... — Nowy symbol

Edit ... — Edytuj symbol

Delete ... — Usuń symbol

Toggle ... — Włącz/Wyłącz sortowanie

Minimize ... — Minimalizuj szerokość palety

• Pop-up menu (Menu rozwijane). W rozwijanym menu znajdują się polecenia umo­żliwiające tworzenie i zarządzanie symbolami.

W kolejnych podrozdziałach przyjrzymy się bliżej palecie Library oraz tworzeniu, edy­cji i zarządzaniu symbolami.

Tworzenie i modyfikowanie symboli

W większości przypadków symbole będziesz tworzył i modyfikował za pomocą po­le­ceń znajdujących się w menu Insert, mimo że podobne polecenia znajdziesz w rozwi­ja­nym menu palety Library, któremu przyjrzymy się bliżej w kolejnych podrozdziałach.

Tworzenie XE "symbole:tworzenie" symboli

Pierwszym krokiem do wykorzystania symbolu w dokumencie jest oczywiście jego utwo­rzenie. W Fireworks dostępne są trzy metody: przekształcenie istniejącego obiektu na symbol, opracowanie symbolu od zera lub zduplikowanie istniejącego symbolu. Praw­dopodobnie najczęściej wykorzystywaną metodą jest konwertowanie istniejących obiek­tów. Fireworks zdradza nawet preferencje dla konwertowania obiektów na sym­bo­le
poprzez swoje skróty klawiaturowe. Aby przekonwertować obiekt na symbol, wy­star­czy wcisnąć klawisz F8, zaś aby utworzyć symbol od zera, trzeba użyć kombinacji kla­wi­szy Ctrl+F8 w Windows lub Command+F8 w MacOS.

	Dla użytkowników MacOS: Jeśli przypisałeś jakimś klawiszom funk­cyj­nym określone funkcje w systemie operacyjnym, nie będziesz mógł korzystać z tych klawiszy w Fireworks. Zamiast nich będziesz musiał korzystać z poleceń menu Fireworks, chyba że wyłączysz mapowanie klawiszy funk­cyjnych w panelu kontrolnym klawiatury (Keyboard Control Panel).

Konwertowanie obiektów

Na symbole można przekształcać prawie wszystkie obiekty Fireworks. Mogą to być obiek­ty wektorowe, bitmapowe, a nawet grupy obiektów.

	Mimo że możesz przekształcić kopię na symbol, konwersja taka po­woduje przerwanie połączenia pomiędzy kopią a oryginalnym sym­bolem.

Aby przekonwertować obiekt na symbol:

332. Zaznacz obiekt, który chcesz przekształcić na symbol.

333. Wybierz z menu polecenie InsertConvert to Symbol lub użyj skrótu klawia­tu­ro­wego F8. Fireworks wyświetli okno dialogowe Symbol Properties (rysunek 17.6).

Rysunek 17.6. W oknie dialogowym Symbol Properties wpisz nazwę symbolu w polu tekstowym Name oraz określ, czy chcesz utworzyć symbol graficzny, czy też symbol przycisku

334. W polu Name zamiast słowa „Symbol” wpisz własną nazwę symbolu.

335. Domyślnie Fireworks tworzy symbol graficzny. Pozostaw włączoną opcję Gra­phic i kliknij przycisk OK.

Symbole przycisków omówimy w kolejnych podrozdziałach, a symbole animacji w rozdziale 23.

Fireworks umieści oryginalny obiekt w palecie Library, zaś w oknie dokumentu pozos­ta­wi jego kopię. Można ją rozpoznać po małej strzałce umieszczonej wewnątrz jej ram­ki ograniczającej.

Tworzenie symboli od zera

Jeśli wiesz, jak w przybliżeniu powinien wyglądać Twój symbol, możesz go utworzyć od zera lub zbudować symbol, będący połączeniem różnych obiektów. W takim przy­pad­ku, powinieneś utworzyć nowy symbol, a następnie kopiować i wklejać do niego róż­ne elementy z okna dokumentu.

Aby utworzyć nowy symbol:

346. Wybierz z menu polecenie InsertNew Symbol lub użyj skrótu klawiatu­ro­wego Ctrl+F8 (Command+F8). Możesz także wybrać polecenie New Symbol z roz­wi­ja­nego menu palety Library. Fireworks wyświetli okno dialogowe Sym­bol Pro­perties.

347. W polu Name zamiast słowa „Symbol” wpisz własną nazwę symbolu.

348. Pozostaw zaznaczoną opcję Graphic, aby utworzyć symbol graficzny i kliknij przy­cisk OK.

336. Fireworks otworzy okno Symbol Editor (Edytor symboli) (rysunek 17.7).

Rysunek 17.7. Okno Symbol Editor jest specjalnym oknem dokumentu, umożliwiającym tworzenie lub edytowanie symboli graficznych

349. W oknie Symbol Editor możesz rozpocząć tworzenie nowego symbolu tak sa­mo, jakbyś tworzył obiekt w oknie dokumentu. Możesz korzystać z dowolnych na­rzędzi Fireworks oraz pływających palet, na przykład Live Effects. Możliwe jest także kopiowanie i wklejanie obiektów pomiędzy oknem Symbol Editor i ok­nem dokumentu.

	Nowy symbol będziesz mógł później modyfikować, więc nie musisz go już teraz utworzyć z absolutną precyzją.

337. Po zakończeniu edycji symbolu, zamknij okno Symbol Editor, klikając krzy­żyk, znajdujący się w prawym górnym rogu okna w Windows lub w lewym gór­nym rogu okna w MacOS.

W palecie Library zostanie wyświetlony nowo utworzony symbol, zaś w oknie dokumentu po­zostanie jego kopia.

W Fireworks 4 polecenie Save jest wyłączone przy otwartym oknie edytora symboli. W takim przypadku naciśnięcie klawiszy Ctrl+S (Command+S) nie powoduje zapisania bieżącego dokumentu. Rozwiązaniem jest zapisanie dokumentu przed otwarciem edytora symboli.

Duplikowanie istniejących symboli

Ostatnią metodą tworzenia nowych symboli jest duplikowanie symboli istniejących.

Aby zduplikować symbol:

350. Wybierz z menu polecenie WindowLibrary lub użyj skrótu klawiaturowego F11, aby wyświetlić paletę Library.

351. Z listy symboli wybierz ten, który chcesz zduplikować.

352. Wybierz polecenie Duplicate z rozwijanego menu palety Library.

Fireworks zduplikuje zaznaczony symbol oraz nada mu nazwę składającą się z nazwy ory­ginalnego symbolu i kolejnego numeru.

	Aby zmienić nazwę symbolu, kliknij dwukrotnie jego nazwę w liście i wpisz nową nazwę w oknie dialogowym Symbol Properties.

Modyfikowanie XE "symbole:modyfikowanie" symboli

Symbole można łatwo modyfikować w oknie Symbol Editor. Po zakończeniu edycji sym­bolu i zamknięciu okna edytora, wszystkie dokonane zmiany są zastosowywane do sa­mego symbolu i wszystkich jego kopii. Wynika więc z tego, że zmodyfikowanie sym­bolu pociąga za sobą zmiany kopii.

Aby zmodyfikować istniejący symbol:

353. Wybierz z menu polecenie WindowLibrary lub użyj skrótu klawiaturowego F11, aby wyświetlić paletę Library.

354. Z listy symboli wybierz ten, który chcesz modyfikować.

355. Kliknij dwukrotnie podgląd symbolu, aby otworzyć symbol w oknie Symbol Edi­tor. Możesz także wybrać polecenie Edit Symbol z rozwijanego menu palety Library.

356. Dokonaj modyfikacji symbolu w oknie Symbol Editor. Po zakończeniu edycji zam­knij okno Symbol Editor za pomocą znaku zamykania, który znajduje się w gór­nym prawym rogu okna w Windows lub w lewym górnym rogu w MacOS.

Wszystkie dokonane zmiany zostaną zastosowane do symbolu i wszystkich je­go kopii.

Edycja symboli „na skróty”

Fireworks oferuje dwie metody edycji symboli „na skróty”:

• Jeśli w oknie dokumentu zaznaczona jest kopia, a Ty chcesz zmodyfikować tyl­ko oryginalny symbol, wybierz z menu polecenie ModifySymbolEdit Sym­bol, aby wyświetlić główny symbol w oknie Symbol Editor.

• Podczas edycji właściwości symbolu w oknie dialogowym Symbol Properties (opi­sywanym w następnym podrozdziale), możesz kliknąć przycisk Edit, aby otwo­rzyć symbol w oknie Symbol Editor.

Przy korzystaniu z dowolnej z tych metod, zamknięcie okna Symbol Editor powoduje zasto­so­wa­nie zmian do wszystkich kopii symbolu.

	Jeśli dokonasz niepożądanych zmian w oknie Symbol Editor, możesz zam­knąć to okno (co spowoduje zastosowanie zmian), a następnie wy­brać z menu polecenie EditUndo, aby cofnąć zmiany.

Modyfikowanie właściwości symboli

Oprócz modyfikowania samych symboli, można edytować także ich właściwości. Mo­żesz zmieniać ich nazwy albo konwertować symbole graficzne na symbole przycisków i od­wrotnie.

Aby zmodyfikować właściwości symbolu:

357. Wybierz z menu polecenie WindowLibrary lub użyj skrótu klawiaturowego F11, aby wyświetlić paletę Library.

358. Otwórz okno dialogowe Symbol Properties za pomocą jednej z dwóch metod:

• Dwukrotnie kliknij nazwę symbolu w liście.

• Zaznacz symbol w liście i wybierz polecenie Properties z rozwijanego menu palety.

Fireworks wyświetli okno dialogowe Symbol Properties (rysunek 17.8).

Rysunek 17.8. W oknie dialogowym Symbol Properties wyświetlana jest miniatura istniejącego symbolu. W oknie tym możesz zmienić nazwę symbolu lub jego typ

338. Zmień właściwości symbolu w oknie dialogowym Symbol Properties i kliknij przy­cisk OK.

Fireworks zastosuje wszystkie zmiany do symbolu. Jeśli zmienisz typ symbolu, zmo­dy­fi­kowane zostaną również wszystkie jego kopie. Gdy na przykład przekształcisz sym­bol graficzny na symbol przycisku, wszystkie jego kopie także staną się przy­ciskami.

Usuwanie symboli

Usunąć symbol jest bardzo łatwo, ale musisz pamiętać, że wraz z symbolem usuwane są wszys­tkie jego kopie.

Aby usunąć symbol:

359. Wybierz z menu polecenie WindowLibrary lub użyj skrótu klawiaturowego F11, aby wyświetlić paletę Library.

360. Z listy symboli wybierz ten, który chcesz usunąć.

361. Wybierz polecenie Delete z rozwijanego menu palety. Jeśli symbol nie posiada żad­nych kopii, zostanie usunięty natychmiast, bez żadnych okien z py­ta­niem o potwierdzenie operacji. Jeśli istnieją jakiekolwiek kopie symbolu, Fire­works wyświetli okno dialogowe Delete Symbol (rysunek 17.9).

Rysunek 17.9. Okno dialogowe Delete Symbol pyta użytkownika, czy na pewno chce usunąć symbol

339. W oknie Delete Symbol kliknij przycisk Delete, aby usunąć symbol.

Symbol i wszystkie jego kopie zostaną usunięte z dokumentu.

Tworzenie kopii XE "symbole:tworzenie instancji"

Tworzenie kopii jest często wykonywaną operacją, którą można przeprowadzić na je­den z dwóch prostych sposobów:

• Przeciągnij symbol z palety Library i upuść go nad obszarem roboczym. Mo­żesz przeciągnąć podgląd symbolu lub jego nazwę w liście.

	Możesz utworzyć jednocześnie kopie wielu symboli. Zaznacz grupę sym­boli w liście i przeciągnij je wszystkie do obszaru roboczego.

• Zduplikuj kopię w oknie dokumentu. Duplikat kopii jest również kopią. Każ­da z metod duplikowania obiektów Fireworks pracuje także z kopiami:

• Zaznacz kopię i wybierz z menu polecenie EditDuplicate lub EditClone.

• Skopiuj kopię do schowka i wklej następnie do dokumentu.

• Wciśnij klawisz Alt (Option) i przeciągnij kopię, aby utworzyć jej kolejną kopię.

Każdą nową kopię można zidentyfikować na podstawie małej strzałki wyświetlanej w lewym dolnym rogu ramki ograniczającej kopię.

Modyfikowanie kopii XE "symbole:modyfikowanie instancji"

Modyfikowanie symbolu pociąga za sobą zmiany wszystkich jego kopii, ale możesz tak­że modyfikować pojedyncze kopie. Fireworks traktuje kopie jako grupy obiek­tów i pozwala na ich przekształcanie. Wzajemne relacje pomiędzy przekształ­ce­nia­mi zastosowanymi do symboli i tymi zastosowanymi do kopii są takie same jak po­między zastosowaniem przekształceń do pojedynczych obiektów, które są następnie gru­powane i zastosowaniem przekształceń od razu do całej grupy. Po zerwaniu połą­cze­nia kopii z oryginalnym symbolem zachowuje się ona jak grupa obiektów.

	Mimo że do kopii można stosować Xtra, operacja taka powoduje zer­wanie połączenia kopii z symbolem i przekształcenie jej na obiekt bitmapowy.

Modyfikowanie kopii nie ma żadnego wpływu na inne kopie ani na oryginalny sym­bol. Możesz na przykład przeskalować kopię, a jej symbol i wszystkie pozostałe kopie tego symbolu pozostaną niezmienione. Połączenie działa tylko w jedną stronę - z symbolu do kopii.

Do kopii możesz stosować następujące przekształcenia:

• Zmiany kształtów. Możesz dostosować szerokość, wysokość, przekrzywienie, kąt obrotu kopii, a nawet odbić ją poziomo lub pionowo. Do kopii moż­na stosować wszystkie polecenia znajdujące się w podmenu ModifyTransform.

• Zmiana krycia. Za pomocą palety Object możesz zmienić ustawienia krycia kopii.

• Zmiana trybu mieszania. Za pomocą palety Object możesz zmienić tryb mie­szania kopii.

	Więcej informacji o kryciu i trybach mieszania znajdziesz w rozdziale 13.

• Efekty. Do kopii możesz stosować efekty znajdujące się w palecie Effect. Efekty zastosowane do symbolu są w rzeczywistości stosowane właśnie do niej. Jeśli więc kopia będzie wyglądała, jakby posiadała efekt, zostanie on uży­ty dopiero po zastosowaniu go do pojedynczej kopii.

	Więcej o Live Effects dowiesz się z rozdziału 12.

Zrywanie połączeń

Jeśli zechcesz zerwać połączenie kopii z oryginalnym symbolem, wybierz z menu po­lecenie ModifySymbolBreak Apart. Połączenie zostanie zerwane, a kopia stanie się zwy­kłą grupą obiektów, nawet jeśli symbol zawierał tylko jeden obiekt. Aby roz­dzielić gru­pę, wybierz z menu polecenie ModifyUngroup.

Usuwanie kopii

Usuwanie kopii przeprowadza się tak samo jak usuwanie wszystkich innych obiek­tów Fireworks i nie ma żadnego wpływu na oryginalny symbol oraz pozostałe kopie. Aby usunąć kopię, zaznacz ją i wciśnij klawisz Delete.

Praca z przyciskami XE "przyciski"

Symbole przycisków mogą określać cztery stany przycisku: Up (Normalny), Over (Pod wskaź­nikiem myszy), Down (Wciśnięty) ) i Over Down (Wciśnięty pod wskaźnikiem my­szy) oraz adresy URL lub behawiory.

	Kopie przycisków nie pojawiają się już na wspólnych warstwach, ale na własnej warstwie na klatce 1 dokumentu.

Kopie przycisków mogą być wielokrotnie umieszczane w obszarze roboczym, a dla każ­dego z nich zmieniany jest tekst. Do symboli przycisków można przydzielać beha­wio­ry, co oznacza, że wystarczy utworzyć jeden behawior dla wszystkich przycisków re­agu­jących na zdarzenia myszy znajdujących się w całej witrynie internetowej.

	Behawiory są opisane w rozdziale 21.

Tworzenie i modyfikowanie symboli przycisków

Okno Button Editor jest specjalną odmianą okna Symbol Editor. Posiada zakładki dla wszys­tkich stanów przycisku, co pozwala na łatwe tworzenia i modyfikowanie symboli przy­cisków.

Aby utworzyć symbol przycisku:

362. Wybierz z menu polecenie InsertNew Button.

Fireworks wyświetli okno dialogowe Button Editor (rysunek 17.10).

Rysunek 17.10. Okno Button Editor posiada oddzielną zakładkę dla każdego stanu przycisku

340. W zakładce Up okna Button Editor utwórz normalny stan przycisku.

341. Wybierz zakładkę Over i utwórz stan przycisku znajdującego się pod kursorem my­szy. Aby stan Over utworzyć w oparciu o stan Up, kliknij przycisk Copy Up Gra­phic (Kopiuj grafikę stanu Up). Fireworks skopiuje grafikę z zakładki Up do zakładki Over, w której będzie można ją zmodyfikować.

	W dowolnym momencie pracy możesz zaznaczyć opcję Onion Skin­ning, aby obejrzeć wszystkie stany przycisku jednocześnie.

342. Jeśli chcesz, aby przycisk posiadał także stan Down (Wciśnięty), utwórz od­po­wied­nią grafikę w zakładce Down. Gdy rozpoczniesz tworzenie tego stanu, Fire­works automatycznie zaznaczy opcję Include Down State. Możesz kliknąć przy­cisk Copy Over Graphic (Kopiuj grafikę stanu Over), aby skopiować do za­kład­ki Down wygląd poprzedniego stanu przycisku.

343. Zaznacz opcję Show Down State Upon Load, aby po wyeksportowaniu przy­cis­ku jako pasek nawigacyjny (Nav Bar) podczas ładowania strony wyświetlany był stan Down przycisku.

344. Aby dodać do przycisku stan Over While Down (Wciśnięty pod wskaźnikiem my­szy), przejdź do zakładki Over While Down i utwórz nową grafikę lub sko­piuj (kliknij przycisk Copy Down Graphic) i zmodyfikuj grafikę poprzedniego stanu.

345. Przejdź do zakładki Active Area (Aktywny obszar). Fireworks utworzy au­to­ma­tycz­nie plaster, obejmujący obszar przycisku. Możesz dostosowywać rozmiary tego plastra.

346. Kliknij przycisk Link Wizard, aby otworzyć kreatora tworzenia łączy. W róż­nych zakładkach okna Link Wizard ustaw domyślne parametry kopii, które bę­dą w przyszłości tworzone z symbolu przycisku.

	Kreator Link Wizard zostanie szczegółowo opisany w jednym z ko­lej­nych podrozdziałów.

347. Zamknij okno Button Editor.

Do palety Library zostanie dodany nowy symbol, zaś w oknie dokumentu umie­szczo­na zostanie jego kopia.

Aby zmodyfikować symbol przycisku, kliknij dwukrotnie jego podgląd w palecie Lib­ra­ry, kliknij dwukrotnie jedną z jego kopii w oknie dokumentu lub zaznacz symbol w liś­cie symboli i wybierz polecenie Edit Symbol z rozwijanego menu palety Library.

Przekształcanie istniejących obiektów na symbole przycisków

Przekształcenie istniejącego obiektu na symbol przycisku jest szybkim sposobem two­rze­nia przycisków. Każdy stan wielostanowego przycisku jest zazwyczaj odmianą pierwszego sta­nu, więc przekształcenie istniejącego obiektu na symbol przycisku i dokonanie niewielkich mo­dyfikacji stanów Over, Down i Over While Down w oknie Button Editor jest dosko­na­łą metodą tworzenia przycisków.

Aby przekształcić obiekt na symbol, zaznacz go i wybierz z menu polecenie Insert Con­vert to Symbol lub użyj skrótu klawiaturowego F8. Z części Type (Typ) okna dialogowego Symbol Properties wy­bierz opcję Button (Przycisk), wpisz nazwę przycisku w polu Name i kliknij OK. Fire­works przekształci obiekt na symbol przycisku i utworzy w oknie dokumentu plas­ter (rysunek 17.11).

Rysunek 17.11. Przekształcenie obiektu na symbol przycisku spowoduje również utworzenie plastra przykrywającego przycisk

Utwórz dodatkowe stany przycisku, edytując go w palecie Library.

Przekształcanie symboli przycisków na symbole graficzne

Jeżeli przekształcisz symbol przycisku na symbol graficzny, modyfikując jego właś­ci­woś­ci w oknie dialogowym Symbol Properties, w symbolu pozostanie plaster zakry­wa­ją­cy aktywny obszar przycisku. Aby go usunąć, otwórz symbol do edycji w oknie Sym­bol Editor i ręcznie usuń plaster.

Kopie przycisków XE "przyciski:instancje przycisków"

Oprócz standardowych, modyfikowalnych właściwości, takich jak krycie i efekty, kopie przycisków posiadają dwie dodatkowe właściwości: tekst przycisku (Button Text) oraz łącze przydzielone do plastra przycisku (rysunek 17.12). Obie właściwości moż­na modyfikować po zaznaczeniu kopii przycisku w palecie Object. Pozwala to na przydzielenie każdej kopii przycisku innego adresu URL i innego tekstu.

Rysunek 17.12. W palecie Object możesz modyfikować URL i tekst przydzielony do każdej kopii przycisku, co umożliwia utworzenie z każdej kopii oddzielnego przycisku nawigacyjnego

Aby zmodyfikować tekst przycisku, wpisz nowy tekst w polu tekstowym Button Text znaj­dującym się w palecie Object i wciśnij klawisz Enter (Return). Fireworks wyświetli okno dialogowe z pytaniem czy chcesz zastosować modyfikowany tekst tylko do bie­żą­ce­go przycisku, czy też do wszystkich przycisków znajdujących się w dokumencie. Zos­ta­nie zmodyfikowana jedynie treść tekstu przycisku, zaś jego formatowanie pozostanie niezmienione.

	Tekst przycisku można modyfikować tylko wtedy, gdy symbol przy­cis­ku zawiera obiekt tekstowy. Jeśli nie ma takiego obiektu, część But­ton Text palety Object jest nieaktywna.

Aby zmodyfikować łącze przycisku, kliknij przycisk Link Wizard, co spowoduje ot­war­cie kreatora łączy.

Kreator łączy

Okno Link Wizard XE "Link Wizard" umożliwia modyfikowanie takich właściwości kopii przycisku, któ­re normalnie stosowane są tylko w plastrach. Okno dialogowe z zakładkami, wy­świe­tlane po kliknięciu przycisku Link Wizard, znajdującego się w palecie Object, po­pro­wadzi Cię przez wszystkie etapy edycji właściwości łącza wybranej kopii przycisku.

W oknie Link Wizard dostępne są cztery zakładki:

• Export Settings (Ustawienia eksportu). Zawiera parametry eksportu przy­cisku, na przykład paletę GIF WebSnap 128. Znajduje się tu także przycisk Edit umożliwiający tworzenie dodatkowych ustawień eksportu.

• Link (łącze). Zawiera adres URL, zastępczy tekst oraz komunikat wyświe­tla­ny w pasku stanu (wyświetlany po przytrzymaniu kursora nad przyciskiem) (ry­sunek 17.13).

Rysunek 17.13. Okno Link Wizard pomaga w przydzieleniu adresu URL do kopii przycisku

• Target (Cel). Docelowe okno lub ramka otwierana przez hiperłącze.

• Filename (Nazwa pliku). Nazwa pliku dla plastra przycisku. Możesz za­zna­czyć opcję Auto-Name Slices, aby Fireworks automatycznie nadawał nazwy plastrom.

Po zaznaczeniu kopii przycisku w oknie dokumentu, możesz otworzyć okno Link Wi­zard dla tego przycisku i wprowadzić wymagane ustawienia.

	Okno Link Wizard można otworzyć również za pomocą przycisku, znaj­du­jącego się w zakładce Active Area okna Button Editor. W kreatorze łą­czy możesz określić domyślne ustawienia symbolu przycisku i każ­dej jego kopii.

Zarządzanie bibliotekami

Jeśli pracowałeś wcześniej z programem Macromedia Flash, ucieszysz się z obecności bi­bliotek XE "bi­blioteki" w Fireworks. W obu programach często wykonywanymi zadaniami jest two­rze­nie i zarządzanie przyciskami. Centralne miejsce umożliwiające przechowywanie przy­cisków oraz ich późniejsze wielokrotne wykorzystywanie (poprzez przeciąganie z pa­lety Library) pozwala zaoszczędzić wiele czasu i pracy projektanta.

Biblioteki dostępne są w dwóch miejscach: wewnątrz okna dokumentu oraz w samo­dziel­nych plikach PNG tworzonych przy eksportowaniu bibliotek.

Importowanie bibliotek

Biblioteki mogą być importowane z innych dokumentów Fireworks lub plików PNG, tworzonych podczas eksportu bibliotek z Fireworks.

Aby zaimportować bibliotekę do bieżącego dokumentu:

363. Wybierz z menu polecenie WindowLibrary lub skorzystaj ze skrótu klawiaturowego F11, aby wyświetlić paletę Library.

364. Wybierz polecenie Import Symbols (Importuj symbole) z rozwijanego menu pa­lety Library. Fireworks wyświetli okno dialogowe Open File.

365. Odszukaj plik PNG zawierający bibliotekę, którą chcesz zaimportować i kliknij przy­cisk Open. Zostanie otwarte okno dialogowe Import Symbols (rysunek 17.14).

Rysunek 17.14. Podczas importu symboli Fireworks wyświetla okno dialogowe Import Symbols

366. Wybierz symbole, które chcesz zaimportować, stosując jedną z poniższych metod:

• Aby zaimportować wszystkie symbole, kliknij przycisk Select All.

• Wciśnij klawisz Shift, a następnie kliknij pierwszy i ostatni symbol, aby zaznaczyć do importu symbole znajdujące się obok siebie.

• Wciśnij klawisz Ctrl (Command) i klikaj kolejno poszczególne symbole, któ­re chcesz dodać do listy importu.

	Aby szybko zaimportować pojedynczy symbol, kliknij dwukrotnie jego naz­wę w oknie dialogowym Import Symbols.

348. Po wybraniu symboli kliknij przycisk Import, aby zaimportować je do bieżącego dokumentu.

Fireworks zaimportuje wszystkie wybrane symbole, które będą następnie dostępne w liś­cie symboli w palecie Library.

Dostęp do najczęściej wykorzystywanych bibliotek

Wybierz bibliotekę z podmenu InsertLibraries, aby ją zaimportować. W podmenu tym znaj­dują się wszystkie biblioteki obecne w katalogu bibliotek Fireworks (ry­su­nek 17.15). Znajduje się on w katalogu Configuration, wewnątrz katalogu programu Fireworks. Po umieszczeniu biblioteki w formacie PNG w tym katalogu i ponow­nym uruchomieniu Fireworks, biblioteka będzie dostępna w podmenu InsertLibraries. Je­żeli często korzystasz z tego samego zestawu bibliotek, umieszczenie ich w tym pod­me­nu pozwoli Ci zaoszczędzić wiele czasu.

Rysunek 17.15. Umieść najczęściej wykorzystywane biblioteki w katalogu Fireworks — Libraries
		W Windows ścieżka dostępu do katalogu programu Fireworks to prze­waż­nie: C:\Program Files\Macromedia\Fireworks 4. W Mac­OS znajduje się ona przeważnie w katalogu Macintosh HD:Applica­tions: Fi­reworks 4.

Biblioteki można importować także bez konieczności ponownego uruchamiania Fire­works. Wybierz w tym celu z menu polecenie InsertLibrariesOther i żądany plik PNG z bibliotekami, znajdujący się w Twoim komputerze. Fireworks zaimportuje bi­blio­tekę do bieżącego dokumentu.

Aktualizowanie importowanych bibliotek

Fireworks zapamiętuje miejsce, z którego zostały zaimportowane symbole i potrafi je ak­tualizować na podstawie tego źródła. Umożliwia to na przykład utrzymywanie po­je­dyn­czej biblioteki przycisków dla witryny internetowej i importowanie jej do wielu róż­nych doku­mentów. Jeśli później chciałbyś zmodyfikować jakiś przycisk, zmodyfikuj go w bibliotece i uaktualnij każdy wykorzystujący ją dokument. Za pomocą prostej edycji głów­nej biblioteki możesz, korzystając z jednego polecenia, uaktualnić dowolną ilość do­kumentów.

Aby uaktualnić zaimportowane symbole względem ich źródła, wybierz polecenie Up­da­te z rozwijanego menu palety Library.

	Jeśli będziesz chciał modyfikować importowane symbole, Fireworks wy­świetli ostrzeżenie, że taka operacja spowoduje przerwanie połą­cze­­nia z oryginalnym symbolem. Edycja symbolu prowadzi więc do utwo­­rzenia zupełnie nowego symbolu.

Eksportowanie i współużytkowanie bibliotek

Mimo że możesz importować biblioteki bezpośrednio z dowolnych dokumentów za­wie­rających symbole, wyeksportowanie grupy symboli jako autonomicznej biblioteki (stan­dardowego pliku PNG Fireworks) jest najlepszym sposobem na ich współ­użyt­ko­wa­nie z innymi projektantami i tworzenie archiwów symboli do późniejszych zastoso­wań.

Aby wyeksportować symbole jako niezależną bibliotekę:

367. Wybierz z menu polecenie WindowLibrary lub skorzystaj ze skrótu klawiaturowego F11, aby wyświetlić paletę Library.

368. Wybierz polecenie Export Symbols (Eksportuj symbole) z rozwijanego menu pa­­le­ty Library. Fireworks wyświetli okno dialogowe Export Symbols (rysunek 17.16).

Rysunek 17.16. Fireworks wyświetli okno dialogowe Export Symbols, umożliwiające wybranie symboli, które chcesz wyeksportować

369. Wybierz symbole, które chcesz wyeksportować, stosując jedną z poniższych metod:

• Aby wyeksportować wszystkie symbole, kliknij przycisk Select All.

• Wciśnij klawisz Shift, a następnie kliknij pierwszy i ostatni symbol, aby zaznaczyć do eksportu symbole znajdujące się obok siebie.

• Wciśnij klawisz Ctrl (Command) i klikaj kolejno poszczególne symbole, któ­re chcesz dodać do listy eksportu.

349. Po zaznaczeniu żądanych symboli kliknij przycisk Export. Zostanie otwarte ok­no dialogowe Export Symbols As.

350. Odszukaj katalog, w którym chcesz zapisać plik z symbolami i wpisz nazwę te­go pliku. Kliknij przycisk Save.

Utworzony plik będzie zawierał wszystkie wyeksportowane symbole i będzie mógł zo­stać zaimportowany do innego dokumentu lub przekazany innym użytkownikom.

Podsumowanie

Symbole i biblioteki pozwalają ułatwić wiele zadań wykonywanych często przez pro­jek­tantów grafiki dla Internetu. Pracując z tymi elementami, powinieneś pamiętać o nas­tę­pujących rzeczach:

• Fireworks oferuje trzy rodzaje symboli: symbole graficzne, animacji i przy­cisków.

• Symbole przechowywane są w palecie Library. Przeciągnięcie symbolu z palety Lib­rary do obszaru roboczego powoduje utworzenie kopii.

• Symbole mogą składać się z dowolnych obiektów z wyjątkiem kopii.

• Duplikat kopii jest także kopią.

• Niektóre właściwości kopii, takie jak efekty, oraz pewne przekształcenia, na przy­kład skalowanie i przekrzywianie, mogą być modyfikowane bez żadnego wpły­wu na symbol lub inne kopie. Istnieją również właściwości, na przy­kład wypełnienie i obrys, które mogą być modyfikowane jedynie w symbolach i dziedziczone przez kopie.

• Symbole są przechowywane w bibliotekach, które można eksportować i im­por­to­wać do bieżącego dokumentu z wykorzystaniem palety Library.

W następnym rozdziale dowiesz się, jak aktualizować i utrzymywać grafikę tworzoną w Fireworks.




Rozdział 18.
Aktualizowanie i utrzymywanie grafiki internetowej

W tym rozdziale:

• Oglądanie grafiki w przeglądarce internetowej.

• Zarządzanie łączami w Fireworks.

• Aktualizowanie witryny za pomocą palety Find and Replace.

• Przetwarzanie wsadowe.

• Wykorzystywanie skryptletów.

Na pewno słyszałeś już kiedyś powiedzenie „1% talentu, 99% ciężkiej pracy”. Z moich do­świadczeń wynika, że w grafice komputerowej pomiędzy tymi czynnikami zacho­wa­ne są bardziej wyrównane proporcje. Połowa czasu poświęcana jest na pracę twórczą, zaś druga połowa na modyfikacje. Aktualizowanie jest ciągłym, pozornie nigdy nie­koń­czą­cym się procesem. W przypadku niektórych prac, ich aktualizowanie polega jedynie na importowaniu nowego tekstu, zaś w innych trzeba modyfikować obiekty graficzne. Żad­nego procesu modyfikacji nie można zupełnie zamienić z przykrego obowiązku w peł­ną przygód zabawę, ale Fireworks pozwala przynajmniej wykonać monotonne zadanie w jak najbardziej wydajny sposób.

Utrzymywanie grafiki internetowej to główne zadanie filozofii Fireworks mówiącej, że „każ­dy element można w każdej chwili poddać edycji”. Gdy pojawił się Fireworks, pro­jek­tanci internetowi byli zafascynowani swobodą, z jaką można było w nim tworzyć gra­fikę. Łatwość stosowania programu została wzbogacona o narzędzia produkcyjne, ta­kie jak aktualizowanie adresów URL i zamienianie kolorów. W tym rozdziale znaj­dziesz opisy wszystkich technik pozwalających na zwiększenie wydajności pracy - od pod­glądu grafiki bezpośrednio w przeglądarce internetowej po jednoczesną opty­ma­li­za­cję całych katalogów obrazków.

Podgląd w przeglądarce XE "podgląd w przeglądarce"

Zdumiewające, jak wiele programów nazywanych aplikacjami do edycji grafiki inter­ne­to­wej nie daje możliwość obserwowania efektów pracy w jej docelowym środowisku
- prze­glądarce internetowej. Fireworks pozwala na obejrzenie grafiki nie w jednej, ale w dwóch przeglądarkach po wciśnięciu odpowiedniego skrótu klawiaturowego. Umo­żli­wia w ten sposób analizę tego, jak przeglądarka interpretuje Twoją grafikę oraz poz­wa­la na przetestowanie elementów reagujących na zdarzenia myszy i innych behawio­rów, które możesz przydzielać w Fireworks.

Projektanci internetowi, jak większość użytkowników Internetu, korzystają przeważnie z jed­nej z wersji przeglądarki Netscape Navigator lub Internet Explorer. Jednak w od­róż­nieniu od osób buszujących po Internecie, graficy muszą mieć możliwość przetestowania swojej pracy w róż­nych warunkach, aby zapewnić jej spójny wygląd, niezależny od platformy i wer­sji przeglądarki internetowej. Rynek przeglądarek został opanowany (mniej więcej po po­łowie) przez firmy Netscape i Microsoft. Jedna firma zawsze stara się być lepsza od dru­giej, dlatego też wciąż pojawiają się nowe wersje przeglądarek - a wraz z nimi - no­we możliwości. Ważna jest więc możliwość podglądu grafiki w więcej niż jednej wersji prze­glądarki internetowej.

Fireworks pokazuje, że bardzo ważna dla projektantów jest możliwość pod­glądu grafiki w dwóch przeglądarkach internetowych: głównej i dru­go­rzędnej. Pozwala to na szybki podgląd grafiki oraz porównanie jej in­ter­pretacji przez różne przeglądarki. Funkcji Preview in Browser uży­wam nawet do porównania tej samej grafiki w dwóch różnych, rozmie­szczo­nych obok siebie oknach. Nie muszę wówczas tworzyć żadnych dodat­ko­wych kopii grafiki w Fireworks.

Zanim skorzystasz z funkcji Preview in Browser XE "Preview in Browser" , musisz „powiedzieć” Fireworks, z ja­kiej przeglądarki chcesz korzystać. Nie jest to konieczne, ale dobrze jest zdefiniować od ra­zu dwie przeglądarki internetowe: główną i drugorzędną (jeśli masz dwie przeglądarki w swoim systemie operacyjnym). Aby zdefiniować przeglądarki:

351. Wybierz z menu polecenie FilePreview in BrowserSet Primary Browser.

Zostanie otwarte okno dialogowe Locate Browser (rysunek 18.1).

352. W oknie dialogowym Locate Browser odszukaj katalog, w którym znajduje się plik aplikacji przeglądarki. Typowe lokalizacje tych plików zostały wy­mie­nio­ne w tabeli 18.1. Pamiętaj jednak, że przy instalacji przeglądarki możesz okre­ślić in­ny katalog. W MacOS przeglądarkę można po instalacji przenieść do innego ka­talogu lub, jeśli nie ma ona programu instalacyjnego (na przykład Internet Ex­plorer 5), będzie się znajdowała w tym katalogu, do którego ją sko­piujesz.

353. Zaznacz plik aplikacji przeglądarki i kliknij przycisk Open.

354. Aby zdefiniować przeglądarkę drugorzędną, wybierz z menu polecenie File Pre­view in BrowserSet Secondary Browser i powtórz kroki od 2 do 3.

Rysunek 18.1. W oknie dialogowym Locate Primary Browser zdefiniuj główną przeglądarkę internetową

Tabela 18.1.

Typowe położenia przeglądarek

Przeglądarka		Lokalizacja w Windows	Lokalizacja w MacOS
Microsoft Internet Explorer 4.x		C:\Program Files\Internet	Explorer \Iexplore.exeMacintoshHD: Internet:Microsoft Internet Applications:Internet Explorer 4.01 Folder:Internet Explorer
Microsoft Internet Explorer 5.x		C: \Program Files\Internet	Explorer \IEXPLORE.exeMacintoshHD: Internet:Microsoft Internet 5:Internet Explorer:Internet Explorer
Netscape Navigator 4.x		C:\Program Files\Netscape\Navigator\netscape.exe	Macintosh HD:Internet:Netscape Navigator:Netscape Navigator
Netscape Communicator 4.x		C:\Program Files\Netscape\Programs\netscape.exe	Macintosh HD:Internet:Netscape Communicator:Programs:Netscape Navigator
Netscape 6		C:\Program Files\Netscape 6\Netscape.exe	Macintosh HD:Internet:Netscape 6:Netscape 6
Opera		C:\Program Files\Opera\Opera.exe	Brak
Sun HotJava		C:\HotJava\hotjava.exe	Macintosh HD:HotJava:hotjava
		Mimo że program Web TV Viewer na MacOS i Windows jest dosko­na­łym sposobem na sprawdzanie, jak Twoja praca będzie wyglądała w te­­le­wizji internetowej, nie przyjmuje on adresów URL z innych apli­ka­cji, więc nie można go używać jako głównej lub drugorzędnej prze­glą­darki w Fireworks. Zamiast tego, podejrzyj swoją grafikę w zwykłej prze­glądarce i skopiuj z niej adres URL pliku do programu Web TV Vie­wer. Jeśli nie posiadasz jeszcze tego programu, możesz go pobrać za dar­mo z witryny znajdującej się pod adresem http://developer.webtv.net.

Po zdefiniowaniu przeglądarek, możesz ich natychmiast używać. Jeśli jako główną prze­glądarkę wybierzesz Netscape Navigatora i będziesz chciał obejrzeć w niej swoją gra­fikę, wybierz z menu polecenie FilePreview in BrowserPreview in Netscape Navigator (Zalecam za­pa­mię­tywanie skrótów klawiaturowych, umożliwiających podejrzenie grafiki w prze­glą­dar­ce: F12 dla podglądu w głównej przeglądarce i Shift+F12 dla podglądu w przeglądarce drugo­rzęd­nej.)

Niemal normalną sytuacją jest praca dla klientów korzystających z przeglądarek lub ich wer­sji innych niż używane przez Ciebie. Najlepiej jest zainstalować tak wiele prze­glą­da­rek i ich wersji, ile to tylko możliwe.

	W zależności od używanej wersji Windows i Internet Explorer, przy każdym podglądzie grafiki w programie Internet Explorer, program ten może być uruchamiany na nowo, co wysta­wia na ciężką próbę wydajność Twojego komputera. Zawsze kiedy to moż­liwe, zamykaj Internet Explorer dla Windows przed ponownym uru­chomieniem podglądu grafiki.
	Internet Explorer dla Windows umożliwia jednoczesne zainstalowanie tyl­ko jednej jego wersji. Wyjątkiem jest instalacja Internet Explorera 5 po Internet Explorerze 4 z włączoną opcją Compatibility Mode. Bę­dziesz mógł wówczas uruchamiać Internet Explorera 4 i rodzaj połączenia IE 4 z IE 5 symulującego większość - ale nie wszystkie - unikatowe funk­cje Inter­net Explorera 4. Niemożliwe jest zainstalowanie Internet Ex­plorer 4 w sy­stemie Windows, w którym zainstalowany jest już In­ter­net Explorer 5. Jeśli będzie to możliwe, dla każdej wersji Internet Ex­plo­rera zainstaluj różne wersje systemu Windows lub utwórz wiele par­tycji Windows.

Jak najwcześniejsze i częste podglądanie grafiki w różnych przeglądarkach pozwala uchro­nić się przed późniejszymi niespodziankami, powodowanymi przez ich nie­zgod­ność i błędy.

Użytkownicy MacOS mogą korzystać z emulatorów komputerów zgod­nych z IBM PC, takich jak Connectix Virtual PC. Możesz posiadać na dysku twar­dym wiele partycji, na których zainstalowane będą różne wer­sje systemu Windows i przeglądarki Internet Explorer, możliwe jest więc korzystanie na jednym komputerze z dowolnych przeglądarek in­ter­netowych dla Windows i dla MacOS. Virtual PC pozwala nawet na zain­stalowanie systemu Linux lub OS/2 oraz pracujących w tych sys­te­mach przeglądarek.

Zarządzanie łączami
za pomocą palety URL XE "URL"

łącza są siłą napędową Internetu. Bez możliwości przechodzenia z jednej części, strony lub witryny do innej, Internet byłby bardzo liniowym medium (i na pewno nie tak po­pu­lar­nym). Zanim pojawił się Fireworks łącza do grafiki dodawane były dopiero na etapie „skła­dania” strony. Fireworks umożliwia przydzielanie do grafiki, za pomocą beha­wio­rów i obszarów aktywnych, kodów w języku HTML i JavaScript, więc łącza mogą być kom­ponowane z grafiką już w fazie tworzenia.

łącza są bardziej znane jako adresy URL. URL to skrót od angielskiego Uniform Re­sour­ce Locator (Ujednolicony wskaźnik do zasobów) i jest on najlepszym systemem adre­sowania w Internecie. Każda strona internetowa posiada własny URL. W projek­to­wa­niu dla Internetu wykorzystywane są dwa rodzaje tych adresów: bezwzględne (ab­so­lut­ne) i względne. Bezwzględny URL jest dokładnym adresem, umożliwiającym dostęp do strony WWW z dowolnego miejsca w Internecie. Oto przykład takiego adresu: www.idest.com/fireworks/index.htm#book.

W powyższym przykładzie, adres URL składa się z pięciu głównych części:

• Protokół: Definiuje protokół używany do dostępu do serwera. Serwery WWW wy­ko­rzystują protokół HTTP (HyperText Transfer Protocol - protokół trans­mi­sji hipertekstu). Inne protokoły to m.in.: FTP (File Transfer Protocol) do pobierania plików, News umożliwiający dostęp do serwerów grup dyskusyjnych i Mailto do wysyłania poczty elektronicznej.

• Domena (Nazwa serwera): Nazwa serwera (w naszym przykładzie www.idest .com) zarejestrowana w organizacji internetowej, takiej jak Network Solu­tions. Dzięki niej serwer internetowy może zostać odszukany według naz­wy domeny. Zamiast nazwy można też używać adresów IP (Internet Protocol), na przykład 199.227.52.143.

• Ścieżka dostępu: W zależności od położenia strony WWW na serwerze inter­ne­towym, ścieżka dostępu może wskazywać jedynie określony katalog (w na­szym przykładzie fireworks) lub wiele katalogów, które oddzielane są wówczas od siebie za pomocą ukośnika (/).

• Nazwa pliku: Nazwa pliku, w którym przechowywana jest właściwa strona WWW (w naszym przykładzie index.htm). Użyte rozszerzenie pliku zależy od ty­pu serwera i systemu administracji. W większości przypadków są to roz­sze­rze­nia .html i .htm, jednak możesz się spotkać również z rozszerzeniami .shtml, .asp, .cfm, .taf i innymi.

• Odnośnik: Część strony WWW wskazywana znacznikiem języka HTML, na­zy­wana odnośnikiem (w naszym przykładzie #book). Za pomocą odnośników moż­na w jednym długim dokumencie przechodzić pomiędzy różnymi jego częściami.

W absolutnym adresie URL trzeba użyć wszystkich wyżej wymienionych części, z wy­jąt­kiem fragmentu wskazującego cel. Inny typ adresu URL, względny URL, może skła­dać się jedynie z adresu strony albo nawet tylko z odnośnika. Gdziekolwiek znajduje się łą­cze, wskazuje ono element o położeniu względnym wobec bieżącej strony WWW. Je­śli na przykład chcesz utworzyć łącze do innej strony WWW, znajdującej się w tym sa­mym katalogu co bieżąca strona, wyglądałoby ono tak:

contact.html

Jeżeli jednak potrzebne jest Ci łącze do strony, znajdującej się w podkatalogu poło­żo­nym w katalogu bieżącej strony, względny URL miały postać:

old_news/pr98.htm

Im bardziej złożoną strukturę witryny utworzysz przed rozpoczęciem pracy w Fire­works, tym więcej będziesz mógł wy­korzystać narzędzi programu służących do zarządzania adresami URL.

Lista URL History XE "URL History"

W Fireworks łącza mogą być przydzielane do jednego z dwóch typów obiektów: ob­sza­rów aktywnych i plastrów. Odbywa się to za pomocą palety Object lub palety URL. Pa­le­ta Object (rysunek 18.2) umożliwia przydzielanie łączy za pomocą jednej z dwóch metod:

Rysunek 18.2. Wpisz nowy URL w polu tekstowym lub wybierz go z rozwijanej listy Current URL, znajdującej się w palecie Object

• Wpisz łącze w polu tekstowym Current URL (Bieżący URL).

• Jeśli zdecydujesz się na wpisanie łącza w polu Current URL, sprawdź dokładnie wpisany tekst, aby ustrzec się jakichkolwiek pomyłek. Serwery in­ter­ne­towe są wrażliwe na naz­wy, znaki interpunkcyjne, a nawet (w niektórych przypadkach) na wielkości liter w adresach URL.

• Wybierz URL z rozwijanej listy Current URL.

Rozwijana lista Current URL podzielona jest na dwie części: No URL (Brak adresu URL) i listę URL History (Historia adresów URL). Wybierz pozycję No URL (noHREF), jeśli do plastra lub obszaru aktywnego nie ma być przydzielony żaden adres URL (jest to do­myśl­ne ustawienie wszystkich obiektów internetowych). URL History jest listą łączy, któ­re są używane w bieżącym dokumencie. Za każdym razem, gdy ręcznie wpiszesz URL w polu tekstowym Current URL, jest on zapisywany w liście URL History.

Jeśli lista History URL zawiera łącza, które nie są już wykorzystywane w dokumencie, mo­żesz użyć polecenia Clear History (Wyczyść historię) z rozwijanego menu palety URL, co spowoduje usunięcie wszystkich nieużywanych adresów URL. Za pomocą in­ne­go po­le­cenia - Add History to Library (Dodaj historię do biblioteki) - możesz zapisać łą­cza uży­wane w dokumencie i wykorzystywać je następnie w innych dokumentach Fireworks.

Dodawanie adresów URL do biblioteki

Biblioteka URL to stała lista łączy, bardziej stała niż lista w URL History. Biblioteki ad­re­sów URL mogą być zapisywane, edytowane i ładowane w dowolnych dokumentach. Funk­cja ta ułatwia tworzenie grafik, które zawierają elementy reagujące na zdarzenia my­szy i mapy obrazków (czyli elementy wymagające adresów URL). Dla każdej witry­ny lub każdego klienta można tworzyć osobne biblioteki URL, co znacznie upraszcza póź­niejszą pracę nad grafiką.

Po zaznaczeniu obiektu internetowego możesz wybierać adresy z biblioteki URL, znaj­du­jącej się w palecie Object, ale zarządzanie nimi możliwe jest jedynie z poziomu pale­ty URL (rysunek 18.3). Aby otworzyć paletę URL, wybierz z menu polecenie WindowURL lub użyj skrótu klawiaturowego Alt+Shift+F10 (Option+Shift+F10). Jeżeli pa­leta URL znaj­duje się w grupie innych palet, możesz również kliknąć jej zakładkę.

Rysunek 18.3. Użyj palety URL do tworzenia, wykorzystywania i zapisywania bibliotek URL-i

Biblioteki URL zapisywane są w plikach HTML, wykorzystywanych przez zakładki prze­glądarek. Domyślna biblioteka łączy posiada nazwę URLs.htm. Adresy URL mo­żesz dodawać do biblioteki na kilka różnych sposobów. Umożliwiają to prawie wszys­tkie polecenia, które znajdują się w rozwijanym menu palety URL, przedstawione na rysunku 18.4 i w poniższej liście:

• Add History to Library (Dodaj historię do biblioteki). Umożliwia zapisanie hi­storii adresów URL użytych w bieżącym dokumencie jako część biblioteki URL.

• Add URL (Dodaj URL). Dodaje do biblioteki pojedynczy adres URL.

• Import URLs (Importuj URL). Umieszcza w bibliotece adresy URL, znaj­du­ją­ce się w dowolnym pliku HTML (nawet w pliku zakładek przeglądarki).

• Przycisk Add to Library (Dodaj do biblioteki). Dodaje do biblioteki adres URL, znajdujący się w polu tekstowym URL History.

Rysunek 18.4. Większość poleceń służących do zarządzania bibliotekami URL znajduje się w rozwijanym menu palety URL

Połączenie historii URL dokumentu z bieżącą biblioteką URL jest procesem wyma­ga­ją­cym tylko jednej czynności - wybrania polecenia Add History to Library z rozwijanego me­nu palety. Fireworks automatycznie połączy ze sobą obie listy łączy w porządku alfa­betycznym. Jeśli jakieś łącze znajdowało się w obu listach, program usunie du­plikaty.

Aby dodać pojedynczy URL do biblioteki, wybierz z rozwijanego menu polecenie Add URL. Zostanie otwarte okno dialogowe New URL (Nowy URL). Wpisz łącze w dużym ob­szarze tekstowym i kliknij przycisk OK. Nowe łącze zostanie dodane do biblioteki.

Aby dodać nowe łącze, możesz także kliknąć przycisk New URL, znaj­du­jący się u dołu palety URL.

Polecenie Import URLs jest bardzo elastyczne i pozwala na zaoszczędzenie czasu. łącza wol­no importować z dowolnych plików HTML, możesz więc łatwo zaimportować do doku­mentu wszystkie łącza, znajdujące się na określonej stronie WWW.

Możliwe jest także importowanie plików zakładek Natscape 4.x, które są zapisywane jako zwykłe pliki HTML. Jest to bardzo przydatna funk­cja przy tworzeniu łączy do stron, które już kiedyś odwiedzałeś w In­ter­ne­cie. Ścieżka dostępu do pliku Bookmarks.htm Netscape 4.x w Win­dows to: C:\Program Files\Netscape\Netscape Users\Username\Book­marks.html, zaś w MacOS: Macintosh HD:System Folder:Preferences: Net­scape Users:Username:Bookmarks.html.

Aby zaimportować łącza ze strony HTML:

370. Wybierz polecenie Import URLs z rozwijanego menu palety URL.

Zostanie otwarte standardowe okno dialogowe Open.

355. Odszukaj plik HTML, zawierający łącza, które chcesz dodać do biblioteki, za­znacz go i kliknij przycisk OK.

Do bieżącej biblioteki zostaną dołączone wszystkie łącza, znajdujące się w wy­bra­nej stronie HTML: względne i absolutne.

W następnym podrozdziale dowiesz się, że za pomocą palety URL możesz także two­rzyć, edytować, usuwać, zapisywać i ładować biblioteki adresów URL.

Zarządzanie bibliotekami URL

Oferowane przez Fireworks biblioteki URL są bardzo elastycznym narzędziem. Nową bi­bliotekę utworzysz za pomocą jednego polecenia, a istniejące biblioteki możesz edy­to­wać, usuwać, ładować i zapisywać.

Czasami strony WWW przenoszone są do nowych lokalizacji w Internecie. Jeśli masz ad­res takiej strony w bibliotece URL, możesz go zmodyfikować. Aby to zrobić, wy­ko­naj następujące czynności:

371. W palecie URL zaznacz adres, który chcesz zmodyfikować.

372. Wybierz polecenie Edit URL z menu rozwijanego palety URL.

Zostanie wyświetlone okno dialogowe Edit URL (rysunek 18.5).

356. Wpisz nowy URL w polu tekstowym. Aby uaktualnić również wszystkie łącza ist­niejące w bieżącym dokumencie, zaznacz opcję Change All Occurances in Do­cument. Kliknij przycisk OK.

URL znajdujący się w bibliotece zostanie zmodyfikowany.

Rysunek 18.5. Za pomocą polecenia Edit URL i okna dialogowego o takiej samej nazwie możesz aktualizować biblioteki adresów URL

Istnieją dwie metody usuwania adresów URL z biblioteki:

• Zaznacz niepotrzebny URL i kliknij przycisk Delete URL (Usuń URL), znaj­du­ją­cy się w prawym dolnym rogu palety URL.

• Zaznacz URL i wybierz polecenie Delete URL z menu rozwijanego palety URL.

Domyślnie, po uruchomieniu Fireworks ładowana jest jedna biblioteka URL o nazwie URLs.htm. Aby dodać kolejne biblioteki:

373. Wybierz polecenie New URL Library (Nowa biblioteka URL) z rozwijanego menu palety URL.

Zostanie otwarte okno dialogowe New URL Library (rysunek 18.6).

Rysunek 18.6. Za pomocą polecenia New URL Library możesz utworzyć bibliotekę adresów URL dla każdego ze swoich klientów

357. Wpisz nową nazwę biblioteki.

Jeśli nie wpiszesz rozszerzenia .htm lub .html, Fireworks zrobi to za Ciebie.

Fireworks utworzy nowy plik w katalogu URL Libraries, znajdującego się w katalogu Configuration wewnątrz katalogu programu Fireworks. Będzie on aktualizowany po zamknięciu programu, więc nie musisz ręcznie zapisywać swojej bi­blioteki adresów.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

Podczas gdy utworzenie nowej biblioteki jest prostą sprawą, usu­nię­cie niepożądanej biblioteki jest dużo bardziej zajmującym zajęciem. Nie ma polecenia umożliwiającego usuwanie bibliotek, więc musisz za pomocą Eksploratora Windows lub Findera w MacOS otworzyć ka­ta­log Configuration/URL Libraries i ręcznie usunąć plik HTML. Biblioteka zniknie z listy adresów URL po ponownym uruchomieniu Fire­works.

Skoro Fireworks automatycznie zapisuje tworzone biblioteki URL, czemu służy pole­ce­nie Export? Polecenie Export URLs znajdujące się w rozwijanym menu umożliwia zapi­sa­nie biblioteki URL jako pliku HTML w dowolnym katalogu. Plik HTML (rysunek 18.7) jest prostą listą łączy. Po ukończeniu tworzenia biblioteki, możesz użyć wyek­spor­towanego pliku jako podstawy strony głównej, składającej się wyłącznie z tekstu.

Rysunek 18.7. Wyeksportowanie biblioteki URL powoduje utworzenie listy łączy zapisanej w formacie HTML
		W MacOS, jeżeli nawet wpiszesz przy eksporcie pliku rozszerzenie .html, Fire­works i tak zapisze ten plik z rozszerzeniem .htm.

Aktualizowanie grafiki
za pomocą palety Find and Replace

Fireworks zawsze był dobrym narzędziem, jeśli chodzi o modyfikacje dowolnych ele­men­tów grafiki. Przed jego pojawieniem się wszystkich zmian musiałeś dokonywać ręcz­nie. Grafika witryny internetowej często składa się z elementów o zbliżonych sche­ma­tach kolorystycznych, formatowanych tą samą czcionką albo nawet - takich samych adre­sów URL, przydzielanych do map obrazków i przycisków. Zamiana błędnie napi­sa­nej nazwy klienta w jednej grafice to zupełnie inna sprawa niż zamiana tej nazwy we wszys­tkich grafikach znajdujących się w obrębie całej witryny internetowej.

Fireworks oferuje funkcję Find and Replace (Znajdź i zamień) pozwalającą zauto­ma­ty­zo­wać żmudny proces ręcznego modyfikowania tekstu, czcionek, kolorów i URL. Za po­mocą palety Find and Replace XE "paleta:Find and Replace" możesz aktualizować bieżące zaznaczenia, klatki, do­ku­men­ty lub grupy dokumentów. Wśród opcji palety Find and Replace dla tekstu i adre­sów URL znajduje się funkcja Regular Expression (Symbole wieloznaczne). Doko­ny­wa­ne zmia­­ny możesz śledzić za pomocą palety Project Log (Dziennik projektu).

Poza przetwarzaniem wsadowym i skryptletami, wszystkie automatyczne zmiany są ob­słu­giwane w Fireworks przez paletę Find and Replace (rysunek 18.8). W zależności od mo­dyfikowanych atrybutów, w palecie tej wyświetlane są różne opcje. Oto pięć atry­butów i ich opcje:

Rysunek 18.8. Użyj palety Find and Replace do automatycznych modyfikacji tekstu, czcionek, URL-i a nawet kolorów

• Text (Tekst). Dowolny obiekt tekstowy Fireworks może być modyfikowany za po­mocą palety Find and Replace. Wyszukiwać można pojedyncze znaki i całe zda­nia. Dostępne opcje wyszukiwania to: Whole Word (Całe wyrazy) - wy­szu­ki­wane są tylko całe wyrazy nieznajdujące się wewnątrz innych, Match Case (Uw­zględniaj wielkość liter) - uwzględnia wielkości liter wyszukiwanego teks­tu i dokonuje równie dokładnych zamian oraz Regular Expression (Symbole wie­loznaczne) - symbole systemowe, które zostaną dokładnie opisane w jed­nym z kolejnych podrozdziałów.

• Font (Czcionka). Każdy obiekt tekstowy używa określonej czcionki, o okre­ślo­nym stylu (lub braku stylu) i rozmiarze. Funkcja Find and Replace umożliwia ak­tualizowanie tych wszystkich charakterystyk razem lub osobno. Możesz na­wet wyszukiwać czcionki o rozmiarach, które należą do pewnego przedziału i sfor­matować wszystkie wyniki wyszukiwania jednym rozmiarem czcionki.

• Color (Kolor). Kolejnym atrybutem, który można wyszukiwać i zamieniać w Fi­re­works jest kolor obiektów. Masz możliwość modyfikowania obrysów, wypełnień, efektów, ob­ry­sów i wy­pełnień pojedynczo lub jednocześnie dla wszystkich tych atry­butów.

	Zamienianie kolorów za pomocą palety Find and Replace posiada pew­ne ograniczenia. Nie działa ono z obiektami tekstowymi i bitma­pa­mi. Możesz jednak zamienić kolor wybranej części grafiki za pomocą polecenia Edit Color, dostępnego w oknie dialogowym Export Preview.

• URL. Paleta Find and Replace dla URL wygląda podobnie jak dla tekstu. Każ­de łącze może zostać dowolnie zmodyfikowane (za pomocą funkcji Find and Re­pla­ce można nawet usunąć wszystkie łącza z dokumentu). Dla adresów URL w pa­lecie Find and Replace dostępne są opcje Whole Word, Match Case i Re­gu­lar Expression - atrybuty obowiązujące także przy wyszukiwaniu tekstu.

• Non-Web 216 (Kolory niebezpieczne dla Internetu). Wyszukuje kolory nie­bez­pieczne dla Internetu i zamienia je na najbliższe bezpieczne odpowiedniki. Op­cję tą można stosować do wypełnień i (lub) obrysów oraz efektów każdego obiektu.

Niezależnie od wybranych atrybutów, operacje wyszukiwania i zamiany można wyko­ny­wać pojedynczo lub wszystkie jednocześnie. Kliknij przycisk Find Next (Znajdź nas­tęp­ny), aby odszukać następny element, który będzie pasował do kryteriów wyszuki­wa­nia, a następnie przycisk Replace (Zamień), aby wprowadzić zmiany w wyszukanym elemencie lub ponownie przycisk Find Next, aby odszukać kolejny element bez dokonywania żad­nych zmian. W dowolnej chwili możesz także kliknąć przycisk Replace All (Zamień wszys­tko), aby zmodyfikować wszystkie elementy, znajdujące się w dokumencie, które speł­niają kryteria wyszukiwania.

	Co się stanie, gdy popełnisz jakąś pomyłkę w trakcie wykonywania ope­racji Find and Replace - na przykład klikniesz przycisk Replace All za­miast Replace? Jeśli dokonujesz modyfikacji jednego dokumentu, mo­żesz cofnąć wszystkie zmiany za pomocą polecenia EditUndo lub palety History. Nie bę­dziesz jednak mógł użyć tego polecenia po wykonaniu operacji Find and Replace na wielu plikach jednocześnie.

Dla wszystkich atrybutów zakres wyszukiwania definiowany jest przez wartości usta­wia­ne w rozwijanej liście Search In (Szukaj w). Oto dostępne w tej liście opcje:

• Selection (Zaznaczenie). Możesz modyfikować jedynie zaznaczony obiekt lub obiekty.

• Frame (Klatka). Ogranicza wyszukiwanie do aktualnie zaznaczonej klatki ak­tyw­nego dokumentu.

• Document (Dokument). Umożliwia wyszukiwanie w całym aktywnym doku­mencie.

• Project Log (Dziennik projektu). Ogranicza wyszukiwanie do plików, znaj­du­ją­cych się w palecie Project Log, która zostanie opisana w jednym z kolejnych pod­rozdziałów.

• Files (Pliki). Przeprowadza operację Find and Replace na dowolnych dos­tęp­nych plikach. Po wybraniu opcji Files otwierane jest okno dialogowe Open Mul­tiple, w którym możesz dodać do listy poszczególne pliki lub cały katalog.

	Jeśli chcesz zmodyfikować listę plików zaznaczonych dla operacji Find and Replace, istnieje pewna sztuczka, umożliwiająca ponowne otwar­cie okna dialogowego Open Multiple. Wybierz tymczasowo inną opcję z listy Search In (na przykład Document lub Frame), a następnie opcję Files. Zostanie ponownie otwarte okno dialogowe Open Multiple.

Wszystkie opcje znajdujące się w liście mają swoje zastosowania, ale prawdziwą siłę funk­cji Find and Replace daje możliwość obsługi wielu plików jednocześnie. Jednak wzrost możliwości funkcji pociąga za sobą wzrost ryzyka związanego z popełnianiem błę­dów. Fireworks oferuje dwie pomocnicze opcje, pozwalające zrównoważyć to ryzy­ko. Aby ustawić opcje, dotyczące tworzenia kopii zapasowych, wybierz polecenie Re­pla­ce Op­tions (Opcje zamieniania) z rozwijanego menu palety Find and Replace. Zos­ta­nie otwarte okno dialogowe Replace Options (rysunek 18.9). Jeśli zaznaczona będzie opcja Save and Close Files, Fireworks po dokonaniu modyfikacji zapisze i zamknie wszystkie pli­ki, jeśli zaś usuniesz zaznaczenie tej opcji, wszystkie pliki pozostaną otwarte. W roz­wi­janej liście Backup Original Files (Zapasowe kopie oryginalnych plików) znajdują się trzy opcje:

Rysunek 18.9. W oknie dialogowym Replace Options możesz zdefiniować opcje, dotyczące wykonywania kopii zapasowych

• No Backups (Brak kopii zapasowych). Docelowe pliki są zastępowane no­wy­mi wersjami, ale nie powstają żadne zapasowe kopie.

• Overwrite Existing Backups (Zastąp istniejące kopie). Docelowe pliki ko­pio­­wa­ne są do katalogu o nazwie Original Files, zaś operacja Find and Re­pla­ce jest prze­prowadzana na plikach, znajdujących się w swoich pierwotnych loka­li­za­cjach. Po każdym zastosowaniu funkcji Find and Replace kopie znaj­dujące się w ka­ta­logu Original Files są zastępowane nowszymi wersjami. Operację ta­ką można porów­nać do polecenia Undo, umożliwiającego cofnię­cie tylko jed­ne­go kro­ku. W kata­lo­gu Original Files zawsze znajdują się pliki o jeden po­ziom „starsze” niż te, na których została przeprowadzona ostatnia operacja Find and Replace.

• Incremental Backups (Twórz kolejne kopie). Wybierz tę opcję, jeśli nie chcesz utracić żadnych modyfikacji. Po każdym przeprowadzeniu operacji Find and Replace docelowe pliki kopiowane są do katalogu Original Files, ale za­miast zastępować starsze kopie są zapisywane pod kolejnymi nazwami. Na przy­kład - po pierwszej modyfikacji pliku Gwiazda.png, źródłowy plik jest zapi­sywany w katalogu Original Files pod nazwą Gwiazda.png. Po kolejnej ope­racji Find and Replace, nazwa pliku Gwiazda.png znajdującego się w ka­ta­lo­gu Original Files jest zamieniana na Gwiazda-1.png, zaś docelowy plik za­pi­sy­wany jest pod nazwą Gwiazda.png. Najnowsza wersja kopii zawsze będzie mia­ła oryginalną nazwę, zaś w nazwie najstarszej kopii będzie występowała naj­większa liczba. Działanie takie można porównać do polecenia Undo, ofe­ru­ją­cego cofanie nieograniczonej ilości operacji (ograniczone jedynie wolnym miej­scem na dysku twardym).

Opcji Incremental Backups możesz używać do kontrolowania wersji kopii, ale wadą tej op­cji jest to, że zapisywane są wszystkie tworzone pliki. To, którą opcję wy­bierzesz, zale­ży od ilości wolnego miejsca na dysku twardym oraz rozmiarów doce­lowych pli­ków. Jeśli masz 10GB wolnego miejsca na dysku, nie wahaj się i wybierz opcję Incre­men­tal Backups. Po skończeniu pracy możesz otworzyć katalog z kopiami i usunąć wszys­tkie pliki o numerze większym od 3, aby zachować jedynie kilka osta­tnich wersji.

Wyszukiwanie i zamienianie tekstu XE "wyszukiwanie i zamienianie tekstu"

Ostatnio klient mnie zaskoczył zadaniem, które jest koszmarem dla każdego projek­tan­ta grafiki internetowej - zmianą nazwy firmy. Musiałem zastąpić nie tylko logo, ale tak­że grafiki tła witryny WWW, w których występowała nazwa klienta. Przed oczami sta­nęła mi wizja wielu dni żmudnej harówki, która rozwiała się równie szybko jak się po­ja­wi­ła, gdy zdałem sobie sprawę z tego, że proces ten mogę zautomatyzować za pomocą funk­cji Find and Replace. Powierzone mi zadanie wykonałem w kilka godzin, nie mo­gąc wyjść ze zdumienia, jak szybko mi to poszło.

Aby wyszukać i zamienić tekst:

374. Jeśli palety Find and Replace nie ma na ekranie, wybierz z menu polecenie WindowFind and Replace lub - jeśli jest - kliknij jej zakładkę, aby przesu­nąć ją na wierzch innych palet.

375. Wybierz zakres przeszukiwania, wybierając jedną z opcji, dostępnych w roz­wi­ja­nej liście Search In.

376. Upewnij się, że w liście Attributes wybrana jest opcja Find Text.

377. W polu tekstowym Find wpisz poszukiwany tekst.

358. Jeśli chcesz zamienić poszukiwany tekst, wpisz zamienny tekst w polu teks­to­wym Change To (Zamień na).

359. Zaznacz żądane opcje: Whole Word (Znajdź tylko całe wyrazy), Match Case (Uw­zględniaj wielkość liter) lub Regular Expression (Symbole wieloznaczne).

360. Aby dokonywać zmian pojedynczo, najpierw kliknij przycisk Find Next (Znajdź następny), a później Replace (Zamień), aby zamienić tekst lub po­now­nie Find Next, aby przejść do następnego pasującego wyrażenia.

361. Aby zmienić jednocześnie wszystkie odszukane wystąpienia tekstu, kliknij przy­­cisk Replace All (Zamień wszystko).

Jeśli nie zostaną dokonane żadne zmiany, Fireworks wyświetli komunikat o za­koń­czeniu wyszukiwania. W innym przypadku zostaniesz poinformowany o licz­­bie dokonanych zmian.

Funkcja Find and Replace Text jest dla większości atrybutów bardzo prosta w użyciu, mu­sisz jednak zwrócić szczególną uwagę na kilka rzeczy:

• Obiekty tekstowe są rozszerzane, aby pomieścić nowe słowa, jeśli więc dodasz zbyt dużo tekstu, mogą one wystawać poza obszar roboczy. Tekst wy­rów­na­ny do lewej jest rozszerzany w prawo, tekst wyrównany do prawej jest rozsze­rza­ny w lewo, zaś tekst wyśrodkowany jest rozszerzany w obu kierunkach.

• Jeśli w trakcie operacji Find and Replace wykonywanej na wielu plikach jed­no­cześnie jeden z wybranych dokumentów jest otwarty w Fireworks, musisz go uaktywnić, zanim będzie mógł zostać zmodyfikowany.

Wyszukiwanie za pomocą symboli wieloznacznych

Duże znaczenie funkcji Find and Replace zapewnia opcja Regular Expression (Symbole wie­loznaczne). Symbole wieloznaczne podobne są do spotykanych w innych pro­gra­mach wieloznaczników, ale możliwości Fireworks są o wiele bardziej roz­bu­dowane.

Symbole wieloznaczne XE "Symbole wieloznaczne" XE "wyrażenia regularne" można uznać za system wyszukiwania pasujących do siebie wzor­ców tekstowych. Jeśli jesteś w stanie zidentyfikować dowolny wzór, powtarzający się wielokrotnie w Twoich tekstach, możesz zacząć korzystać z opcji Regular Expres­sion. Załóżmy, że tworzysz pasek nawigacyjny, zawierający wszystkie kontakty za­pi­sa­ne w formacie: Nazwisko, Imię. Za pomocą symboli wieloznacznych możesz odszukać pow­tarzający się wzorzec i przeformatować całą listę, umieszczając pozycję Imię przed Naz­wisko i odrzucając przecinki, a wszystko to w jednej operacji Find and Replace.

Symbole wieloznaczne możesz wykorzystywać z tekstem i adresami URL po zazna­cze­niu opcji Regular Expression. Po jej wybraniu, Fireworks różnymi metodami przetwa­rza tekst wpisany w polu Find oraz w polu Change To, szukając znaków specjalnych, ta­kich jak ukośniki lub gwiazdki.

Większość podstawowych symboli wieloznacznych jest zwykłym tekstem. Jeżeli włą­czysz opcję Regular Expression XE "Regular Expression" i wpiszesz w polu Find wyrażenie „th”, Fireworks znaj­dzie wszystkie wystąpienia „th” w tekście i (lub) wszystkich źródłach. Możliwość takiego wy­szukiwania ma niewiele zastosowań, ale powinieneś o niej pamiętać, przystępując do two­rzenia własnych wzorców.

Wieloznaczniki

Początkowo przydatna była możliwość korzystania z wieloznaczników, czyli znaków, któ­re odpowiadały różnym typom innych znaków. Wieloznaczniki w symbolach wielo­zna­cznych reprezentują tylko pojedyncze znaki (tabela 18.2). Innymi słowy - poje­dyn­czy symbol wieloznaczny nie odwzorowuje wszystkich poszukiwanych znaków, jak było na przy­kład w przypadku gwiazdki używanej do poszukiwania plików DOS-owych. Wa­ru­nek taki można jednak zbudować za pomocą nieco bardziej złożonego symbolu wie­lo­zna­cznego, co zostanie opisane w dalszej części tego podrozdziału.

	Bądź ostrożny przy stosowaniu wieloznacznika \S. W Fireworks wy­szukuje on o jeden znak więcej niż powinien. Na przykład - wy­ra­że­nie \Sworks znajdzie Fireworks zamiast samego Fireworks.

Lewy ukośnik, czyli backslash (\), jest używany do ograniczania działania znaków spe­cjalnych, które także mogą być przedmiotem poszukiwania. Jeżeli chcesz na przy­kład poszukać gwiazdki, musisz wpisać wyrażenie: \*. Podobnie, gdy próbujesz znaleźć lewy ukośnik, poprzedź go innym lewym ukośnikiem: \\.

Tabela 18.2.

Wieloznaczniki w symbolach wieloznacznych

Znak	Wyszukuje	Przykład
.	Dowolny pojedynczy znak	w.d znajdzie woda ale nie znajdzie wandal
\w	Wyszukuje dowolne znaki alfanumeryczne, wliczając w to podkreślenia	w\wd znajdzie woda i wandal
\W	Wyszukuje znaki niealfanumeryczne	jboy\Widest.com znajdzie [e-mail] i jboy$idest.com
\d	Wyszukuje wszystkie znaki numeryczne od 0 do 9	y\dk znajdzie Y2K
\D	Wyszukuje znaki niebędące cyframi	\D2\D znajdzie Y2K i H2O
\s	Wyszukuje wszystkie znaki odstępów, takie jak spacje, znaki tabulacji, podziału strony lub wiersza	\smedia znajdzie media, ale nie znajdzie Macromedia
\S	Wyszukuje dowolne znaki niebędące znakami odstępów.	\Smedia znajdzie Macromedia, ale nie znajdzie media

Wyszukiwanie położeń znaków i powtarzających się znaków

Za pomocą symboli wieloznacznych możesz wyszukiwać nie tylko typy znaków, ale rów­nież ich położenia w tekście. Funkcja ta umożliwia wykonywanie operacji na zna­kach, znajdujących się na początku, na końcu lub w środku wyrazu albo wiersza. Uży­cie symbolu wieloznacznego pozwala także na wyszukiwanie kopii, w których wy­stę­pu­ją powtórzenia danego znaku (liczba powtórzeń może być określona lub nie). Moż­li­wość ta znacznie rozszerza zakres wzorców, które mogą być wyszukiwane.

W tabeli 18.3 znajdziesz listę znaków używanych w wyszukiwaniu położeń i pow­tórzeń znaków.

Wyszukiwanie zakresów znaków

Oprócz pojedynczych znaków i powtórzeń pojedynczych znaków, symbole wielo­znacz­ne dają możliwość dołączania do lub wykluczania z wyszukiwania zakresów znaków. Funkcja ta jest szczególnie przydatna podczas pracy z grupami nazw lub tytułów. Zakresy zna­ków są definiowane za pomocą nawiasów kwadratowych. Wyszukiwanie zwraca wynik, gdy znaleziony zostanie choć jeden znak znajdujący się w nawiasie kwadratowym (nie jest wymagane wystąpienie wszystkich znaków).

W tabeli 18.4 znajdziesz opis wyszukiwania zakresów znaków za pomocą symboli wie­lo­znacznych.

Tabela 18.3.

Symbole wieloznaczne używane w wyszukiwaniu położeń znaków

Znak	Wyszukuje	Przykład
^	Początek wiersza	^m znajdzie „Mów mi Józek”
$	Koniec wiersza	d$ znajdzie ostatni znak d w wyrażeniu „Bond. James Bond”
\b	Granice słów, takie jak spacje lub powroty karetki	\bsuw znajdzie suwnica, ale nie znajdzie posuw
\B	Nieograniczone słowa znajdujące się wewnątrz innych słów	\Bsuw znajdzie posuw, ale nie znajdzie suwnica
*	Poprzedzający znak występujący zero lub więcej razy	b*c znajdzie BBC i Cola
+	Poprzedzający znak występujący jeden lub więcej razy	b+c znajdzie BBC, ale nie znajdzie Cola
?	Poprzedzający znak nie występujący wcale lub występujący jeden raz	br?ak znajdzie brak i bak, ale nie znajdzie burak
{n}	Poprzedzający znak występujący dokładnie n razy	n{2} znajdzie rynna, ale nie znajdzie niczego w słowie rynek
{n,m}	Co najmniej n i co najwyżej m znaków.	C{2,4} znajdzie #CC00FF i #CCCC00, ale nie znajdzie pełnego łańcucha #CCCCCC

Tabela 18.4.

Symbole wieloznaczne używane w wyszukiwaniu zakresów znaków

Znak	Wyszukuje	Przykład
[abc]	Dowolny ze znaków a, b i c	[lmbn] znajdzie znaki l i m w wyrazie lemur oraz b i n w wyrazie abonent
[^abc]	Wszystkie znaki z wyjątkiem a, b i c	[^itd.] znajdzie wszystkie litery w wyrazie PNG, ale nie znajdzie niczego w wyrażeniu „PNG itd.”
[a-z]	Wszystkie znaki z zakresu od a do z	[l-p] znajdzie l i o w wyrazie lodówka oraz n, o i p w wyrazie pochodzenie
x|y	Zarówno x, jak i y	chłopcy|dziewczyny znajdzie zarówno wyraz chłopcy, jak i dziewczyny

Korzystanie z grupowania w symbolach wieloznacznych

Grupowanie jest prawdopodobnie najsilniejszą możliwością symboli wieloznacznych. Za pomocą grupowania można łatwo modyfikować odpowiednie wzorce tekstowe. Po­niż­szą listę nazwisk:

Nowak, Jan Józef

Malinowski, Stefan

Burchard, Weronika

można tak zmodyfikować, aby nazwisko znajdowało się na ostatnim miejscu i usunąć z niej przecinki:

Jan Józef Nowak

Stefan Malinowski

Weronika Burchard

Grupowanie jest obsługiwane głównie przez nawiasy. Aby wskazać grupę znaków, wpisz je w nawiasie w polu tekstowym Find. Symbole wieloznaczne mogą zawierać na­wet do dziewięciu zgrupowanych wzorców. Każdy z takich wzorców jest oznaczany w polu tekstowym Change To znakiem dolara ($) poprzedzającym cyfrę (od 1 do 9), na przy­kład $3.

Aby zmodyfikować powyższą listę nazwisk, wpisz w polu Find następujące wyrażenie:

(/w+),/s(.+)

W „języku” symboli wieloznacznych oznacza to „(Pierwszy wzorzec to wszystkie znaki alfa­numeryczne występujące jeden lub więcej razy), po których występuje przecinek i spa­cja oraz (Drugi wzorzec, którym są wszystkie znaki - wraz ze znakami odstępów - wy­stę­pujące jeden lub więcej razy)”. W polu tekstowym Change To wpisz wyrażenie:

$2 $1

Wyrażenie takie spowoduje umieszczenie drugiego pasującego wzorca przed pierw­szym oraz wstawienie pomiędzy nie spacji.

	Pamiętaj, że znak dolara jest używany również do wskazywania os­tat­nie­go znaku w wierszu.

W tabeli 18.5 znajdziesz opis wykorzystania grupowania w symbolach wielo­znacz­nych.

Tabela 18.5.

Grupowanie w symbolach wieloznacznych

Znak	Wyszukuje	Przykład
(p)	Wszystkie wzorce pasujące do p	(/d).(/d) znajdzie dwa wzorce, z których pierwszy znajduje się przed kropką, a drugi po kropce, na przykład nazwę i rozszerzenie pliku
$1, $2...$9	Znajduje n-ty wzorzec znajdujący się w nawiasach	Wzorzec wykorzystany w poprzednim przykładzie można zamienić wzorcem rozszerzeniem pliku $1 jest $2. Wyrażenia Rozdział07.txt i Obrazek12.gif można w ten sposób zamienić na wyrażenia rozszerzeniem pliku Rozdział07 jest .txt i rozszerzeniem pliku Obrazek 12 jest .gif

Modyfikowanie atrybutów czcionek XE "modyfikowanie atrybutów czcionek"

Wybranie opcji Find Font z rozwijanej listy, znajdującej się w palecie Find and Replace, poz­wala na wyszukiwanie jednego lub wszystkich trzech różnych atrybutów czcionek:

• Font (Czcionka). Wybierz pozycję Any Font (Dowolna) lub określoną czcion­kę z listy czcionek zainstalowanych w Twoim systemie operacyjnym.

• Style (Styl). Wybierz pozycję Any Style (Dowolny) lub jeden ze standardowych sty­lów: Plain (Bez stylu), Bold (Pogrubienie), Italic (Kursywa) lub Underline (Pod­kreślenie). Możesz również wybrać jedną z kombinacji stylów, na przy­kład BoldItalic (Pogrubienie i kursywa) lub ItalicUnderline (Kursywa i po­kre­ślenie).

• Size (Rozmiar). Użyj opcji Min i Max, aby ustawić zakres poszukiwanych roz­mia­rów czcionek, lub wprowadź takie same wartości dla obu opcji, aby odszu­kać tylko jeden rozmiar czcionki.

Znaczenie opcji Find funkcji Find and Replace polega na tym, że możesz wyszukiwać tekst, posiadający jeden z atrybutów, na przykład rozmiar i modyfikować inny atrybut, na przykład czcionkę. Takie działanie umożliwia na przykład wyszukanie wszystkich gra­­fik znajdujących się w witrynie, których tekst ma rozmiar od 8 do 12 punktów i zmia­nę uży­wanych w nich czcionek z Times na Helvetica z jednoczesnym utrzy­ma­niem tego sa­mego rozmiaru (pozostaw puste pole tekstowe Change to size). Pozwala to zmo­­dy­fikować cały „główny” tekst Twojego dokumentu za pomocą jednego klik­nięcia myszą.

Aby zmodyfikować atrybuty czcionki za pomocą funkcji Find and Replace:

	Zaczniemy od atrybutów znajdujących się u góry palety Find and Re­pla­ce i będziemy się posuwać w dół.

378. Wybierz z menu polecenie WindowFind and Replace, aby wyświetlić paletę Find and Replace lub kliknij jej zakładkę, jeśli znajduje się za innymi paletami w grupie.

379. Za pomocą rozwijanej listy Search In wybierz zakres wyszukiwania: Search Do­cument (Dokument), Search Selection (Zaznaczenie) itd.

380. Z rozwijanej listy Attribute wybierz opcję Find Font, aby z modyfikować atry­buty czcionek.

W palecie Find and Replace zostaną wyświetlone opcje dotyczące czcionek (ry­sunek 18.10).

Rysunek 18.10. Po wybraniu w palecie Find and Replace opcji Find Font możesz modyfikować rozmiary, typy i style czcionek

362. Aby wyszukać określony typ czcionki, za pomocą listy rozwijanej wybierz za­miast opcji Any Font jedną z czcionek zainstalowanych w Twoim systemie ope­racyjnym.

363. Aby wyszukać określone style czcionki, za pomocą listy rozwijanej wybierz za­miast opcji Any Style jeden ze stylów, na przykład Plain (Bez stylu) lub Bold (Pogrubienie).

364. Aby wyszukać czcionki o rozmiarach należących do określonego przedziału, ustaw za pomocą opcji Min minimalny rozmiar czcionki i za pomocą opcji Max mak­symalny rozmiar czcionki. Aby wyszukać tylko jeden rozmiar czcionki, w obu opcjach: Min i Max ustaw takie same wartości.

	Obok pól tekstowych Min i Max znajdują się suwaki, za pomocą któ­rych również możesz ustawiać rozmiary czcionek.

365. Aby zmienić czcionkę, za pomocą listy rozwijanej wybierz zamiast opcji Same Font jedną z czcionek zainstalowanych w Twoim systemie operacyjnym.

366. Aby zmienić styl, za pomocą listy rozwijanej wybierz zamiast opcji Any Style je­den ze stylów, na przykład Italic (Kursywa).

367. Aby zmienić rozmiar, wpisz nowy rozmiar w polu tekstowym Size lub ustaw jego wartość za pomocą suwaka.

368. Kliknij przycisk Find, aby odszukać pierwszy pasujący obiekt, a następnie przy­cisk Replace, aby go zmodyfikować. Możesz także kliknąć przycisk Re­pla­ce All, aby zmodyfikować wszystkie obiekty spełniające kryteria wyszu­kiwania.

Zmiana kolorów w witrynie internetowej XE "zmiana kolorów w witrynie internetowej"

Kolor w identyfikacji graficznej jest równie ważny co kształt (na przykład niebieski w logo IBM). Projektanci, którzy tworzą grafikę dla Internetu, często używają określo­nych schematów kolorów, aby ustalić wizerunek graficzny firmy lub ułatwić użytkow­ni­kom nawigację wewnątrz witryny WWW. Niegdyś aktualizowanie kolorów grafik było nadzwyczaj żmudnym zajęciem. W Fireworks kolory można wyszukiwać i zamie­niać równie łatwo jak tekst (w niektórych przypadkach nawet łatwiej).

Fireworks stosuje kolor do trzech głównych elementów tworzących obiekt wektorowy: obrysów, wypełnień i efektów. Po wybraniu pozycji Find Color z listy atrybutów, która jest dostępna w palecie Find and Replace, możesz zmienić kolor dowolnego elementu, po­łączyć zamianę koloru obrysu z zamianą koloru wypełnienia lub zmodyfikować ko­lo­ry wszystkich atrybutów jednocześnie. Aby wyszukać i zamienić kolor:

381. Wybierz z menu polecenie WindowFind and Replace, aby wyświetlić paletę Find and Replace lub kliknij jej zakładkę, jeśli znajduje się za innymi paletami w grupie.

382. Za pomocą rozwijanej listy Search In wybierz zakres wyszukiwania.

383. Z rozwijanej listy Attribute wybierz pozycję Color.

W palecie Find and Replace zostaną wyświetlone opcje dotyczące wyszu­ki­wa­nia i zamiany kolorów (rysunek 18.11).

Rysunek 18.11. Za pomocą palety Find and Replace możesz uaktualnić wszystkie kolory występujące w witrynie internetowej

369. Za pomocą próbnika Find wybierz kolor, który chcesz odszukać.

Możesz wybrać jedną z próbek dostępnych w palecie rozwijanej, użyć kro­plo­mie­rza do pobrania koloru lub kliknąć przycisk Palette, aby otworzyć systemo­wy próbnik kolorów.

370. Z rozwijanej listy Apply To wybierz, do jakich elementów chcesz ograniczyć wy­szukiwanie.

371. Za pomocą próbnika Change To wybierz kolor, na jaki ma zostać zamieniony ko­lor poszukiwany.

372. Kliknij przycisk Find, aby odszukać pierwszy pasujący obiekt, a następnie przy­cisk Replace, aby go zmodyfikować. Możesz także kliknąć przycisk Repla­ce All, aby zmodyfikować wszystkie obiekty, spełniające kryteria wyszu­kiwania.

Zamienianie kolorów na bezpieczne dla Internetu

Zamiana kolorów na ich najbliższe odpowiedniki bezpieczne dla Internetu to już nie­ste­ty konieczność w projektowaniu grafiki. Dopóki większość użytkowników nie będzie po­siadała komputerów zdolnych do wyświetlania 32-bitowych głębi kolorów (i będą wie­dzieli jak uaktywnić taką możliwość), jedynie stosowanie kolorów bezpiecznych dla Inter­netu da możliwość zachowania zbliżonego wyglądu grafiki u większości użytkow­ni­ków, którzy odwiedzają Twoje strony.

Opcja Find Non-Web 216 (Znajdź kolory nie należące do palety Web216) ma działanie zbliżone do opcji Find Color palety Find and Re­pla­ce, ale w tym przypadku to Fireworks wybiera kolory za Ciebie. Aby wyszukać ko­lo­ry spoza palety Web 216 i zamienić je na bezpieczne kolory:

384. Wybierz z menu polecenie WindowFind and Replace, aby wyświetlić paletę Find and Replace lub kliknij jej zakładkę, jeśli znajduje się za innymi paletami w grupie.

385. Za pomocą rozwijanej listy Search In wybierz zakres wyszukiwania.

386. Z rozwijanej listy Attribute wybierz pozycję Find Non-Web 216.

W palecie Find and Replace zostaną wyświetlone opcje, dotyczące wyszuki­wa­nia i zamiany kolorów (rysunek 18.12).

Rysunek 18.12. Możesz wyszukiwać kolory, wyświetlane nieprawidłowo przez przeglądarki, w zaznaczeniach, dokumentach lub wielu plikach jednocześnie i zamieniać je na najbliższe odpowiedniki bezpieczne dla Internetu

373. Z rozwijanej listy Apply To wybierz, do jakich elementów chcesz ograniczyć wy­­szukiwanie.

374. Kliknij przycisk Find, aby odszukać pierwszy pasujący obiekt, a następnie przy­­cisk Replace, aby go zmodyfikować. Możesz także kliknąć przycisk Re­pla­ce All, aby zmodyfikować wszystkie obiekty, spełniające kryteria wy­szukiwania.

Aktualizowanie adresów URL XE "aktualizowanie adresów URL"

Jeśli zajmowałeś się już kiedykolwiek projektowaniem dla Internetu wiesz, jak aktyw­nym jest on medium. Witryny są w ciągłym „ruchu”, wciąż są dodawane nowe i usuwa­ne stare strony. Grafika tworzona w Fireworks może być integrowana z Internetem za po­mocą adresów URL, przydzielanych do obszarów aktywnych i plastrów. Przyda Ci się więc sposób na szybkie modyfikowanie adresów URL. Wszystkie związane z tym potrzeby za­spokaja opcja URL palety Find and Replace.

Opcja URL działa bardzo podobnie do opcji Text - obie opcje posiadają nawet iden­ty­czne interfejsy (rysunek 18.13). Poszukiwane łącze możesz wpisać w polu tekstowym Find, zaś nowe łącze w polu Change To. Znajdziesz tu trzy opcje dostępne również w op­cji Text: Whole Word, Match Case i Regular Expressions. W przypadku URL gra­ni­ce wy­razów nie są jednak wskazywane przez spacje lecz przez separatory: kropki, ukoś­niki lub dwukropki.

Aby wyszukać i zamienić łącza przydzielone do elementów graficznych w Fireworks:

387. Wybierz z menu polecenie WindowFind and Replace, aby wyświetlić paletę Find and Replace lub kliknij jej zakładkę, jeśli znajduje się za innymi paletami w grupie.

388. Za pomocą rozwijanej listy Search In wybierz zakres wyszukiwania.

Rysunek 18.13. Za pomocą dostępnej w palecie Find and Replace opcji URL możesz aktualizować łącza, znajdujące się w dokumentach

389. Z rozwijanej listy Attribute wybierz pozycję URL.

W palecie Find and Replace zostaną wyświetlone opcje, dotyczące wyszu­ki­wa­nia URL.

375. W polu Find wpisz poszukiwane łącze.

376. Jeśli zamierzasz zamienić łącze, wpisz zamiennik w polu tekstowym Change To.

377. Zaznacz żądaną opcję: Whole Word, Match Case lub Regular Expressions.

378. Kliknij przycisk Find, aby odszukać pierwsze pasujące łącze, a następnie przy­cisk Replace, aby go zmodyfikować lub ponownie przycisk Find, aby odszukać ko­lej­ne łącze.

379. Kliknij przycisk Replace All, aby zmodyfikować jednocześnie wszystkie łącza, speł­niające kryteria wyszukiwania.

Jak zostało wspomniane wcześniej, w wyszukiwaniu łączy można korzystać z opcji Re­gu­lar Expressions (Symbole wieloznaczne). Symbole wieloznaczne pozwalają na zna­cznie wię­cej niż tylko wyszukiwanie wieloznaczników. Załóżmy, że chcesz prze­kształ­cić wie­le adresów przypisanych do grafik znajdujących się w witrynie z absolutnych na wzglę­dne, przy czym wszystkie adresy wskazują na pliki znajdujące się w tym samym ka­talogu. Wymagałoby to zmiany adresów typu www.idest.com/fireworks/main.htm na main.htm. Dodatkowo załóżmy, że w obrę­bie witryny znajdują się łącza do plików, które są opracowane przez projektantów pracujących na kom­puterach PC i na MacOS, więc posiadających rozszerzenia .htm i .html. Korzystając z włą­cz­onej opcji Regular Expres­sions, w polu Find możesz wpisać następujące wy­rażenie:

(.+)/(/b.*/.html?)

W tłumaczeniu na „język” symboli wieloznacznych wyrażenie to oznacza: „(Pierwszy wzo­rzec zawierający wszystkie znaki) przed ukośnikiem i (Drugi wzorzec, którym mo­że być dowolny pojedynczy wyraz, po którym występuje kropka oraz rozszerzenie htm lub html).”

Aby wszystkie wyszukane wzorce zamienić na nazwy plików, wpisz w polu tekstowym Change To wyrażenie $2. W rezultacie zostanie zwrócony tylko drugi wzorzec bez żad­nych dodatkowych znaków.

Praca z paletą Project Log XE "paleta:Project Log"

Jednym z niebezpieczeństw, jakie kryje w sobie paleta Find and Replace, jest nie­umyśl­ne wprowadzanie niepożądanych zmian w dokumentach. Pomyłki takie zdarzają się zwłasz­cza przy korzystaniu z opcji jednoczesnej modyfikacji wielu plików; Fireworks otwo­rzy, zmodyfikuje i zamknie pliki tak szybko, że nawet nie będziesz wiedział, co zos­tało zmienione. Będzie tak, dopóki nie włączysz opcji Project Log (Dziennik pro­jek­tu), która potrafi śledzić wszystkie dokonane zmiany.

Po włączeniu opcji Project Log, zapisywane są wszystkie modyfikacje wielu plików. W pa­lecie Project Log (rysunek 18.14) znajduje się lista nazw plików, zmo­dyfi­ko­wa­nych klatek oraz data i godzina ostatnio przeprowadzonych modyfikacji. Co więcej - możesz dwu­krotnie kliknąć nazwę pliku, aby otworzyć go w Fireworks i zobaczyć, co zostało w nim zmienione.

Rysunek 18.14. Za pomocą palety Project Log możesz śledzić wszystkie operacje Find and Replace dokonywane na wielu plikach

Aby uaktywnić opcję Project Log i śledzić wszystkie zmiany, które zostały dokonane przez funkcję Find and Replace, wybierz z rozwijanego menu palety Find and Replace po­lecenie Add Files to Project Log (Dodaj pliki do dziennika projektu). Po włączeniu tej op­cji - jeśli zakres wyszukiwania ustawiony jest na Files - w palecie Project Log zos­ta­nie utworzona lista nazw, numerów klatek i dat ostatnich modyfikacji wszystkich zmie­nio­nych plików. Aby zweryfikować dokonane zmiany (albo je cofnąć), otwórz plik z po­zio­mu palety Project Log, klikając dwukrotnie jego nazwę lub zaznacz plik i kliknij przy­cisk Open (Otwórz).

W rozwijanym menu palety Project Log znajdują się jeszcze cztery inne, funkcjonalne polecenia:

• Export Again (Eksportuj ponownie). Wszystkie operacje wyszukiwania i za­mia­ny są przeprowadzane jedynie na plikach źródłowych, więc po zmody­fi­ko­wa­niu pliku zapewne będziesz chciał go wyeksportować. Polecenie Export Again eksportuje zmodyfikowany plik i nadpisuje go nad wcześniej wy­eksportowanym plikiem.

• Add Files to Log (Dodaj pliki do dziennika). Aby plik został dodany do dzien­nika projektu, nie musisz uruchamiać w nim funkcji Find and Replace. Za po­mo­cą polecenia Add Files to Log możesz umieszczać dodatkowe pliki w palecie Project Log. Jest to dobry sposób na utrzymywanie „pod ręką” wszystkich pli­ków, nad którymi pracujesz i otwieranie ich dopiero w razie potrzeby.

• Clear Selection (Usuń zaznaczone). Usuwa zaznaczone wpisy z palety Pro­ject Log.

• Clear All (Usuń wszystkie). Usuwa wszystkie wpisy z palety Project Log.

Paleta Project Log ma jeszcze jedno zastosowanie - wszystkie albo tylko zaznaczone pli­ki z palety Project Log mogą być przetwarzane wsadowo, co zostało opisane w ko­lej­nym podrozdziale.

	Możesz utworzyć trwałą kopię dziennika projektu, zawierającego szcze­gółowe opisy wszystkich dokonanych modyfikacji. Otwórz w tym ce­lu w przeglądarce plik Project_Log.htm znajdujący się w katalogu Fire­works/Settings i wydrukuj go. Po każdej przeprowadzonej zmia­nie plik Project_Log.htm jest aktualizowany.

Przetwarzanie wsadowe XE "przetwarzanie wsadowe" pików graficznych

W produkcję grafiki internetowej trzeba włożyć równie dużo wysiłku (monotonnych za­dań) co pracy twórczej. Im bardziej będziesz mógł zautomatyzować powtarzalne, często wy­ko­nywane zadania, tym więcej czasu pozostanie Ci na eksperymentowanie i two­rze­nie. „Centrum sterowania” automatyzacją pracy jest okno dialogowe Batch Processing (ry­sunek 18.15).

Rysunek 18.15. W oknie dialogowym Batch Processing możesz wybrać opcje automatyzacji i pliki do przetwarzania
		Na stronie www.macromedia.com/fireworks znajduje się Fireworks Batch Processing Updater, który pozwala naprawić błąd występujący w funkcji przetwarzania wsadowego Fireworks 4.
		W Fireworks 4 bardzo zwiększono możliwości przetwarzania wsadowego, przez umożliwienie łatwiejszego niż kiedykolwiek optymalizowania, skalowania i eksportowania wielu obrazków jednocześnie. Dodatkowo, można uruchamiać skrypty podczas operacji przetwarzania i zapisywać przetworzone pliki w wybranych przez siebie miejscach.

Procedura przetwarzania wsadowego

Oto podstawowa procedura uruchamiania automatycznej sesji przetwarzania plików:

390. Wybierz z menu polecenie FileBatch Process, aby otworzyć okno dialogowe Batch Process.

391. Korzystając z jednej z poniższych metod określ, jakie pli­ki mają być przetwarzane:

• Dodaj pojedynczy plik do listy przez wyszukanie go, zaznaczenie i kliknięcie przycisku Add. Operację można powtórzyć, jeżeli jest taka potrzeba.

• Dodaj kilka plików z tego samego katalogu do listy, wyszukując katalog, klikając kolejno wybierane pliki z wciśniętym klawiszem Ctrl (Shift) i klikając następnie przycisk Add. Operację można powtórzyć, jeżeli jest taka potrzeba.

• Dodaj wszystkie pliki z tego samego katalogu do listy, wyszukując katalog, i następnie klikając przycisk Add All. Operację można powtórzyć, jeżeli jest taka potrzeba.

	Aby usunąć plik z listy, zaznacz go i kliknij przycisk Remove. Nie wpłynie to bezpośrednio na sam plik.

• Wybierz wszystkie pliki przedstawione w palecie Project Log, te otwarte i te zamknięte, zaznaczając pole Include Files from Project Log.

• Wybierz wszystkie pliki aktualnie otwarte w Fireworks, zaznaczając pole Include Current Open Files.

380. Gdy lista plików do przetwarzania jest kompletna, kliknij przycisk Next. Okno dialogowe Batch Process zmieni się, umożliwiając określenie operacji, jakie mają być wykonane na plikach (rysunek 18.16).

Rysunek 18.16. Po kliknięciu przycisku Next, okno dialogowe Batch Process zmieni się i będziesz mógł określić, jakie operacje będą wykonywane podczas przetwarzania

381. W polu Batch Options wybierz żądaną operację i kliknij przycisk Add, aby dodać ją do listy Include in Batch. Nowo dodana operacja jest zaznaczana i w dolnej części okna dialogowego Batch Process pojawiają się związane z nią opcje (jeżeli istnieją). Aby usunąć operację z listy Include in Batch, zawsze można kliknąć przycisk Remove.

382. Określ opcje dla nowo dodanej operacji. Jeżeli, na przykład, dodałeś operację Scale (Skalowanie), do wyboru masz opcje No Scaling (Brak skalowania), Scale to Size (Skaluj do rozmiarów), Scale to Fit Area (Dopasuj) i Scale to Percentage (Skaluj procentowo) dla określenia wysokości, szerokości lub wartości procentowej, według potrzeb.

	Przy niektórych operacjach wymagane będzie kliknięcie przycisku Edit w dolnej części okna dialogowego Batch Process, w celu wyświetlenia kolejnego okna dialogowego, zawierającego odpowiednie opcje.

383. Powtórz kroki 4. i 5. w celu stworzenia żądanych operacji. Korzystając z przycisków ze strzałkami okna dialogowego Batch Process, możesz przesuwać w górę i w dół operacje na liście Include to Batch. Operacje będą wykonywane w kolejności, w jakiej znajdują się na liście.

384. Po dokładnym określeniu wszystkich operacji kliknij przycisk Next. Okno dialogowe Batch Process zmieni się po raz kolejny, aby umożliwić zakończenie i wykonanie operacji przetwarzania (rysunek 18.17).

Rysunek 18.17. W ostatniej wersji okna dialogowego Batch Process możemy zakończyć przetwarzanie i (lub) zapisać je jako skrypt

385. Wybierz, czy chcesz zapisać ustawienia przetwarzania wsadowego w tym samym katalogu co pliki oryginalne (Same Location as Original File), czy w innej lokalizacji (Custom Location). Po wybraniu opcji Custom Location, kliknij przycisk Browse i wybierz katalog docelowy.

386. Zaznacz pole wyboru Backups, aby stworzyć jeden z dwóch rodzajów kopii. Po zaznaczeniu opcji Overwrite Existing Backups (Zastąp istniejące kopie), otrzymasz jeden zestaw kopii, co jest odpowiednikiem pojedynczego polecenia Undo. Po zaznaczeniu opcji Incremental Backups (Wiele kopii), zachowane będą kopie każdej operacji przetwarzania wsadowego, jak opisano w podrozdziale „Aktualizowanie grafiki za pomocą palety Find and Replace”.

387. Po ustawieniu wszystkich opcji, za pomocą przycisku Save Script możesz zachować ope­rację przetwarzania wsadowego jako skryptlet. (skrytplety zostaną opisane w ko­lejnym podrozdziale). Pozwalają one na uruchomienie operacji przetwarzania bez potrzeby ponownego wprowadzania opcji.

388. Kliknij przycisk Batch, aby została wykonana operacja przetwarzania.

Zos­ta­nie wyświetlone okno dialogowe Batch Progress, zawierające informacje o tym, ile plików zostało już przetworzonych i ile jeszcze pozostało do prze­two­rzenia. Po zakończeniu operacji wyświetlona zostanie całkowita liczba prze­tworzonych plików.

Uruchamianie Skryptletów

Skryptlety XE "Skryplety" to skrypty Fireworks pisane w języku JavaScript. Można je generować za pomocą okna dialogowego Batch Processing, pisać je ręcznie lub łączyć ze sobą obie te możliwości. Największą zaletą skryptletów jest możliwość ich wielokrotnego wy­ko­rzystania.

Po zachowaniu skryptletu, zapisywanego w pliku z rozszerzeniem .jsf, możesz go uru­cha­miać z poziomu okna dialogowego Batch Process na jeden z poniższych sposobów:

• Dwukrotnie kliknij ikonę skryptletu.

• Wybierz z menu polecenie FileRun Script i wybierz żądany skryptlet.

• Przeciągnij ikonę skryptletu na ikonę aplikacji Fireworks lub na skrót albo alias do Fireworks.

• Przeciągnij ikonę skryptletu do okna Fireworks (tylko w Windows).

Wszystkie skryptlety są uruchamiane natychmiast. Fireworks posiada wiele funkcji, któ­rych kontrolowanie jest możliwe za pomocą Java Scriptu, więc korzystając ze skryp­tle­tów możesz również sterować programem.

	Więcej informacji o skryptletach znajdziesz w części VII.

Podsumowanie

W grafice internetowej duży nacisk kładziony jest na automatyzację pracy. Większość cza­su każdy projektant grafiki poświęca na aktualizowanie i edycję istniejących prac. Fire­works oferuje wiele rozwiązań, umożliwiających zminimalizowanie nakładów pracy:

• Grafikę można w każdej chwili obejrzeć w uprzednio zdefiniowanej przeglądarce internetowej — głównej lub drugorzędnej.

• Wszystkimi łączami przydzielanymi do internetowych obiektów Fireworks, ta­kich jak plastry i gorące punkty, można zarządzać z poziomu palety URL, w któ­rej znajduje się lista łączy, używanych w bieżącym dokumencie (Historia URL) oraz łączy zapisywanych w bibliotekach.

• łącza znajdujące się w dowolnym pliku HTML można zaimportować do Fire­works jako bibliotekę URL.

• Paleta Find and Replace pozwala na aktualizowanie tekstów, atrybutów czcio­nek, kolorów, adresów URL, a nawet na zamianę kolorów na bezpieczne dla In­ternetu w bieżącym dokumencie, klatce, zaznaczeniu lub grupie wybranych do­kumentów.

• Za pomocą funkcji Batch Process (Przetwarzanie wsadowe) można zau­to­ma­tyzować operacje, które są wykonywane przy eksportowaniu grafiki, takie jak optymalizacja i skalowanie. Pozwala to na zminimalizowanie żmudnej i powtarzającej się pracy.

• Sesja przetwarzania wsadowego może zostać zapisana jako skryptlet, czyli skrypt napisany w języku JavaScript. Skryplety można w każdej chwili mody­fi­ko­wać lub uruchamiać.

W następnym rozdziale dowiesz się, do czego służy nowe menu Fireworks - Com­mands oraz paleta History.




Rozdział 19.
Automatyzacja pracy za pomocą menu Commands i palety History

W tym rozdziale:

• Uruchamianie wbudowanych poleceń.

• Zwiększanie wydajności pracy za pomocą palety History.

• Tworzenie własnych poleceń bez pisania kodu.

• Zarządzanie menu Commands.

W dużym skrócie - paleta History jest kombinacją polecenia Undo (Cofnij) i narzędzia do nagrywania makropoleceń. Wszystkie czynności wykonywane w Fireworks są auto­ma­tycznie zapisywane w palecie History. Następnie możesz w dowolnej chwili prze­cho­dzić pomiędzy zapisanymi akcjami i cofać wybrane czynności. Jednak najbardziej inte­re­sujące jest to, że wszystkie wykonane akcje można zapisać jako polecenie i wyko­rzys­ty­wać w przyszłości. Musisz wciąż skalować przyciski do wymiarów 40×40 pikseli, aby za­chować standardy firmowe ? Zrób to raz, zapisz wykonane czynności jako polecenie i w przyszłości całą operację będziesz mógł przeprowadzić w jednym kroku.

W tym rozdziale przyjrzymy się wbudowanym poleceniom menu Commands i two­rze­niu własnych poleceń, budowanych na podstawie tych, które są zachowane w palecie History. Poznasz również inne zastosowanie palety History - wielostopniowe polecenie Undo. Aż w końcu dowiesz się, jak uporządkować menu Commands, abyś nie musiał go przewijać, gdy utworzysz wiele własnych poleceń.

Uruchamianie wbudowanych poleceń

Głównym zastosowaniem menu Commands XE "menu:Commands" jest tworzenie własnych poleceń. W menu tym znajdziesz również grupę wbudowanych poleceń, które pozwolą na wypróbowanie moż­li­woś­ci poszerzania funkcjonalności Fireworks. Po analizie tych poleceń byłem zdu­mio­ny, że można do Fireworks dodać funkcje, używające JavaScriptu bez napisania ani jed­ne­go wiersza kodu. Wbudowane polecenia menu Commands (pokazane na rysunku 19.1 i opi­­sywane w kolejnych podrozdziałach) są bardzo użytecznym dodatkiem do zestawu na­rzędzi Fireworks.

Rysunek 19.1. W menu Commands znajduje się grupa poleceń zorganizowanych w kilku podmenu, które demonstrują możliwości poszerzania funkcjonalności Fireworks

Podmenu Creative XE "Creative" (Kreacja)

Dwa z trzech poleceń, które znajdują się w podmenu Creative, służy do kon­wer­towania palet zaznaczonych obiektów:

• Polecenie CommandsCreativeConvert to Grayscale konwertuje paletę do­wol­­nego obiektu na skalę szarości, zawierającą dwieście pięćdziesiąt sześć od­cie­ni szarości.

• Polecenie CommandsCreativeConvert to Sepia Tone działa podobnie do Con­vert to Grayscale, ale zamiast na skalę szarości, konwertuje kolory zazna­czo­ne­go obiektu na odcienie sepii.

Jeżeli masz jakieś zdjęcie, które chcesz wyeksportować w formacie GIF, aby uzyskać przezroczyste obszary lub utworzyć animowanego GIF-a, uprzednie przekonwertowanie obrazka na skalę szarości lub od­cie­nie sepii daje zazwyczaj lepsze efekty niż stosowanie ditheringu. Za­równo skala szarości, jak i sepia mogą posiadać maksymalnie dwieś­cie pięćdziesiąt sześć odcieni, czyli tyle, ile kolorów może zawie­rać obrazek w formacie GIF.

Ostatnie polecenie z podmenu Creative - Create Picture Frame (Utwórz ramkę) jest dos­ko­na­łym narzędziem, które umożliwia tworzenie ramek fotograficznych wokół obraz­ków.

Aby utworzyć ramkę wokół dokumentu:

392. Wybierz z menu polecenie CommandsCreativeCreate Picture Frame.

Fireworks wyświetli okno dialogowe JavaScript.

389. Wpisz mierzoną w pikselach szerokość ramki. Kliknij przycisk OK.

Fireworks powiększy obszar roboczy i utworzy wokół dokumentu „drewnianą” ramkę o zde­finiowanej w pikselach szerokości i trójwymiarowym wyglądzie (rysunek 19.2).

Rysunek 19.2. Za pomocą polecenia Create Picture Frame bardzo szybko możesz utworzyć ramkę otaczającą Twój obrazek
		Jeśli tekstura ramki Ci nie odpowiada, zaznacz i zmień jej ustawienia w palecie Fill.

Podmenu Document (Dokument)

W podmenu CommandsDocument znajduje się sześć poleceń, które ułatwiają pracę w ob­szarze roboczym, warstwach lub klatkach Twojego dokumentu.

Center in Document XE "Center in Document" (Wyśrodkuj w dokumencie)

Polecenie Center in Document jest równie przydatne, co polecenia Fireworks służące do wy­równywania obiektów względem siebie i sprawdza się doskonale, gdy chcesz umieś­cić obiekty w środku obszaru roboczego. Zanim to polecenie zostało wprowadzone do Fireworks, aby wy­równać obiekty względem obszaru roboczego, musiałeś utworzyć tymczasowy obiekt o tych samych rozmiarach jakie miał obszar roboczy.

Aby użyć polecenia Center in Document, zaznacz obiekt lub obiekty i wybierz z menu po­lecenie CommandsDocumentCenter in Document. Fireworks wyrówna zaznaczo­ne obiek­ty do środka obszaru roboczego.

Rozkład na warstwy

Po zaznaczeniu wielu obiektów i wybraniu polecenia CommandsDocumentDistribute to Layers, każdy obiekt zostanie umieszczony na swojej własnej warstwie. Jeżeli warstw jest za mało, Fireworks utworzy nowe. Obiekty są rozmieszczane zgodnie z ich kolejnością w stosie, zatem obiekt najbliższy obszarowi roboczemu zostanie na warstwie bieżącej, a obiekt najbardziej oddalony do obszaru roboczego znajdzie się na warstwie o najwyższym numerze.

	Podczas importowania dokumentu Photoshopa, Fireworks konwertuje warstwy Photoshopa na obiekty Fireworks i umieszcza je wszystkie na jednej warstwie w Fireworks. Polecenie Distribute to Layers pozwala szybko umieścić wszystkie obiekty na ich własnych warstwach w Fireworks.

Zmiana właściwości warstw

Dwa kolejne polecenia są szybkimi sposobami na skupienie uwagi projektanta tylko na bieżącej warstwie:

• Polecenie CommandsDocumentHide Other Layers ukrywa wszystkie war­stwy z wyjątkiem bieżącej.

• Polecenie CommandsDocumentLock Other Layers blokuje wszystkie war­stwy z wyjątkiem bieżącej.

Odwracanie kolejności klatek

Czasami po zaimportowaniu do Fireworks przycisku, który reaguje na zdarzenia myszy, mo­że się okazać, że porządek jego stanów jest odwrócony, czyli klatka Frame 1 nie jest je­go stanem początkowym. Dzieje się tak często przy importowaniu warstw FreeHanda ja­ko klatek Fireworks. Odwracanie kolejności klatek pozwoli w takim przypadku zao­szczę­dzić wiele czasu i pracy projektanta przy tworzeniu animacji. Fireworks oferuje dwa polecenia, które umożliwiają odwrócenie kolejności klatek dokumentu:

• Polecenie CommandsDocumentReverse All Frames odwraca kolejność wszy­s­­tkich klatek dokumentu. Pierwsza klatka staje się ostatnią, zaś ostatnia klatka - pierwszą.

• Polecenie CommandsDocumentReverse Frame Range działa podobnie do po­le­cenia Reverse All Frames z tym wyjątkiem, że pyta Cię o numery po­cząt­ko­wej i końcowej klatki, a następnie odwraca kolejność tylko zdefiniowanego za­kresu klatek.

Technika Fireworks: uzupełnianie animacji

Często wykorzystywaną techniką tworzenia animacji jest zbudowanie tylko połowy sek­wencji, na przykład wschodzącego słońca, a następnie odwrócenie kolejności ist­nie­ją­cych klatek i zbudowanie drugiej połowy sekwencji, na przykład zachodzącego słoń­ca. Polecenie Reverse All Frames pozwala na wykonanie tego zadania w rekordowo krót­kim czasie:

393. Utwórz pierwszą połowę animacji, na przykład wspomniany wschód słońca lub obiekt wlatujący na obszar roboczy.

394. Wybierz z menu polecenie FileSave a Copy, aby zapisać kopię dokumentu.

395. Wybierz z menu polecenie CommandsDocumentReverse All Frames, aby od­wró­cić kolejność wszystkich klatek animacji.

396. Wybierz polecenie Add Frames (Dodaj klatki) z rozwijanego menu palety Frames.

Fireworks wyświetli okno dialogowe Add Frames.

390. W polu tekstowym Number wpisz taką samą liczbę klatek, jaka obecnie znaj­du­je się w dokumencie. Jeżeli na przykład w dokumencie znajduje się dziesięć kla­tek, wpisz liczbę 10, aby utworzyć dziesięć nowych klatek.

391. W części Insert New Frames (Wstaw nowe klatki) wybierz opcję At the Be­gi­n­ning (Na początku) i kliknij przycisk OK.

Fireworks utworzy nowe klatki na początku dokumentu i zaznaczy pierwszą klat­kę o nazwie Frame 1.

392. Wybierz z menu polecenie FileImport. Odszukaj kopię dokumentu, którą za­pi­sa­łeś w drugim kroku. Kliknij przycisk Import, aby go zaimportować.

393. Umieść kursor w kształcie litery L w lewym górnym rogu obszaru roboczego, aby zaimportowany dokument miał takie samo położenie jak dokument ory­gi­nal­ny. Kliknij, aby umieścić importowany dokument.

Oryginalna animacja wypełni puste klatki dokumentu i będzie początkiem tworzonej ani­macji. Odwrócone klatki zostaną wykorzystane jako końcowa sekwencja animacji.

	Więcej o tworzeniu animacji w Fireworks znajdziesz w rozdziale 23 i 24.

Panel Layout Sets (Konfiguracje palet)

Panel Layout Sets XE "Panel Layout Sets" to zapisane konfiguracje pływających palet Fireworks. Zachowane usta­wienia są automatycznie dodawane do podmenu CommandsPanel Layout Sets, skąd mogą być w dowolnej chwili wywoływane, aby zorganizować palety pływające.

W Fireworks znajdują się standardowo trzy konfiguracje Panel Layout Sets, każda zoptymalizowana dla konkretnej rozdzielczości:

• CommandsPanel Layout Set1024x768

• CommandsPanel Layout Set1280x1024

• CommandsPanel Layout Set800x600 (rysunek 19.3)

	Panel Layout Sets są rozwiązaniem, które cieszy się popularnością wśród użytkowników, pracujących z niskimi rozdzielczościami ekra­no­wy­mi, przy których pływające palety znajdują się poza widzialnym ob­sza­rem ekranu. Wybranie jednej z konfiguracji przywraca rozmie­szcze­nie palet, umożliwiające wygodną pracę w Fireworks.

Rysunek 19.3. Polecenie Panel Layout Set800×600 organizuje palety blisko siebie, aby zmieściły się przy ustawieniu ekranu 800x600

Panel Layout (Konfiguracja palet)

Polecenie Panel Layout XE "Panel Layout" pozwala na szybkie zapisanie własnej konfiguracji pa­let pływających. Oprócz zachowania jednej ulubionej konfiguracji palet, możesz także zapisać kon­figuracje zoptymalizowane pod kątem wykonywania określonych zadań, na przy­kład rozmieszczenie palet dla rysowania, w którym najważniejszymi paletami są Object, Info, Fill i Stroke lub dla optymalizacji, wykorzystującej przede wszystkim palety Opti­mi­ze, Color Table i Frames.

Chociaż Fireworks oferuje kilka wbudowanych Panel Layout Sets, początkowa konfiguracja standardowa nie jest zapisywana. Jeżeli wciąż korzystasz z konfiguracji początkowej, utwórz Panel Layout Set i zapisz ją. Jeżeli nie, możesz przywrócić konfigurację początkową przez usunięcie pliku Fireworks 4 Preferences w MacOS (w katalogu Preferences, wewnątrz katalogu systemowego) lub pliku Fireworks 4.ini w Windows (wewnątrz katalogu Fireworks 4). Po ponownym uruchomieniu Fireworks, wszystkie ustawienia przyjmą wartości domyślne, łącznie z lokalizacją palet pływających.

Aby utworzyć własną konfigurację palet:

397. Wyświetlając i ukrywając palety oraz zmieniając ich rozmieszczenie, utwórz uk­ład palet, który chcesz zachować.

398. Wybierz z menu polecenie CommandsPanel Layout.

Fireworks wyświetli okno dialogowe Javascript, w którym musisz wpisać naz­wę nowej konfiguracji palet (rysunek 19.4).

Rysunek 19.4. Nazwij konfigurację palet przed jej zachowaniem

394. Wpisz nazwę nowej konfiguracji palet i kliknij przycisk OK.

Fireworks zapisze rozmieszczenie palet jako nową konfigurację i doda ją do podmenu Com­mandsPanel Layout Sets.

	Utworzenie konfiguracji palet o takiej samej nazwie, jaką ma konfi­gu­ra­cja już istniejąca, spowoduje zastąpienie starej konfiguracji bez żad­nych ostrzeżeń dla użytkownika. Może się zdarzyć, że przez krótki okres czasu oba wpisy będą obecne w podmenu Panel Layout Sets, ale plik oryginalnego polecenia będzie utracony.

Reset Warning (Przywracanie ostrzeżeń)

W wielu oknach ostrzegawczych pojawia się opcja Don't ask again (Nie mów mi o tym ponownie), pozwalająca pomijać to ostrzeżenie w przyszłości. Aby ponownie uaktywnić ostrzeżenia w Fireworks, należy wybrać polecenie Com­mandsReset Warning Dialogs.

Podmenu Web (Internet)

W podmenu CommandsWeb znajdują się dwa polecenia rozszerzające możliwości eks­por­tu grafiki z Fireworks.

Create Shared Palette (Utwórz wspólną paletę kolorów)

Polecenie Create Shared Palette przegląda katalog pełen obrazków i tworzy na ich pod­sta­wie plik zawierający współużytkowaną paletę kolorów (.act).

Aby utworzyć paletę kolorów wspólną dla obrazków, znajdujących się w określonym ka­talogu:

399. Wybierz z menu polecenie CommandsWebCreate Shared Palette.

Fireworks wyświetli okno dialogowe z informacjami na temat działania po­lecenia.

395. Kliknij przycisk OK, aby kontynuować wykonywanie polecenia Create Shared Palette.

Fireworks wyświetli okno dialogowe Select Folder (rysunek 19.5).

Rysunek 19.5. Wybierz katalog obrazków, na podstawie których Fireworks ma utworzyć współużytkowaną paletę kolorów

396. Odszukaj katalog z obrazkami i kliknij przycisk Select „nazwa_katalogu”, aby ut­worzyć paletę kolorów współużytkowanych przez te obrazki.

Fireworks wyświetli okno dialogowe JavaScript.

397. Wpisz maksymalną liczbę kolorów, jaka może znajdować się w palecie i kliknij przy­cisk OK.

W trakcie przetwarzania obrazków Fireworks wyświetli okno dialogowe „pro­ces­sing Command script”, a po zakończeniu przetwarzania - okno dialogowe Save.

398. Odszukaj katalog, w którym chcesz zapisać plik palety kolorów i wpisz jego nazwę. Klik­nij przycisk Save.

Fireworks zapisze paletę współużytkowanych kolorów jako plik tabeli kolorów z roz­sze­rzeniem .act. Pliki takie można otwierać za pomocą palety Color Table w Fireworks lub importować do Photoshopa.

	Dla użytkowników MacOS: Fireworks zapisuje plik palety z kodem Fire­works Creator (MKBY), ale program ten nie posiada ikony dla plików ta­bel kolorów (typ 8BCT). Jeżeli masz Photoshopa, przypisz do pliku kod Photoshop Creator (8BIM) za pomocą programu AppleScript lub in­nego narzędzia, takiego jak File Buddy. Do pliku zostanie wówczas przy­pisana także ikona (z Photoshopa).

Puste znaczniki Alt

Znacznik języka HTML - img, używany do wstawiania obrazków na strony WWW, po­sia­da atrybut alt, który wyświetla zastępczy tekst u użytkowników, posiadających wyłą­czo­ne wyświetlanie obrazków w swoich przeglądarkach lub mających przeglądarki obsłu­gujące jedynie tekst. Tekst zastępczy jest szczególnie ważny dla użytkowników niewidomych, korzystających z syntezatorów mowy do odczytywania tekstu i tekstu zastępczego. Po zaznaczeniu plastra, pojedynczego obszaru aktywnego lub kilku obszarów aktywnych możesz wpi­sać ich tekst zastępczy w palecie Object. Polecenie CommandsWebSelect Blank Alt Tags pozwala zaznaczyć wszystkie obszary aktywne i plastry dokumentu, które nie posiadają tekstu zastępczego i wprowadzić taki tekst dla nich wszystkich jed­no­cześ­nie. Możesz na przykład przypisać do wszystkich przycisków, które znajdując się na stro­nie, tekst „przycisk”.

Set Alt Tags (Ustaw znaczniki Alt)

Po wybraniu z menu polecenia CommandsWebSet Alt Tags Fireworks wyświetli okno dia­logowe pokazane na rysunku 19.6. Wpisz w nim tekst zastępczy i kliknij przy­cisk OK, a program wprowadzi tekst zastępczy do wszystkich obszarów aktywnych i plastrów dokumentu, które go nie posiadają. Jeśli nie wpiszesz żadnego tekstu, kliknięcie przycisku OK da takie same re­zul­taty, co kliknięcie Cancel.

Rysunek 19.6. Jednym poleceniem możesz przydzielić tekst zastępczy do wszystkich obiektów internetowych znajdujących się w dokumencie

Podnoszenie wydajności pracy za pomocą palety History

Paleta History XE "paleta:History" umożliwia nie tylko cofanie poszczególnych czynności, ale również za­pi­sy­wa­nie ich jako polecenia, które można wielokrotnie powtarzać. Pozwala to na znaczne zwięk­szenie wydajności pracy. Jeżeli pracowałeś z paletą History Photoshopa, wiesz, jak cięż­ko by się pracowało bez niej.

	Paletę History znajdziesz także w innym programie firmy Macromedia - Dreamweaver 3.

Polecenia Undo (Cofnij) i Redo (Ponów)

Fireworks już od dawna oferuje wielostopniowe polecenie Undo XE "Undo" , które pozwala zapra­co­wanym projektantom - za pomocą skrótu klawiaturowego Ctrl+Z (Command+Z) lub po­lecenia EditUndo - cofać kolejno ostatnio wykonane operacje. Paleta History ułatwia korzystanie z funkcji Undo i umożliwia co­fanie jednej lub wielu wykonanych operacji za pomocą prostego polecenia.

W palecie History znajduje się specjalny suwak, nazywany znacznikiem cofania (Undo Marker), który umo­żliwia wskazanie każdej z przeprowadzonych operacji i powrót do stanu do­ku­men­tu sprzed wykonania tej operacji. Paletę History i jej znacznik cofania możesz zobaczyć na rysunku 19.7.

Rysunek 19.7. Po utworzeniu nowego dokumentu paleta History jest pusta (po lewej) i od tego momentu rozpoczyna się zapisywanie wszystkich Twoich czynności

Aby cofnąć wykonane czynności za pomocą palety History, użyj jednej z poniższych metod:

• Przeciągnij suwak cofania w górę palety History, aż znajdzie się on przy za­da­niu, do którego chcesz się cofnąć.

• Kliknij ścieżkę znacznika cofania obok zadania, do któ­re­go chcesz się cofnąć. Znacznik cofania zostanie przeniesiony do tego punktu.

Cofnięte zadania są wyszarzane w palecie History, a dokument jest odpowiednio aktu­alizowany.

Logicznym towarzyszem polecenia Undo (Cofnij) jest polecenie Redo XE "Redo" (Ponów). Po cof­nię­ciu jednego lub wielu kroków możesz je ponowić.

Aby ponowić cofnięte czynności za pomocą palety History, użyj jednej z poniższych metod:

• Przeciągnij znacznik cofania w dół palety History, aż znajdzie się on przy za­da­niu, które chcesz ponowić.

• Kliknij ścieżkę znacznika cofania obok zadania, które chcesz ponowić. Znacznik cofania zostanie przeniesiony do tego punktu.

Domyślnie Fireworks zapisuje w palecie History dwadzieścia ostatnio wykonanych za­dań. Po przekroczeniu tego limitu, stare czynności są usuwane, aby zrobić miejsce nowym.

Aby zmienić liczbę czynności, jaka może zostać zachowana w palecie History:

400. Wybierz z menu polecenie EditPreferences.

Fireworks wyświetli okno dialogowe Preferences.

399. Kliknij zakładkę General w Windows lub wybierz opcję General z rozwijanej listy w MacOS.

400. Zmień liczbę zadań w polu tekstowym Undo Steps na taką, jaka ma być zapi­sy­wana w palecie History.

	Maksymalna liczba zadań, które mogą być cofane w Fireworks wynosi 1009, ale w praktyce jest ona ograniczona ilością pamięci RAM przydzielonej do programu.

Usunięcie zadań z palety History zwalnia pamięć operacyjną i miejsce na dysku, ale tra­cisz wówczas możliwość pracy z usuniętymi zadaniami. Nie będziesz mógł na przykład wy­konać na nich polecenia Undo lub Redo. Aby usunąć je wszystkie z palety History, wy­bierz polecenie Clear History z rozwijanego menu tej palety.

Tworzenie poleceń bez pisania kodu

Tworzenie poleceń za pomocą palety History jest zajęciem pozwalającym zaoszczędzić wie­le czasu, i które na dodatek często bywa zabawne. Budowanie poleceń w Fireworks sku­pione jest wokół prostego w użyciu, zminimalizowanego interfejsu palety History.

Najprostszym sposobem na utworzenie polecenia jest powtórzenie operacji lub ich serii - nagranych w palecie History, za pomocą przycisku Replay (Powtórz). Zaznacz klik­nię­ciem zadanie w palecie, a następnie wybierz przycisk Replay, aby ponownie zastosować je do zaznaczonego obiektu w obszarze roboczym.

Załóżmy, że pokolorowałeś obiekt pewnym odcieniem niebieskiego, a następnie zdecy­do­wałeś, że kilka innych obiektów powinno mieć ten sam kolor. Kliknij w palecie His­to­ry operację o nazwie Fill Color, reprezentującą zastosowanie niebieskiego koloru (rysunek 19.8), a następnie kliknij przycisk Replay, który zadziała teraz jak polecenie „Wypełnij kolorem nie­bieskim”. Zaznacz obiekty, które znajdują się w obszarze roboczym i kliknij przy­cisk Replay, aby wypełnić je kolorem niebieskim. W palecie History można zaznaczyć ciągły za­kres kroków. Wciśnij w tym celu klawisz Shift, a następnie kliknij pierwsze i ostatnie po­lecenie z zakresu. Aby zaznaczać kolejno wiele poleceń, które nie sąsiadują ze sobą, kli­kaj je z wciśniętym klawiszem Ctrl (Command).

Rysunek 19.8. Po zaznaczeniu kroku Fill Color (po lewej), przycisk Replay stanie się poleceniem, stosującym wypełnienie do zaznaczonych obiektów. Wciśnij klawisz Shift, aby zaznaczyć ciągły zakres wielu operacji i za pomocą przycisku Replay zastosuj je do zaznaczonych obiektów

Co jednak zrobić, gdy stwierdzisz, że wypełnienie niebieskim kolorem jest dla Ciebie tak przydatną operacją, że chciałbyś ją wielokrotnie powtarzać? Polecenie Fill Color bę­dzie przesuwane coraz bardziej w górę palety History i ostatecznie może zostać usu­nię­te, aby zrobić miejsce dla kolejnych. Aby je zachować dla późniejszego wykorzystywania, klik­nij znajdujący się w palecie History przycisk Save Steps as Command (Zapisz kroki ja­ko polecenie), oznaczony ikoną dyskietki. Po zapisaniu czynności lub zestawu czynności jako po­lecenia, zostanie ono dodane do menu Commands i będziesz mógł je wykorzystywać w przyszłości.

Aby zapisać zadania znajdujące się w palecie History jako polecenie:

401. Wykonaj czynność lub zestaw czynności, które chcesz zapisać jako polecenie. Oto ich przy­kłady kroków, które możesz wykonać przed zapisaniem:

• Utwórz standardową stopkę witryny WWW, która zawierać będzie infor­ma­cje o prawach autorskich. Nadaj jej odpowiednie atrybuty tekstu i precy­zyj­nie wyrównaj względem obszaru roboczego.

• Utwórz okrągły obiekt, zduplikuj go pięciokrotnie, zaznacz wszystkie sześć obiektów, wyrównaj i rozłóż równomiernie w poziomie, tworząc w ten spo­sób rząd przycisków paska nawigacyjnego, które później wystar­czy je­dynie odpowiednio zmodyfikować.

401. Jeśli jako polecenie chcesz zapisać tylko jedno zadanie, kliknij je w palecie His­to­ry, aby je zaznaczyć. Jeżeli chcesz zapisać ciągły zakres, wciśnij klawisz Shift, a następnie kliknij pierwsze i ostatnie zadanie z zakresu. Aby zaznaczyć wiele nie sąsiadujących ze sobą zadań, klikaj je kolejno z wciśniętym klawiszem Ctrl (Command).

Zaznaczone czynności zostaną wyróżnione ciemnym kolorem selekcji.

402. W palecie History zaznacz Save Steps as Command.

Fireworks wyświetli okno dialogowe Save Command (rysunek 19.9).

Rysunek 19.9. W oknie dialogowym Save Command wpisz nazwę tworzonego polecenia

403. Wpisz nazwę polecenia i kliknij przycisk OK.

Zadania zostaną zapisane jako polecenie i umieszczone w menu Commands w porządku alfa­betycznym. Aby zastosować to polecenie, wybierz nazwę nowego polecenia z menu Com­mands.

Ograniczenia polecenia Save as Command XE "Save as Command"

Podczas zapisywania kroków jako polecenia trzeba uważać na dwie rzeczy:

• Niektóre operacje, takie jak rysowanie kształtów za pomocą narzędzia Brush (Pę­dzel), nie mogą być powtarzane. Fireworks oznacza je czerwonym znakiem × (rysunek 19.10).

Rysunek 19.10. Operacje oznaczone czerwonym znakiem X nie mogą być powtarzane. Separator wskazuje zmiany zaznaczenia, mogące prowadzić do uzyskania niepożądanych rezultatów

• Po zmianie zaznaczenia Fireworks umieści w palecie History separator (ry­su­nek 19.10). Powtórzenie zadań położonych po drugiej stronie separatora może pro­wadzić do niepożądanych rezultatów, gdyż niektóre obiekty nie mogą być mo­dyfikowane w ten sam sposób, co pozostałe.

Gdy spróbujesz zapisać zadania, które mogą zawierać jedno z wyżej wymienionych za­strze­żeń, Fireworks wyświetli okno dialogowe z komunikatem o wystąpieniu problemu i umo­żliwiające kontynuowanie lub przerwanie operacji (rysunek 19.11).

Rysunek 19.11. Fireworks ostrzega, że przekroczenie separatora lub wprowadzenie operacji, których nie można powtarzać, może prowadzić do niepożądanych rezultatów

Technika Fireworks: skróty klawiaturowe do poleceń z menu

Fireworks oferuje swoim użytkownikom dużo różnych funkcji edycyjnych oraz mnós­two poleceń zawierających wiele opcji. Taka elastyczność jest oczywiście doskonałą funkcją, ale zdarzają się chwile, w których brakuje mi niektórych prostych po­le­ceń, takich jak ModifyReduce Image to 25% (ModyfikacjaZmniejsz obrazek do 25%). Gdy w ciągu jednej sesji dwadzieścia razy otworzysz okno dialogowe Image Size i bę­dziesz w nim za każdym razem wybierał opcję Percentage (Procentowo), a następnie wpi­sy­wał war­tość 25%, zaczniesz się zastanawiać, czy nie ma krótszej drogi na wy­ko­na­nie tej operacji. Otóż jest, a to za sprawą palety History.

Paleta History umożliwia nie tylko zapisywanie poleceń składających się z wielu zło­żo­nych operacji, ale również tworzenie prostych poleceń, pozwalających na wprowadzanie naj­częściej wykorzystywanych ustawień. Jeśli często skalujesz przyciski do wymiarów 30×30 pikseli lub zmieniasz wymiary obszaru roboczego na 300×200 pikseli, możesz utworzyć polecenia służące do skalowania i zmiany wymiarów obszaru roboczego.

Aby zapisać polecenie o zmodyfikowanych ustawieniach jako nowe polecenie Fire­works:

402. Otwórz dokument Fireworks. Dopóki nie zapiszesz go po utworzeniu no­we­go polecenia, może to być dowolny plik używany jako „królik doświad­czal­ny” w sesji tworzenia poleceń.

403. Wykonaj na dokumencie prostą operację, na przykład:

• Wybierz z menu polecenie ModifyImage Size i zmniejsz obrazek do 50% ory­gi­nalnych wymiarów lub przeskaluj w inny, często wykorzystywany spo­sób.

• Zaimportuj często wykorzystywany plik, na przykład logo.

404. Zaznacz w palecie History zadanie, zapisywane jako nowe polecenie Fire­works.

405. W palecie History kliknij przycisk Save Steps as Command.

Fireworks wyświetli okno dialogowe Save Command.

406. Wpisz nazwę nowego polecenia i kliknij przycisk OK.

Operacja zostanie zapisana jako polecenie i umieszczona w menu Commands w po­rząd­ku alfabetycznym.

Kopiowanie zadań do schowka

Jak zostało wspomniane wcześniej, możliwość przekształcania operacji zapisanych w pa­lecie History na polecenia, które znajdują się w schowku, bez napisania ani jednego wier­sza kodu, pozwala na znaczne podniesienie wydajności pracy. Z paletą History zwią­zanych jest jednak kilka sztuczek przeznaczonych dla tych użytkowników, którzy mieli choćby krótki kontakt z językiem JavaScript.

Przycisk Copy Steps to Clipboard (Kopiuj kroki do schowka) pozwala na kopiowanie do schowka zadań, zaznaczonych w palecie History, jako proste wyrażenia JavaScript, któ­re można później wklejać do dowolnego edytora tekstu. Kopiowanie kroków do schow­ka jest funkcją użyteczną także dla zaawansowanych programistów JavaScript, umo­żliwiającą utworzenie polecenia lub skryptletu w rekordowo krótkim czasie.

Po wklejeniu zadań do edytora tekstowego, można je modyfikować i dodawać kolejne aż do czasu uzyskania pożądanego, złożonego polecenia. Interfejs programistyczny Fire­works (API) umożliwia budowanie poleceń i skryptletów, pozwalających na uru­cha­mia­nie prawie wszystkich funkcji Fireworks.

	Interfejs API Fireworks jest szczegółowo opisany w rozdziale 26.

Aby, używając Copy Steps to Clipboard, rozpocząć budowanie własnego polecenia lub skryptletu:

404. Utwórz serię zadań, które chcesz zachować.

405. Zaznacz je w palecie History.

406. Kliknij przycisk Copy Steps to Clipboard, aby skopiować zaznaczone zadania do schowka jako wyrażenia JavaScript.

407. Uruchom lub uaktywnij swój edytor tekstu, na przykład Notepad (Notatnik) w Win­dows lub SimpleText w MacOS. Utwórz nowy lub otwórz istniejący do­kument.

408. W edytorze tekstu wybierz z menu polecenie EditPaste (EdycjaWklej), aby wkle­ić kod JavaScript (rysunek 19.12).

Rysunek 19.12. Zadania palety History po skopiowaniu do schowka można wkleić do edytora tekstu jako kod JavaScriptu

Następnie możesz dowolnie modyfikować wklejony kod JavaScript lub nawet dodać do niego kilka kolejnych operacji.

	Więcej szczegółów o programowaniu w Fireworks w języku JavaScript znaj­dziesz w rozdziale 26.

Zarządzanie menu Commands XE "menu:Commands"

Menu Commands pozwala na znaczne zwiększenie wydajności pracy, dlatego też bar­dzo ważne jest utrzymywanie go w porządku.

Po przeprowadzeniu niezbyt wielu ekspe­ry­men­tów z poleceniem Copy Steps as Command, całe moje menu Command zostało wy­pełnione wie­loma nowymi, użytecznymi, choć nie zawsze, poleceniami Fireworks.

Porządkowanie zainstalowanych poleceń

Fireworks oferuje kilka metod organizowania poleceń w menu Commands. Po wy­bra­niu z menu polecenia Edit Command List wyświetlane jest okno dialogowe, umo­żli­wia­ją­ce zmianę nazw lub usuwanie zainstalowanych poleceń.

Polecenia w poleceniach Po zastosowaniu wybranego polecenia, wszystkie wykonane za jego po­mocą operacje są zapisywane w palecie History jako zadanie o naz­wie Command Script. Etapy przedstawiające wykorzystanie stwo­rzo­ne­go polecenia również mogą być zapisywane jako części in­nych poleceń (rysunek poniżej), co pozwala na tworzenie metapo­le­ceń, czyli poleceń zawierających kilka innych. Przedstawiony na rysunku rząd przycisków został prawie w całości ut­wo­rzony za pomocą uprzednio zapisanych poleceń. Jedno z nich wpro­wa­dza zewnętrzny cień i wewnętrzną fazę, zaś inne - wypełnienie ra­dialnym gradientem i przesunięcie gradientu celem uzyskania efek­tu oświetlenia. Zaznaczenie operacji, które reprezentują zastosowane po­lecenia i ich zapisanie, umożliwia utworzenie złożonego zesta­wu akcji, jaki w przyszłości będzie można zastosować w jednym prostym za­daniu. Istnieje pewne małe ograniczenie: nowo utworzone pole­ce­nie jest uzależnione od obecności w Fireworks operacji w nim wyko­rzys­ta­nych. Jeśli jedna z tych, które wchodzą w skład operacji większego polecenia zostanie usunięta, nie będziesz mógł uruchomić złożonego polecenia.

Edycja menu Commands

Aby zmodyfikować menu Commands za pomocą polecenia Edit Command List:

409. Wybierz z menu polecenie CommandsEdit Command List.

Fireworks wyświetli okno dialogowe Edit Command List (rysunek 19.13).

Rysunek 19.13. W oknie dialogowym Edit Command List możesz zmienić nazwę lub usunąć wybrane polecenie

407. Wybierz polecenie, które chcesz zmodyfikować i użyj jednej z poniższych metod:

• Kliknij przycisk Delete, aby usunąć polecenie z menu Commands.

	Usunięcie polecenia w oknie dialogowym Edit Command List, powo­du­je usunięcie skryptletu z Twojego komputera i nie będzie można cof­nąć tej operacji. Co więcej - po wciśnięciu przycisku Delete, Fireworks nie wyświetli jakiegokolwiek komunikatu z ostrzeżeniem o takim dzia­łaniu tej operacji.

• Kliknij przycisk Rename (Zmień nazwę). Fireworks wyświetli okno dia­lo­go­we Save Command. Wpisz w nim nową nazwę polecenia i kliknij przycisk OK.

408. Kliknij przycisk OK w oknie Edit Command List.

Katalog poleceń

Oprócz możliwości zmieniania nazw i usuwania poleceń w środowisku roboczym Fire­works, możesz również organizować i dodawać polecenia w katalogu Commands. Znajduje się on w katalogu Configuration, wewnątrz katalogu programu Fireworks.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

Hierarchia plików i podkatalogów, które znajdują się w katalogu Commands, deter­mi­nu­je hierarchię poleceń w menu Commands. Innymi słowy - podkatalog katalogu Com­mands będzie reprezentowany w Fireworks przez podmenu. Na przykład podkatalog Creative będzie reprezentowany w Fireworks przez podmenu Creative (rysunek 19.14).

Aby lepiej zorganizować polecenia w Fireworks, utwórz dla nich nowe podkatalogi w ka­talogu Commands. Umieszczenie w tych podkatalogach kolejnych podkatalogów nie odniesie już żadnych skutków, gdyż hierarchia katalogu Commands może być tylko jed­nopoziomowa. Wszystkie zmiany dokonywane w katalogu Commands są od­zwier­cie­dlane natychmiast w Fireworks bez konieczności ponownego uruchamiania pro­gra­mu. Pozwala to na eksperymentowanie przy organizowaniu menu Commands.

Rysunek 19.14. Podkatalogi, które znajdują się w katalogu Commands (po lewej), są reprezentowane w menu Commands Fireworks jako podmenu

Przy rozdzielczości ekranowej 1024×768, w Fireworks na MacOS w menu Commands mo­że znajdować się czterdzieści pięć pozycji (poleceń i podmenu) bez ko­niecz­noś­ci jego przewijania. Przy takiej samej rozdzielczości w Fireworks dla Windows, w me­nu Commands może zostać wyświetlonych jednocześnie trzydzieści pozycji. Prze­ko­nałem się, że konieczność przewijania menu ma bardzo niekorzystny wpływ na wy­daj­ność pracy. Oprócz tego, że nie widać od razu wszystkich pozycji menu, utrudniona jest także nawigacja wewnątrz menu (zwłaszcza w Windows, gdzie zbyt długie menu nie ma stałego położenia względem menu głównego i może zakrywać pasek zadań, któ­ry znajduje się u dołu ekranu). Rozwiązaniem tego problemu jest zorganizowanie po­le­ceń w mniejszej ilości podmenu.

Dodawanie poleceń

Jedną z najważniejszych zalet menu Commands jest jego elastyczność. Można łat­wo tworzyć i dodawać nowe pozycje do menu. Oprócz standardowych poleceń wbu­do­wanych do Fireworks, firma Macromedia utwo­rzy­ła wiele poleceń, dostępnych w witrynie internetowej Fireworks.

	Nowe polecenia możesz pobrać ze strony WWW znajdującej się pod ad­resem www.macromedia.com/support/fireworks. Mogą się tam również znajdować dodatkowe polecenia, niedostępne w czasie pisania tej książki.

Dodawanie nowych poleceń do Fireworks polega na przeciąganiu plików z rozsze­rze­nia­mi .jsf do katalogu Fireworks Commands.

	Po skopiowaniu skryptletu do katalogu Commands, nowe polecenie bę­dzie dostępne w menu Commands natychmiast, bez konieczności po­nownego uruchamiania programu.

Nowe polecenia Macromedia dla Fireworks:

• Convert to Lowercase (Małe litery). Konwertuje wszystkie znaki w zazna­czo­nym obiekcie tekstowym na małe litery.

• Convert to Uppercase (Kapitaliki). Konwertuje wszystkie znaki w zazna­czo­nym obiekcie tekstowym na kapitaliki (duże litery).

• Distribute to layers (Rozłóż na warstwy). Wycina zaznaczenie do schowka i wkle­ja każdy obiekt na własną, nową warstwę.

	Polecenie Distribute to Layers znajduje się również w Fireworks 4.

• Make a Pattern (Utwórz deseń). Tworzy deseń z zaznaczenia.

• Make a Texture (Utwórz teksturę). Tworzy teksturę z zaznaczenia.

	Tekstury i desenie zostały opisane w rozdziale 11.

• New Rectangle Corners (Nowe narożniki). Pozwala na zaznaczenie jednego lub wielu prostokątów i zdefiniowanie nowych wartości ich narożników.

	W Fireworks 4 polecenie New Rectangle Corners traci na aktualności, dzięki ustawieniom Roundness (Zaokrąglenie) dla prostokątów, dostępnym w palecie Object.

• Stack all in center (Wyśrodkuj wszystkie). Wyrównuje wszystkie zaznaczone obiek­ty do środka dokumentu.

• Time and Date Stamp (Wstaw datę i godzinę). Wstawia nowy obiekt teks­to­wy, zawierający bieżącą datę i godzinę.

• Create Tile Background (Utwórz deseń tła). Przekształca bieżące zaznaczenie w powtarzający się deseń tła i umieszcza go na odrębnej warstwie.

Możliwość dodawania nowych poleceń - na przykład Make Pattern, Convert to Lower­case czy New Rectangle Corners - jest doskonałym przykładem elastyczności Fire­works.

	Dostępnych jest jeszcze więcej poleceń, które umożliwiają podniesie­nie wydajności pracy w Fireworks.

Podsumowanie

Menu Commands i paleta History są bardzo pomocnymi narzędziami, pozwalającymi podnieść wy­dajność pracy. Korzystając z ich możliwości, pamiętaj o następujących rzeczach:

• Rozszerzalne menu Fireworks - Commands - od początku zawiera wiele przydatnych po­leceń.

• Paleta History umożliwia pełną kontrolę nad poleceniami Undo (Cofnij) i Redo (Ponów).

• Operacje, które znajdują się w palecie History, mogą być powtarzane, za­pi­sy­wa­ne jako polecenia lub kopiowane do schowka jako kody JavaScriptu do póź­niej­szej edycji.

• Nowe polecenia można dodawać do menu Commands Fireworks poprzez ko­pio­wanie plików z rozszerzeniem .jsf do katalogu Com­mands. Struktura tego katalogu determinuje strukturę menu Commands.

W następnym rozdziale dowiesz się, jak tworzyć mapy obrazków i plastry w Fireworks.




Część V
Obiekty sieciowe




Rozdział 20.
Mapy obrazków i plastry

W tym rozdziale:

• Praca z obiektami internetowymi.

• Przydzielanie obszarów aktywnych do map obrazków.

• Wstawianie eksportowanych kodów na strony WWW.

• Dzielenie obrazków na plastry.

• Eksportowanie plastrów do plików HTML.

• Animowanie plastrów.

Zdarzyło Ci się kiedyś odwiedzić stronę, w której zerwane były wszystkie łącza z ob­raz­­kami? W takich sytuacjach jedynymi obiektami na stronie - oprócz tekstu - są pros­to­kąty z ikoną przeglądarki mówiącą, że „No graphic found” („Nie znaleziono grafiki”). Dla przeglądarki strona internetowa jest właśnie zbiorem tekstu i prostokątów. Możesz ko­rzystać z obrazków w formacie GIF i ukrywać ich prostokątne kształty, ale łącza nie będziesz mógł ograniczyć jedynie do widzialnego obszaru obrazka. W takich przy­pad­kach musisz wykorzystać mapy obrazków i plastry, które umożliwiają łączenie ze so­bą łączy o nieregularnych kształtach, takich jak symbol yin yang.

Fireworks doskonale obsługuje mapy obrazków i plastry. Zarówno jedne, jak i drugie (lub ich odrębne części nazywane obszarami aktywnymi) są w Fireworks nazywane wspól­nie obiektami internetowymi i spełniają kilka różnych funkcji. Oprócz możliwości uni­kania regularnych kształtów na stronach WWW, obiekty internetowe dają także moż­liwość tworzenia elementów interaktywnych oraz nadawania stronom indy­wi­du­al­ne­go stylu za pomocą behawiorów. Możesz zaprojektować całą witrynę WWW i nie otrzeć się o obszary aktywne i plastry, ale pełne zrozumienie ich zastosowań i ograniczeń pozwoli urozmaicić Twoje projekty.

	W tym rozdziale poznasz podstawowe zasady definiowania obszarów ak­tywnych i plastrów oraz niektóre techniki ich umieszczania na stro­nach WWW. Więcej informacji o tworzeniu elementów reagujących na zda­rzenia myszy oraz wykorzystywaniu innych behawiorów w Fireworks znaj­dziesz w rozdziale 21.

Podstawowe wiadomości o mapach obrazków i obszarach aktywnych

Aby zrozumieć, jak działają mapy obrazków, wystarczy, że przeanalizujesz mapę do­wol­nego państwa. Podziały na regiony i terytoria są zazwyczaj geograficzne i rzadko ma­ją regularne kształty. Aby taką mapę umieścić w Internecie, każdy z regionów geo­gra­fi­cznych (rejonów lub województw) powinien być odrębnym obszarem, który użyt­kow­nik będzie mógł kliknąć (rysunek 20.1). W taki właśnie sposób działa każda mapa obrazka.

Rysunek 20.1. Przykład prostej mapy obrazka wykonanej na podstawie prawdziwej mapy

Circle ... — Okrągły obszar aktywny

Rectangle ... — Prostokątny obszar aktywny

Polygon ... — Wielokątny obszar aktywny

Każdy odrębnie zdefiniowany obszar mapy obrazka nazywany jest obszarem ak­tyw­nym. Mogą one mieć kształty okręgów, prostokątów lub wielokątów. Prostokąt oznacza tu prostokąt lub kwadrat, zaś okrąg - okrąg lub owal. Każdy inny kształt jest wie­lo­ką­tem. Po zdefiniowaniu obszaru mapy obrazka możesz nadać mu nazwę i przy­dzielić do niego URL. Obszary aktywne mogą być wykorzystywane także do uru­cha­miania różnych zdarzeń, na przykład reakcji na zdarzenia myszy lub wyświetlania ko­munikatów. Obszary aktywne nie są częścią końcowego obrazka, i są niewidoczne w prze­glądarkach internetowych. Aby obszar aktywny mógł zostać wykorzystany na stro­nie WWW, informacje o nim muszą być przekształcone na kod HTML i osadzone na stronie.

Mapy obrazków i plastry działają dzięki generowanemu kodowi HTML. Jako że w pli­kach graficznych nie są osadzane żadne dane, musisz wyeksportować z Fireworks za­rów­no obrazki, jak i cały potrzebny kod HTML i umieścić wszystkie te elementy na stro­nie WWW. W dalszej części rozdziału dowiesz się, że Fireworks umożliwia nie tylko bez­problemowe ich eksportowanie, ale oferuje wiele dodatkowych opcji, które ułat­wia­ją osadzanie grafiki i kodów na stronach WWW.

Narzędzia do tworzenia obszarów aktywnych XE "obszary aktywne"

Narzędzia XE "obszary aktywne:narzędzia" do tworzenia obszarów aktywnych znajdują się w lewej dolnej części palety na­rzędziowej Fireworks. Poniżej zamieszczone są opisy działania narzędzi do tworzenia ob­szarów aktywnych o trzech podstawowych kształtach:

• Rectangle (Prostokąt)

Służy do rysowania prostokątnych i kwadratowych ob­sza­rów aktywnych. Nie można zaokrąglać ich narożników, jak w przypadku stan­dardowego narzędzia Rectangle, ale możliwe jest korzystanie z klawiszy mo­dyfikujących.

• Circle (Okrąg)

Służy do rysowania eliptycznych i okrągłych obszarów aktyw­nych. Klawisze modyfikujące: Shift i Alt (Option) działają tak samo, jak było to przed­stawione w przypadku standardowego narzędzia Ellipse.

• Polygon (Wielokąt)

Służy do rysowania obszarów aktywnych o niere­gu­lar­nych kształtach. Działa podobnie do narzędzia Polygon Lasso - aby utworzyć kształt obszaru aktyw­ne­go, nanosi wiele punktów i łączy je za pomocą pros­tych odcinków.

Po narysowaniu obszary aktywne wyglądają, jakby zostały nałożone na inne obiekty (ry­­sunek 20.2). Fireworks przechowuje wszystkie obszary aktywne (i plastry) na in­ter­ne­towej warstwie (Web Layer), która jest współużytkowana przez wszystkie klatki do­ku­mentu. Warstwa ta może być blokowana, ukrywana, a nawet można zmieniać jej poło­żenie względem innych warstw. Zachowuje się więc jak inne standardowe war­stwy. Początkowo wszystkie obszary aktywne wyświetlane są w tym samym kolorze, ale za pomocą palety Object można każdemu z nich nadać inny kolor.

Rysunek 20.2. Za pomocą trzech narzędzi do tworzenia obszarów aktywnych możesz rysować je na warstwie internetowej

Rectangle Hotspot tool — Narzędzie do tworzenia prostokątnych obszarów aktywnych

Polygon Hotspot — Wielokątny obszar aktywny

Circle Hotspot — Okrągły obszar aktywny

Circle Hotspot tool — Narzędzie do tworzenia okrągłych obszarów aktywnych

Polygon Hotspot tool — Narzędzie do tworzenia wielokątnych obszarów aktywnych

Rectangle Hotspot — Prostokątny obszar aktywny

Web Layer — Warstwa internetowa

Prostokątne obszary aktywne XE "obszary aktywne:prostokątne"

Jak zostało wcześniej wspomniane, narzędzia do tworzenia obszarów aktywnych dzia­ła­ją podobnie do narzędzi, które służą do tworzenia standardowych kształtów. Istnieje jed­nak pomiędzy nimi kilka zasadniczych różnic. Aby utworzyć prostokątny obszar ak­tyw­ny:

409. Wybierz narzędzie Rectangle Hotspot z palety narzędziowej.

410. Kliknij, aby ustalić położenie pierwszego wierzchołka i przeciągnij do prze­ciw­ległego wierzchołka prostokąta. W trakcie przeciągania Fireworks będzie wy­świetlał kontury tworzonego kształtu.

	Aby utworzyć kwadratowy obszar aktywny, wciśnij w czasie rysowania kształtu klawisz Shift. Aby rysować obszar aktywny od środka za­miast od wierzchołka, wciśnij w czasie rysowania klawisz Alt (Option). Mo­żesz również wcisnąć oba klawisze jednocześnie, aby narysować kwa­drat od środka.

411. Zwolnij przycisk myszy, gdy tworzony prostokąt osiągnie odpowiednie roz­mia­ry i kształt.

Fireworks utworzy obszar aktywny i wypełni go kolorem (rysu­­nek 20.3).

Rysunek 20.3. Użyj narzędzia Rectangle Hotspot do tworzenia kwadratowych i prostokątnych obszarów aktywnych

Okrągłe XE "obszary aktywne:okrągłe" obszary aktywne

Aby narysować owalny lub okrągły obszar aktywny:

410. Wybierz narzędzie Circle Hotspot z palety narzędziowej. Jeśli nie widzisz tego na­rzędzia w palecie, kliknij i przytrzymaj widoczne narzędzie Hotspot. Kiedy zostanie roz­winięta grupa narzędzi, wybierz z niej przycisk Circle Hotspot.

411. Kliknij, aby ustalić początkowy punkt kształtu i przeciągnij po przekątnej, aby utwo­rzyć okrąg lub elipsę. W trakcie przeciągania Fireworks będzie wyświetlał kon­tury tworzonego kształtu.

	Wciśnij klawisz Shift, aby narysować okrąg. Po wciśnięciu klawisza Alt (Op­­tion) kształt będzie tworzony od środka.

412. Zwolnij przycisk myszy, gdy tworzony okrąg lub elipsa osiągnie odpowiednie roz­miary i kształt.

Fireworks utworzy obszar aktywny (rysunek 20.4).

Rysunek 20.4. Użyj narzędzia Circle Hotspot do tworzenia okrągłych i owalnych obszarów aktywnych
		Dość trudno jest utworzyć obszar aktywny o wymiarach i kształcie do­kład­nie pasujących do owalnego obiektu. Jednak istniejące obszary aktyw­ne można przesuwać za pomocą narzędzia Pointer, skalować za po­mocą narzędzi transformacji oraz numerycznie dostosowywać ich wy­miary i położenia za pomocą palety Info. Jeśli owalny obszar ak­tyw­ny tworzony jest dla oddzielnego obiektu (a nie dla owalnego frag­men­tu więk­szego obiektu), najłatwiej jest zaznaczyć obiekt i wybrać z me­nu po­le­cenie InsertHotspot. Fireworks utworzy wówczas obszar ak­tyw­ny za Ciebie.

Wielokątne XE "obszary aktywne:wielokątne" obszary aktywne

Aby narysować wielokątny obszar aktywny:

412. Wybierz narzędzie Polygon Hotspot z palety narzędziowej. Jeśli nie widzisz go w palecie, kliknij i przytrzymaj widoczne narzędzie Hotspot tak długo, aż zostanie roz­wi­nię­ta grupa narzędzi, a następnie wybierz z niej przycisk Polygon Hotspot.

413. Kliknij, aby utworzyć pierwszy wierzchołek obszaru aktywnego, przesuń wskaź­nik myszy do miejsca, w którym chcesz wstawić kolejny wierzchołek two­­rzonego kształtu i kliknij ponownie.

Fireworks łączy poszczególne naniesione punkty za pomocą linii prostych (rysunek 20.5).

Rysunek 20.5. Podczas nanoszenia kolejnych wierzchołków, Fireworks łączy je i tworzy wielokątny obszar aktywny

413. Powtarzaj poprzednią czynność do czasu, aż uzyskasz odpowiedni kształt.

Po naniesieniu każdego z kolejnych wierzchołków Fireworks wypełni obszar ak­tywny kolorem domyślnym.

414. Kliknij pierwszy wierzchołek, aby zamknąć tworzony wielokąt i utworzyć ob­szar aktywny.

Fireworks utworzy wielokątny obszar aktywny i wypełni go ko­lorem.

Przydzielanie łączy XE "obszary aktywne:przydzielanie łączy" do obszarów aktywnych

Paleta Object pozwala na wiele więcej niż tylko zdefiniowanie koloru obszarów aktyw­nych. Właściwie paletę Object (rysunek 20.6) można uznać za czwarte narzędzie do two­rzenia obszarów aktywnych. Aby stał się on użyteczny, trzeba do niego przydzielić łą­cze i zdefiniować odpowiednie opcje HTML. Wszystko to można zrobić z poziomu pa­lety Object.

Oto opcje obszarów aktywnych dostępne w palecie Object:

Rysunek 20.6. Za pomocą palety Object można zdefiniować dla zaznaczonego obszaru aktywnego dane niezbędne w Internecie, takie jak adres URL

• Current URL (Bieżący URL). Pole służące do przydzielania i wyświetlania łą­cza związanego z zaznaczonym obszarem aktywnym. Nowe łącze możesz wpi­sać ręcznie w polu tekstowym lub wybrać z rozwijanej listy jedno z istnie­ją­cych wcześniej. Rozwijana lista łączy może być podzielona na trzy części: opcję No URL (noHREF) (Brak adresu URL), historię łączy uży­wa­nych w bieżącym dokumencie i bie­żącą bibliotekę URL.

	Więcej informacji na temat zarządzania łączami za pomocą historii oraz bibliotek URL, oraz o łączach w ogóle, znajdziesz w rozdziale 18.

• Alt tag (Znacznik alt). Pole służące do definiowania tekstu zastępczego wy­świe­tlanego, gdy obrazek nie może zostać znaleziony na serwerze lub gdy użyt­kownik zbyt długo przy­trzyma kursor nad obrazkiem. W tym drugim przy­pad­ku zastępczy tekst jest wyświetlany w etykiecie „przyczepionej” do kur­so­ra. Fireworks generuje kod HTML zarówno dla standardowego znacznika alt, jak i dla atrybutu title wy­ma­ganego przez przeglądarkę Internet Explorer.

• Link target (Cel). Cel definiujący miejsce wyświetlenia wywoływanej przez łą­cze strony WWW. Cele są najczęściej wykorzystywane w układach ramek HTML. Możesz ręcz­nie wpisać nazwę docelowej ramki w polu tekstowym Tar­get lub wybrać jeden z celów standardowych:

• _blank pozostawia dostępne bieżące okno i otwiera łącze w nowym oknie prze­glądarki.

• _parent otwiera łącze w nadrzędnej ramce bieżącego układu ramek.

• _self otwiera łącze w bieżącej ramce, zastępując jej dotychczasową za­war­tość (jest to cel wybierany domyślnie).

• _top otwiera łącze w najbardziej zewnętrznym zestawie ramek bieżącej stro­ny WWW, zastępując dotychczasową zawartość.

• Color (Kolor) Po utworzeniu, wszystkie obszary aktywne wypełniane są tym sa­mym, półprzezroczystym kolorem. Możesz jednak zmienić kolor każdego z ob­­szarów aktywnych na jeden z kolorów, które dostępne są w rozwijanym prób­niku.

• Shape (Kształt). Wyświetla kształt zaznaczonego obszaru aktywnego. Kształt ten determinowany jest typem narzędzia, które zostało użyte do jego utwo­rze­nia i określa odpowiedni fragment kodu HTML. Możesz zmienić kształt obszaru ak­tywnego, wybierając jedną z opcji dostępnych w liście Shape, ale pamiętaj, że spowoduje to jego radykalną zmianę.

Jeśli wpisujesz łącze bezpośrednio w polu tekstowym Current URL, uważaj na jego pisownię. Serwery internetowe są bardzo wraż­li­we na wszelkie błędy literowe (reagują nawet na pomyłki w wielkości li­ter). Możesz zastąpić wpisywanie łączy jedną z funkcji Fire­works - Import URL - znajdującą się w palecie URL, która umożliwia za­importowanie łączy z dowolnego pliku HTML. Opis tej fun­k­cji znajdziesz w rozdziale 18.

Przekształcanie obiektów na obszary aktywne XE "obszary aktywne:przekształcanie obiektów na obszary aktywne"

Jako projektant, który niejednokrotnie łączył ze sobą wiele punktów, aby uzyskać ob­szar aktywny w kształcie gwiazdy, serdecznie polecam możliwość konwersji obiektów na obszary aktywne. Zamiast męczyć się z tworzeniem skomplikowanego kształtu za po­mocą narzędzi do tworzenia obszarów aktywnych, zaznacz obiekt i wybierz z menu po­lecenie InsertHotspot. Na internetowej warstwie zostanie utworzony obszar ak­tyw­ny o kształcie dokładnie dopasowanym do obiektu docelowego. Teraz musisz jedynie przy­­dzie­lić do niego łącze. Polecenie to pracuje z wszystkimi standardowymi kształ­ta­mi: pros­tokątami, elipsami i wielokątami, a także ze ścieżkami wektorowymi, obraz­ka­mi i obiek­tami tekstowymi.

	Jeśli przed użyciem polecenia InsertHotspot zaznaczysz więcej niż je­den obiekt, Fireworks zapyta Cię, czy chcesz utworzyć jeden czy wiele ob­szarów aktywnych. Jeśli wybierzesz jeden punkt, Fireworks utworzy na internetowej warstwie jeden prostokątny obszar aktywny, który bę­dzie obejmował wszystkie zaznaczone obiekty.

Eksportowanie kodu dla map obrazków XE "mapy obrazków:eksport kodu"

Kod HTML mapy obrazka składa się z dwóch części. Pierwsza z nich to znacznik obraz­ka - <img> - przechowujący informacje o całej grafice. Atrybuty znacznika <img> to src (naz­wa pliku grafiki), rozmiar obrazka i połączenie z mapą obrazka - usemap. Atrybut usemap jest ustawiany na nazwę drugiego elementu mapy obrazka - znacznika <map>. Wew­nątrz pary znaczników <map>...</map>, dla każdego obszaru aktywnego w mapie obraz­ka istnieje odpowiedni znacznik <area>. Poniżej zamieszczony jest kod dla mapy obraz­ka składającej się z pięciu obszarów aktywnych:

SKŁAD: proszę przepisać tu kod ze strony 632

Fireworks wygeneruje cały powyższy kod i dodatkowo umożliwi wybór stylu kodu, któ­ry uzależniony jest od narzędzia do tworzenia stron WWW, dla jakiego został prze­zna­czony. Wszystko, co będziesz musiał później zrobić, to umieszczenie kodu HTML na tworzonej stronie WWW.

Wybór stylu HTML

Kod HTML dla mapy obrazka jest generowany przez Fireworks podczas eksportu obraz­ka. Styl eksportowanego kodu HTML zależy od ustawienia HTML Style w oknie dialogowym HTML Setup (rysunek 20.7). Moż­li­wość wyboru stylu, który jest dopasowany do potrzeb Twojego programu do tworzenia stron WWW, ułatwia późniejsze osadzanie kodów generowanych przez Fireworks.

Rysunek 20.7. W oknie dialogowym HTML Setup wybierz styl kodu HTML i dodatkowe opcje

Oto stan­dardowe style kodu HTML eksportowane przez Fireworks:

• Generic (Ogólny). Podstawowy kod, który bywa przydatny przy ręcznym two­rze­niu stron WWW. Jest odpowiedni dla większości narzędzi autorskich obsłu­gu­jących standar­do­wy HTML.

• Dreamweaver. Kod dostosowany do Dreamweaver. Dla kodu map obrazków, nie ma specjalnej różnicy pomiędzy stylami Generic i Dream­wea­ver.

Fireworks może również eksportować kod HTML jako pozycję biblioteki Dreamweaver Library. Więcej informacji w dalszej części rozdziału.

• GoLive. Kod optymalizowany pod kątem edytora GoLive firmy Adobe.

• FrontPage. FrontPage do formatowania kodu używa serii elementów nazy­wa­nych web­bots. Fireworks generuje kod wymagany przez wszystkie takie ele­men­ty oraz komentarze wyświetlane po otwarciu dokumentu w programie Front­Page.

	Na CD-ROM-ie dołączonym do książki, w katalogu HTML Tem­plates znajdziesz dodatkowe szablonu kodów HTML. Aby je wyko­rzys­tać, wystarczy skopiować odpowiedni folder i wszystkie znajdujące się w nim pliki do katalogu Fireworks/Settings/HTML Settings (nie mu­sisz uruchamiać ponownie Fireworks).

Aby wyeksportować mapę obrazka:

414. Zoptymalizuj swój obrazek za pomocą palety Optimize.

415. Wybierz z menu polecenie FileExport, aby rozpocząć proces eksportu.

Zostanie otwarte okno dialogowe Export (rysunek 20.8).

415. Wybierz katalog, w którym chcesz zapisać eksportowany plik i wpisz jego nazwę.

416. W liście opcji Save as type (Save As) zaznacz HTML and Images.

417. W liście opcji HTML wybierz, czy chcesz eksportować plik HTML, czy skopiować plik do schowka.

Rysunek 20.8. Okno dialogowe Export udostępnia ustawienia eksportu
		Fireworks zapamiętuje ostatnio używane ustawienie listy Style.

418. W liście opcji Slices zaznacz None.

419. Zaznacz pole Put Images in Subfolder (Umieść obrazki w podkatalogu), jeżeli jest taka potrzeba, i kliknij przycisk Browse, aby wybrać lokalizację dla plików obrazków.

420. Aby zmodyfikować ustawienia w oknie dialogowym HTML Setup, kliknij przycisk Options, aby otworzyć okno dialogowe HTML Setup i dostosuj w nim żądane ustawienia.

421. Po zaznaczeniu wszystkich ustawień kliknij przycisk Save, aby zakończyć eks­portowanie mapy.

422. Jeśli skopiowałeś kod HTML do schowka, wklej go do edytora HTML.

Umieszczanie kodu mapy obrazka na stronie WWW XE "mapy obrazków:umieszczanie kodu na stronie WWW"

Po utworzeniu grafiki, przydzieleniu łączy do obszarów aktywnych i wy­ge­ne­rowaniu kodu zaczniesz się zastanawiać, jak wszystkie te elementy umieścić na stro­nie WWW. Mimo że wielu projektantów grafiki przeraża już sama myśl o edycji kodu HTML, w większości sytuacji nie jest to aż taki problem. Jakieś wskazówki? Jeżeli po­tra­fisz wycinać i wklejać tekst w edytorze tekstu, nie będziesz miał kłopotów z umie­szcze­niem mapy obrazka na stronie WWW.

Mimo że proces umieszczania mapy na stronie jest zbliżony dla większości typów kodu ge­nerowanego przez Fireworks, istnieje w nim również kilka różnic. W poniższych pod­rozdziałach znajdziesz szczegółowe opisy umieszczania na stronach WWW wszys­tkich typów kodu HTML, które są generowane przez Fireworks.

Generic (Ogólny)

Ogólny (Generic) kod HTML jest, jak sama nazwa wskazuje, stosowany w większości sytuacji. Jeśli stronę WWW tworzysz ręcznie, czyli z wykorzystaniem edytora teks­tu, takiego jak Notepad (Notatnik) w Windows lub SimpleText w MacOS, styl Ge­neric jest tym, czego potrzebujesz. Stylu Generic powinieneś używać również do ge­ne­rowania kodów HTML przeznaczonych dla edytorów, dla których Fireworks nie po­sia­da zdefiniowanych szablonów.

Ogólna procedura umieszczania kodu typu Generic na stronach WWW jest dość prosta:

416. Otwórz kod w aplikacji do edycji tekstu lub edytorze tekstowym, który jest częś­cią programu do tworzenia stron WWW.

417. Zaznacz i skopiuj do schowka sekcję <body>, rozpoczynającą się od wiersza

<!---------- BEGIN COPYING THE HTML ---------->

i kończącą się wierszem

<!---------- STOP COPYING THE HTML HERE ---------->

423. Otwórz stronę WWW w aplikacji do edycji tekstu lub edytorze tekstowym, któ­­ry jest częścią narzędzia autorskiego WWW.

424. W części <body> strony WWW, wstaw kod HTML w miejscu, w którym ma być wyświetlany obrazek.

	Wstaw kod pomiędzy znaczniki <body> i </body>, a nie pomiędzy <head> i </head>.

425. Obejrzyj stronę w przeglądarce i, jeśli będzie to konieczne, dostosuj położenie znacz­nika <img>.

Dopóki znacznik <img> , który jest częścią mapy obrazka, i część <map> znajdują się w tym samym dokumencie, nie muszą one być położone obok siebie.

	Jeśli mapa obrazka ma być podstawowym elementem strony WWW, a Ty nie wykorzystujesz żadnej innej strony, nie mu­sisz usuwać lub przenosić żadnego kodu. Wystarczy, że w trakcie bu­dowania nowej strony dodasz odpowiednie elementy kodu HTML, ota­czające mapę obrazka. Jeśli chcesz, możesz usunąć wszystkie ko­men­tarze, choć szczerze mówiąc, nie zajmują one tyle miejsca, aby było to konieczne.

Dreamweaver

Kod przeznaczony na stronę WWW tworzoną w Dreamweaverze można umieszczać za po­mocą dwóch różnych metod. Pierwsza z nich jest podobna do procedury umie­szcza­nia kodu typu Generic - wytnij kod z wygenerowanej przez Fireworks strony i wklej go na stronę tworzoną w Dreamweaverze w inspektorze Dreamweavera Code Inspector, lub w Code View Dreamweavera. Dopóki kod będziesz umieszczał w sekcji <body> - a nie w sekcji <head> - nie powinieneś mieć żadnych problemów.

Druga metoda umieszczania kodu wykorzystuje zalety niewidzialnych elementów (In­vi­si­ble Elements) Dreamweavera i nie wymaga otwierania Code Inspector, czy przełączania na Code View. Aby wi­zu­al­nie umieścić kod HTML w Dreamweaverze:

418. Otwórz w Dreamweaverze stronę wygenerowaną przez Fireworks.

419. Upewnij się, że włączona jest opcja ViewVisual AidsInvisible Elements.

Zwróć uwagę na znajdujący się obok obrazka symbol komentarza oraz symbol mapy; zaznaczone na rysunku 20.9.

426. Zaznacz obrazek, wciśnij klawisz Shift i kliknij symbol mapy (Map), który znaj­­duje się po prawej stronie obrazka.

	Jeśli chcesz przenieść także wszystkie komentarze, kliknij pierwszy symbol ko­men­tarza (Comment), wciśnij klawisz Shift i klik­nij ostatni symbol komentarza.

427. Wybierz z menu polecenie EditCopy lub użyj skrótu klawiaturowego Ctrl+C (Com­mand+C).

Rysunek 20.9. Wykorzystując zalety niewidzialnych elementów Dreamweavera, możesz kopiować i wklejać ikony tych elementów w oknie dokumentu zamiast łańcuchy kodu HTML w Code Inspector lub Code View

428. Otwórz stronę WWW, na której chcesz umieścić mapę obrazka.

429. Umieść kursor w miejscu, w którym ma być wyświetlana mapa.

430. Wybierz z menu polecenie EditPaste lub użyj skrótu klawiaturowego Ctrl+V (Com­mand+V).

Mapa obrazka i jej kod HTML zostaną wstawione do dokumentu Dreamweavera.

Jeżeli z jakiegoś powodu nie będziesz widział w oknie dokumentu Dream­­weavera symboli komentarzy i mapy, wybierz z menu polecenie EditPreferences i upewnij się, że w panelu Invisible Elements zazna­czo­ne są opcje Comments i Client-side Image Map. Jeżeli wciąż nie będziesz widział symboli komentarzy i mapy, wybierz w Fireworks polecenie FileHTML Setup i upewnij się, że zazna­czo­na jest opcja Include HTML Comments

GoLive

Kod HTML można łatwo zaznaczać i kopiować, a następnie wklejać do okna HTML Sour­ce Editor (Edytor źródła HTML) programu GoLive lub przeciągać do okna HTML Out­line (rysunek 20.10). Okno HTML Outline umożliwia przenoszenie poszczególnych zna­cz­ników kodu pomiędzy dokumentami, ponieważ znaczniki <img> oraz <map> mogą być za­wierane w pojedynczych wierszach. Oprócz znaczników <img> i <map> kod generowany przez Fireworks po wybraniu stylu GoLive może zawierać znaczniki cssscriptdict, któ­re przekazują programowi GoLive informacje o tym, jak ma edytować mapy obraz­ków. Wszystkie trzy znaczniki musisz skopiować do nowo tworzonego dokumentu. Zna­cz­niki <img> i <map> umieść wewnątrz znacznika body, zaś znacznik cssscriptdict w znaczniku head. Kod generowany przez Fireworks dla GoLive jest bardzo prosty i za­wiera jedynie komentarz „exported by Fireworks”.

Rysunek 20.10. Okno HTML Outline edytora GoLive to dobry sposób na umieszczenie za pomocą przeciągania i upuszczania znajdujących się w eksportowanym kodzie znaczników <img>, <map> i cssscriptdict w dokumencie

Aby wyeksportowaną z Fireworks mapę obrazka umieścić w dokumencie GoLive:

420. Otwórz w GoLive stronę wygenerowaną przez Fireworks.

421. W oknie HTML Outline wyświetl oba dokumenty: źródłowy i docelowy.

422. Zaznacz znacznik <img>, który znajduje się w wyeksportowanym kodzie i prze­ciąg­nij go do docelowego dokumentu. To samo zrób ze znacznikiem <map>. Nas­tęp­nie oba umieść wewnątrz znacznika body docelowego dokumentu.

423. Zaznacz znajdujący się w części head źródłowego dokumentu znacznik csss­criptdict i przeciągnij go do tej samej części docelowego dokumentu.

	Jeżeli chcesz przenieść do nowego dokumentu także generowane przez Fireworks komentarze, zaznacz je w źródłowym dokumencie i prze­ciągnij do dokumentu docelowego.

FrontPage

FrontPage Microsoft jest narzędziem autorskim WWW, używającym zastrzeżonego ko­du dla wielu jego efektów specjalnych, takich jak mapy obrazków. Gdy w trakcie eks­por­tu grafiki z rozwijanej listy HTML Style wybierzesz opcję FrontPage, Fireworks wy­ge­ne­ru­je kod w formacie FrontPage'a. Eksportowana mapa obrazka zostanie wstawiona na stro­nę, zawierającą informacje dla użytkowników FrontPage'a o tym, jak umieścić kod na stronie WWW.

Aby mapę obrazka wyeksportowaną z Fireworks wstawić do dokumentu FrontPage'a:

424. Otwórz we FrontPage'u stronę wygenerowaną przez Fireworks.

	Dokument FrontPage'a i dokument wygenerowany przez Fireworks mu­szą znajdować się w tym samym katalogu.

431. Wybierz opcję HTML View.

432. Zaznacz kod zaczynający się od wiersza

<!---------- BEGIN COPYING THE HTML ---------->

i kończący się wierszem

<!---------- STOP COPYING THE HTML HERE ---------->

433. Wybierz z menu polecenie EditCopy.

434. Otwórz dokument, do którego chcesz wstawić mapę obrazka.

435. Przy wciąż włączonej opcji HTML View wybierz z menu polecenie EditPaste, aby wstawić kod do dokumentu.

Plastry XE "plastry"

Skoro mapy obrazków umożliwiają przydzielanie łączy do wyznaczonych obszarów gra­fiki, dlaczego nie wykorzystać ich w innych celach? Mapy obraz­ków mają jedną poważną wadę, która jednocześnie jest ich główną cechą cha­rak­te­ry­sty­czną - są pojedynczymi plikami. Dlatego, mapy obrazków o dowolnych rozmiarach (prze­ważnie duże, gdyż muszą pomieścić wszystkie obszary aktywne) są długo pobierane z Internetu, co może zdenerwować niejednego odwiedzającego Twoją witrynę. Poza tym, w jednym pliku można użyć tylko jednego formatu grafiki i jednej palety kolorów. A co zrobić, gdy mapa obrazka składa się ze zdjęcia i wielu obszarów jednolitych ko­lo­rów? Będziesz zmuszony wyeksportować cały plik w formacie JPEG, aby zapewnić jak naj­lepszy wygląd zdjęcia. Rozmiar pliku będzie wówczas o wiele większy niż gdybyś wyek­sportował grafikę w formacie GIF. Musisz zrezygnować także z dołączania do pliku ja­kich­kolwiek animacji lub efektów specjalnych, takich jak przyciski reagujące na zda­rze­nia myszy (duplikowanie klatek znacznie zwiększyłoby rozmiar końcowego pliku).

Rozwiązaniem alternatywnym dla map obrazków jest technika zwana plastrowaniem. Po­le­ga ono dosłownie na „krojeniu” dużych obrazków na mniejsze grafiki i przy­dzie­la­niu do nich kodu rozmieszczającego plastry w poszczególnych komórkach tabeli HTML. Każdy utworzony w ten sposób obrazek nazywany jest plastrem, zaś proces ich two­rzenia - plastrowaniem. Oto najważniejsze zalety plastrowania:

• Przyspieszenie pobierania. W przypadku większości serwerów, każdy plaster jest wyświetlany w czasie pobierania, co powoduje szybsze ładowanie całej gra­fiki.

• Tworzenie łączy bez map obrazków. Każdy plaster może posiadać własne łą­cze, ale obszary łącza mogą być tylko prostokątne.

• Łączenie różnych formatów plików. Każdy plaster może być oddzielnie op­ty­malizowany, co pozwala na uzyskanie jak najmniejszych rozmiarów całego pli­ku z zachowaniem wysokiej jakości. Oznacza to, że nie tylko możesz umie­szczać obok siebie obrazki, które są zapisane w różnych formatach - na przy­kład JPEG i GIF, ale także wyeksportować jeden plaster jako JPEG ze 100
  -pro­centową jakością, zaś inny - jako JPEG o jakości wynoszącej 30%.

• Aktualizowanie obszarów obrazka. Jeżeli grafika zawiera obszar, który musi być często aktualizowany, na przykład nagłówek lub datę, możesz zmo­dy­fi­ko­wać tylko pojedynczy obrazek, który jest zdefiniowany jako plaster, a resztę gra­fiki pozostawić niezmienioną.

• Osadzanie elementów reagujących na zdarzenia myszy. Jednym z głównych za­stosowań plastrów (szczególnie w Fireworks) jest tworzenie elementów re­agu­jących na zdarzenia myszy. Za pomocą plastrów całą grupę elementów rea­gu­jących na zdarzenia myszy - na przykład pasek nawigacyjny - możesz za­wrzeć w  jednej grafice. Plaster można wykorzystać również do uruchamiania zda­rzeń w elementach, które znajdują się w innych częściach obrazka.

• Osadzanie animacji. Używając plastra do przechowywania animowanego GIF-a, możesz osiągnąć efekty specjalne, na przykład migający neon na tle więk­szej grafiki, bez podwajania czy potrajania wielkości pliku.

Podstawowym ograniczeniem plastrów jest ich kształt; mogą być jedynie prostokątne. Pros­tokątne są nie tylko obrazki, na podstawie których tworzone są plastry, ale także ko­mórki tabel, w których plastry są umieszczane. Aby utworzyć wrażenie nie­re­gu­lar­nych kształtów, musisz użyć formatu GIF lub PNG z przezroczystością. Kolejnym ogra­ni­czeniem jest to, iż plastry nigdy nie mogą zachodzić na siebie.

Podejmując decyzję, czy plastrować obrazek, czy nie, pamiętaj, że plastry są uzależnione od tabel HTML, za pomocą których są rozmieszczane w przeglądarce. Tabele z kolei tak­że posiadają pewne ograniczenia. Język HTML nie pozwala na przykład na umie­szcze­nie dwóch tabel obok siebie na stronie WWW. Podobny efekt możesz jednak otrzy­mać poprzez zagnieżdżenie jednej tabeli w innej.

Plastry są łączone ze sobą w tabelach HTML, zawsze więc należy się upewnić, czy wszys­tkie przeglądarki interpretują tworzone tabele w taki sam sposób. W pewnych sytu­acjach tabele mogą w niektórych przeglądarkach „rozpadać się” i tracić wszystkie infor­macje o wymiarach komórek, niezbędne do poprawnego wyświetlenia wielu plas­trów jako pojedynczej grafiki. Sposobem na obejście tego problemu jest użycie bardzo ma­łych (1-pikselowych) przezroczystych obrazków nazywanych klinami. Jeśli zech­cesz, Fireworks może automatycznie utworzyć wszystkie niezbędne kliny. Tworzenie 1-pik­selowych obrazków zostanie opisane w jednym z kolejnych podrozdziałów.

	W tym rozdziale opisane są podstawowe zagadnienia dotyczące plas­trów. Jeśli chcesz się dowiedzieć, jak wykorzystać plastry do two­­rze­nia elementów, które reagują na zdarzenia myszy, zerknij do rozdziału 21.

Plastrowanie obrazków w Fireworks

Tworzenie XE "plastry:tworzenie" plastrów przebiega w sposób podobny do tego, w jaki tworzyłeś obszary ak­tywne: rysujesz plaster na wierzchu obrazka. Gdy jednak obszary aktywne mogą mieć do­wolne kształty, na przykład okrągłe, plastry mogą być tylko pro­stokątne. Wpraw­dzie Fireworks pozwala na tworzenie bardziej złożonych plastrów za pomocą na­rzędzia Polygon Slice (Wielokątny plaster), ale plastry takie podczas eks­por­tu grafiki prze­kształcane są na wiele prostokątów.

Dwa narzędzia służące do tworzenia plastrów znajdują się w prawym dolnym rogu pa­le­ty narzędziowej, w grupie podobnej do grupy narzędzi do tworzenia obszarów aktyw­nych.

Po narysowaniu plastra za pomocą narzędzia Slice, Fireworks utworzy prowadnice plas­tra, które pomagają w takim rozmieszczeniu plastrów, aby wyeksportowana była jak najmniejsza liczba końcowych plików. Im mniej obrazków zostanie wyko­rzys­ta­nych w ostatecznej grafice, tym szybciej będzie ona wyświetlana w przeglądarce. Gdy plastry nakładają się na siebie, Fireworks za ważniejsze uważa plastry znajdujące się wyżej w stosie.

	Fireworks wykorzystuje teraz kolejność plastrów w stosie do określenia, jak będą eksportowane plastry nakładające się na siebie. W większości przypadków ogranicza to ilość eksportowanych plastrów.

Prostokątne XE "plastry:prostokątne" plastry

Aby podzielić obrazek na plastry za pomocą narzędzia Slice w Fireworks:

425. Wybierz narzędzie Slice z palety narzędziowej.

426. Kliknij obrazek i narysuj prostokątny plaster o żądanych wymiarach i pro­por­cjach (rysunek 20.11).

Rysunek 20.11. Narzędzie Slice dzieli dokument Fireworks na prostokątne plastry, które są eksportowane jako oddzielne pliki graficzne
		Podobnie jak w przypadku standardowego narzędzia Rectangle, mo­żesz korzystać z klawisza Alt (Option), aby rysować plastry od ich środ­ków zamiast od wierzchołków, oraz klawisza Shift, aby rysować kwa­dratowe plastry.

436. Gdy plaster osiągnie odpowiednie wymiary i kształt, zwolnij przycisk myszy.

Fireworks utworzy prostokątny plaster i wypełni go domyślnym, półprzezroczystym ko­lo­rem. Jeśli będą aktywne, wyświetlone zostaną także prowadnice plastra.

Po narysowaniu plastra możesz go modyfikować jak każdy inny obiekt Fireworks. Do ska­lowania plastra możesz wykorzystać znane już cztery uchwyty. Wystarczy prze­ciąg­nąć jeden z nich w pożądanym kierunku. Prostokątne plastry zawsze będą prostokątne, więc przeciąganie jednego z wierzchołków powoduje przemieszczanie całego boku plas­tra. Nie musisz nawet zaznaczyć żadnego wierzchołka - kliknij i przeciągnij jeden z bo­ków plastra. Plastry możesz modyfikować również za pomocą narzędzi trans­for­macji, takich jak Sca­le (Skalowanie), ale w końcowej grafice wszystkie plastry o niere­gu­larnych kształ­tach i tak zostaną przekształcone na prostokąty. Aby przesunąć je dokładnie o jeden pik­sel, użyj jednego z klawiszy strzałek.

Alternatywą dla narzędzia Slice są standardowe prowadnice. Są one wyciągane z po­zio­mych i pionowych linijek dokumentu, aby utworzyć siatkę plastrowania. Następnie
- już przy eksporcie grafiki - wystarczy zaznaczyć opcję Slice Along Guides, aby Fire­works utworzył plastry z obszarów wytyczonych przez prowadnice. Technika taka sprawdza się doskonale, gdy Twoim celem jest podzielenie grafiki na mniejsze frag­men­ty, aby obrazek był szybciej ładowany z Internetu. Jeśli chcesz przydzielić do plas­tra URL lub behawior, musisz utworzyć obiekt plastra za pomocą narzędzia Slice.

Wielokątne XE "plastry:wielokątne" XE "plastry:wielokątne" plastry

Jak zostało wspomniane wcześniej, wielokątne plastry mogą istnieć tylko w Fireworks. Pod­czas eksportowania dokumentu, Fireworks użyje wielokątnych plastrów jako pro­wad­nic do utworzenia złożonych kombinacji prostokątnych plastrów. Wielokątne plas­try, po­dobnie jak wielokątne obszary aktywne, mogą mieć dowolne kształty (rysunek 20.12).

Rysunek 20.12. Za pomocą narzędzia Polygon Slice możesz rysować różne obszary o nieregularnych kształtach

Efektem ubocznym takich przekształceń jest fakt, iż wielokątne plastry powodują pow­sta­wanie przy eksporcie dużych ilości odrębnych plików graficznych. Może to nie­ko­rzys­tnie wpływać na szybkość wyświetlania grafiki w przeglądarce. Każdy z nich musi bowiem zostać oddzielnie wywołany przez przeglądarkę, wysłany przez serwer, a nas­tęp­nie wyświetlony przez przeglądarkę użytkownika. Jeśli utworzysz dziesięć lub pięt­naś­cie pojedynczych obrazków, użytkownik może zauważyć wyraźne zmniejszenie szyb­kości ładowania grafiki.

Aby narysować wielokątny plaster:

427. Wybierz narzędzie Polygon Slice z palety narzędziowej. Jeśli nie widzisz tego na­rzędzia w palecie, kliknij i przytrzymaj narzędzie Slice tak długo, aż zostanie rozwinięta grupa narzędzi, a następnie wybierz z niej przycisk Poly­gon Slice.

428. Kliknij, aby utworzyć pierwszy wierzchołek plastra, przesuń kursor do miejsca, w którym chcesz wstawić kolejny wierzchołek tworzonego kształtu i kliknij po­nownie.

Fireworks połączy naniesione punkty za pomocą linii prostych.

437. Powtarzaj poprzednią operację do czasu uzyskania pożądanego kształtu.

Po naniesieniu każdego z kolejnych wierzchołków Fireworks wypełni plaster kolorem do­myślnym.

438. Kliknij pierwszy wierzchołek, aby zamknąć tworzony wielokąt i utworzyć plas­ter.

Fireworks utworzy wielokątny plaster i wypełni go kolorem standardowym.

Prowadnice plastrów XE "plastry:prowadnice plastrów"

Zanim pojawił się Fireworks, ręczne plastrowanie obrazków było żmudnym, męczącym wzrok zajęciem. Każdy z plastrów trzeba było narysować i wyciąć z dokładnością do jed­nego piksela. Jeśli pominąłeś choć jeden piksel, ostateczny obrazek mógł posiadać „dziu­ry” lub nakładające się na siebie obszary. Aby zobaczyć, jak to dawniej bywało, mo­żesz spróbować wyłączyć w Fireworks prowadnice plastrów.

W przeciwieństwie do zwykłych prowadnic, prowadnic plastrów nie musisz roz­miesz­czać ręcznie; są one automatycznie tworzone przez program po narysowaniu plastra. Pro­wadnice plastrów pokazują układ tabeli utworzona dla plas­trów, które znajdują się w grafice. Co więcej - prowadnice posiadają funkcję Snap to Guides (Przyciągaj do prowadnic) oraz pomagają ustrzec się „dziur” w plas­trach i nakładania się na siebie ich obszarów.

Osobiście twierdzę, że prowadnice plastrów są bardzo użytecznym narzędziem i gorąco po­lecam ich stosowanie. Wybierz z menu polecenie ViewSlice Guides XE "Slice Guides" , aby je uak­tyw­nić lub ukryć. Prowadnice są automatycznie przyciągane do krawędzi dokumentu. Jeśli chcesz, aby obiekty były przyciągane do prowadnic, wybierz z menu polecenie ViewGuidesSnap to Guides.

Zwykłe prowadnice i prowadnice plastrów są rysowane za pomocą dwóch różnych ko­lo­rów. Czasami może się zdarzyć, że odcień prowadnic będzie bardzo zbliżony do barw uży­wanych w grafice i nie będziesz widział, gdzie prowadnice są położone. Aby zmienić ko­lor prowadnic, wybierz z menu polecenie ViewGuidesEdit Guides. Zostanie ot­warte okno dialogowe Guides (Grids and Guides) (rysunek 20.13), w którym za po­mo­cą rozwijanego próbnika Slice Color możesz wybrać nowy kolor prowadnic plas­trów.

Rysunek 20.13. W oknie dialogowym Guides (Grids and Guides) możesz zdefiniować nowy kolor prowadnic plastrów
		W Windows opcje prowadnic i siatki są wyświetlane w dwóch oknach dialogowych: Grids i Guides. W MacOS wszystkie opcje do­tyczące tych elementów skupione są w jednym oknie dialogowym - Grids and Guides - podzielonym na zakładki.

W oknie dialogowym Guides (Grids and Guides) możesz także włączyć wyświetlanie pro­wadnic, za pomocą opcji Show Slice Guides, lub przyciąganie do prowadnic, za po­mo­cą opcji Snap to Guides.

	W przeciwieństwie do zwykłych prowadnic prowadnice plastrów nie mo­gą być przeciągane w nowe położenia. Ich pozycje wytyczane są przez położenia plastrów. Dlatego też znajdująca się w oknie dialo­go­wym Guides (Grids and Guides) opcja Lock Guides (Zablokuj pro­wad­ni­ce), stosuje się jedynie do zwykłych prowadnic.

Kopiowanie obrazków do plastrów

Niekiedy upewnienie się, że określony obiekt jest kompletny stanowi bardzo skom­pli­ko­wane zadanie, zwłaszcza gdy obiekt posiada jakiś efekt, na przykład zewnętrzny cień lub blask. Niewłaściwe umieszczenie plastra może spowodować obcięcie fragmentu obraz­ka. Aby ustrzec się tego typu problemów, Fireworks może wykonać całe plas­tro­wa­nie za Ciebie. Podobnie jak konwertowałeś obiekty na obszary aktywne, możesz je tak­że przekształcać na plastry.

Aby utworzyć plaster w oparciu o istniejący obiekt, zaznacz ten obiekt i wybierz z me­nu polecenie InsertSlice. Fireworks narysuje plaster całkowicie obejmujący za­zna­czo­ny obiekt (wraz z efektami specjalnymi). Jeśli zaznaczysz więcej niż jeden obiekt, Fire­works zapyta Cię, czy chcesz utworzyć jeden czy wiele plastrów.

Przydzielanie adresów URL XE "plastry:przydzielanie URL" do plastrów

Aby użyć plastra jako łącza, trzeba do niego przydzielić adres URL. Możesz to zrobić w dwóch różnych miejscach programu: palecie Object i palecie URL. Znajdujące się w obu paletach opcje plastrów są takie same, jak te opisywane w podrozdziale o ob­sza­rach ak­tywnych.

Aby przydzielić łącze do plastra za pomocą palety Object:

429. Zaznacz plaster, do którego chcesz przydzielić łącze.

430. Wybierz z menu polecenie WindowObject lub użyj skrótu klawiaturowego Alt+F2 (Option+F2).

Zostanie wyświetlona paleta Object (rysunek 20.14).

Rysunek 20.14. W palecie Object możesz przydzielić adres URL do plastra i wpisać tekst zastępczy

439. Wpisz łącze w polu tekstowym Current URL lub wybierz jedno z łączy znaj­dujących się w rozwijanej liście. W liście wyświetlana jest historia URL oraz biblioteka URL.

440. Jeśli chcesz - w polu tekstowym Alt możesz wpisać tekst zastępczy.

441. Aby ustawić cel, w którym ma być ładowana docelowa strona WWW, wybierz jed­ną z opcji listy Target lub ręcznie wpisz nazwę ramki.

442. Aby zmienić kolor zaznaczonego plastra, wybierz nowy kolor z rozwijanego prób­nika.

443. Aby przydzielić własną nazwę do plastra, usuń zaznaczenie opcji Auto-Name Sli­ces i wpisz nową nazwę w polu tekstowym Custom Base Name.

W oknie dialogowym HTML Setup możesz zdefiniować nowy schemat automa­tycz­ne­go nadawania nazw, co zostanie opisane w jednym z kolejnych podrozdziałów.

Plastry tekstowe XE "plastry:plastry tekstowe"

Mało kto wie o przydatnej funkcji, umożliwiającej tworzenie plastrów tekstowych (Text Slice). Plastry tekstowe pozwalają na wyświetlanie tekstu HTML zamiast określonego frag­mentu obrazka (rysunek 20.15).

Rysunek 20.15. Zmiana typu plastra na Text umożliwia wkomponowanie w plastrowaną grafikę tekstu HTML

Aby utworzyć plaster tekstowy:

431. Zaznacz plaster i otwórz paletę Object.

432. Z rozwijanej listy Type wybierz opcję Text.

W palecie Object zostanie wyświetlony obszar tekstowy.

444. Wpisz tekst i (lub) kod HTML bezpośrednio w obszarze tekstowym palety Object.

445. Po zakończeniu wpisywania tekstu wybierz dowolne inne narzędzie lub obiekt.

Program wyświetli wpisany tekst na nakładce plastra.

	W Fireworks 4 tekst w obiektach tekstowych jest przestawiany w ich nakładkach, dzięki czemu są od razu widoczne.

446. Aby zmodyfikować tekst, zaznacz plaster i wprowadź odpowiednie zmiany w pa­lecie Object.

Tabele HTML używane do rozmieszczania plastrów standardowo nie po­siadają żadnego obramowania czy dodatkowych odstępów po­mię­dzy komórkami lub pomiędzy obiektami a obramowaniem tabeli, więc wszys­tkie obrazki są umieszczane obok siebie. Może to być pro­ble­mem przy korzystaniu z plastrów tekstowych, ponieważ tekst będzie znaj­dował się bezpośrednio przy obrazku i nie będzie posiadał żad­nych marginesów. Rozwiązaniem tego problemu jest utworzenie du­że­go, pu­s­tego plastra tekstowego i umieszczenie go nad plastrem z tekstem właś­ci­wym.

Opcje XE "plastry:opcje" plastrów

Nawet jeśli wyraźnie zdefiniowane będą jedynie dwa plastry (w zależności od ich poło­że­nia), dla jednego obrazka możesz wygenerować większą ilość plastrów. Aby plastry mo­gły zostać umieszczone w tabeli, każdy z nich musi posiadać swoją własną nazwę. Aby uchro­nić Cię od ręcznego wpisywania wszystkich nazw, Fireworks umożliwia stworzenie w oknie dialogowym HTML Setup (FileHTML Setup) techniki nazywania plastrów. W do­wolnym momencie możesz wyłączyć automatyczne nadawanie nazw po­przez usunięcie zaznaczenia opcji Auto-Naming Slices w palecie Object i wpisać własną nazwę w odpo­wied­nie po­le tekstowe. Zwykle pozwalam Fireworks nadawać automatyczne nazwy większości two­rzonych plas­trów, a ręcznie nazywam jedynie plastry wykorzystywane w paskach na­wigacyjnych, co poz­wala mi później łatwo odnaleźć odwołanie do obrazka w kodzie HTML.

	W Fireworks zastosowano nową metodę określania nazw domyślnych dla plastrów. W rozdziale 3. znajdziesz dokładny opis nazywania plastrów i innych opcji okna dialogowego HTML Setup.

W wyniku plastrowania Fireworks może tworzyć bardzo skomplikowane tabele. Ni­czym niezwykłym nie są tabele posiadające wiele wierszy i kolumn. Tak złożone tabele pod pewnymi względami można porównać do domków z kart, zaś przeglądarkę do sil­ne­go wiatru, który może je zburzyć. W pewnych warunkach, komórki tabeli mogą wy­glą­dać tak, jakby utracone zostały wyniki wszystkich obliczeń dotyczących szerokości czy wysokości i tabela jest wówczas dzielona na położone w dużych odległościach od sie­bie komórki, w których wyświetlane są poszczególne obrazki.

Do tworzenia takich tabel Fireworks używa 1-pikselowych obrazków. Są to prze­zro­czys­te obrazki w formacie GIF o wymiarach 1×1 piksel umieszczane przy górnych i pra­wych krawędziach komórek tabeli HTML. Fireworks wykorzystuje sposób dzia­ła­nia HTML i używa tylko jednego obrazka o nazwie spacer.gif, którego rozmiar fizyczny to jedynie 43 bajty, czyli 0,04K. Ten sam obrazek jest wykorzystywany przez wszystkie kli­ny umie­szczone w tabeli, które są jedynie odpowiednio skalowane. HTML pozwala na zdefinio­wanie określonej szerokości i wysokości obrazka, który jest następnie ska­lo­wa­ny przez przeglądarkę. Metoda ta nie sprawdza się zbyt dobrze z większością obraz­ków (prze­glądarki nie posiadają dobrych algorytmów skalowania), ale w przypadku kli­nów jest w zupełności wystarczająca. Kliny są prawie niewidoczne. Te umieszczane przy górnej krawędzi komórki dodają jeden piksel do jej wysokości, zaś te znajdujące się przy prawej krawędzi - jeden piksel do szerokości. Co najważniejsze - 1-pikselowe obraz­ki doskonale wywiązują się z powierzonego im zadania - utrzymania kształtu i inte­gralności tabeli z plastrami bez względu na używaną do jej wyświetlenia prze­glą­darkę.

Mimo ich wszystkich zalet, 1-pikselowe obrazki nie sprawdzają się we wszystkich sy­tu­ac­jach. Dlatego Fireworks oferuje opcje dotyczące ich tworzenia, znajdujące się na zakładce Table w oknie dialogowym HTML Setup. Możesz wybrać używanie przezroczystych 1-pikselowe obrazków (One-Pixel Transparent Spacer), tworzenie zagnieżdżonych tabel bez przezroczystych obszarów (Nested Table-No Spacers) lub tworzenie pojedynczych tabel bez przezroczystych obszarów (Single Table-No Spacers). Przy korzystaniu z opcji Single Table-No Spacers sprawdź rezultaty w różnych przeglądarkach, aby upewnić się, czy akceptują twoje ustawienia.

Eksportowanie plastrów

Po wyeksportowaniu mapy obrazka, otrzymywałeś obrazek i kod HTML. Ekspor­to­wa­nie plastrów generuje wiele różnych obrazków i trochę więcej kodu HTML. Musisz wie­dzieć o tym, że eksport każdego plastrowanego obrazka prowadzi do utworzenia wie­lu plików graficznych, które muszą być przechowywane w jednym miejscu. Fire­works oferuje dwie różne metody plastrowania i możliwość wyboru stylu kodu HTML. Wy­brane ustawienia uzależnione są od sposobu, w jaki tworzysz plastry oraz uży­wa­ne­go przez Ciebie programu do tworzenia stron WWW.

Eksportowanie XE "plastry:eksportowanie" plastrów jako różnych typów obrazków

Kolejną rzeczą dającą plastrom przewagę nad obszarami aktywnymi jest fakt, iż każdy plas­ter może zostać wyeksportowany w innym formacie, gdyż każdy z nich może być odręb­nym plikiem graficznym. Funkcja taka umożliwia Ci wyeksportowanie jednego plas­tra w formacie JPEG, innego jako GIF, a jeszcze innego jako PNG.

Zdefiniowanie formatu eksportu plastra jest proste. Zaznacz plaster w oknie dokumentu i wybierz z menu polecenie WindowOptimize, aby wyświetlić paletę Optimize. Przy za­zna­czonym plastrze, w palecie Optimize wyświetlane są jego ustawienia eksportu. Określ format pliku i ustawienia optymalizacji. Następnie zaznacz kolejny plaster i zmień jego ustawienia lub usuń zaznaczenia wszystkich plastrów, aby zmodyfikować op­­cje eksportu dla całego dokumentu.

Określanie opcji eksportu

Po zdefiniowaniu ścieżki dostępu i nazw eksportowanych plików, musisz jeszcze wy­brać metodę tworzenia plastrów. Oto opcje dostępne w rozwijanej liście Slicing (Plas­tro­wa­nie), która znajduje się w oknie dialogowym Export:

• None (Bez plastrowania). Bez względu na liczbę zdefiniowanych plas­trów, obrazek jest eksportowany jako jeden plik.

• Export Slices (Eksportuj plastry). Obrazki są tworzone z plastrów, które znaj­dują się w dokumencie.

• Slice Along Guides (Plastrowanie wzdłuż prowadnic). Do tworzenia plastrów wy­­korzystywane są standardowe prowadnice, które znajdują się w doku­men­cie.

W większości przypadków najlepszym wyborem jest opcja Export Slices. Two­rze­nie plastrów wymaganych przez „rollovery” i inne behawiory jest bardzo proste. Jedynym po­wodem, dla którego powinieneś wybrać opcję Slice Along Guides jest podzielenie obraz­ka na wiele mniejszych części, do jakich nie są przydzielane żadne behawiory. Aby użyć opcji Slice Along Guides musisz najpierw odpowiednio rozmieścić w doku­men­cie prowadnice, co zostało opisane w jednym z poprzednich podrozdziałów.

Aby wyeksportować plastrowany obrazek:

433. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export.

447. W górnej części okna dialogowego określ położenie i nazwy eksportowa­nych pli­ków.

448. Z listy opcji Save as type (Save As) wybierz HTML and Images.

449. Wybierz Export HTML File lub Copy to Clipboard z listy HTML.

450. Wybierz albo Export Slices, albo Slice Along Guides z listy Slicing.

451. Aby pliki obrazka zostały zapisane w innym katalogu, zaznacz pole Put Images in Subfolder, kliknij przycisk Browse i wybierz docelową lokalizację dla obrazków.

452. Aby zmienić dowolne z określonych wcześniej ustawień plastrów, kliknij przy­cisk Save, aby ponownie otworzyć okno dialogowe HTML Setups i dosto­suj ustawienia.

453. Po dokonaniu wszystkich ustawień kliknij przycisk Save, aby zakończyć pro­ces eksportu.

454. Jeśli skopiowałeś kod do schowka, wklej go do dokumentu otwartego w twoim edy­torze HTML.

Wstawianie plastrów na stronę WWW XE "plastry:wstawianie na stronę WWW"

Podobnie jak w przypadku map obrazków, cztery style HTML: Generic (Ogólny), Dreamweaver, FrontPage i Go­Li­ve, determinują pewne aspekty kodu HTML, generowanego przez Fireworks. Umieszczenie kodu dla plastrowanego obrazka jest bardzo prostą czynnością. Cały kod ta­kiego obrazka znajduje się w jednym znaczniku - <table>. Pamiętaj, że w języku HTML dane zawierane są pomiędzy dwoma znacznikami - otwierającym i za­my­ka­ją­cym. W przypadku kodu tabeli HTML znacznikiem otwierającym jest <table>, zaś za­my­kającym </table>. Fireworks oznacza ten kod za pomocą komentarzy HTML, któ­re wyjaśniają, gdzie zacząć, a gdzie zakończyć kopiowanie.

	Technika opisywana w tym rozdziale dotyczy wstawiania na stronę WWW jedynie prostych plastrów, bez dołączonych „rolloverów” lub in­nych behawiorów. Jeśli chcesz się dowiedzieć, jak eksportować plas­try z behawiorami, zerknij do rozdziału 21.

Szablon Generic (Ogólny)

Szablonu Generic używaj, gdy stronę WWW tworzysz ręcznie w edytorze tekstowym lub aplikacji do tworzenia stron WWW, dla której nie został zdefiniowany w Fireworks ża­den szablon.

Aby umieścić na stronie ogólny kod HTML dla plastrowanych obrazków:

434. Otwórz kod w edytorze tekstu lub oknie tekstowym edytora HTML.

435. Zaznacz i skopiuj do schowka część <body>, rozpoczynającą się od wiersza

<!---------- BEGIN COPYING THE HTML ---------->

i kończącą się wierszem

<!---------- STOP COPYING THE HTML HERE ---------->

455. Otwórz istniejącą stronę WWW w edytorze tekstu lub oknie tekstowym edy­tora HTML.

456. W części <body> strony WWW, w miejscu, w którym ma być wyświetlany obra­­zek, wstaw skopiowany do schowka kod HTML.

457. Obejrzyj stronę w przeglądarce i, jeśli będzie to konieczne, dostosuj położenie znacz­nika <img>.

Dreamweaver

Mimo że do umieszczania wygenerowanego przez Fireworks kodu powinieneś wyko­rzys­tać inspektora Dreamweavera Code Inspector lub Code View, dzięki narzędziu Tag Selector możesz także pozostać w Design View i ro­bić to wizualnie.

Aby umieścić w Dreamweaverze kod plastrowanego obrazka wygenerowany przez Fire­works:

436. Otwórz w Dreamweaverze plik HTML wygenerowany przez Fireworks.

437. Kliknij wyeksportowany obrazek.

Obrazek jest podzielony na plastry, zaznaczony więc zostanie tylko jeden plas­ter, a nie cały obrazek.

458. Wybierz znacznik <table> z przełącznika znaczników (Tag Selector), który znaj­­duje się w lewym dolnym rogu okna dokumentu (rysunek 20.16).

Zaznaczone zostaną wszystkie plastry obrazka i ich kod HTML.

459. Wybierz z menu polecenie EditCopy lub użyj skrótu klawiaturowego Ctrl+C (Com­mand+C).

460. Otwórz stronę WWW, na której chcesz umieścić plastrowany obrazek.

461. Umieść kursor w miejscu, w którym chcesz wstawić obrazek.

462. Wybierz z menu polecenie EditPaste lub użyj skrótu klawiaturowego Ctrl+V (Command+V).

Rysunek 20.16. Użyj przełącznika znaczników Dreamweavera, aby zaznaczyć plastry, które chcesz wycinać i kopiować

Plastrowany obrazek i jego kod HTML zostaną umieszczone w dokumencie.

GoLive

Okno HTML Outline programu GoLive umożliwia łatwe przeciąganie kodu HTML po­mię­dzy dwoma dokumentami. Kod wyeksportowany z wybranym szablonem GoLive za­wie­ra znacznik cssscriptdict, który „mówi” GoLive, jak edytować kod. Upewnij się, że skopiowałeś znacznik cssscriptdict wraz z pozostałym kodem HTML.

Aby kod wygenerowany przez Fireworks dla plastrowanego obrazka umieścić w GoLive:

438. Otwórz w GoLive plik HTML wygenerowany przez Fireworks.

439. Przejdź do widoku HTML Outline dla dokumentu źródłowego i docelowego.

440. W dokumencie źródłowym zaznacz znacznik <table>. Tabela ta zawiera wszy­s­tkie elementy plastrowanego obrazka.

441. Przeciągnij znacznik <table> do docelowego dokumentu.

442. Zaznacz znajdujący się w części <head> źródłowego dokumentu znacznik csss­criptdict i przeciągnij go do takiej samej części dokumentu docelo­wego.

FrontPage

Microsoft FrontPage przechowuje zewnętrzny kod (wliczając kod JavaScriptu) w struk­tu­rach nazywanych znacznikami HTML (lub - w języku FrontPage'a - „webbotami”). Fire­works umożliwia poprzez szablon FrontPage generowanie odpowiednich struktur kodu, który może być następnie umieszczany na stronach WWW, tworzonych w tym edy­torze.

Aby umieścić plastrowany obrazek Fireworks w dokumencie FrontPage:

443. Otwórz we FrontPage'u plik wygenerowany przez Fireworks.

	Dokument FrontPage'a i dokument wygenerowany przez Fireworks mu­szą znajdować się w tym samym katalogu.

463. Wybierz opcję HTML View.

464. Zaznacz i skopiuj do schowka kod rozpoczynający się od wiersza

<!---------- BEGIN COPYING THE HTML ---------->

i kończący się wierszem

<!---------- STOP COPYING THE HTML HERE ---------->

465. Wybierz z menu polecenie EditCopy.

466. Otwórz dokument, do którego chcesz wstawić plastrowany obrazek.

467. Wybierz z menu polecenie EditPaste, aby wstawić kod do dokumentu.

Eksportowanie pojedynczych plastrów

Czasami chcemy wyeksportować niewielki fragment obszaru roboczego Fireworks jako plik pojedynczego obrazka. Zamiast kopiować część całego obrazka i umieszczać ją w nowym dokumencie, a następnie eksportować, można szybko określić obszar eksportowanego pliku obrazka przez umieszczenie na nim plastra i następnie wyeksportować ten pojedynczy plaster. Taki pojedynczy plaster można również osobno zoptymalizować przed eksportowaniem.

Aby wyeksportować pojedynczy plaster:

1. Zaznacz plaster, który ma być eksportowany.

2. Wybierz z menu polecenie WindowOptimize, aby otworzyć paletę Optimize.

3. Określ ustawienia eksportu w palecie Optimize.

Powyższe ustawienia dotyczą tylko zaznaczonego plastra.

4. Wybierz z menu polecenie FileExport.

Pojawi się okno dialogowe Export.

5. Wyszukaj katalog, do którego eksportujesz plaster i określ nazwę pliku.

6. Z listy Save As wybierz Images Only.

7. Z listy Slices wybierz Export Slices.

8. Zaznacz pole wyboru Selected Slices Only.

9. Kliknij Save.

Zaznaczony plaster jest eksportowany jako plik pojedynczego obrazka.

Technika Fireworks: Eksportowanie pozycji Dreamweaver Library

Biblioteki są istotną funkcją Dreamweavera, która umożliwia modyfikację jednej z części strony WWW, po której Dreamweaver aktualizuje wszystkie strony, za­wie­ra­ją­ce tę część. Pierwotnie, biblioteki Dreamweavera projektowane były z myślą o umie­szcza­niu na stronach WWW często powtarzających się elementów, takich jak logo lub infor­macje o prawach autorskich. Umożliwiają one również interpretowanie po­szcze­gól­nych części kodu HTML jako pojedynczych, łatwych w zarządzaniu jednostek. Jeśli jako projektant grafiki zetknąłeś się kiedyś z formatem Encapsulated PostScript (EPS), bi­blioteki Dreamweavera możesz traktować jako Encapsulated HTML.

Aby element biblioteki mógł zostać rozpoznany, należy go umieścić w specjalnym kata­lo­gu lokalnej witryny. Jeśli w trakcie eksportu grafiki, z rozwijanej listy Save as type (Save As), w oknie dialogowym Export, wybierzesz opcję Dreamweaver Library (.lbi), program zapyta Cię o lokalizację ka­talogu z bibliotekami. Jeśli nie utworzyłeś do tej pory dla bieżącej witryny żadnego ele­mentu biblioteki, będziesz musiał stworzyć nowy katalog. Musi on znajdować się w głów­nym katalogu witryny i posiadać nazwę Library. Jeżeli na przykład główny kata­log wi­tryny znajduje się w katalogu Strony WWW, katalog bibliotek należy utworzyć w ka­talogu StronyWWW/Library.

	W większości witryn, w nazwach stosowane są małe litery. Katalog z bibliotekami może nazywać się „library” i nie stworzy to żadnych problemów w Dreamweaverze.

Opcja eksportu Dreamweaver Library (.lbi) eksportuje mapy obrazka lub plastry w tej samej tabeli co szablon Dreamweaver HTML, ale dodatkowo oznacza tabelę jako element biblioteki, który może być wielokrotnie wsta­wiany do różnych dokumentów. Korzystając z opcji Dreamweaver Library (.lbi), możesz w dowolnym momencie dokonywać eksportowania, niezależnie od ustawień stylu HTML w oknie dialogowym HTML Setup.

Aby wyeksportować HTML i obrazki z Fireworks jako element biblioteki Dreamweavera:

444. Wybierz z menu polecenie FileExport.

Zostanie wyświetlone okno dialogowe Export.

468. Wyszukaj głów­ny katalog witryny i przejdź do podkatalogu Library witryny. Jeżeli witryna nie posiada katalogu z bibliotekami, musisz go utworzyć.

469. Określ nazwę pliku dla pozycji biblioteki, jeżeli jest taka potrzeba.

470. Z listy Save as type (Save As) wybierz Dreamweaver Library (.lbi).

Jeżeli wcześniej nie przechodziłeś do katalogu z bibliotekami, program wyświetli ostrzeżenie, informujące, że taki katalog jest niezbędny i poprosi o jego wybranie. Przejście do katalogu z bibliotekami przed wybraniem opcji Dreamweaver Library (.lbi) pozwala uniknąć tego ostrzeżenia — jak to zrobiono w kroku 2. — co pozwala wybrać katalog Library w większym oknie dialogowym, a Fireworks będzie powracał do tego katalogu przy następnej operacji eksportowania z tego samego dokumentu.

471. Zaznacz pole wyboru Put Images in Subfolder i kliknij przycisk Browse, aby wybrać folder obrazków witryny.

472. Kliknij Save.

Aby po wyeksportowaniu pozycji biblioteki z Fireworks umieś­cić pozycje biblioteki w Dreamweaverze:

445. Wybierz w Dreamweaverze z menu polecenie WindowAssets lub użyj skrótu klawiaturowego F11., aby otworzyć paletę Assets (Składniki)

Zostanie wyświetlona paleta Assets bieżącej witryny.

		Dla użytkowników MacOS: Jeśli w panelu kontrolnym klawiatury (Key­board Control Panel) zamapowane są jakieś klawisze funkcyjne do uru­chamiania programów lub wykonywania innych zadań, nie będziesz mógł używać tych klawiszy w Fireworks. W takim przypadku możesz ko­rzystać jedynie z poleceń menu, chyba że wyłączysz mapowanie kla­wi­szy w panelu kontrolnym klawiatury.

473. W palecie Assets wybierz kategorię Library (rysunek 20.17).

Rysunek 20.17. Po wyeksportowaniu mapy obrazka z Fireworks jako elementu biblioteki Dreamweavera, będzie ona dostępna w Dreamweaverze w kategorii Library palety Assets

474. Umieść kursor w tym miejscu dokumentu, w którym chcesz umieścić mapę obrazka

475. Wybierz wyeksportowaną mapę obrazka z listy, która znajduje się w palecie Assets.

W panelu podglądu palety Assets wyświetlana jest pozycja biblioteki.

476. Kliknij przycisk Insert albo przeciągnij element biblioteki z panelu podglądu lub z listy i upuść go w oknie dokumentu.

Mapa obrazka i cały niezbędny kod HTML zostanie umieszczony na tworzonej w Dream­weaverze stronie WWW.

Jeżeli będziesz chciał zmodyfikować mapę obrazka, zaznacz ją i kliknij przycisk Open, znajdujący się w inspektorze Property Dreamweavera. Zostanie otwarte okno dokumentu, zawierające jedynie modyfikowaną pozycję biblioteki. Zaznacz obrazek na stro­nie i kliknij przycisk Edit w inspektorze Property lub wybierz z menu polecenie Com­mandsOptimize Image in Fireworks. Gdy po zakończeniu edycji będziesz chciał zam­knąć okno dokumentu, Dreamweaver zapyta Cię, czy chcesz uaktualnić bibliotekę. Klik­nij przycisk Yes, aby uaktualnić bibliotekę lub przycisk No, aby odłożyć to na póź­niej.

Technika Fireworks: animowanie plastrów

W Fireworks można budować doskonałe animacje. Wykorzystując opisywaną poniżej tech­nikę, możesz z wykorzystaniem plastrów wkomponować dowolną animację w więk­szy obrazek. Jeśli animowana ma być jedynie niewielka część całego obrazka, na przy­kład ekran radaru na panelu kontrolnym, przekształcenie całego obrazka na animację mo­głoby spowodować drastyczne zwiększenie rozmiaru pliku. Za pomocą plastrów możesz ani­mo­wać jedynie wybrane obszary grafiki, podczas gdy pozostałe są statyczne. Umożliwia to zna­czne zmniejszenie rozmiarów końcowych plików.

Aby utworzyć w Fireworks plaster z animacją:

446. Utwórz w Fireworks animację, używając normalnej procedury.

	Tworzenie animacji zostanie szczegółowo opisane w części VI.

477. Jeśli animacja nie jest jeszcze częścią większego obrazka, przejdź w palecie Frame do klatki Frame 1 i wybierz z menu polecenie ModifyCanvas Size, aby powiększyć obszar roboczy.

478. Utwórz grafikę otaczającą animację.

479. Utwórz plaster z animacji. Możesz zaznaczyć animację i wybrać z menu po­le­ce­nie InsertSlice lub za pomocą narzędzia Slice narysować prostokąt obej­mu­ją­cy cały obszar animacji.

480. Wyświetl paletę Object, jeśli jeszcze nie ma jej na ekranie.

481. W palecie Object ustaw łącze plastra i inne pożądane opcje.

482. Wyświetl paletę Optimize, jeśli jeszcze nie ma jej na ekranie.

483. Z rozwijanej listy Export File Format (Format eksportowanego pliku) wybierz op­cję Animated GIF.

484. Zdefiniuj inne ustawienia optymalizacji.

	Opcje optymalizacji grafiki w Fireworks zostały opisane w rozdziale 15.

485. Powtórz polecenia od czwartego do dziewiątego dla wszystkich statycznych plas­trów obrazka, a z listy Export File Format w palecie Optimize wybierz dla nich opcje inne niż Animated GIF. Możesz także usunąć zaznaczenia wszys­tkich plastrów i w palecie Optimize wybrać format eksportu dla całego doku­men­tu, który zostanie użyty dla wszystkich plastrów, dla których nie wybrałeś wcześ­niej żadnego innego formatu.

486. Gdy już przygotujesz dokument do eksportu, wybierz z menu polecenie File Export.

Zostanie otwarte okno dialogowe Export.

487. W górnej części okna dialogowego określ położenie i nazwy eksportowanych plików.

488. Z listy Save as type (Save As) wybierz opcję HTML and Images.

489. Z listy opcji HTML wybierz, czy eksportować plik HTML, czy kopiować kod do schowka.

490. Z listy Slices wybierz opcję Export Slices.

491. Aby zmodyfikować opcje ustawienia HTML, kliknij przycisk Options w celu otwarcia okna dialogowego HTML Setup.

492. Kliknij przycisk Save, aby zakończyć proces eksportu.

Animacja zostanie wyeksportowana jako część większego, statycznego obrazka (ry­su­nek 20.18).

Rysunek 20.18. Na ilustracji animowany jest jedynie ekran radaru, zaś pozostałe części obrazka są statyczne

Podsumowanie

Obiekty internetowe Fireworks: obszary aktywne i plastry są doskonałymi elementami umo­żliwiającymi integrowanie grafiki z Internetem. łącząc obiekty internetowe z in­ny­mi elementami grafiki, projektanci grafiki mogą bezproblemowo przechodzić z jednego środowiska do innego, przez cały czas zachowując możliwość edycji wszystkich obiektów. Pod­czas pracy z obiektami internetowymi musisz pamiętać o następujących rzeczach:

• Fireworks obsługuje dwa typy obiektów internetowych: obszary aktywne i pla­s­try. Obszary aktywne służą do oznaczania kodem HTML wybranych frag­men­tów większej grafiki, zaś plastry dzielą duże obrazki na wiele mniej­szych części.

• Obszary aktywne mogą mieć jeden z trzech podstawowych kształtów: pros­to­ką­ta, okręgu lub wielokąta. Dla każdego z ich typów Fireworks oferuje odręb­ne narzędzie. Termin „obszar aktywny” oznacza fragment większej grafiki, nazy­wa­nej mapą obrazka.

• Dowolny obiekt Fireworks może być łatwo przekształcony na obszar aktywny za pomocą polecenia InsertHotspot.

• Podczas eksportowania map obrazków upewnij się, że wygenerowane zostaną obie części kodu: znacznik <img>, który zawiera łącze do źródłowego obrazka, oraz znacznik <map> z informacjami o obszarze aktywnym.

• W Fireworks istnieją trzy sposoby tworzenia plastrów: narzędzia Rectangle lub Polygon Slice, polecenie InsertSlice oraz standardowe prowadnice.

• Włączenie opcji ViewSlice Guides (Prowadnice plastrów) pozwala liczbę tworzonych plas­trów zredukować do minimum.

• Poszczególne plastry mogą być eksportowane w różnych formatach plików, na­wet jako animowane GIF-y, co pozwala łączyć ze sobą animowane i sta­tycz­ne plastry.

W następnym rozdziale dowiesz się, jak przydzielać behawiory i tworzyć w ten sposób in­ter­aktywne elementy grafiki.




Rozdział 21.
Behawiory,
czyli ożywiamy Fireworks

W tym rozdziale:

• Wykorzystywanie behawiorów.

• Tworzenie przycisków reagujących na zdarzenia myszy (rollovers).

• Wykorzystanie palety URL.

• Eksportowanie rolloverów do wykorzystania w Internecie.

• Praca w oknie Button Editor.

• Tworzenie rozdzielnych rolloverów.

• Tworzenie zewnętrznych rolloverów.

• Umieszczanie rolloverów w plastrach.

Z perspektywy użytkownika w Internecie można znaleźć dwa typy grafiki: obrazki, któ­re można oglądać i takie, na które można oddziaływać. W większości programów gra­ficz­nych udaje się tworzyć wiele różnych obrazków typu „oglądaj, ale nie dotykaj”, zaś Fire­works jest jednym z kilku programów, w których można tworzyć grafikę interaktywną.

W rezultacie projektowania interaktywnej grafiki może powstać skomplikowana kom­bi­na­cja grafiki i kodu, ale Fireworks upraszcza cały proces za pomocą behawiorów. Używając behawiorów w Fireworks możesz tworzyć całą gamę elementów interak­tyw­nych: od prostych rolloverów (elementów reagujących na zdarzenia myszy) do bardziej zło­żonych interakcji, w których obszar aktywny znajdujący się w jednej lokalizacji, mo­że uruchamiać rollover położony zupełnie gdzie indziej i jednocześnie wyświetlać ko­mu­nikat w pasku stanu przeglądarki. Wszystko to możesz wykonać w Fireworks, nie pi­sząc ani jednego wiersza kodu.

Ten rozdział opisuje wszystkie zawiłości dotyczące korzystania z behawiorów oraz nie­które techniki umożliwiające łączenie ze sobą większych ilości różnych behawiorów. Być może jeszcze nigdy nie wykorzystałeś żadnego z behawiorów Fireworks, ale gdy zacz­niesz ich używać, Twoje strony już nigdy nie będą takie same.

Podstawowe wiadomości XE "behawior:podstawowe wiadomości" o behawiorach

Zanim pojawił się Fireworks, tworzenie stron WWW, które reagowałyby na działania użyt­kow­nika, wymagało od projektanta umiejętności zaawansowanego programowania lub po­sia­dania edytora HTML (takiego jak Macromedia Dreamweaver), potrafiącego zau­to­ma­tyzować ten proces. Zwykła strona WWW napisana w HTML-u jest dość statyczna; je­dy­nymi elementami, z którymi może współpracować użytkownik są formularze. Aby oży­wić Twoją stronę, musisz użyć bardziej zaawansowanego języka programowania. Języ­kiem najczęściej wykorzystywanym przez projektantów internetowych jest Java­Script, gdyż jest on obsługiwany przez obie najważniejsze przeglądarki. JavaScript nie jest tak trudny jak na przykład C++, ale i tak większość projektantów nie ma czasu lub zdol­ności potrzebnych do jego opanowania. Teraz, gdy Fireworks umożliwia łączenie beha­wiorów z grafiką, projektanci nie muszą w ogóle znać JavaScript.

Każdy behawior składa się z dwóch części: zdarzenia (ang. event) i akcji (ang. action). Zda­rzenie jest elementem uruchamiającym akcję. Można je porównać do przycisku „Play”, który służy do włączania odtwarzania taśmy wideo. Zdarzenia w Internecie mo­gą być wynikiem działania użytkownika, wywołanego przez umieszczenie kursora nad obraz­kiem, lub „automatyczne”, na przykład zakończenia ładowania strony. Akcje mogą być bardzo różne - od wyświetlania prostych komunikatów do otwierania nowych okien przeglądarki.

Behawior musi zostać przydzielony do określonego elementu znajdującego się na stro­nie WWW, na przykład łącza tekstowego lub obrazka. W Fireworks behawiory są zaw­sze przy­dzielane do plastrów lub obszarów aktywnych. Behawiory podobne do wyko­rzys­tywanych w Fireworks można znaleźć także w innych programach firmy Macro­me­dia, takich jak Dreamweaver i Director.

O behawiorach można myśleć jak o formacie Encapsulated JavaScript. Jako projektant bę­dziesz musiał podjąć jedynie kilka kluczowych decyzji, na przykład które dwa obraz­ki mają być podmieniane, zaś Fireworks zajmie się resztą i wygeneruje ca­ły potrzebny kod w wybranym przez Ciebie stylu HTML. W Fireworks możesz generować ko­dy przeznaczone dla różnych edytorów WWW, takich jak Dreamweaver. Zanim jed­nak będziesz mógł wyeksportować obrazki i kody związanych z nimi behawiorów, naj­pierw musisz je przydzielić do elementów graficznych za pomocą palety Behaviors.

Paleta Behaviors

Paleta Behaviors XE "paleta:Behaviors" służy do dodawania i usuwania behawiorów. Mimo że każdy z nich po­siada własne okno dialogowe, które pozwala na wybranie opcji i zdefiniowanie odpo­wied­nich parametrów, w palecie Behaviors znajdziesz podstawowe informacje o wszys­tkich przydzielonych behawiorach. Do jednego plastra lub obszaru aktywnego możesz przy­dzielić wiele behawiorów (kilka takich samych lub różnych). Liczba behawiorów, jaka może zostać przydzielona do jednego obiektu internetowego nie jest niczym ogra­ni­czona.

W Fireworks znajdziesz pięć różnych behawiorów:

• Simple Rollover (Prosty rollover). Automatycznie zamienia obrazek z klatki Fra­me 1 na obrazek z klatki Frame 2, gdy użytkownik umieści nad obrazkiem kur­sor. Opcjonalnie można także przełączać obrazki, które znajdują się w in­nych klatkach, na przykład trzeciej i czwartej.

• Swap Image (Swap Image Restore) (Zamień obrazek/Przywróć obrazek). Za­mie­nia jeden obrazek na inny. Podmieniane obrazki mogą znajdować się w in­nych klatkach lub nawet w innych plastrach. W każdym z plastrów, które znaj­du­ją się w dokumencie, można podmieniać również zewnętrzne obrazki. Beha­wior Swap Image Restore automatycznie przywraca oryginalny stan zamienianego obrazka.

• Set Nav Bar Image (Nav Bar Over, Nav Bar Down, Nav Bar Restore) (Ustaw obra­zek paska nawigacyjnego (Pasek nawigacyjny pod kursorem, Wciśnięty pa­sek nawigacyjny, Przywróć obrazek paska nawigacyjnego). Grupa beha­wio­rów definiujących stany elementów paska nawigacyjnego, które znajdują się w za­znaczonych plastrach.

• Set Pop-up Menu (Wyświetl listę rozwijaną). Behawior tworzy listę rozwijaną na stronie WWW.

• Set Text of Status Bar (Wyświetl tekst w pasku stanu). Wyświetla komunikat w pasku stanu przeglądarki.

Centrum zarządzania behawiorami znajduje się w palecie Behaviors (rysunek 21.1). Aby wyświetlić lub ukryć paletę Behaviors, wybierz z menu polecenie WindowBe­ha­viors, użyj skrótu klawiaturowego Shift+F3 lub kliknij za­kład­kę palety. Paleta Behaviors umożliwia dodawania lub usuwanie behawiorów z zazna­czo­nych plastrów lub obszarów aktywnych. Wyświetlane są w niej także wszystkie beha­wio­ry, które już wcześniej zostały dodane do zaznaczonego obiektu. Gdy po dodaniu beha­wiora do obszaru aktywnego lub plastra zaznaczysz ten obiekt ponownie, paleta Beha­viors umożliwi Ci usunięcie behawiora lub zmodyfikowanie jego parametrów.

Rysunek 21.1. Paleta Behaviors jest miejscem, w którym możesz dodawać lub usuwać behawiory z plastrów lub obszarów aktywnych

Przydzielanie XE "behawiory:dodawanie nowych" behawiorów

Jak zostało wspomniane wcześniej, behawiory są przydzielane do obiektów in­ter­netowych Fireworks: obszarów aktywnych i plastrów. Musisz wiedzieć, że obszary aktyw­ne mogą tylko uruchamiać zdarzenia i nie pozwalają na wykonywanie żadnych ak­cji. Plastry z kolei mogą zarówno uruchamiać, jak i otrzymywać zdarzenia.

W praktyce oznacza to, że obszary aktywne mogą być używane jedynie wraz z beha­wio­rem Set Text of Status Bar; wszystkie inne behawiory pracują tylko z plastrami. Mo­żesz jednak użyć obszaru aktywnego do uruchamiania akcji wykonywanych w plas­trach, co zostanie opisane w podrozdziale „Rollovery w obszarach aktywnych”.

Oto typowa procedura przydzielania behawiorów do obiektów internetowych:

493. Zaznacz obszar aktywny lub plaster, do którego chcesz przydzielić behawior.

494. Wybierz z menu polecenie WindowBehaviors lub użyj skrótu klawiaturowego Shift+F3, aby otworzyć paletę Behaviors. Jeśli paleta ta jest wyświetlana na ekranie w grupie innych palet, możesz ją również wy­świe­tlić poprzez kliknięcie zakładki.

	Jeśli zaznaczysz obiekt inny niż internetowy, zostaniesz powiadomiony o tym przez Fireworks, który da Ci możliwość przekształcenia zazna­czo­nego obiektu na obiekt internetowy. Gdy przy próbie przydzielenia beha­wiora nie będziesz miał zaznaczonego żadnego obiektu, Fire­works wyświetli komunikat mówiący, abyś najpierw zaznaczył obszar ak­tywny lub plaster.

495. Kliknij przycisk Add Action (znak plus) i wybierz odpowiedni behawior z listy roz­wi­janej.

Zostanie otwarte okno dialogowe, specyficzne dla wybranego behawiora.

496. Zdefiniuj odpowiednie opcje behawiora i kliknij przycisk OK.

W palecie Behaviors zostanie wyświetlona nazwa nowo przydzielonego beha­wiora.

Modyfikowanie XE "behawiory:modyfikowanie" behawiorów

Aby zmodyfikować behawior przydzielony do obszaru aktywnego lub plastra, zaznacz ten obiekt w oknie dokumentu i kliknij dwukrotnie nazwę behawiora wyświetlaną w pa­le­cie Behaviors. Fireworks wyświetli okno dialogowe wybranego behawiora, w którym bę­dziesz mógł zmodyfikować jego ustawienia.

Oprócz możliwości zmiany ustawień behawiora, możesz również zdefiniować inną ak­cję uruchamiającą go. Domyślnie Fireworks do wszystkich akcji przydziela zdarzenie onMouseOver. Oto lista dostępnych zdarzeń:

• onMouseOver (Najechanie myszą). Akcja jest uruchamiana, gdy użytkownik prz­esunie kursor nad obrazek.

• onMouseOut (Usunięcie myszy). Akcja jest uruchamiana, gdy użytkownik prze­sunie kursor z obszaru obrazka w inne położenie.

• onClick (Kliknięcie). Akcja jest uruchamiana, gdy użytkownik kliknie obra­zek.

• onLoad (ładowanie). Akcja jest uruchamiana po zakończeniu ładowania strony.

Po zaznaczeniu behawiora w liście palety Behaviors, po prawej stronie nazwy zda­rze­nia wyświetlany jest przycisk rozwijanego menu Event (strzałka skierowana w dół). Klik­nięcie tego przycisku umożliwia wybranie z menu nowego zdarzenia (rysunek 21.2).

Rysunek 21.2. Kliknij przycisk rozwijanego menu Event, aby wybrać nowe zdarzenie uruchamiające behawior

Usuwanie XE "behawiory:usuwanie" behawiorów

Usunięcie behawiora powoduje utratę wszystkich zdefiniowanych dla niego ustawień.

Aby usunąć behawior:

447. Zaznacz obszar aktywny lub plaster, z którego chcesz usunąć behawior.

448. Z listy behawiorów wyświetlanej w palecie Behaviors wybierz ten, który chcesz usunąć.

Wyróżnione zostanie zdarzenie, akcja i informacje o behawiorze.

497. Kliknij znajdujący się w palecie Behaviors przycisk Remove Action (znak minus).

Behawior zostanie usunięty z obszaru aktywnego lub plastra oraz skasowany zostanie je­go wpis w palecie Behaviors.

Tworzenie rolloverów

Najpopularniejszym zastosowaniem JavaScriptu w Internecie jest prawdopodobnie two­rze­nie rolloverów. Rollovery XE "Rollovery" to obrazki znajdujące się na stronie WWW, które zmie­nia­ją swój wygląd, gdy użytkownik umieszcza nad nimi kursor.

Popularność rolloverów wynika z łatwości ich użycia, obsługi przez większość prze­glą­da­rek internetowych oraz efektywności w tworzeniu interakcji dla odwiedzających Two­ją witrynę internetową.

Jak działają rollovery

Aby zrozumieć zasadę działania rolloverów, musisz znać podstawy HTML. Strony in­ter­netowe nie zawierają obrazków, ale łącza do nich. łącze jest odwołaniem do pliku obraz­ka definiowanym za pomocą atrybutu src, który jest częścią znacznika <img>.

Gdy użytkownik umieści nad obrazkiem kursor (lub go kliknie), atrybut src jest za­mie­nia­ny na inny plik graficzny. Dzieje się to bardzo szybko, więc wygląda tak, jakby zmie­niany był sam obrazek.

Oto typowy znacznik <img> przed zastosowaniem rollovera:

<a href="home.html"><img src="button_regular.gif" height="100" width="50" alt="home"></a>

A tak wyglądałby ten kod po zastosowaniu rollovera:

<a href="home.html"><img src="button_over.gif" height="100" width="50" alt="home"></a>

Jak możesz zobaczyć w powyższym przykładzie, wysokość, szerokość, tekst zastępczy obraz­ka oraz wskazanie hiperłącza (w naszym przykładzie home.html) definiowane w zna­czniku <a> pozostają niezmienione. Modyfikowane jest jedynie wskazanie do pliku GIF, JPEG lub PNG definiowane za pomocą atrybutu src.

	W rolloverach modyfikowany jest jedynie atrybut src, więc wszystkie uży­wane w nich obrazki muszą mieć takie same wymiary. Nie możesz za­mieniać mniejszego obrazka większym i odwrotnie. Jeśli to zrobisz, prze­glądarka zastosuje do nowego obrazka wymiary oryginalnego obraz­ka, co doprowadzi do jego zniekształcenia.

Pamiętaj, że modyfikowane mogą być dowolne znaczniki <img>, a nie tylko te, które są uży­wane w rolloverach. Umożliwia to tworzenie rozdzielnych rolloverów, co zostanie opi­sane w jednym z kolejnych podrozdziałów.

Stany XE "rollovery:stany" rolloverów

Rollover służy do zamieniania jednych obrazków na inne, co realizowane jest przez pro­jektantów za pomocą różnych trybów, czyli stanów przycisków. Zanim użytkownik uru­chomi rollover, obrazek ma stan Up (Normalny). Po uruchomieniu rollovera, obra­zek przybiera stan Over (Pod kursorem), gdyż kursor znajduje się nad obrazkiem. W Fire­works do tworzenia różnych stanów rolloverów najczęściej wykorzystywane są klatki.

Prosty rollover używa tylko dwóch stanów (czyli dwóch klatek): Up i Over. Każdy rol­lo­ver może mieć jednak aż cztery stany, tworzone na podstawie czterech klatek doku­men­tu Fire­works. W tabeli 21.1 znajdziesz opis stanów rolloverów i numery związa­nych z ni­mi klatek.

Tworzenie obrazków XE "rollovery:tworzenie obrazków" używanych w rolloverach

Pierwszym krokiem w budowaniu rolloverów jest utworzenie poszczególnych obraz­ków przechowywanych w oddzielnych klatkach dokumentu Fireworks. Przy tworzeniu obraz­ków rolloverów używam dwóch podstawowych technik. Wybór techniki zależy od tego, czy będzie to rollover wykorzystywany niezależnie (tworzę je wówczas w oddziel­nych dokumentach) czy też będzie częścią większego dokumentu.

Tabela 21.1.

Stany rolloverów

Klatka	Stan	Opis
1	Up	Przycisk, z którym nie zachodzą żadne interakcje. Tak będzie wyglądał zaraz po załadowaniu strony do przeglądarki użytkownika
2	Over	Przycisk znajdujący się pod kursorem
3	Down	Przycisk wciśnięty przez użytkownika. Stan ten jest stosowany do rolloverów znajdujących się na stronach, do których prowadzą przydzielone do nich łącza. Przykładowo - stan Down jest często używany do pokazania, który przycisk został kliknięty w celu wyświetlenia bieżącej strony WWW
4	Over Down	Wciśnięty przycisk, nad którym znajduje się kursor myszy

Bez względu na tech­ni­kę - budowa rollovera rozpoczyna się od utworzenia począt­ko­wego stanu przycisku, któ­ry jest następnie duplikowany i modyfikowany.

Aby utworzyć rollover, który ma być niezależnym dokumentem:

449. W klatce Frame 1 utwórz początkowy stan przycisku, czyli taki jaki ma mieć przed kliknięciem przez użytkownika.

450. Kliknij przycisk i wybierz z menu polecenie EditClone, aby utworzyć du­pli­kat umie­szczony dokładnie nad oryginalnym przyciskiem.

451. Jeśli chcesz utworzyć również stan Down przycisku, powtórz krok 2. Jeżeli przy­cisk ma mieć dodatkowo stan Over Down, jeszcze raz powtórz krok 2. W re­zultacie otrzymasz w klatce Frame 1 cztery obiekty, położone dokładnie je­den nad drugim.

498. Zaznacz wszystkie cztery stany przycisku, rysując za pomocą myszy ota­cza­ją­ce je zaznaczenie prostokątne. Kliknij znajdujący się w palecie Frames przy­cisk Distribute to Frames (Rozłóż na klatki), oznaczony ikoną przedstawiającą taś­mę filmową.

Obiekty zostaną rozłożone na odrębne klatki tak, aby każdy ze stanów przy­cis­ku znajdował się we własnej klatce.

499. W pierwszej klatce już teraz znajduje się odpowiedni stan Up przycisku. Przejdź do klatki Frame 2 i zmodyfikuj przycisk, aby utworzyć dla niego stan Over. Możesz dodać do niego efekt Glow (Blask) lub zmienić ustawienia wy­peł­nienia albo obrysu.

500. Jeżeli posiadasz stany Down i Over Down, przejdź kolejno do klatek Frame 3 i Fra­me 4, aby utworzyć odpowiednie dla tych stanów przyciski.

Jeśli do stanu Over zastosowałeś efekt fazy, aby nadać mu trój­wy­mia­rowy wygląd, dobrym sposobem na utworzenie kolejnych stanów jest wybranie dla nich innych ustawień efektu fazy z rozwijanej listy go­towych ustawień, znajdującej się u dołu okna dialogowego efektu. Umo­żliwia to utworzenie wrażenia trójwymiarowego przycisku, który po­rusza się w górę i w dół, w zależności od jego stanu. Przykładowo, dla stanu Up możesz wybrać ustawienie Raised (Podniesiony), dla sta­nu Over - Highlighted (Podświetlony), dla stanu Down - Inset (Wy­tło­czony), zaś dla stanu Over Down - Inverted (Odwrócony).

Jeśli twoje rollovery są częścią większego dokumentu, który zawiera wiele przycisków i in­nych obiektów, przy ich tworzeniu musisz wykonać następujące kroki:

452. Utwórz wszystkie początkowe obiekty w pierwszej klatce dokumentu.

453. Z rozwijanego menu palety Frames wybierz polecenie Duplicate Frames (Du­pli­kuj klatki).

Zostanie otwarte okno dialogowe Duplicate Frames.

501. W oknie dialogowym Duplicate Frames wpisz liczbę klatek, jaką chcesz dodać do dokumentu. W polu tekstowym Number dodaj jedną klatkę dla każdego do­dat­kowego stanu.

Dla prostych rolloverów składających się tylko z dwóch stanów - Up i Over
- wy­starczy dodać jedną klatkę. W rolloverach posiadających również stany Down i Over Down, będą Ci potrzebne trzy dodatkowe klatki.

502. Upewnij się, że zaznaczona jest opcja Insert New Frame After the Current Fra­me (Dodaj nowe klatki po klatce bieżącej) i kliknij przycisk OK.

Do dokumentu zostaną wstawione zduplikowane klatki.

	Innym sposobem na duplikowanie klatek jest przeciąganie ich nazw, któ­re znajdują się w palecie Frames na przycisk New/Duplicate Frame (Nowa/Duplikowana klat­ka). Po wykonaniu każdej takiej operacji, po przeciągniętej klatce umie­szczana jest nowa, zduplikowana. W ten sam sposób można również du­pli­kować warstwy w palecie Layers.

503. W każdej nowej klatce zmodyfikuj odpowiednio rollover, aby nadać mu wy­gląd, który będzie reprezentował stan przycisku.

	Możesz jednocześnie modyfikować wiele obiektów, na przykład nadać im efekt Glow (Blask). Zaznacz wszystkie obiekty do mo­dy­fikacji i wprowadź odpowiednie zmiany za pomocą palety Stroke, Fill lub Effects.

Bez względu na technikę użytą do utworzenia oddzielnych obrazków rollovera, naj­lep­szy efekt uzyskasz zawsze poprzez stosowanie do nich subtelnych modyfikacji. Jeśli je­den z przy­cisków będzie się bardzo różnił od pozostałych stanów, wyraźnie będzie wi­dać mo­ment zamiany grafiki, co spowoduje utratę wrażenia pojedynczego klikniętego lub wy­różnionego przycisku. Zamiast tego, użytkownik zobaczy jedynie zmianę jednego obraz­ka na inny. Najlepiej w rolloverach wyglądają niewielkie zmiany położenia lub wy­glądu grafiki (rysunek 21.3).

Rysunek 21.3. Najbardziej przekonujące zmiany stanów rollovera można uzyskać za pomocą niewielkich modyfikacji oryginalnego przycisku. Na ilustracji przedstawione zostały trzy przyciski i ich kolejne stany: Up, Over, Over Down i Down
		Możesz podglądać rollovery w trakcie ich tworzenia, za pomocą przy­cis­ku Play, który służy do sterowania animacjami. Po jego wciśnięciu zos­taną odtworzone - jedna po drugiej - wszystkie klatki obrazka.

Po utworzeniu wszystkich poszczególnych obrazków używanych przez przycisk, mo­żesz przydzielić do nich behawior i wykorzystywać jako interaktywny przycisk.

Stosowanie behawiora Simple Rollover XE "rollovery:behawior Simple Rollover"
(Prosty rollover)

W Fireworks prosty rollover (ang. simple rollover) jest naprawdę prosty. Beha­wior Simple Rollover tworzy klasyczny efekt posiadających dwa podstawowe stany: Up i Over, i nie oferuje żadnych ustawień dla użytkownika. Jeżeli jest nam potrzebny klasyczny rollover, możemy go stworzyć w mgnieniu oka.

Jedyne różnice pomiędzy behawiorami Simple Rollover i Swap Image to interfejs i licz­ba opcji. Dla obu behawiorów Fireworks generuje kod w języku JavaScript.

Aby zastosować behawior Simple Rollover:

454. Zaznacz plaster, który znajduje się na warstwie internetowej (Web Layer) dokumentu.

455. Z rozwijanego menu Add Action palety Behaviors wybierz pozycję Simple Rollover.

Aby przetestować działanie rollovera, kliknij zakładkę Preview w oknie dokumentu i umieść kursor nad przyciskiem. Wciskając przycisk F12, możesz także sprawdzić dzia­ła­nie rollovera w głównej przeglądarce internetowej.

Dla behawiora Simple Rollover nie trzeba definiować żadnych opcji. Gdy klikniesz dwu­krotnie behawior znajdujący się w liście palety Behaviors, Fireworks wyświetli je­dy­nie okno z informacjami na temat jego działania (rysunek 21.4).

Rysunek 21.4. „Okno dialogowe” Simple Rollover zawiera jedynie informacje o działaniu behawiora, nie oferując żadnych opcji. Na tym właśnie polega prostota tego behawiora

Oczywiście - jak w przypadku każdego innego behawiora, z listy Event, która znajduje się w palecie Behaviors, możesz wybrać inne zdarzenie uruchamiające akcje, na przy­kład onClick lub onLoad.

	Jeżeli będziesz chciał wykorzystać rollover jako łącze, najpierw musisz przy­dzielić do niego URL. Więcej informacji o dodawaniu łączy do obiek­tów internetowych znajdziesz w rozdziale 20.

Eksportowanie XE "rollovery:eksportowanie" rolloverów

Z Fireworks możesz oczywiście eksportować obrazki. Podczas tworzenia rolloverów, w pli­ku HTML eksportowany jest kod JavaScript, który steruje działaniem behawiorów przy­dzielonych do obrazków. JavaScript jest zgodny z Netscape Navigatorem w wersji 3 i późniejszych oraz Microsoft Internet Explorer w wersji od 4 w górę. Rollovery mogą być także wyświetlane w Internet Explorerze 3 dla MacOS, ale w tej samej przeglądarce w Windows już nie będą widoczne, choć przydzielone do nich hiperłącza wciąż są ak­tyw­ne.

Firma Macromedia wciąż poprawiała zgodność eks­portowanego z Fireworks kodu JavaScript. W pierwszej wersji programu mógł być ge­ne­rowany tylko jeden typ kodu dla rolloverów. Działał on oczywiście w prze­glą­dar­kach, ale trzeba go było ręcznie modyfikować po otwarciu w wizualnych edytorach. W Fire­works 4 możesz wybrać styl kodu najlepiej pasujący do Twojego środowiska ro­bo­czego lub nawet tworzyć własne szablony, aby dokładnie dopasować ustawienia.

Przed wyeksportowaniem pierwszego rollovera warto się na chwilę zatrzymać w oknie dialogowym HTML Setup, przynajmniej po to, aby wybrać styl HTML najbardziej odpowiedni dla naszego środowiska. W większości przypadków wybór stylu jest narzucany przez edytor używany do two­rzenia stron WWW, w którym będziesz chciał umieścić rollover. Oto stan­dar­do­we style kodu HTML oferowane przez Fireworks:

• Dreamweaver. Kod dopasowany do Dreamweavera. Kod rollovera wyeksportowany z użyciem stylu Dream­we­aver jest po otwarciu w Dreamweaverze rozpoznawany jako źród­ło­wy behawior Dreamweavera.

• GoLive. Kod dostosowany do umieszczenia w programie GoLive firmy Ado­be, zawiera specjalne znaczniki, które ułatwiają jego edycję w GoLive.

• FrontPage. FrontPage do tworzenia elementów internetowych używa serii tzw. webbotów, fragmentów kodu rozpoznawanych jedynie przez program Front­Page. Fireworks generuje cały kod wymagany przez mapę obrazka, która mo­że być następnie poprawnie wyświetlana po otwarciu dokumentu we Front­Page'u.

• Generic (Ogólny). Najbardziej podstawowy kod, przydatny przy ręcznym pro­gra­mowaniu stron WWW oraz w większości narzędzi autorskich, pracujących ze standardowym kodem HTML. Jeżeli nie wiesz jaki styl HTML wybrać, wybierz właśnie ten.

W oknie dialogowym HTML Setup można również zmienić ustawienie rozszerzenia plików HTML z niestandardowego .htm na standardowe .html. Można wybrać również, czy Fireworks ma umieszczać swoje własne komentarze, oraz zamienić nazwy eksportowanych plików na pisane małymi literami, dla pełniejszej zgodności z różnymi typami przeglądarek. Użytkownicy MacOS mogą wybrać kod Creator, jaki powinien mieć eksportowany plik HTML, aby mógł być otwierany w edytorze HTML po dwukrotnym jego kliknięciu.

	Okno dialogowe HTML Setup zostało opisane w rozdziale 3.

Umieszczenie eksportowanych z Fireworks rolloverów na stronach WWW jest pro­ce­sem składającym się z trzech etapów:

• Etap 1: Utworzenie i przetestowanie rolloveru w Fireworks.

• Etap 2: Wyeksportowanie obrazka i kodu z Fireworks. Kod można wyeksportować jako plik HTML lub do schowka sys­temowego.

• Etap 3: Umieszczenie kodu na stronie WWW z wykorzystaniem dowolnego edy­tora (może być to nawet prosty edytor tekstowy, na przykład Notepad w Win­dows lub SimpleText w MacOS). Albo otwórz plik HTML w edytorze, albo — jeżeli kod skopiowałeś do schowka, wklej go do edytora.

Eksportowanie XE "rollovery:eksportowanie kodu" kodu z Fireworks

Aby wyeksportować z Fireworks rollover i jego kod:

456. Zdefiniuj ustawienia eksportu grafiki w palecie Optimize.

457. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export (rysunek 21.5).

Rysunek 21.5. W oknie dialogowym Export, z listy Save as type (Save As) możesz wybrać inny styl niż HTML and Images

504. Zdefiniuj ścieżkę dostępu i wpisz nazwę eksportowanego pliku.

505. Z listy Save as type (Save As) wybierz HTML and Images, aby eksportować HTML, lub wybierz Dreamweaver Library (.lbi), aby eksportować HTML jako bibliotekę Dreamweavera.

Jeśli wybierzesz opcję Dreamweaver Library, zostanie otwarte okno dia­lo­go­we Locate Site Library Directory, w którym będziesz mógł odszukać katalog z bi­bliotekami swojej witryny.

506. Z listy opcji HTML wybierz HTML File lub Copy to Clipboard.

507. Z rozwijanej listy Slices wybierz jedną z poniższych opcji:

• None (Brak). Wyłącza zupełnie plastrowanie.

• Export Slices (Eksportuj plastry). Obrazek zostanie pocięty na plastry zgodnie z rozmieszczeniem plastrów.

	Export Slices jest prawdopodobnie najczęściej wykorzystywaną opcją plas­tro­wa­nia.

• Slice Along Guides (Plastruj wzdłuż prowadnic). Dzieli obrazek wzdłuż prowadnic.

508. Zaznacz pole Selected Slices Only, aby eksportować tylko wybrane plastry.

509. Zaznacz Current Frame, aby eksportować tylko obrazki z bieżącej klatki.

510. Zaznacz Include Areas without Slices, aby eksportować obrazki bez określonych plastrów.

511. Aby zapisać pliki w innym katalogu, zaznacz pole Put Images in Subfolder, kliknij przycisk Browse i wybierz katalog dla obrazków.

512. Aby zmodyfikować dowolne z wcześniej ustalonych ustawień plastrów, kliknij przy­­cisk Options, aby ponownie otworzyć okno dialogowe HTML Setup i do­­­stosuj odpowiednie ustawienia

	Przegląd możliwych ustawień plastrów znajdziesz w rozdziale 20.

513. Kliknij przycisk Save, aby zakończyć eksportowanie rollovera.

Wstawianie kodu rollovera na stronę WWW XE "rollovery:wstawianie kodu rollovera na stronę WWW"

Po wybraniu określonego stylu kodu HTML, Fireworks automatycznie wygeneruje zde­fi­niowany kod jako plik HTML lub do schowka systemowego. Jeśli wybierzesz opcję ko­piowania kodu do schowka, otwórz docelowy plik HTML w swoim edytorze i wklej w odpowiednie miejsce kod znajdujący się w schowku. Jeżeli wyeksportujesz kod do pli­ku, otwórz ten plik i plik docelowy w swoim edytorze, a następnie kopiuj i wklejaj po­między nimi niezbędne wiersze kodu.

Proces umieszczania kodu rollovera na stronie WWW jest podobny do wstawiania kodu dla map obrazków lub plastrów. Istnieje tylko jedna istotna różnica: kod generowany dla rolloverów (i wszystkich innych behawiorów) składa się z dwóch części:

• Część kodu definiująca zdarzenie - w której znajduje się znacznik <img> i ele­men­ty uruchamiające zdarzenie - przechowywana jest w części <body> strony WWW.

• Część kodu definiująca akcje (zawierająca wszystkie funkcje JavaScriptu) jest prze­chowywana w części <head>.

Aby rollover mógł poprawnie funkcjonować, na stronie WWW musisz umieścić obie częś­ci kodu.

Proces umieszczania kodu rollovera wygenerowanego z wykorzystaniem stylów Ge­ne­ric, Dreamweaver i GoLive jest podobny. Wytnij lub skopiuj kod znaj­dujący się w częściach <body> i <head> dokumentu wygenerowanego przez Fire­works, a następnie wklej go na istniejącą stronę WWW. Kod generowany dla rollovera z wykorzystaniem stylu FrontPage nie jest podzielony na części <body> i <head>, więc możesz skopiować i wkleić do docelowego dokumentu całą część kodu. Po wy­bra­niu opcji Dreamweaver Library, proces umieszczania wygenerowanego kodu HTML na stronie WWW jest nawet jeszcze łatwiejszy. Kod możesz wstawić na stronę z wy­korzystaniem kategorii Library palety Assets tak, jakbyś umieszczał na niej każdy inny element bi­blio­teki.

Aby wstawić na stronę WWW kod HTML wygenerowany po wybraniu stylu Generic, Dream­weaver lub FrontPage:

458. Otwórz w swoim edytorze źródłowy plik HTML wygenerowany przez Fireworks.

459. Zaznacz i skopiuj do schowka część <body> rozpoczynającą się od wiersza

<!---------- BEGIN COPYING THE HTML HERE ---------->

i kończącą się wierszem

<!---------- STOP COPYING THE HTML HERE ---------->

	Jeżeli do tworzenia stron WWW używasz Dreamweavera, nie musisz ot­wierać okna HTML Source lub zewnętrznego edytora, aby skopiować kod. Upewnij się jedynie, że włączona jest opcja ViewInvisible Ele­ments i skopiuj ikony reprezentujące kod.

514. Otwórz w edytorze tekstowym lub HTML docelową stronę WWW.

515. W części <body> docelowego dokumentu wklej kod odpowiedzialny za wy­świe­tlanie obrazka w odpowiednim miejscu.

Jeżeli kod był generowany z wybranym stylem FrontPage, proces umie­szcza­nia go na stronie WWW został właśnie ukończony i możesz pominąć pozostałe ope­racje i zająć się testowaniem swojego rollovera w przeglądarce.

516. Powróć do źródłowego dokumentu HTML i odszukaj w nim część <head>.

517. Zaznacz i skopiuj do schowka część <head> rozpoczynającą się od wiersza

<!---------- BEGIN COPYING THE JavaScript SECTION HERE ---------->

i kończącą się wierszem

<!---------- STOP COPYING THE JavaScript SECTION HERE ---------->

518. Przejdź do docelowego dokumentu HTML.

519. Wklej kod do części <head> Twojej strony WWW.

	Umieszczenie kodu JavaScript ze znacznikiem <title> i wszystkimi zna­cznikami <meta> umożliwi lepszą obsługę Twojej strony WWW przez programy sieciowe, dodające strony do wyszukiwarek.

Po umieszczeniu na stronie obu części kodu rollovera, możesz go obejrzeć w prze­glą­dar­ce internetowej.

Wstępne ładowanie obrazków rolloverów Przy pierwszym otwarciu dokumentu HTML zawierającego rollovery, wyświetlane są ich stany Up wraz z pozostałymi obrazkami znajdu­ją­cymi się na stronie. Idealną sytuacją byłaby taka, w której po naje­cha­niu myszą na rollover, jego pozostałe stany byłyby natychmiast dos­tęp­ne w pamięci podręcznej przeglądarki, a nie powoli ładowane z Inter­ne­tu. Natychmiastowe reakcje na działania użytkownika pozwala wzmo­­c­nić wrażenie modyfikacji obiektów, na przykład wciskania przycisku. Nie wygląda to wówczas jedynie jak zamiana jednego obrazka innym. Aby wszystkie stany rollovera zostały załadowane do pamięci pod­ręcz­nej przeglądarki, Fireworks dołącza dla nich w generowanym kodzie HTML funkcje JavaScript, które wstępnie ładują pliki obrazków dla sta­nów Over, Over Down i Down przycisku.

Biblioteka Dreamweavera umożliwia umieszczanie pojedynczego elementu na wielu róż­nych stronach WWW. Aby później zmodyfikować wszystkie elementy równocześnie, wystarczy zmie­nić jedną pozycję biblioteki. Jedynym warunkiem jest to, że rollover musi być przy eksporcie za­pi­sany w specjalnym katalogu o nazwie Library w katalogu witryny. Jeśli dotychczas nie tworzyłeś jeszcze żadnych elementów biblioteki swojej witryny, będziesz musiał utwo­rzyć katalog Library w głównym jej katalogu.

Aby umieścić na stronie obrazki i kod rollovera wygenerowanego jako element bi­blio­te­ki Dreamweavera:

460. W Dreamweaverze wybierz z menu polecenie WindowAssets.

Dreamweaver wyświetli paletę Assets.

461. W palecie Assets wybierz kategorię Library.

W palecie Assets pojawią się bieżące pozycje biblioteki.

520. Umieść kursor w miejscu, w którym chcesz wstawić rollover.

521. Z listy palety Assets wybierz wyeksportowaną pozycję biblioteki.

W palecie Assets pojawi się podgląd pozycji biblioteki.

522. Kliknij przycisk Insert albo przeciągnij element biblioteki z panelu podglądu lub z listy na tworzoną stronę WWW.

Obrazki i cały niezbędny kod rollovera zostaną wstawione na tworzoną w Dream­weaverze stronę WWW.

Behawior Nav Bar XE "behawiory:Nav Bar"

Pasek nawigacyjny XE "pasek nawigacyjny" (Nav Bar) jest zestawem rolloverów działających jako przyciski op­cji. Wszys­tkie przyciski są ze sobą połączone, więc kliknięcie jednego z nich i usta­wie­nie go na stan Down powoduje przestawienie wszystkich pozostałych przycisków na stan Up. Paski nawigacyjne są tworzone przez Fireworks za pomocą cookies. Są to małe pli­ki zapisywane przez przeglądarkę na komputerze osoby odwiedzającej stronę. Naj­częś­ciej są one wykorzystywane do zapisywania wyborów dokonywanych przez użyt­kow­nika na określonych stronach WWW, na przykład wózka z zakupami w sklepach inter­netowych. Fireworks używa tej technologii do sprawdzania, który z przycisków pra­cujących w jednej grupie został wybrany przez użytkownika.

Paski nawigacyjne i wspomniane pliki mogą się wydawać skomplikowaną technologią, ale tak naprawdę już ich używałeś, jeśli korzystałeś wcześniej z trzy- lub cztero­klat­ko­we­go behawiora Simple Rollover. Fireworks dla każdego behawiora Simple Rollover, któ­ry posiada stan Down i (lub) Over Down, automatycznie tworzy pasek nawigacyjny o naz­wie FwNavBar. Nie musisz robić nic więcej w celu uzyskania efektu przełączania. Je­żeli jednak do utworzenia rollovera użyjesz behawiora Swap Image lub chcesz korzystać z behawiora Simple Rol­lo­ver posiadającego tylko stany Up i Over, do stworzenia paska nawigacyjnego będzie Ci po­trzebny behawior Nav Bar.

Tworzenia paska nawigacyjnego

Aby utworzyć pasek nawigacyjny:

462. W odpowiednich klatkach (od 1 do 4) utwórz swoje rollovery posiadające odpowiednie sta­ny: Up, Over, Down i Over Down.

463. W pierwszej klatce narysuj plaster nad każdym rolloverem.

464. Zaznacz wszystkie plastry po kolei i przekształć je na rollovery poprzez wybranie Simple Rollover z rozwijanej listy Add Action w palecie Behaviors.

Rollovery są już przygotowane do wykorzystania w pasku nawigacyjnym.

523. Zaznacz wszystkie plastry, która mają zostać dołączone do paska nawi­ga­cyjnego.

524. Wybierz behawior Set Nav Bar Image z listy Add Action w palecie Behaviors.

Fireworks wyświetli okno dialogowe Set Nav Bar Image (rysunek 21.6).

Rysunek 21.6. Behawior Nav Bar ustanawia połączenia pomiędzy wszystkimi rolloverami, dlatego też w danym momencie może być wybrany tylko jeden z przycisków

525. Jeżeli dodałeś do rolloverów stan Over Down, zaznacz opcję Include Over While Down State.

Kliknij przycisk OK.

526. Jeżeli chcesz, aby jeden z przycisków był zawsze domyślnie wyświetlany w sta­nie Down, usuń zaznaczenia wszystkich plastrów, a następnie zaznacz tyl­ko jeden z nich. Kliknij dwukrotnie behawior Set Nav Bar Image w palecie Beha­viors i zaznacz opcję Show Down Image Upon Load.

Kliknij przycisk OK.

Jeżeli wyświetlisz pasek nawigacyjny w zakładce Preview okna dokumentu lub w prze­glą­darce internetowej (rysunek 21.7), zobaczysz, że przyciski będę zmieniane w zależ­noś­ci od tego, który z nich wybierze użytkownik.

Rysunek 21.7. Drugi przycisk paska nawigacyjnego posiada stan Down. W danym momencie może być wciśnięty tylko jeden przycisk w pasku nawigacyjnym, więc pasek działa jak grupa przycisków opcji („przycisków radiowych”)
		Termin „przyciski radiowe” pochodzi od przycisków odbiorników radio­wych pracujących na zakresach AM/FM. Jednocześnie może być od­bie­rana tylko jedna stacja, więc wciśnięty może być tylko jeden przy­cisk. Wciśnięcie jednego z przycisków powoduje „wyskoczenie” wszystkich po­zostałych.

Tworzenie przycisków w oknie Button Editor

Okno Button Editor XE "Button Editor" umożliwia tworzenie przycisków lub budowanie symboli przy­cis­ków zawierających dwu-, trzy- lub cztero-stanowe rollovery. Specjalne okno z zakład­ka­mi (podobne do okna dokumentu) przeprowadzi Cię krok po kroku przez cały proces two­rzenia przycisku.

Aby utworzyć rollover w oknie Button Editor:

465. Wybierz z menu polecenie InsertNew Button.

Fireworks otworzy okno edytora przycisków (rysunek 21.8).

527. W zakładce Up okna Button Editor utwórz stan Up przycisku.

528. Kliknij zakładkę Over i utwórz stan przycisku znajdującego się pod kursorem. Aby stan Over utworzyć na podstawie stanu Up przycisku, kliknij przycisk Co­py Up Graphic (Kopiuj grafikę stanu Up). Fireworks skopiuje do zakładki Over stan utworzony w zakładce Up.

Rysunek 21.8. Okno Button Editor może wyświetlać w swoich pięciu obszarach roboczych cztery stany przycisków (cztery klatki Fireworks) oraz plaster
		W dowolnym momencie możesz zaznaczyć opcję Onion Skinning, aby w każdej zakładce okna Button Editor były wyświetlane wszys­tkie stany przycisku jednocześnie. Ułatwia to poprawne roz­mie­szcze­nie poszczególnych stanów. Możesz także korzystać z kontrolek wido­ku umożliwiających powiększanie lub zmniejszanie podglądu oraz przełą­czanie się pomiędzy trybami Full (Dokładny) i Draft (Upro­szczo­ny). Kliknij znajdujący się w prawym górnym rogu okna Button Editor przy­cisk Play, aby odtworzyć kolejno wszystkie stany przycisku.

529. Jeżeli chcesz dodać do przycisku stan Down, kliknij zakładkę Down i utwórz obra­zek dla wciśniętego przycisku. Ponownie masz możliwość skopiowania i zmo­dyfikowania grafiki poprzedniego stanu przycisku. Kliknij w tym celu przy­cisk Copy Over Graphic.

530. Jeżeli Twój przycisk będzie eksportowany jako pasek nawigacyjny, zaznacz op­cję Show Down State Upon Load, aby po załadowaniu strony wyświetlony zo­stał stan Down przycisku.

531. Aby dodać do przycisku stan Over While Down, kliknij zakładkę Down edytora przy­cisków i utwórz nowy stan od nowa lub skopiuj grafikę poprzedniego sta­nu (kliknij przycisk Copy Down Graphic) i dokonaj modyfikacji.

532. Kliknij zakładkę Active Area. Fireworks automatycznie utworzy w tej zakładce pla­ster obejmujący obszar przycisku, ale jeśli chcesz, możesz zmodyfikować je­go rozmiary.

	Plaster tworzony w zakładce Active Area jest podobny do obszaru Hit w przyciskach budowanych w programie Flash.

533. Aby Fireworks poprowadził Cię przez proces przydzielania łącza do przycisku, klik­nij przycisk Link Wizard (Kreator łączy) i wprowadź odpowiednie usta­wie­nia w poszczególnych zakładkach okna dialogowego Link Wizard.

534. Zamknij okno Button Editor.

Nowy symbol przycisku zostanie umieszczony w palecie Library, zaś jego kopia
- w oknie dokumentu (rysunek 21.9). Kliknij zakładkę Preview okna dokumentu, aby spraw­dzić działanie nowego rollovera.

Rysunek 21.9. W oknie Button Editor tworzone są nowe symbole przycisków, które są następnie umieszczane w bibliotece. W oknie dokumentu umieszczana jest kopia symbolu
		Więcej informacji o symbolach i bibliotekach znajdziesz w rozdziale 17.

Zaawansowane techniki tworzenia rolloverów

Dość często stosuję behawior Simple Rollover, który jest szybki i łatwy w użyciu. Cza­sa­mi jednak potrzebne jest coś więcej niż tylko prosty rollover. Standardowe rol­lovery moż­na udoskonalać za pomocą zaawansowanych technik i tworzyć w ten sposób różne inte­resujące efekty oraz bardziej przydatne dla użytkowników elementy nawi­gacyjne. Naj­ważniejszym elementem wykorzystywanym w tych technikach jest beha­wior Swap Image.

Tworzenie rozdzielnych rolloverów

Rozdzielne rollovery XE "rollovery:rozdzielne rollovery" to takie, w których użytkownik umieszcza kursor nad jedną częś­cią obrazka (obszarem zdarzeń), zaś druga część (obszar ce­lu) wykonuje funkcję rollovera. Typowym zastosowaniem rozdzielnych rolloverów jest wyświetlanie w jednym, wspól­nym obszarze opisów działania przycisków paska nawigacyjnego. Aby utworzyć roz­dzielny rollover, trzeba za pomocą plastrów utworzyć obszar zdarzeń i obszar celu, chociaż rollovery te mogą być uruchamiane także za pomocą obszarów aktywnych.

Aby utworzyć rozdzielny rollover:

466. Utwórz plaster nad obszarem zdarzeń (częścią obrazka, w której musi znaleźć się kursor, aby rollover został uruchomiony).

467. Utwórz plaster nad obszarem celu (częścią obrazka, która będzie mody­fi­ko­wa­na).

468. Zaznacz plaster obszaru zdarzeń i z rozwijanej listy Add Action, która znajduje się w palecie Behaviors, wybierz pozycję Swap Image.

Fireworks otworzy okno dialogowe Swap Image (rysunek 21.10).

Rysunek 21.10. W oknie dialogowym Swap Image znajdziesz opcje umożliwiające przełączanie dowolnego plastra dokumentu w odpowiedzi na wybranie innego plastra przez użytkownika

535. Wybierz plaster docelowego obszaru za pomocą rozwijanej listy Target z naz­wa­mi plastrów lub podglądu Slice, który znajduje się po prawej stronie listy Tar­get. Obojętnie, którym elementem się posłużysz do wybrania plastra, drugi tak­że zostanie natychmiast uaktualniony.

536. Wybierz obrazek przełączania, zaznaczając numer odpowiedniej klat­ki z rozwijanej listy Frames. Jako przełączany obrazek zostanie wykorzystany ob­szar, który znajduje się pod plastrem celu.

537. Zaznacz opcję Restore Image onMouseOut, aby obrazek został z powrotem prze­łączony, gdy użytkownik przesunie kursor poza obszar zdarzeń. Kliknij przy­cisk OK.

538. Powtórz powyższe operacje, aż przydzielisz behawior Swap Image do wszystkich plastrów.

Aby jednocześnie przełączać więcej niż jeden plaster, powtórz powyższe kroki i za­sto­suj behawiory Swap Image do tego samego obiektu w warstwie Web Layer. Wyko­rzys­tu­jąc tę technikę można utworzyć przycisk nawigacyjny, który sam może być rolloverem, a oprócz tego wyświetlać inne rozdzielne rollovery.

Tworzenie zewnętrznych rolloverów

Jako stany Over rolloverów, zamiast obiektów, które znajdują się w innych klatkach, w Fire­works można używać również zewnętrznych obrazków GIF (zwykłych lub ani­mo­wanych), JPEG i PNG. Gdy rollover jest wyświetlany w przeglądarce, jako jego źród­ło - zamiast obszaru jednej z klatek znajdujących się w dokumencie - używany jest plik zew­nętrzny. Zewnętrzne rollovery umożliwiają także dołączanie animowanych GIF-ów do istniejących obrazków.

Z powodu ograniczeń przeglądarek internetowych nie można przełą­czać obrazków zapisanych w różnych formatach. Jeżeli eksportujesz plas­ter w formacie GIF powinieneś użyć zewnętrznego GIF-a lub ani­mo­wanego GIF-a jako stanu Over rollovera. Podobnie, gdy eks­por­tu­jesz plaster w formacie JPEG lub PNG, jako stanu Over rollovera powi­nie­neś użyć obrazka zapisanego odpowiednio w formacie JPEG lub PNG.

Pamiętaj, że zmieniane jest jedynie źródło obrazka (atrybut src znacznika <img>), więc przeglądarka przeskaluje zewnętrzny obrazek, aby dopasować go do wymiarów po­czątkowego plastra.

Jeśli chciałbyś utworzyć plaster o takich samych wymiarach, jakie ma zew­nętrzny obrazek i przełączać plaster obrazka na zewnętrzny plik, za­znacz plaster, wybierz z menu polecenie ModifyTrans­formNu­me­ric Tran­sform lub użyj skrótu klawiaturowego Ctrl+Shift+T (Command+Shift+T), wybierz po­zy­cję Resize z rozwijanej listy, która znajduje się w oknie dialo­go­wym Nu­meric Transform, a następnie wprowadź odpowiednie wartości wy­so­kości i szerokości obrazka.

Aby utworzyć zewnętrzny rollover:

469. Zaznacz plaster, który ma uruchamiać zewnętrzny rollover.

539. Wybierz pozycję Swap Image z rozwijanej listy Add Action w palecie Behaviors.

Fireworks wyświetli okno dialogowe Swap Image.

540. Zaznacz plaster, na który będzie przełączany zewnętrzny obrazek.

541. Kliknij ikonę katalogu, aby otworzyć standardowe okno dialogowe Open i od­szu­kać zewnętrzny plik.

542. Zaznacz opcję Restore Image onMouseOut, aby przywrócić oryginalny stan obraz­ka, gdy użytkownik przesunie kursor poza obszar zdarzeń.

543. Kliknij przycisk OK.

Rollovery w obszarach aktywnych XE "rollovery:rollovery w obszarach aktywnych"

Rollovery w obszarach aktywnych umożliwiają wykorzystanie w rolloverach obszarów o nieregularnych kształtach. Wszystkie obrazki są prostokątami, więc przełączane mogą być jedynie prostokątne obszary grafiki. Jednak obrazki używane do uruchamiania rol­lo­verów nie muszą być prostokątne. Można w tym celu wykorzystać obszar aktywny o do­wolnym kształcie. Kluczem do tworzenia rolloverów w obszarach aktywnych jest zdol­ność Fireworks do przełączania całych plastrów znajdujących się w różnych klatkach.

Rysunek 21.11 przedstawia obrazek z plastrami o kształcie dalekim od prostokąta. Aby ca­ły projekt mógł działać, wszystkie obszary nie tylko muszą być niezależnie wyróż­nia­ne przez użytkownika, który zaznaczy je kursorem, ale również powinny zawierać łącza do różnych stron znajdujących się w witrynie WWW. Rollovery w obszarach ak­tyw­nych przełączają całe obrazki, więc każde wyróżnienie może mieć dowolny kształt.

Rysunek 21.11. System nawigacyjny używający obszarów aktywnych do uruchamiania rolloverów w całym obrazku. Można utworzyć w ten sposób rollovery o nieregularnych kształtach

Istnieje jednak pewne ograniczenie tej techniki: każdy z obszarów aktywnych przełącza ca­ły obrazek, więc obszary aktywne nie mogą nakładać się na siebie, gdyż zostanie utra­cone wrażenie odrębności wyróżnianych obszarów. Dobrze jest także zachować jak naj­mniejsze rozmiary całego obrazka, gdyż każdy dodany obszar aktywny wymaga osobnej kopii całego obrazka i pobieranie dużego obrazka na komputer użytkownika zabierałoby zbyt dużo czasu.

Aby utworzyć rollover w obszarze aktywnym:

470. Utwórz obszary aktywne za pomocą narzędzia Rectangle, Circle lub Polygon Hotspot.

471. Utwórz jeden plaster przykrywający cały obrazek.

472. Zaznacz plaster i wybierz z menu polecenie ModifyArrangeSend to Back, aby prze­sunąć go pod obszary aktywne. Będziesz mógł później łatwo wybierać poszczególne obszary aktywne i przydzielać do nich behawiory.

473. Zduplikuj bieżącą klatkę, aby otrzymać tyle klatek, ile posiadasz aktywnych ob­szarów. Jeżeli masz ich dziesięć, utwórz dziesięć klatek.

474. W każdej klatce tak zmodyfikuj aktywny obszar, aby był wyróżniany w okre­ślo­ny sposób. Obszary te będą stanami Over rollovera. Pozostałe obszary każ­dej klatki będą posiadały swoje stany domyślne.

Ukrycie warstwy internetowej (i obszarów aktywnych) ułatwi Ci modyfi­ko­wanie aktywnych obszarów. Warstwę Web Layer możesz ukryć, kli­ka­jąc ikonę oka znajdującą się obok nazwy warstwy w palecie Layers.

544. Zaznacz obszar aktywny i wpisz wywoływany nim adres URL w palecie Object.

545. Utrzymując zaznaczenie obszaru aktywnego, otwórz paletę Behaviors i wy­bierz z niej behawior Swap Image. W oknie dialogowym Swap Image wykonaj na­stępujące czynności:

• Zaznacz jeden plaster znajdujący się w liście plastrów.

• W części Show the Swapped Image from wpisz w polu Frame No. numer od­po­wiadający klatce, w której znajduje się wyróżniony obszar aktywny. Jeżeli wyróżniony obszar aktywny znajduje się w klatce Frame 3, w polu Fra­me No. ustaw klatkę Frame 3.

546. Powtórz polecenie szóste i siódme dla każdego obszaru aktywnego, dopóki każ­dy z nich nie będzie miał przydzielonego adresu URL i behawiora.

547. Wyeksportuj obrazek wraz z kodem HTML. Z rozwijanej listy Slicing okna dia­logowego Export wybierz opcję Export Slices.

Fireworks wyeksportuje dokument HTML oraz pliki graficzne dla wszystkich klatek gra­fiki. Przy wyświetlaniu w przeglądarce internetowej powstanie wrażenie pojedyn­cze­go obrazka z rolloverami o nieregularnych kształtach.

Wyświetlanie komunikatów
w pasku stanu przeglądarki

Komunikaty wyświetlane w pasku stanu przeglądarki są sposobem na ułatwienie użyt­kow­nikowi nawigacji w Internecie. Komunikaty te są często wykorzystywane wraz z ob­szarami aktywnymi i mapami obrazków. Ich wielkość jest ograniczona szerokością ob­szaru paska stanu przeglądarki użytkownika, który w przypadku Internet Explorera 4 (ale nie 5) jest bardzo mały. Odradzam stosowanie długich komunikatów nawet w innych prze­glą­dar­kach, ponieważ każde z okien przeglądarki może mieć różne wymiary.

Aby dodać do dokumentu komunikat wyświetlany w pasku stanu przeglądarki:

475. Zaznacz plaster lub obszar aktywny, a następnie z menu Add Action w palecie Be­ha­viors wybierz behawior Set Text of Status Bar.

Fireworks wyświetli okno dialogowe Set Text of Status Bar (rysunek 21.12).

548. W polu tekstowym Message wpisz komunikat, który będzie wyświetlany w pas­ku stanu, gdy użytkownik uaktywni plaster. Kliknij przycisk OK.

549. Jeśli chcesz, zamiast onMouseOver możesz wybrać inne zdarzenie włączające ko­munikat, na przykład onMouseOut, onClick lub onLoad.

Rysunek 21.12. Okno dialogowe Set Text of Status Bar umożliwia przydzielenie do plastra lub obszaru aktywnego komunikatu wyświetlanego w pasku stanu przeglądarki, który ma za zadanie ułatwić użytkownikowi nawigację wewnątrz witryny WWW

Pop-Up Menus (Listy rozwijane)

Witryny WWW stają się coraz bardziej złożone i prezentują setki, a nawet tysiące informacji. Tradycyjny pasek przycisków internetowych, zawierający kilka opcji może pękać w szwach od ogromnej ilości tematów i podtematów zawartych na tych witrynach. Behawior Set Pop-Up Menu pomaga w szybkim tworzeniu wydajnych hierarchicznych systemów wyszukiwania, bardzo czytelnych dla użytkowników (rysunek 21.13)

Rysunek 21.13. W Fireworks łatwo można tworzyć listy rozwijane, które z kolei ułatwiają wyszukiwanie w przeglądarce
		Dzięki behawiorowi Set Pop-Up Menu, kilka prostych kroków w Fireworks zastępuje tworzenie kodu, uprzednio niezbędne do umieszczenia list rozwijanych na stronie WWW.

Aby dodać listy rozwijane do dokumentu Fireworks:

1. Zaznacz plaster lub obszar aktywny i z listy Add Action w palecie Behaviors wybierz Set Pop-Up Menu lub wybierz polecenie InsertPop-Up Menu.

Fireworks otworzy okno dialogowe Set Pop-Up Menu (rysunek 12.14).

Rysunek 21.14. Okno dialogowe Set Pop-Up Menu umożliwia łatwe określenie charakteru tworzonej listy

Add Menu button — Przycisk Add Menu (Dodaj listę)

Delete Menu button — Przycisk Delete Menu (Usuń listę)

Promote Menu button — Przycisk Outdent Menu (Poziom wyżej)

Create Menu button — Przycisk Indent Menu (Poziom niżej)

Menu — Lista

Submenu — Podlista

2. Aby utworzyć nową pozycję listy, w polu tekstowym Text wpisz nazwę, w polu Link wpisz adres URL, a w polu Target (Cel) URL docelowy i kliknij przycisk Add Menu lub naciśnij klawisz Enter (Return).

3. Aby zmienić właściwości pozycji listy, zaznacz tę pozycję i zmień zawartość pól Text, Link lub Target i kliknij przycisk Change (Zmień). Pole Link zawiera również listę rozwijaną, udostępniającą wszystkie adresy URL dokumentu.

4. Aby przekształcić listę w podlistę, zaznacz pozycję listy i kliknij przycisk Indent Menu. Aby utworzyć listę z podlisty, kliknij przycisk Outdent Menu.

5. Aby przenieść pozycję w górę lub w dół listy, zaznacz ją i przeciągnij w żądaną stronę.

6. Po zakończeniu ustawiania opcji kliknij przycisk Next.

	Po kliknięciu przycisku Next, aby przywrócić okno dialogowe Set Pop-Up Menu do poprzedniego stanu, wystarczy kliknąć przycisk Back.

Fireworks wyświetli drugi stan okna dialogowego Set Pop-Up Menu.

7. Określ styl listy — albo HTML (rysunek 21.15), albo Image (rysunek 21.16)

Listy HTML składają się z tekstu HTML i tabel po eksporcie, Listy Image (Obrazek) korzystają z obrazków sformatowanych stylami Fireworks.

Rysunek 21.15. Opcje formatowania HTML zawierają kolory tekstu i komórek tabeli. Zawsze dostępny jest podgląd tworzonej listy rozwijanej

8. Określ czcionkę, rozmiar i styl — pogrubiony i (lub) kursywa dla tekstu w liście.

9. Wybierz kolor tekstu (Text) i komórki (Cell) dla stanu Up.

Tak właśnie będzie początkowo wyglądała lista.

10. Wybierz kolor tekstu (Text) i komórki (Cell) dla stanu Over.

Tak właśnie będzie wyglądała lista pod kursorem myszy.

	W trakcie dopasowywania ustawień, warto zwrócić uwagę na przedstawiany przez Fireworks podgląd tworzonej listy.

11. Jeżeli tworzysz listę rozwijaną Image (rysunek 21.16), wybierz styl stanu Up i styl stanu Over dla obrazków tworzących listę.

Rysunek 21.16. Opcje formatowania Image korzystają ze stylów Fireworks w celu uatrakcyjnienia monotonnych list

12. Po zakończeniu kliknij Finish.

Po dodaniu do dokumentu behawiora Pop-Up Menu, można zawsze modyfikować jego ustawienia — wystarczy kliknąć dwukrotnie jego nazwę w palecie Behaviors lub dwukrotnie kliknąć w dokumencie obrys listy rozwijanej.

	Nie ma możliwości oglądania list rozwijanych w środowisku roboczym. Naciśnij klawisz F12, aby zobaczyć w swojej głównej przeglądarce, jak działają listy rozwijane.

Style listy rozwijanej są przechowywane w katalogu Nav Menu, wewnątrz katalogu Configuration, znajdującego się w katalogu programu Fireworks. Są to te same style, które znamy z palety Styles, zatem dodanie własnych stylów do okna dialogowego Set Pop-Up Menu i udostępnienie ich dla listy rozwijanej jest tak proste jak eksportowanie stylów z palety Styles do katalogu Nav Menu.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS.

Aby dodać własne style do behawioru Set Pop-Up Menu:

1. Utwórz obiekt o wypełnieniu, obrysie i efektach takich, jakie ma mieć lista rozwijana.

2. Wybierz polecenie WindowStyles, aby wyświetlić paletę Styles.

3. Zaznacz obiekt i kliknij przycisk New Style (Nowy styl) w palecie Styles.

Własności obiektu zostaną zapisane jako nowy styl.

4. Zaznacz ten nowy styl w palecie Styles i wybierz pozycję Export Styles z listy rozwijanej palety Styles.

Fireworks wyświetli okno dialogowe Save.

5. Wyszukaj katalog programu Fireworks, w którym następnie wyszukaj katalog Configuration, a w nim katalog Nav Bar. Kliknij Save, aby wyeksportować wybrany wcześniej styl jako plik Fireworks .stl.

Nowo dodany styl będzie dostępny przy następnym korzystaniu z behawiora Set Pop-Up Menu.

Behawiory Drag-and-Drop („Przeciągnij i upuść”)

Behawiory Drag-and-drop umożliwiają szybkie tworzenie rolloverów przy użyciu techniki przeciągania i upuszczania. Zamiast zaznaczać plaster lub obszar aktywny i następnie działać w palecie Behaviors, można bezpośrednio działać na obiekcie internetowym uruchamiającym funkcję — obszarze, nad którym użytkownik przesuwa mysz, lub który klika, aby uruchomić behawior — i na obiekcie celu — tam, gdzie wykonywana jest funkcja. Połączenie tych dwóch obszarów przy użyciu techniki „przeciągnij i upuść” powoduje utworzenie rollovera.

	Behawiory Drag-and-Drop to nowa metoda pracy z behawiorami w Fireworks.

Po zaznaczeniu obszaru aktywnego lub plastra pojawia się przy nim uchwyt przeciągania (rysunek 21.17). Przeciągnij ten uchwyt z plastra lub obszaru roboczego (uruchamiającego rollover) do plastra celu, aby utworzyć rollover. Możesz utworzyć rollover prosty, przeciągając uchwyt przeciągania behawiora i upuszczając go w tym samym plastrze, lub utworzyć rollover rozdzielny, przeciągając uchwyt przeciągania behawiora i upuszczając go w innym plastrze.

Rysunek 21.17. Po zaznaczeniu obszaru aktywnego lub plastra pojawia się przy nim uchwyt przeciągania

Istotne jest, aby przed operacją przeciągania przygotować plastry i klatki. Fireworks sam nie doda klatek do dokumentu, tylko dlatego, że przydzielamy do plastra behawior rollover.

Tworzenie prostego rollovera za pomocą techniki „przeciągnij i upuść”

Aby utworzyć rollover prosty, w którym obszary — uruchamiający i celu, są w tym samym miejscu:

1. Upewnij się, że w swoim dokumencie utworzyłeś drugą klatkę, zawierającą obrazek, który ma pojawić się, gdy użytkownik przesunie kursor nad obszar uruchamiający.

2. Zaznacz plaster uruchamiający, zakrywający obszar obrazka, który będzie uruchamiał behawior.

3. Kliknij i przytrzymaj uchwyt przeciągania behawiora w środku plastra.

Kursor przyjmuje kształt pięści.

4. Przeciągnij lekko kursor i upuść go w tym samym plastrze.

Pojawi się niebieska linia przeciągania behawiora, biegnąca od środka do lewego górnego rogu obszaru aktywnego lub plastra (rysunek 21.18)

Rysunek 21.18. Podczas operacji przeciągania i upuszczania w tym samym obszarze aktywnym lub plastrze, pojawia się w nim linia przeciągania behawiora, biegnąca od środka do lewego górnego rogu

Fireworks wyświetli okno dialogowe Swap Image (Zmień obrazek) (rysunek 21.19).

Rysunek 21.19. Po operacji przeciągania i upuszczania pojawia się specjalne okno dialogowe Swap Image

5. Z listy rozwijanej Swap Image From wybierz klatkę, która ma zastąpić klatkę bieżącą.

6. Aby otworzyć całe okno dialogowe Swap Image, kliknij przycisk More Options (Więcej opcji).

	Pełne okno dialogowe Swap Image zostało już omówione w tym rozdziale.

7. Po zakończeniu kliknij OK.

Fireworks przydzieli behawior do plastra.

Tworzenie rolloverów rozdzielnych za pomocą techniki „przeciągnij i upuść”

Aby utworzyć rollover rozdzielny, w którym internetowe obiekty — uruchamiający i celu, znajdują się w różnych miejscach, połącz ze sobą te obiekty za pomocą linii przeciągania behawiora.

Aby utworzyć rollover rozdzielny:

1. Upewnij się, że w swoim dokumencie utworzyłeś drugą klatkę, zawierającą obrazek, który ma pojawić się, gdy użytkownik przesunie kursor nad obszar uruchamiający.

2. Upewnij się, że dysponujesz zarówno uruchamiającym, jak i docelowym obszarem roboczym lub plastrem.

3. Zaznacz obiekt internetowy nad obszarem uruchamiającym.

4. Kliknij i przytrzymaj uchwyt przeciągania behawiora w środku plastra lub obszaru aktywnego.

Kursor przyjmuje kształt pięści.

5. Przeciągnij kursor i upuść w plastrze celu.

Pojawi się niebieska linia przeciągania behawiora, biegnąca od środka internetowego obiektu uruchamiającego do lewego górnego rogu plastra celu (rysunek 21.20).

Rysunek 21.20. Po operacji przeciągania i upuszczania, niebieska linia przeciągania behawiora pokazuje związek między plastrem uruchamiającym i celu. Teraz kliknięcie przycisku spowoduje przełączenie większego plastra u dołu

Fireworks wyświetli okno dialogowe Swap Image.

6. Z listy Swap Image From wybierz klatkę, która będzie przełączana.

7. Aby otworzyć całe okno dialogowe Swap Image, kliknij przycisk More Options.

Fireworks przydzieli behawior do zaznaczonego obiektu internetowego.

Usuwanie behawiorów Drag-and-Drop

Aby usunąć behawior Drag-and-Drop, przydzielony do obszaru aktywnego lub plastra:

1. Zaznacz obszar aktywny lub plaster.

Istniejące dla obiektu internetowego związki behawiora są prezentowane w postaci niebieskiej linii.

2. Kliknij niebieską linię, którą chcesz usunąć.

Fireworks wyświetli okno dialogowe, w którym powierdzasz, że chcesz usunąć behawior.

3. Kliknij OK, aby usunąć behawior.

Podsumowanie

Fireworks umożliwia dodawanie do obrazków dynamicznych efektów pisanych w ję­zy­ku JavaScript. Wykorzystując behawiory Fireworks, nie musisz nawet znać JavaScriptu, aby stosować go w swoich dokumentach. Korzystając z behawiorów, powinieneś pa­miętać o następujących rzeczach:

• Centrum zarządzania behawiorami znajduje się w palecie Behaviors.

• Behawiory mogą być przydzielane tylko do obiektów z warstwy internetowej (ob­szarów aktywnych i plastrów) i nie można ich stosować ze zwykłymi obiek­ta­mi wektorowymi lub bitmapowymi normalnych warstw.

• Rollovery mogą być zwykłymi przyciskami lub rolloverami rozdzielnymi, w któ­rych modyfikowany jest obszar znajdujący się w innym miejscu niż ele­ment uruchamiający zdarzenie.

• Fireworks oferuje okno Button Editor ułatwiające proces tworzenia sym­boli przycisków.

• Działanie rolloverów można sprawdzać w zakładce Preview okna dokumentu.

• Za pomocą behawiora Set Text of Status Bar można wprowadzać komunikaty wy­świe­tlane w pasku stanu przeglądarki.

• Behawior Set Pop-Up Menu umożliwia tworzenie wydajnych i złożonych systemów wyszukiwania, przy minimalnym nakładzie czasu i wysiłku.

• Przy użyciu behawiorów Drag-and-Drop można łatwo i szybko tworzyć rollovery.

W następnym rozdziale przyjrzymy się integracji Fireworks z Dreamweaverem.




Rozdział 22.
Integracja z Dreamweaverem

W tym rozdziale:

• Konfigurowanie funkcji integracji Fireworks z Dreamweaverem.

• Optymalizacja grafiki z poziomu Dreamweavera.

• Modyfikowanie obrazków Dreamweavera w Fireworks.

• Behawiory działające w obu programach.

• Aktualizowanie elementów bibliotek Dreamweavera.

• Eksportowanie warstw CSS do Dreamweavera.

• Tworzenie internetowego albumu fotograficznego.

• Tworzenie poleceń hybrydowych.

Nie wszyscy projektanci mają przyjemność (lub nieprzyjemność) pracować jedynie z gra­fiką internetową. Większość artystów tworzy zarówno grafikę, jak i kompletne stro­ny WWW. Projektanci, którzy tworzą jedynie grafikę muszą z kolei blisko współ­pra­cować z ludźmi projektującymi całe strony WWW, aby ułatwić im umieszczanie na nich grafiki. Jakby na to nie patrzeć - Fireworks nie jest (i nigdy nie miał być) pro­duk­tem autonomicznym. Wszystkie grafiki utworzone w tym programie są przeznaczone do pu­­blikacji w Internecie.

Doskonałym partnerem Fireworks jest Dreamweaver XE "Dreamweaver" - program firmy Macromedia do two­rzenia stron WWW. Oba programy nie tylko korzystają ze wspólnego Macromedia User Interface, ale dzięki poleceniom pisanym w języku JavaScript, behawiory Fire­works można z powodzeniem wykorzystywać także w Dreamweaverze. Dreamweaver rozpoznaje również obrazki z Fireworks, zarówno całe, jak i pokrojone, i wyświetla inspektora Property Inspector, aby grafikę umie­szczoną w Dreamweaverze można było edytować za pomocą narzędzi Fireworks bez konie­czności otwierania tego programu. W tym rozdziale omówimy wyżej wymienione funk­cje i wiele innych, na przykład wywoływanie poleceń Fireworks z poziomu Dream­weavera.

	Jeśli nie posiadasz własnej kopii Dreamweavera, wykorzystaj de­mon­stracyjną wersję tego programu, która znajduje się na do­łą­czo­nym do książki CD-ROM-ie.

Podstawowe wiadomości o integracji Fireworks i Dreamweavera

XE "Dreamweaver:integracja z Fireworks" Jak już zostało wspomniane, grafika internetowa wymaga tyle samo pracy twórczej, pro­dukcji i utrzymania. Im wyższa będzie Twoja wydajność (lub wydajność Twoich współ­pracowników) w umieszczaniu i aktualizowaniu grafiki na stronach WWW, tym bar­dziej efektywny będzie tok Twojej pracy. Typowa strona WWW składa się prze­ważnie z wielu elementów graficznych oraz tekstu i innych mediów (takich jak fil­my Shockwave i QuickTime), każdy projektant musi zatem wiedzieć, jak wszystkie te ele­menty mogą ze sobą współpracować. Projekty stron WWW muszą być nie tylko este­tyczne, ale i praktyczne, co oznacza, że czas ich pobierania należy ograniczyć do mi­ni­mum. Wszystkie te zagadnienia wymagają ciągłej współpracy pomiędzy projektantem gra­fiki i projektantem stron WWW. Firma Macromedia, starając się rozwiązać powyższe problemy, zintegrowała programy Fireworks i Dreamweaver w kompletne środowisko produkcji internetowej.

	Firma Macromedia kontynuuje rozpoczętą od wersji 2 integrację Fire­works z Dreamweaverem. W czwatych wersjach tych programów znaj­du­je się jeszcze więcej funkcji integracyjnych. Nie ma znaczenia kolejność instalowania Fireworks i Dreamweavera — integracja zawsze będzie funkcjonować.

Optymalizacja obrazków z poziomu Dreamweavera XE "Dreamweaver:optymalizacja grafiki w Fireworks"

Co jest najczęściej modyfikowane w grafice umieszczonej na stronie WWW? Nie wiem jak inni, ale ja jestem pewien, że chodzi tu o skalowanie obrazków do właściwych wy­mia­rów. Zmiana wymiarów polega na skalowaniu i kadrowaniu obrazka, aby uzyskać jak najmniejszy rozmiar pliku przy utrzymaniu jak najwyższej jakości grafiki. Wszys­tkie te funkcje zapewnia polecenie Optimize Image in Fireworks, dające pełną kontrolę nad kolorem i animacją grafiki. Najlepsze jednak jest to, że poleceniem tym otwierany jest w Dreamweaverze standardowy interfejs Fireworks.

Jeśli jeszcze nigdy nie korzystałeś z polecenia Optimize Image in Fireworks, ostatnie zda­nie mogło Cię wprawić w zakłopotanie. Jak można optymalizować obrazek w Dream­weaverze za pomocą standardowego interfejsu Fireworks? Czyż nie mówimy tutaj o dwóch zupełnie różnych programach? Niby tak, ale (i to jest najdziwniejsze) jednak nie. Aby polecenie to mogło zadziałać, musisz mieć zainstalowane oba programy, ale w Dream­weaverze nie jest uruchamiana pełna wersja Fireworks. Zamiast tego, uru­cha­mia­na jest „mała” wersja programu wyświetlająca jedynie okno dialogowe Export Pre­view (rysunek 22.1).

Rysunek 22.1. Polecenie Optimize Image in Fireworks, bez uruchamiania Fireworks, otwiera okno dialogowe Export Preview, takie samo jak okno o tej samej nazwie używane w Fireworks

Okno dialogowe Optimize posiada wszystkie funkcje okna Export Preview z jednym, ma­łym wyjątkiem: zamiast przycisku Next znajdziesz tutaj przycisk Update. W Fire­works, kliknięcie znajdującego się w oknie Export Preview przycisku Next powodowało ot­warcie okna dialogowego Export, w którym mogłeś zdefiniować opcje plastrowania i sza­blon kodu HTML. Polecenie Optimize Image in Fireworks otwiera okno, w którym do­myślnie wybrane będą opcje zdefiniowane przy ostatnim wykorzystaniu tego okna w Fire­works.

Aby z poziomu Dreamweavera zoptymalizować obrazek w Fireworks:

550. Zaznacz w Dreamweaverze obrazek, który chcesz optymalizować.

	Przed uruchomieniem polecenia Optimize Image in Fireworks musisz co najmniej raz zapisać bieżący dokument w Dreamweaverze. Nie cho­dzi tutaj o zapisanie bieżącego układu strony, lecz o utworzenie pli­ku, który jest konieczny do poprawnego działania polecenia. Jeśli nie zapiszesz pliku, Dreamweaver wyświetli odpowiednie ostrzeżenie po wybraniu polecenia Optimize Image.

551. Wybierz z menu polecenie CommandsOptimize Image in Fireworks.

	Polecenie Optimize Image in Fireworks można również wywołać z menu kontekstowego — kliknij prawym klawiszem (kliknij z wciśniętym klawi­szem Control) obrazek w Dreamweaverze.

552. Jeżeli zaznaczony obrazek jest zapisany w formacie innym niż PNG (Portable Net­work Graphics), będziesz miał możliwość wyboru, czy Fireworks ma użyć źród­łowego pliku zamiast niskiej jakość GIF-a (Graphics Interchange Format) lub JPEG (Joint Photographic Experts Group), co pokazano na rysunku 22.2.

553. Kliknij przycisk No znajdujący się w oknie dialogowym Find Source for Opti­mi­zing, aby kontynuować optymalizację obrazka GIF lub JPEG. Kliknij przy­cisk Yes, jeśli chcesz, aby Dreamweaver automatycznie odszukał, o ile jest to moż­liwe, plik źródłowy Fireworks. Jeżeli odszukanie pliku nie będzie moż­liwe, zostanie wyświetlone okno dialogowe Open. Zaznacz w nim źródłowy plik PNG i kliknij przycisk Open.

Rysunek 22.2. Określ czy chcesz, aby Dreamweaver użył jako źródła obrazka źródłowego pliku PNG, jeśli taki istnieje

Po odszukaniu odpowiedniego pliku zostanie otwarte okno dialogowe Opti­mize.

554. Wprowadź odpowiednie zmiany w zakładkach Options, File i Animation okna dia­logowego Optimize.

555. Po zakończeniu dostosowywania opcji kliknij przycisk Update.

Jeżeli pracowałeś ze źródłowym plikiem Fireworks, zmiany zostaną zapisane za­równo w pliku źródłowym, jak i eksportowanym. W przeciwnym wypadku zmo­dyfikowany zostanie jedynie plik eksportowany.

Jeśli w czasie optymalizacji zmienisz skalę, rozmiar lub skadrujesz obrazek, będziesz mu­siał dostosować wartości wysokości i szerokości grafiki w inspektorze Property Dream­weavera. Aby to zrobić, wystarczy kliknąć przycisk Refresh (Odśwież).

Jeśli optymalizowany obrazek jest zapisany w formacie PNG (obojęt­nie, czy będzie to rozszerzony format używany przez Fireworks do zapi­sy­wania wszystkich dodatkowych informacji wykorzystywanych przy edy­cji, czy też zwykła bitmapa PNG), polecenie Optimize Image in Fire­works zapisze go jako plik bitmapowy. Innymi słowy - zostanie utra­co­na możliwość edycji grafiki. Najlepiej jest więc zapisać plik źródłowy Fire­works w jednym katalogu, zaś do eksportu plików używanych w In­ter­necie (GIF, JPEG lub PNG) używać innego katalogu.

Edycja obrazków z poziomu Dreamweavera XE "Dreamweaver:edycja obrazków za pomocą Fireworks"

W wielu wypadkach edycja grafiki ogranicza się jedynie do jej optymalizacji. Może to być lekkie wykadrowanie jednej ze stron obrazka lub redukcja rozmiaru pliku. Naj­częś­ciej jednak potrzebnych jest więcej możliwości edycji, na przykład gdy klient zade­cy­du­je o zmianie znajdującej się na przycisku nawigacyjnym nazwy oddziału firmy. Gdyby nie inte­gra­cja Fireworks z Dreamweaverem, musiałbyś w takiej sytuacji uruchomić pro­gram gra­ficzny, załadować obrazek, wprowadzić odpowiednie zmiany, zapisać obrazek, przejść do edytora stron WWW i ponownie załadować grafikę. Korzystając z Dream­wea­­vera 4 i Fireworks 4 można znacznie uprościć proces modyfikacji grafiki. Wystar­czy wykonać następujące czynności:

476. Zaznacz obrazek w Dreamweaverze i kliknij przycisk Edit w inspektorze Property.

Obrazek zostanie automatycznie otwarty w Fireworks (rysunek 22.3).

Rysunek 22.3. Od razu widać, że obrazek w Fireworks pochodzi z Dreamweavera

556. Zmodyfikuj obrazek w Fireworks i kliknij przycisk Done.

Zmodyfikowany obrazek zostanie zapisany i automatycznie zaktualizowany w Dream­weaverze.

Zdefiniowanie Fireworks
jako edytora grafiki dla Dreamweavera

Aby czerpać korzyści z rozbudowanej integracji pomiędzy tymi dwoma programami, musisz ustawić w preferencjach Dreamweavera Fireworks jako domyślny edytor gra­ficz­ny. Aby to zrobić:

477. W Dreamweaverze, wybierz z menu polecenie EditPreferences.

Zostanie otwarte okno dialogowe Preferences.

557. Z listy znajdującej się po lewej stronie okna wybierz kategorię File Types / Editors.

558. W panelu File Types / Editors (rysunek 22.4) kliknij najpierw typ obrazka w części Extensions (po lewej) i nastepnie kliknij przycisk plus (+) — nad częścią Editors, aby odszukać aplikację Fireworks.

Rysunek 22.4. Aby szybko zmodyfikować grafikę umieszczoną w Dreamweaverze upewnij się, że domyślnym edytorem najpopularniejszych formatów grafiki, takich jak GIF, jest Fireworks
		Domyślna ścieżka dostępu Fireworks w Windows to C:\Program Files\ Macromedia\Fireworks 4\Fireworks.exe (rozszerzenie .exe mo­że być nie­widoczne). Domyślna ścieżka dostępu Fireworks w MacOS to Ma­cintosh HD:Applications:Fireworks 4:Fireworks 3.

Ilekroć będziesz chciał zmodyfikować grafikę, zaznacz obrazek i kliknij przycisk Edit w in­spektorze Property. Zostanie uruchomiony Fireworks, jeśli do tej pory jeszcze nie był otwarty. Podobnie jak w przypadku polecenia Optimize Image in Fireworks, jeśli wsta­wiony na stronę obrazek zapisany jest w formacie GIF lub JPEG (nie PNG), Fire­works zapyta użytkownika, czy chce pracować z odrębnym plikiem źródłowym. Jeśli klik­niesz wówczas przycisk Yes, będziesz miał możliwość zlokalizowania pliku.

	W jednym przypadku Fireworks nie stosuje się do preferencji Launch i Edit Dreamweavera. Jeżeli wybrany obrazek będzie składał się z plastrów, Fireworks zawsze, niezależnie od ustawień, będzie optymalizował plik eksportowany, a nie źródłowy.

Po zmodyfikowaniu pliku w Fireworks, kliknij przycisk Done albo wybierz z menu polecenie FileUpdate lub użyj skrótu klawiaturowego Ctrl+S (Command+S). Jeśli pracujesz ze źródłowym pli­kiem Fireworks, uaktualnione i zapisane zostaną dwa pliki: źródłowy i eksportowany.

Jeśli wybierzesz polecenie FileUpdate upewnij się, że plik źródłowy i eks­portowany mają takie same wymiary. Jeżeli eksportowany plik jest skadrowaną wersją pliku źródłowego, eksportowany plik zostanie utwo­rzony na podstawie pliku źródłowego i wszelkie informacje o ka­dro­waniu zostaną utracone. Aby zachować te informacje, zamiast FileUpdate wybierz z menu polecenie FileExport, aby ponownie wy­ek­sportować plik.

Odczytywanie dziennika projektu (Design Notes) w Dreamweaverze

Zarówno Dreamweaver, jak i Fireworks mają możliwość zapisywania dziennika pro­jek­tu, innowacyjnej metody współużytkowania informacji pomiędzy projektantami grafiki pra­cującymi w Fireworks i twórcami stron WWW używającymi Dreamweavera. Dzien­nik pro­jektu to zewnętrzny plik zawierający edytowalne informacje o wszystkich ele­men­tach Dreamweavera, takich jak dokumenty HTML lub grafiki. Fireworks dodaje dzien­nik pro­je­ktu do obrazków eksportowanych na strony Dreamweavera i zapisuje infor­macje o lo­ka­li­zacji źródłowego pliku. Umożliwia to Dreamweaverowi optyma­lizo­wa­nie lub edyto­wanie źródłowego pliku obrazka, bez pytania użytkownika o jego loka­lizację.

W Dreamweaverze można odczytywać dziennik projektu Fireworks lub dodawać do nie­go własne informacje. Najpierw jednak musisz włączyć dziennik projektu dla bie­żą­cej witryny. Aby uaktywnić dziennik projektu:

478. W Dreamweaverze wybierz z menu polecenie SiteDefine Sites.

Zostanie otwarte okno dialogowe Define Sites.

559. Zaznacz swoją bieżącą witrynę i kliknij przycisk Edit.

Dreamweaver wyświetli okno dialogowe Edit Sites.

560. Wybierz kategorię Design Notes, aby wyświetlić panel Design Notes.

561. Włącz opcję Maintain Design Notes.

562. Jeśli chcesz, aby dostęp do dziennika projektu mieli także Twoi współ­pra­cow­ni­cy, zaznacz opcję Upload Design Notes for Sharing.

563. Kliknij OK, aby zamknąć okno dialogowe Edit Sites, a następnie przycisk Do­ne, aby zamknąć okno dialogowe Define Sites.

Aby wyświetlić lub dodać dziennik projektu do obrazka Fireworks (lub dowolnego innego):

479. Zaznacz i kliknij obrazek prawym przyciskiem myszy (kliknij z wciśniętym klawi­szem Con­­trol), aby wyświetlić menu kontekstowe i wybierz z niego pozycję Design Notes.

Zostanie otwarte okno dialogowe Design Notes.

564. Wybierz zakładkę All Info, aby wyświetlić ścieżkę dostępu pliku źródłowego. In­­for­macje o lokalizacji tego pliku znajdują się w dzienniku projektu pod sło­wem kluczowym fw_source. Wygląda to mniej więcej tak:

fw_source=file:///D|/DW4 Bible/images/house.png

565. Aby dodać informacje do dziennika projektu, kliknij przycisk Add, a następnie wy­pełnij pola Name i Value.

	Aby zatwierdzić wartość wpisaną w polu Value, wciśnij klawisz Tab za­miast Enter (Return).

Modyfikowanie plastrowanych obrazków

Dzięki poleceniu Insert Fireworks HTML umieszczanie plastrowanych obrazków na stronie WWW w Dreamweaverze jest bardzo prostą operacją. Ale, podobnie jak standardowe nieplastrowane obrazki, często muszą być one modyfikowane. Jedną ze stosowanych metod jest otoczenie tekstu HTML grafiką; w Fireworks, w plastrowanym obszarze, określonym jako plaster tekstowy, może znajdować się dowolna zawartość HTML. Tekst jest często modyfikowany i — jeżeli nie będzie otoczony grafiką, oznaczać to będzie, że obrazek będzie musiał być zmieniony lub widać będzie pojedyncze plastry w związku z podziałem tabeli.

W Dreamweaverze 4, plastrowane obrazki z Fireworks są rozpoznawane jako tabele Fireworks i mogą być modyfikowane przy użyciu dedykowanego inspektora Property (rysunek 22.5). Fireworks Table Property Inspector wyświetla plik źródłowy PNG oraz przycisk Edit, umożliwiający przesłanie całej tabeli z powrotem do Fireworks w celu jej modyfikacji. Podobnie jak w przypadku innych grafik, po zakończeniu modyfikacji kliknij przycisk Done w pasku tytułu dokumentu, aby zaktualizować plik źródłowy i eksportowany. Eksportowane obrazki są następnie ponownie ładowane do Dreamweavera.

Rysunek 22.5. Aby zmodyfikować grafikę plastrowaną, zaznacz otaczającą ją tabelę i następnie wybierz przycisk Edit w inpektorze Dreamweavera Fireworks Table Property
		Fireworks z reguły uwzględnia zmiany wprowadzane w tabeli HTML, jednak przy niektórych zmianach może zamienić Twoją tabelę. Jeżeli, na przykład, w Dreamweaverze dodasz lub usuniesz komórkę z tabeli, Fireworks uzna, że tabele nie pasują do siebie. Pojawi się ostrzeżenie, informujące, że Fireworks zamieni tabelę w Dreamweaverze. Aby nie zmieniać tabeli w Dreamweaverze, nie wprowadzaj żadnych zmian w Fireworks i kliknij przycisk Done.

Eksportowanie kodu Dreamweavera XE "Dreamweaver:eksportowanie kodu w formacie Dreamweavera"

W pierwszej wersji Fireworks mógł generować kod jedynie w swoim własnym stylu HTML. Mimo że był to bardzo wydajny kod, nie pasował zbyt dobrze do standardów Dream­weavera. Pracował całkiem nieźle, ale nie można było edytować kodu w Dream­wea­verze - musiałeś wrócić do Fireworks, aby wprowadzić jakieś zmiany. Musisz przy­znać, że nie było to optymalne rozwiązanie.

Obecnie Fireworks płynnie włada językiem Dreamweavera. Wszystkie operacje eksportu umożliwiają generowanie kodu HTML dla obszarów aktywnych, plastrów i behawiorów z użyciem stylu Dreamweaver lub Dreamweaver Library. Programiści pro­jek­tujący Fireworks i Dreamweavera postarali się o jak najlepsze dostosowanie kodu do obydwu programów.

Styl generowanego kodu HTML, używanego do standardowej operacji eksportu HTML and Images, jest definiowany w oknie dialogowym HTML Setup. Wybierz polecenie FileHTML Setup i z rozwijanej listy HTML Style w zakładce General wybierz opcję Dream­weaver. Teraz, podczas operacji eksportu HTML and Images, w oknie dialogowym Export, eksportowany jest kod Dreamweavera.

Polecenie Dreamweavera - Insert Fireworks HTML W palecie Object Dreamweavera znajduje się logo Fireworks. Przypisane do niego polecenie In­sert Fireworks HTML Object umożliwia odszukanie pliku HTML wyekspor­to­wa­nego z Fireworks i umieszczenie go w bieżącym dokumencie Dre­am­­weavera. Po jego włączeniu, polecenie prosi o podanie lokalizacji pliku generowanego przez Fireworks, co mo­żesz zobaczyć na poniższej ilustracj Polecenie Insert Fireworks HTML Object przydaje się w sytuacjach, gdy na­le­ży wyeksportować z Fireworks większe ilości kodu. Nie trzeba wów­czas martwić się o położenia plików HTML. Można eksportować je wszystkie do jednego katalogu, a następnie wstawić w odpo­wied­nie miejsca dokumentu Dreamweavera.

		Bardziej szczegółowe informacje na temat eksportowania z Fireworks ko­du HTML w formacie Dreamweavera i umieszczania go na tworzo­nych w Dreamweaverze stronach WWW znajdziesz w rozdziałach 20. i 21.

Praca z bibliotekami Dreamweavera XE "Dreamweaver:praca z bibliotekami Dreamweavera"

Wyeksportowanie z Fireworks kodu HTML z wykorzystaniem stylu Dreamweaver Li­bra­ry pozwala zaoszczędzić mnóstwo czasu projektanta. Jednym z najtrudniejszych za­dań dla grafika poruszającego się w świecie Internetu jest utworzenie kodu HTML ob­słu­gu­ją­cego grafikę. Aby umieścić kod HTML w dokumencie Dreamweavera, trzeba go wy­ci­nać i wklejać z dokumentu wygenerowanego przez Fireworks z wykorzystaniem stylu eksportu HTML and Images. Mimo że zadanie ta­kie jest dość proste do wykonania w Dreamweaverze (a Fireworks ułatwia to jeszcze bar­dziej, do­łączając do kodu HTML zwięzłe komentarze), nadal zawiera element kło­po­tli­wy dla wie­lu projektantów grafiki - kod.

Biblioteki Dreamweavera eliminują konieczność obsługi kodu generowanego przez Fire­works przy wstawianiu go do Dreamweavera. Dotyczy to nawet najbardziej zło­żo­nych behawiorów. Co to jest biblioteka Dreamweavera? Podoba mi się wyjaśnienie jed­nego z programistów tworzących Fireworks: „Myśl o nich jak o formacie Encapsulated HTML”. Porównanie to będzie natychmiast zrozumiałe dla grafików, którzy pracują zwy­kle z formatem Encapsulated PostScript (EPS). Podobnie jak pliki EPS, elementy bi­bliotek Dreamweavera mogą zawierać setki wierszy kodu, ale projektant będzie mu­siał się martwić tylko o jeden element i to na dodatek wizualny.

Aby wyeksportować dokument Fireworks jako element biblioteki Dreamweavera:

480. Wybierz w Fireworks polecenie FileExport.

Fireworks wyświetli okno dialogowe Export.

481. Z listy rozwijanej Save as type (Save As) wybierz Dreamweaver Library (.lbi).

Fireworks wyświetli ostrzeżenie, informujące, że musi znać lokalizację katalogu biblioteki witryny w Dreamweaverze. Kliknij OK, aby usunąć ostrzeżenie.

Fireworks wyświetli okno dialogowe Choose a Folder (Wybierz katalog).

566. Wyszukaj katalog biblioteki witryny w Dreamweaverze, a następnie kliknij Select (Choose) (Wybierz).

Fireworks ponownie wyświetli okno dialogowe Export.

567. W oknie dialogowym Export kliknij przycisk Save, aby zapisać kod biblioteki Dreamweavera.

568. Otwórz w Dreamweaverze dokument, do którego chcesz wstawić eksportowany kod Fireworks.

569. Wybierz polecenie WindowAssets, lub kliknij ikonę Assets w Dreamweaver Launcher.

Zostanie otwarta paleta Assets.

570. Wybierz kategorię Library palety Assets (rysunek 22.6).

571. Zaznacz wyeksportowany element w liście palety.

572. Wybierz polecenie Add to Page lub przeciągnij do okna dokumentu element, któ­ry znajduje się na liście albo w panelu podglądu palety, aby wstawić ele­ment biblioteki do dokumentu HTML.

Element biblioteki zostanie wstawiony na stronę i zaznaczony.

Rysunek 22.6. W kategorii Library palety Assets znajdziesz eksportowany element biblioteki Dreamweavera

Elementy biblioteki eksportowane z Fireworks możesz przemieszczać w dowolne po­ło­że­nia na stronie. To samo dotyczy również związanego z tym elementem kodu.

Największą zaletą elementów bibliotek Dreamweavera jest możliwość ich aktua­li­zo­wa­nia. Po zmodyfikowaniu pojedynczego elementu biblioteki, Dreamweaver automa­tycz­nie uaktualni wszystkie wykorzystujące go strony WWW. Jest to funkcja pozwalająca zao­szczę­dzić mnóstwo pracy i czasu. W przeciwieństwie do zwykłych grafik, które mogą być edytowane po kliknięciu przycisku Edit, który znajduje się w inspektorze Pro­per­ty Dreamweavera, grafikę elementu biblioteki trzeba najpierw odblokować.

Aby zmodyfikować element biblioteki:

482. Wybierz z menu Dreamweavera polecenie WindowAssets, aby otworzyć paletę Assets.

483. W palecie Assets wybierz kategorię Library.

484. Wybierz element biblioteki osadzony na stronie, zaznaczając go na stronie WWW lub w palecie Assets.

485. Kliknij znajdujący się w inspektorze Library Item Property przycisk Open (rysunek 22.7).

Rysunek.22.7. Aby zmodyfikować element biblioteki, zaznacz go i kliknij przycisk Open, który znajduje się w inspektorze Property

Element biblioteki zostanie otwarty w osobnym oknie Dreamweavera.

573. Zaznacz grafikę i kliknij przycisk Edit, który znajduje się w inspektorze Pro­perty.

Jeżeli plik nie jest zapisany w formacie PNG, Fireworks zapyta Cię, czy chcesz edytować źródłowy plik grafiki i umożliwi jego zlokalizowanie. Wybrany plik PNG zostanie otwarty w Fireworks.

574. Wprowadź żądane zmiany grafiki.

575. Po zakończeniu edycji wybierz z menu polecenie FileUpdate.

Zmodyfikowany plik zostanie automatycznie uaktualniony w bibliotece Dre­am­weavera.

576. Wybierz z menu Dreamweavera polecenie FileSave.

Dreamweaver zarejestruje, że element biblioteki został zmodyfikowany i zapyta Cię, czy chcesz uaktualnić wszystkie strony bieżącej witryny zawierające ten ele­ment. Kliknij przycisk Yes, aby zaktualizować wszystkie elementy bi­blio­te­ki (wraz z tym, który właśnie zmodyfikowałeś) lub przycisk No, aby odłożyć te zmia­ny na później.

577. Wybierz z menu polecenie FileClose, aby zamknąć okno edycyjne.

Jeśli wolisz odkładać aktualizację elementów biblioteki na później, możesz to zrobić w do­wolnej chwili za pomocą polecenia ModifyLibraryUpdate Pages.

Technika Fireworks:
dodawanie warstw CSS do Dreamweavera

W rozdziale tym warto wspomnieć o jeszcze jednej funkcji eksportu oferowanej przez Fire­works 4. Nie jest to funkcja przydatna wyłącznie w Dreamweaverze, ale można ją z po­wodzeniem wykorzystywać jako element integracji Dreamweaver-Fireworks. Fire­works umożliwia eksportowanie obrazków bezpośrednio do warstw CSS (Cascading Sty­le Sheet - Kaskadowe arkusze stylów). Warstwa CSS jest strukturą, która może być wy­świetlana przez wszystkie przeglądarki, w ich wersjach 4. lub późniejszych. Warstwy CSS mają kilka godnych uwagi właściwości:

• Position (Położenie). Warstwy (i oczywiście ich zawartość) mogą być pre­cy­zyj­nie rozmieszczane na stronach WWW. Umożliwia to dużo łatwiejsze pro­jek­towanie stron niż za pomocą tradycyjnych poleceń HTML.

• Depth (Głębia). Warstwy mogą być układane jedna nad drugą, zaś ich kolej­ność w stosie może być dynamicznie modyfikowana.

• Visibility (Widzialność). Warstwy CSS mogą być ukrywane lub wyświetlane.

• Movement (Ruch). Warstwy mogą być dynamicznie pozycjonowane i prze­su­wa­ne po ekranie w celu utworzenia animacji.

Eksportuję warstwy CSS do wykorzystania w Dreamweaverze za pomocą dwóch róż­nych metod: eksportuję warstwy Fireworks lub klatki Fireworks. Wykorzystanie warstw Fire­works jest przydatne przy precyzyjnym definiowaniu układu grafiki względem tła stro­ny. W jednym z projektów, nad tłem strony musiałem precyzyjnie rozmieścić nawet osiem odrębnych grafik. Aby ułatwić sobie pracę, korzystam z poniższej techniki:

486. Otwórz w Fireworks grafikę tła i zablokuj ją w palecie Layers.

487. Kliknij przycisk New Layer w palecie Layers.

Zostanie utworzona nowa warstwa.

	Jeśli chcesz, możesz zmienić nazwę warstwy. Nazwy warstw Fireworks są używane jako nazwy warstw CSS.

578. Wybierz z menu polecenie InsertImage, aby otworzyć grafikę pierwszego planu.

Możesz również wycinać i wklejać obiekty lub obrazki z innych, otwartych plików.

579. Umieść grafikę w odpowiednim położeniu względem tła.

580. Powtórz kolejno operacje od drugiej do czwartej, tworząc no­wą warstwę dla każdego obiektu.

Mimo że każdy obiekt jest umieszczany w odrębnej warstwie, w dokumencie są one wyświetlane, jakby znajdowały się wszystkie obok siebie.

581. Po poprawnym rozmieszczeniu wszystkich obiektów, ukryj warstwę tła po­przez kliknięcie ikony oka, która znajduje się obok nazwy warstwy w palecie Layers.

582. Wybierz z menu polecenie FileExport.

Zostanie otwarte okno dialogowe Export.

583. Z listy Save as type (Save As) wybierz CSS Layers.

Fireworks udostępni dalsze opcje związane z eksportowaniem warstw CSS.

584. Z rozwijanej listy Source wybierz element Fireworks, który ma być eksportowany jako warstwa CSS. Do wyboru masz Fireworks Layers, Fireworks Frames lub Fireworks Slices.

585. Upewnij się, że opcja Trim Images nie jest zaznaczona.

586. Jeżeli eksportujesz przy ustawieniu Fireworks Frames, zanacz pole Current Frame Only, aby ograniczyć eksport tylko do bieżącej klatki.

587. Zaznacz pole wyboru Put Images in Subfolder, aby Fireworks umieszczał pliki obrazków w ich własnym katalogu.

Kliknij przycisk Browse, aby wyszukać stosowny katalog.

588. Kliknij przycisk Save.

Każda warstwa Fireworks zostanie zapisana jako odrębny obrazek, zaś w pliku HTML będą zapisane informacje o warstwach CSS.

589. Otwórz w Dreamweaverze plik HTML wygenerowany przez Fireworks.

590. Za pomocą jednej z poniższych metod zaznacz wszystkie znajdujące się na stro­nie warstwy CSS:

• Wciśnij klawisz Shift i zaznacz wszystkie warstwy w palecie Layers.

• Wciśnij klawisz Shift i klikaj kolejno wszystkie symbole warstw CSS wy­świe­tlane w oknie dokumentu Dreamweavera.

591. Wybierz z menu polecenie EditCopy, aby skopiować zaznaczone warstwy.

592. Wybierz z menu polecenie FileOpen, aby wyszukać i otworzyć stronę WWW, na której chcesz umieścić warstwy. Docelową stronę WWW możesz otworzyć również z oknie Site.

593. Wybierz z menu polecenie EditPaste, aby wstawić warstwy do dokumentu.

Głębia warstw CSS determinowana jest kolejnością warstw Fireworks - warstwy z więk­szymi numerami umieszczane są nad warstwami z mniejszymi numerami - po­dob­nie jak warstwy znajdujące się wyżej w palecie Layers są wyświetlane nad war­stwa­mi znajdującymi się niżej.

Inna metoda wykorzystania warstw CSS eksportowanych z Fireworks - eksportowanie kla­tek - przydaje się, gdy chcesz utworzyć w Dreamweaverze złożony behawior Show-Hide Layer (Pokaż-Ukryj warstwę). Najczęściej - warstwy są na przemian wyświetlane
i ukrywane nad innymi warstwami. Możliwość takiego rozmieszczania warstw możesz uzy­skać poprzez umieszczenie poszczególnych obiektów w odrębnych klatkach Fire­works. Następnie wybierz z menu polecenie FileExport i wybierz CSS Layers i Fireworks Frames odpowiednio z roz­wi­janych list Save as type (Save As) i Source. Jeśli chcesz utrzymać względne rozmieszczenie obrazków w klatkach, usuń zaznaczenie opcji Trim Images (Przytnij obrazki). Jeśli zaznaczysz tę opcję, lewe gór­ne wierzchołki wszystkich obrazków będą znajdowały się w jednym punkcie.

	Jeżeli chcesz wyświetlić większą ilość osobno zapisanych obrazków, mo­żesz użyć polecenia Open z włączoną opcją Open as Ani­ma­tion (Otwórz jako animację) w oknie dialogowym Open, aby każdy obrazek został umieszczony w osobnej klatce dokumentu. Następnie wyeksportuj jako warstwy CSS, aby uzyskać eksport w postaci war­stw.

Wykorzystywanie behawiorów Fireworks w Dreamweaverze XE "Dreamweaver:wykorzystywanie behawiorów Fireworks w Dreamweaverze"

Programiści rozpoczęli tworzenie Fireworks 4 od modyfikowania kodu Dreamweavera, dla­tego behawiory Fireworks mogą być odczytywane przez Dreamweavera. Być może zapy­tasz i co z tego?. Jeżeli Dreamweaver potrafi rozpoznawać behawiory Fireworks jako swoje własne, zyskujesz możliwość edytowania w Dreamweaverze ich parame­trów. Jeśli zastosujesz w Fireworks behawior Set Text of Status Bar, będziesz mógł zmo­dyfikować w Dreamweaverze treść wyświetlanego przez niego komunikatu.

Fireworks 4 umożliwia eksportowanie kodu dla pięciu kategorii behawiorów: Sim­ple Rol­lover (Prosty rollover), Swap Image (Zamień obrazek), Set Nav Bar Ima­ge (Ustaw obra­zek paska nawigacyjnego), Set Pop-Up Menu (Wstaw Listę rozwijaną) i Set Text of Status Bar (Wyświetl komu­nikat w pasku stanu).

	Do wszystkich behawiorów Fireworks automatycznie wstawiany jest tak­że inny behawior - Preload Images (Załaduj obrazki). Jak wskazuje je­go nazwa - powoduje on załadowanie do pamięci podręcznej prze­glą­darki wszystkich obrazków używanych w rolloverach, by zapewnić ich płynne wyświetlanie.

Aby zmodyfikować behawior Fireworks zastosowany w Dreamweaverze, musisz naj­pierw otworzyć paletę Dreamweavera - Behaviors (rysunek 22.8), która wy­gląda podobnie do palety Behaviors Fireworks. Zaznacz w Dreamweaverze obiekt lub znacznik, a wszystkie przydzielone do niego behawiory zostaną wyświetlone w palecie Behaviors.

Rysunek 22.8. Paleta Behaviors Dreamweavera używa zdarzeń i akcji, czyli zachowuje się podobnie jak paleta Behaviors Fireworks

Każdy z behawiorów używa w Dreamweaverze innego okna dialogowego do modyfi­ko­wa­nia swoich parametrów, jednak cała procedura edycji właściwości jest taka sama. Aby zmodyfikować w Dreamweaverze behawior wygenerowany z Fire­works:

488. Otwórz w Dreamweaverze plik zawierający kod HTML wygenerowany przez Fireworks.

489. Wybierz z menu polecenie WindowBehaviors, aby otworzyć paletę Behaviors.

Możesz również kliknąć przycisk Behavior w Launcherze Dreamweavera.

594. Zaznacz obrazek, obiekt lub znacznik, do którego przydzielony jest behawior.

W palecie Behaviors zostaną wyświetlone zdarzenia i akcje behawiora.

595. Aby zmienić zdarzenie uruchamiające behawior, kliknij strzałkę znajdującą się obok jego nazwy i wybierz nowe zdarzenie z listy rozwijanej.

	Lista dostępnych zdarzeń zmienia się w zależności od znacznika zwią­za­nego z behawiorem.

596. Aby zdefiniowana akcja była uruchamiana przed inną akcją, która korzysta z te­go samego zdarzenia (na przykład dwa zdarzenia onClick), zaznacz akcję i użyj przy­cis­ków Up (Do góry) i Down (W dół) w palecie Behaviors, aby zmienić ko­lej­ność behawiorów.

597. Kliknij dwukrotnie behawior, który chcesz zmodyfikować.

Zostanie otwarte odpowiednie okno dialogowe, na przykład Set Nav Bar Image po­kazane na rysunku 22.9.

Rysunek 22.9. Za pomocą specyficznego dla każdego behawiora okna dialogowego Dreamweavera możesz wprowadzić wszystkie niezbędne zmiany parametrów behawiora.

598. Wprowadź wszystkie żądane zmiany w otwartym oknie dialogowym.

599. Kliknij przycisk OK.

Behawior Fireworks Set Nav Bar Image jest w Dreamweaverze 4 przekształcany na trzy osob­ne behawiory, z których każdy może być oddzielnie modyfikowany. Oto one:

• Set Nav Bar Image (Ustaw obrazek paska nawigacyjnego). Steruje stanami Down i wyróżnionym Down (są to przeważnie klatki Frame 3 i 4 Fireworks).

• Swap Image (Zamień obrazek). Steruje rolloverami paska nawigacyjnego.

• Swap Image Restore (Przywróć oryginalny obrazek). Przywraca rolloverom ich stany Up, gdy użytkownik przesunie kursor znad przycisku w inne po­ło­żenie.

Technika Fireworks: tworzenie internetowego albumu fotograficznego XE "Dreamweaver:tworzenie internetowego albumu fotograficznego"

Katalogi internetowe i inne witryny do prezentacji sprzedawanych produktów wykorzy­stu­ją przeważnie obrazki. Pełnowymiarowe zdjęcia są duże i długo bywają pobierane z Internetu, więc większość projektantów wykorzystuje na stronach miniaturowe wer­sje obrazków. Jeżeli użytkownik chce obejrzeć więcej szczegółów, może kliknąć mi­niaturę i załadować większe zdjęcie. Zapisanie pomniejszonych wersji obrazków w pro­gramach graficznych i umieszczenie ich w edytorze HTML nie jest zbyt trudnym za­daniem, ale utworzenie wielu stron zawierających takie obrazki bywa uciążliwe. Z pomocą przychodzi w takich sytuacjach oferowane przez Dreamweavera polecenie, któ­re jest doskonałym przykładem integracji Dreamweaver-Fireworks - Create Web Photo Album (Utwórz internetowy album fotograficzny).

Jeżeli posiadasz Dreamweavera 4 i Fireworks 4, możesz wykorzystywać polecenie Create Web Photo Album do tworzenia prezentacji, które umożliwiają użytkownikowi prze­glądanie miniatur obrazków, które mogą być klikane w celu wyświetlenia pełno­wy­mia­rowych wersji. Create Web Photo Album jest poleceniem Dreamweavera, ale do prze­twarzania obrazków wykorzystuje Fireworks, który je skaluje i przekształca wszys­tkie pełnowymiarowe obrazki na miniatury.

Aby utworzyć internetowy album fotograficzny z wykorzystaniem Dreamweavera i Fire­works:

490. Umieść wszystkie potrzebne obrazki w jednym katalogu znajdującym się w do­wol­nym miejscu.

Polecenie Create Web Photo Album umożliwia wybra­nie tyl­ko jednego katalogu z obrazkami.

600. Wybierz z menu Dreamweavera polecenie CommandsCreate Web Photo Album.

Dreamweaver otworzy okno dialogowe Create Web Photo Album (rysunek 22.10).

Rysunek 22.10. Podczas tworzenia internetowego albumu fotograficznego możesz wybierać spośród bogatego zestawu opcji

601. W polu tekstowym Photo Album Title wpisz tytuł swojego albumu.

Tytuł ten bę­dzie wyświetlany u góry strony WWW z miniaturami.

602. Jeżeli chcesz, w polu Subheading Info możesz wpisać podtytuł albumu.

Będzie on wy­świetlany bezpośrednio pod tytułem strony z miniaturami.

603. Jeśli chcesz, w polu Other Info możesz wpisać dodatkowe informacje, które bę­dą wyświetlane bezpośrednio pod tytułem i podtytułem strony z miniaturami.

604. Kliknij przycisk Source Images Folder Browse i wybierz katalog zawierający zdję­cia, które chcesz dodać do albumu.

Do albumu zostaną dodane wszystkie obrazki znajdujące się w wybranym ka­ta­logu i posiadające następujące rozszerzenia plików:

• .gif

• jpg lub .jpeg

	Korzystanie z obrazków JPEG jako plików źródłowych nie jest zalecane. Kom­pre­sja JPEG tworzy pliki nadające się do przeglądania, ale nie do im­por­tu lub ponownego eksportu.

• .png

• .tif lub .tiff

• .psd

	Dla użytkowników MacOS: Obrazki nie posiadające rozszerzeń plików są ignorowane przez Fireworks i nie zostaną dodane do albumu foto­gra­ficznego. Do każdego takiego obrazka będziesz musiał dodać od­po­wiednie rozszerzenie pliku.

605. Kliknij przycisk Destination Folder Browse, aby wybrać lub utworzyć katalog dla wszystkich eksportowanych obrazków i plików HTML.

606. Z rozwijanej listy Thumbnail Size wybierz rozmiar tworzonych miniatur ob­razków.

Aby utworzyć miniatury o zdefiniowanych rozmiarach, Fireworks propor­cjo­nal­nie skaluje obrazki.

607. Zaznacz opcję Show Filename, aby pod miniaturami wyświetlić nazwy plików oryginalnych obrazków.

608. W polu Columns wpisz liczbę kolumn miniatur.

609. Z rozwijanej listy Format wybierz format eksportowanych miniatur.

610. Z rozwijanej listy Photo Format wybierz format eksportowanych pełno­wy­mia­ro­wych obrazków albumu.

611. Jeżeli chcesz, w polu Scale możesz wpisać skalę obrazków albumu. Po­zo­sta­wie­nie wartości 100% pozwala utworzyć obrazki o takich samych wymiarach, jakie mają oryginalne obrazki.

	Ustawienie skali jest stosowane do wszystkich obrazków albumu.

612. Jeżeli chcesz, możesz zaznaczyć opcję Create Navigation Page for Each Photo, aby dla każdego obrazka w albumie utworzyć osobną stronę WWW.

	Jeżeli nie zaznaczysz opcji Create Navigation Page for Each Photo, mi­nia­tury będą połączone bezpośrednio z pełnowymiarowymi obrazkami. Jest to najczęściej wykorzystywana metoda przy tworzeniu inter­ne­to­wych albumów fotograficznych.

613. Kliknij przycisk OK.

Zostanie uruchomiony Fireworks (jeśli jeszcze nie jest otwarty), który dla każ­de­go obrazka zaimportowanego do albumu utworzy miniaturę i pełnowy­mia­ro­wy ob­razek. Po utworzeniu wszystkich obrazków, Dreamweaver wy­ge­neruje niezbędny kod HTML.

614. Dreamweaver wyświetli okno dialogowe Album Complete. Kliknij przycisk OK, aby zakończyć sesję tworzenia albumu.

Otwórz album fotograficzny w przeglądarce internetowej albo umieść go na stronie WWW tworzonej w Dreamweaverze.

Tworzenie poleceń hybrydowych XE "Dreamweaver:tworzenie hybrydowych poleceń"

Obsługa skryptów przez Dreamweavera i Fireworks umożliwia projektantom inter­ne­to­wym tworzenie własnych poleceń przeznaczonych dla obu aplikacji. Ogromne moż­li­woś­ci zapewnia fakt, że Dreamweaver obsługuje skrypty Fireworks, co z kolei pozwala na wyko­nywanie skryptów Dreamweavera przez Fireworks.

Poniższa procedura przedstawia sposób komunikacji Dreamweavera z Fireworks:

491. Użytkownik uruchamia polecenie w Dreamweaverze.

492. Dreamweaver otwiera okno dialogowe, jak w przypadku innych rozszerzeń.

493. Po zdefiniowaniu opcji polecenia i kliknięciu przycisku OK, polecenie jest wy­ko­nywane.

494. Wszystkie parametry zdefiniowane przez użytkownika są odczytywane i uży­wa­ne do utworzenia skryptletu JavaScript lub funkcji, które dostarczają instruk­cje dla Fireworks.

495. Jeśli zostanie użyty skryptlet, jest on zapisywany na dysku.

496. Fireworks jest uruchamiany i powiadamiany o konieczności wykonania skryp­t­letu lub funkcji utworzonej przez Dreamweavera.

615. Fireworks wykonuje skryptlet lub funkcję, zaś Dreamweaver śledzi ich postęp za pomocą cookies znajdujących się w komputerze użytkownika.

616. Po wykonaniu operacji przez Fireworks zwracany jest pozytywny rezultat.

Interfejs API (Application Programming Interface) Fireworks zawiera kilka ko­dów obsługujących napotkane błędy, takie jak brak wolnego miejsca na dys­ku.

617. Śledząc postęp wykonywania operacji przez Fireworks, Dreamweaver „za­uważy” pozytywny wynik i umieści grafikę na bieżącej stronie poprzez prze­for­matowanie tzw. DOM (Document Object Model) dla aktualnie otwartej w nim strony.

618. Okno dialogowe zostanie zamknięte, zaś bieżąca strona zostanie odświeżona, aby poprawnie wyświetlić końcowy produkt.

Aby wykorzystać wszystkie możliwości sterowania Fireworks, musisz w pełni zro­zu­mieć możliwości oferowane przez DOM Fireworks i jego rozszerzenia. Potrzebne infor­ma­cje znajdziesz w dokumentacji o nazwie Extending Fireworks wydanej przez firmę Ma­cromedia, którą znajdziesz na CD-ROM-ie Fireworks 4 lub na stronie Fireworks Sup­­port Center pod adresem www.macromedia.com/support/fireworks.

	Szczegółowe informacje o interfejsie API Fireworks znajdziesz w roz­dzia­le 26., a o palecie History, pozwalającej na tworzenie poleceń bez pi­sa­nia kodu, przeczytasz w rozdziału 19.

W interfejsie API znajdziesz również siedem przydatnych metod FWLaunch JSExtension, któ­re dotyczą Dreamweavera, i które opisane zostały w tabeli 22.2.

Nie bój się eksperymentować z funkcjami integracji Dreamweaver-Fireworks i ogólnie z rozsze­rze­niami. Ekscytujące możliwości czekają tylko na ich odkrycie.

Tabela 22.1.

Metody FWLaunch

Metoda	Zwracana wartość	Zastosowanie
BringDWToFront()	Brak	Przenosi okno Dreamweavera na wierzch okien wszystkich innych uruchomionych aplikacji
BringFWToFront()	Brak	Przenosi okno Fireworks na wierzch okien wszystkich innych uruchomionych aplikacji
ExecJsInFireworks (javascriptOrFileURL)	Zwraca wynik skryptletu uruchomionego w Fireworks. Jeśli operacja się nie powiedzie, zwracany jest kod błędu*	Wykonuje dostarczone funkcje lub skryptlety napisane w JavaScripcie
GetJsResponse (progressTrackerCookie)	Zwraca wynik skryptletu uruchomionego w Fireworks: czy uruchomienie się powiodło, zero, jeżeli wciąż jest uruchamiany, lub zwracany jest kod błędu*	Ustala, czy Fireworks zakończył uruchamianie przekazanego JavaScriptu, czy powiodło się uruchomienie, czy zwrócił błąd.
MayLaunchFireworks()	boole'owska	Ustala, czy może zostać uruchomiony Fireworks
OptimizeInFireworks (fileURL, docURL, {targetWidth), (targetHeight})	Zwraca wynik skryptletu uruchomionego w Fireworks. Jeśli operacja się nie powiedzie, zwracany jest kod błędu*	Wykonuje optymalizację grafiki w oknie Export Preview Fireworks
ValidateFireworks (versionNumber)	boole'owska	Ustala, czy użytkownik posiada określoną przez parametr wersję Fireworks

* Kody błędów: 1) nieprawidłowy argument; 2) błąd wejścia-wyjścia pliku (File I/O); 3) niewłaściwa wersja Dreamweavera; 4) niewłaściwa wersja Fireworks; 5) operacja przerwana przez użytkownika

Podsumowanie

Integrację Fireworks z Dreamweaverem jest typowym przykładem potwierdzającym przy­słowie „w jedności siła”. Każdy z programów posiada własne zalety, czyniące go dos­konałym narzędziem internetowym, które po połączeniu dają rozwiązanie kompletne, umo­żliwiające tworzenie grafiki internetowej. Pracując z Dreamweaverem i Fireworks jed­nocześnie, powinieneś pamiętać o następujących rzeczach:

• Dreamweaver 4 zyskuje nowe funkcje po zainstalowaniu Fireworks 4.

• Wykorzystując polecenie Optimize Image in Fireworks, nie musisz nawet opu­szczać Dreamweavera, aby przeskalować, skadrować lub zapisać grafikę w in­nym formacie.

• Po zdefiniowaniu Fireworks jako edytora grafiki Dreamweavera, edytowane w Fi­re­works obrazki będą automatycznie aktualizowane na tworzonej stronie WWW.

• Fireworks generuje kod zgodny z Dreamweaverem, co umożliwia łatwe mo­­dy­fikowanie tego kodu w Dreamweaverze.

• Obrazki Fireworks eksportowane jako elementy biblioteki Dreamweavera mo­gą być umieszczane na stronach WWW bez konieczności wycinania i wkle­jania.

• Eksportując warstwy Fireworks jako warstwy CSS, możesz na stronie WWW zachować rozmieszczenie obiektów ustalone w dokumencie Fireworks.

• Polecenia hybrydowe pracujące w Dreamweaverze i Fireworks otwierają nowe moż­liwości w automatyzacji pracy.

W następnym rozdziale poznasz możliwości tworzenia animacji w Fireworks




Część VI
Animacja




Rozdział 23.
Techniki animacyjne

W tym rozdziale:

• Podstawowe wiadomości o animacjach internetowych.

• Zarządzanie klatkami.

• Animowanie obiektów.

• Technika „Onion skinning”.

• Kontrolki sterowania animacjami.

• Eksportowanie animowanych GIF-ów.

• Sekwencjonowanie symboli graficznych.

• Symbole animacyjne.

Animacje są bardzo często stosowane w Internecie i obecnie moż­na znaleźć niewiele witryn WWW, które są ich pozbawione. Banery reklamowe tworzone z animowanych GIF-ów są już wszechobecne w Internecie. Animowane logo i przyciski są doskonałym spo­so­bem na urozmaicenie każdej witryny. W miarę wzrostu przepustowości Internetu bar­dzo popularne stały się krótkie, animowane filmy rysunkowe.

W tym rozdziale omówimy pokrótce niektóre podstawowe cechy animacji, a następnie zaj­miemy się funkcjami Fireworks umożliwiającymi ich tworzenie. Będziemy pracowali z klatkami Fireworks i z funkcjami eksportu animowanych GIF-ów, takimi jak tempo animacji i zapętlanie. Przyj­rzymy się również kwestiom, którym będziesz musiał stawić czoło przy tworzeniu ani­mowanych banerów reklamowych. Omówimy cały proces ich tworzenia.

	Szczegółowe informacje o importowaniu animacji i wielu plików jako ani­macji znajdziesz w rozdziale 14.

Podstawowe wiadomości
o animacjach sieciowych

Animacja XE "animacja" opiera się na prostej sztuczce. Pokaż mi szybką sekwencję podobnych ob­raz­ków z niewielkimi zmianami w położeniach i właściwościach obiektów, a pomyślę, że wi­dzę poruszający się obiekt. Ruch taki może być prosty lub bardzo złożony. Nie­po­trzeb­ne jest nawet tempo animacji stosowane powszechnie w filmach, czyli dwadzieścia czte­ry klatki na sekundę. Już przy tempie wynoszącym trzy klatki na sekundę można zau­ważyć ruch obiektów (zapętl dwie klatki, a zobaczysz miganie obiektów).

Fireworks umożliwia tworzenie animowanych GIF-ów, więc przyjrzymy się bliżej temu for­matowi grafiki. Przekonasz się jednak, że wiele technik stosowanych przy tworzeniu do­brych animowanych GIF-ów doskonale sprawdza się również przy budowaniu ani­ma­cji sieciowych w innych formatach.

Kwestia przepustowości

Pamiętaj, że najważniejszą sprawą jest zawsze przepustowość Internetu. Wielokrotnie bę­dę drążył ten temat, ponieważ przepustowość łączy jest czynnikiem, który należy roz­pa­trzyć przy tworzeniu każdej grafiki internetowej. Musisz przeanalizować każdy swój ruch i jego wpływ na ostateczny rozmiar końcowego pliku animowanego GIF-a. W trak­cie całego procesu tworzenia animacji sieciowej musisz ostrożnie dobierać po­szcze­gólne parametry, takie jak liczba wykorzystywanych kolorów, liczba klatek, tem­po animacji i wielkość animowanego obszaru obrazka. Jeśli chcesz użyć większej licz­by ko­lorów, być może będziesz musiał zrezygnować z kilku klatek i zadowolić się mniej płyn­ną animacją. Jeżeli animujesz złożone kształty, które nie są zbyt dobrze kompre­so­wa­ne, być może będziesz musiał użyć niewielkiej liczby kolorów.

Doskonałym miernikiem przepustowości Internetu jest połączenie dial-up. Sieć jest po­wol­na i z reguły statyczna, o czym wiedzą wszyscy jej użytkownicy. Twoim sukcesem będzie, jeżeli uda Ci się za­ofe­rować widzom szybką, dynamiczną prezentację. Podczas projektowania animacji musisz pamiętać o właściwościach kompresji GIF. Duże obszary jednolitych kolorów i poziome pasy są kompresowane znacznie le­piej niż fotografie zawierające subtelne przejścia tonalne, pionowe pasy koloru lub gra­dien­ty i wypełnienia ditheringiem.

Kompromis

Nawet jeśli nie otrzymasz Oskara za swoją animację, nie oznacza to jeszcze, że po­wi­nie­neś z niej zrezygnować. Musisz przeanalizować każdy jej element, gdyż naj­mniej­szy, dodatkowy ruch powoduje wzrost wymaganej przepustowości łącza. Wśród Two­ich widzów największą popularnością cieszyć się będą zapewne krótkie i zwięzłe animacje. Jest tak niezależnie od tego, czy tworzysz złożony film rysunkowy z zawiłą fabułą,

ab­strak­cyjny projekt, czy też animowane logo. Jeśli przed przystąpieniem do tworzenia ani­macji określisz, co chcesz osiągnąć, zwiększysz swoje szanse na stworzenie dobrej animacji o jak najmniejszych rozmiarach pliku.

Animowane GIF-y doskonale sprawdzają się w jednych zastosowaniach, ale w innych wy­padają nie najlepiej. Dobrze przeanalizuj wszystkie ograniczenia i skup się na two­rze­niu dobrych animowanych GIF-ów, a nie tylko na tworzeniu dobrych animacji, które ma­ją być podstawą do utworzenia animowanego GIF-a. W Internecie najlepiej działają: pros­te animowane logo, przyciski i animacja klatka po klatce. Pomocne może być myślenie o ani­mowanych GIF-ach w kategoriach pokazu slajdów, a nie filmów. Przeważnie bę­dziesz pracował z mniejszą liczbą klatek niż w filmach oraz z wolnymi, prostymi ani­mo­wanymi elementami. Myślenie o animowanych GIF-ach jako o prezentacjach typu PowerPoint przypomina mi o wszystkich ograniczeniach tego formatu. Można pokazać, że ruch obiektu powstaje poprzez jego płynne ani­mo­wa­nie, zmiany klatka po klatce, przesunięcie przez całą szerokość obrazka. Można także umieś­cić obiekt po lewej stronie obszaru roboczego, rozmyć go w środku tego obszaru i wy­świetlić ponownie oryginalną wersję obiektu po prawej stronie.

Pamiętaj o wszystkim czego nauczyłeś się oglądając sobotnie kres­ków­ki i czytając komiksy. Techniki takie jak dymki z wypowiedziami bo­ha­terów oraz linie ilustrujące ruch lub akcje w statycznych ko­mik­sach pomogą Ci przekazać wszystkie potrzebne informacje bez doda­wa­nia zbędnych klatek - a tym samym - uzyskać mniejsze pliki. Za­miast two­rzyć płynny ruch obiektu po obszarze roboczym z wykorzystaniem dzie­sięciu klatek, utwórz dymki i linie informujące o poszczególnych zda­rzeniach w animacji. Stosowanie tego typu sztuczek pozwala na two­rzenie małych animacji, które umożliwiając przekazanie wszystkich nie­zbędnych informacji.

Jak zwykle w Internecie, będziesz musiał mieć na względzie stosowane przez użyt­kow­ni­ków przeglądarki internetowe. Animowane GIF-y są zazwyczaj odtwarzane trochę szyb­ciej w Internet Explorerze niż w Netscape Navigatorze. Oczywiście szybkość od­twa­rzania animacji zależy także od szybkości komputera. Nie próbuj precyzyjnie usta­wiać tempa animacji i przerw pomiędzy poszczególnymi klatkami. Spróbuj skorzystać z pewnej anarchii panującej w Internecie. Zaufaj ustawieniom tempa animacji de­finiowanym przez Fireworks i miej nadzieję, że będą one najlepsze z możliwych.

Dlaczego animowany GIF XE "animacja:animowany GIF" ?

Fireworks jest doskonałym narzędziem do tworzenia animowanych GIF-ów. Tworzenie ilu­zji animacji polega na rozłożonych w czasie zmianach obiektów znajdujących się w obszarze roboczym. Te zawsze edytowalne obiekty Fireworks można łatwo prze­su­wać, skalować lub stosować do nich efekty. Po ukończeniu animacji, doskonałe funkcje opty­malizacji grafiki w Fireworks umożliwiają utworzenie animowanego GIF-a o jak naj­mniejszym rozmiarze pliku. (Ponownie w grę wchodzi przepustowość Internetu).

Najczęściej animowane GIF-y są tworzone bezpośrednio w Fireworks, mo­żesz jednak wyeksportować animację jako zestaw plików, za po­mo­cą polecenia FileExport, a następnie z listy Save As wybierając Frames to Files lub Layers to Files. Pliki te (które mo­gą być zapisywane także w innych formatach plików, na przykład PNG lub JPEG) mogą być następnie modyfikowane w innych aplikacjach lub wy­ko­rzystywane w innych formatach animacji, na przykład prezentacjach SMIL odtwarzanych w RealPlayerze lub pokazach slajdów tworzonych w interaktywnym DHTML-u (Dynamicznym HTML-u).

Animowane GIF-y posiadają pewne ograniczenia, które stają się widoczne przy po­rów­na­niu ich funkcji z funkcjami innych, „poważniejszych” formatów animacji, sto­so­wa­nych w Internecie. Porównanie takie znajdziesz w tabeli 23.1.

Tabela 23.1.

Porównanie różnych formatów animacji internetowych

Format		Dźwięk	Interaktywność	Odtwarzanie potokowe	Przezroczystość	Kolory
Animowany GIF		Nie	Nie	Nie	Tak	256
Dynamiczny HTML		Nie	Tak	Tak	Tak	Miliony
Java		Tak	Tak	Tak	Nie	Miliony
Flash		Tak	Tak	Tak	W niektórych przypadkach	Miliony
Shockwave		Tak	Tak	Tak	Nie	Miliony
QuickTime		Tak	Tak	Tak	Nie	Miliony
RealPlayer		Tak	Tak	Tak	Nie	Miliony
		Przezroczystość w powyższej tabeli oznacza przezroczyste tło po umie­szcze­niu animacji w przeglądarce, która nie jest obsługiwana przez śro­dowisko edycyjne i w sam format animacji.

Z tabeli wynika, że animowany GIF jest formatem o niewielkich możliwościach. Inne for­maty obsługują interaktywność i są automatycznie odtwarzane potokowo lub sy­mu­lu­ją takie odtwarzanie za pomocą wielu plików składowych. Niektóre z nich obsługują obraz, a wiele dodaje do tego obsługę dźwięku. Co więcej - Flash umożliwia two­rzenie o bardziej złożonych animacji zapisywanych w plikach o bardzo ma­łych rozmiarach.

Dlaczego więc animowane GIF-y są tak powszechnie stosowane? Dlaczego projektanci re­zygnują z jednej lub wielu innych, wydawałoby się lepszych, metod? Odpowiedzi na te i wiele innych pytań oraz szczegółowe opisy obsługi poszczególnych formatów przez prze­glądarki internetowe znajdziesz w tabeli 23.2.

Tabela 23.2.

Obsługa formatów animacji internetowych przez przeglądarki

Format	Navigator 2 i 3 i IE 3	Navigator 4 i 6 i IE 4 i 5	Większość innych przeglądarek
Animowany GIF	Tak	Tak	Tak
Dynamiczny HTML	Nie	Tak	Nie
Java	Tak; użytkownik może ją wyłączyć	Tak; użytkownik może ją wyłączyć	Nie
Flash	Za pomocą modułu	Za pomocą modułu	Nie
Shockwave	Za pomocą modułu	Za pomocą modułu	Nie
QuickTime	Za pomocą modułu	Za pomocą modułu	Nie
RealPlayer	Za pomocą modułu	Za pomocą modułu	Nie

Gdy przyjrzysz się powyższym zestawieniem, przekonasz się, że animowany GIF wcale nie wy­pada tak źle na tle pozostałych formatów. Inne formaty może są efektowne, ale ani­mo­wany GIF jest bardziej niezawodny. Nieważne na jakiej platformie sprzętowej pra­cu­je użytkownik, animowany GIF zawsze będzie mógł być wyświetlany.

Zestaw narzędzi Fireworks
do tworzenia animacji

Tworzenie animacji skupia się wokół kilku najważniejszych narzędzi:

• Paleta Frames XE "paleta:Frames" (Klatki). Centrum zarządzania większością właściwości ani­ma­cji, w którym możesz manipulować pojedynczymi klatkami (jak reżyser edy­tu­je poszczególne klatki filmu): dodawać je, usuwać, zmieniać kolejność oraz de­fi­nio­wać czas trwania poszczególnych klatek.

	Niektóre kontrolki palety Frames - na przykład tempo animacji - znaj­du­ją się również w oknie dialogowym Export Preview.

• Paleta Layers XE "paleta:Layers" (Warstwy). Miejsce, w którym możesz zarządzać warstwami wszys­tkich klatek. Możesz organizować swoje animacje poprzez utrzymy­wa­nie obiektów wszystkich klatek na osobnych warstwach lub tworzyć warstwy współ­użytkowane przez wszystkie klatki. Warstwy współużytkowane umożli­wia­ją utworzenie tła lub statycznych obiektów, które będą wykorzystywane przez całą animację.

• Kontrolki odtwarzania. Za pomocą kontrolek podobnych do tych, jakie moż­na spotkać w magnetowidach, możesz przechodzić pomiędzy klatkami lub od­two­rzyć całą animację bezpośrednio w oknie dokumentu.

• Symbole graficzne. Fireworks umożliwia sekwencjonowanie, czyli tworzenie po­średnich kroków pomiędzy dwoma kopiami tego samego symbolu, co po­z­wala na szybkie utworzenie animacji.

• Symbole animacji. Wieloklatkowy symbol, stanowiący samodzielną animację.

Zarządzanie klatkami

Od zwykłych dokumentów Fireworks animacje odróżnia fakt, że mogą posiadać wiele kla­­tek. Zaczynają pracę z animacjami, trudno będzie Ci zrozumieć związki pomiędzy war­­stwami i klatkami dokumentu. Jednak wiedza na temat ich współdziałania jest nie­zbędna.

Klatki animacji można porównać do klatek tradycyjnej taśmy filmowej (rysunek 23.1), któ­rą możesz odtwarzać za pomocą projektora. W trakcie odtwarzania, w danej chwili na ekranie wi­docz­na jest tylko jedna klatka. Najpierw wyświetlana jest klatka z nu­me­rem 1, następnie 2, 3 itd. Dodając klatkę do dokumentu, wydłużasz taśmę filmową i za­ra­zem ca­ły film. Zmieniając kolejność klatek w palecie Frames, wyobraź sobie, że wycinasz ją z taśmy filmowej i wklejasz z powrotem w innym miejscu taśmy. Jeżeli piątą klatkę prze­niesiesz na początek filmu (przed klatkę z numerem 1), numery wszystkich klatek zos­taną zmodyfikowane tak, że klatka 5. stanie się klatką 1., klatka 1. - klatką 2. itd.

Rysunek 23.1. Klatki animacji traktuj jak klatki tradycyjnej taśmy filmowej, zaś warstwy jak kilka kawałków taśm sklejonych razem

Warstwy animacji można porównać do kilku różnych taśm filmowych sklejonych ra­zem. Gdy włączysz odtwarzanie animacji, wszystkie warstwy znajdujące się w klatce 1. zo­staną jednocześnie wyświetlone na ekranie, następnie pojawią się warstwy klatki 2., póź­niej klatki 3. itd. Podobnie jak w przypadku statycznych dokumentów Fireworks, war­stwy umożliwiają organizowanie kolejności obiektów oraz utrzymywanie różnych obiektów z dala od siebie (na odrębnych warstwach), aby można je było łatwiej edy­to­wać. Gdy dodajesz nową warstwę do dokumentu, to tak, jakbyś dodawał całą nową taś­mę filmową do istniejącego stosu taśm. Zmiana kolejności warstw w palecie Layers jest po­dobna do zmiany kolejności naklejania na siebie taśm znajdujących się w stosie.

Gdy dodajesz klatkę do swojego filmu, automatycznie uzyskuje ona ta­kie same warstwy, jak pozostałe klatki. Trzymając się me­ta­fo­ry taśmy filmowej - dodanie klatki do jednej taśmy powoduje do­da­nie jej do wszystkich pozostałych taśm. Gdy dodajesz warstwę do fil­mu, jest ona dodawana do wszystkich jego klatek. Dodanie warstwy powo­du­je utworzenie nowej taśmy filmowej o takiej samej długości, jaką ma­ją pozostałe taśmy.

Jedną z najważniejszych zalet interakcji pomiędzy warstwami i klatkami jest możliwość współ­użytkowana warstw. Zawartość współużytkowanej warstwy jest taka sama dla wszys­tkich klatek dokumentu. Nieważne jest, w której klatce edytujesz obiek­ty znajdujące się na współużytkowanej warstwie, zmiany są uwzględniane we wszystkich kla­tkach dokumentu. Jest to bardzo przydatna funkcja przy tworzeniu statycznych ele­men­tów, takich jak tła. Przyjrzymy się jej bliżej w kolejnych pod­rozdziałach.

Większość pracy związanej z tworzeniem animacji będziesz wykonywał z pomocą pa­le­ty Frames (rysunek 23.2), więc musisz ją mieć przez cały czas otwartą. Z poziomu tej pa­lety możesz dodawać, usuwać, zmieniać kolejność lub duplikować klatki. Możesz oglą­dać i edytować pojedyncze klatki, ich grupy lub wszystkie klatki dokumentu jedno­cześ­nie. Możesz kopiować lub przenosić obiekty pomiędzy poszczególnymi klatkami. Moż­na również definiować tempo dla każdej klatki znajdującej się w animowanym GIF-ie. Podobnie jak w palecie Layers, w palecie Frames również znajduje się ikona se­lek­cji, wyświetlana obok nazwy klatki, w której znajduje się zaznaczony obiekt.

Rysunek 23.2. Zarządzanie klatkami za pomocą palety Frames i jej użytecznego rozwijanego menu

Frames list — Lista klatek

Frame names — Nazwy klatek

Frame timing — Tempo klatki

Selection icon — Ikona selekcji

Options pop-up — Lista opcji

Options pop-up button — Przycisk listy opcji

Onion ... — Menu techniki „Onion skinning”

Distribute ... — Rozłóż na klatki

New/Duplicate ... — Nowe/Duplikuj klatki

Delete ... — Usuń klatki

	Podczas pracy z animacjami warto zadokować paletę Layers wraz z paletą Frames. Umożliwi to łatwe przechodzenie pomiędzy funk­cjami w obu paletach. Jeżeli masz dużo miejsca na ekra­nie, możesz obie palety umieścić obok siebie. Dopóki są one pod ręką, ich położenie nie jest istotne.

Dodawanie klatek XE "animacja:dodawanie klatek"

Rozpoczynając pracę z animacją w Fireworks, Twój dokument będzie posiadał tylko jed­ną klatkę. Oczywiście będziesz musiał to zmienić, zanim zaczniesz tworzyć jakie­kol­wiek poruszające się obiekty. Najpierw będziesz musiał w przybliżeniu założyć, ile kla­tek po­winna zawierać Twoja animacja, a następnie dodać taką liczbę klatek do do­ku­mentu. Póź­niej - w razie potrzeby - będziesz mógł dodawać lub usuwać kolejne klatki. Innym roz­wiązaniem stosowanym przy tworzeniu animacji jest rozpoczęcie od jedynie dwóch kla­tek: pierwszej i ostatniej. Po ustaleniu początkowego i końcowego stanu animacji, łat­wo będziesz mógł utworzyć zawartości wszystkich pośrednich klatek.

Aby dodać klatkę na końcu listy palety Frames, kliknij przycisk Add Frames (Dodaj klat­ki) (pusta kartka papieru ze znakiem plus) u dołu palety lub wybierz z menu polecenie InsertFrame.

Aby dodać jedną lub więcej klatek w określonym miejscu listy palety Frames:

619. Wybierz polecenie Add Frames z rozwijanego menu palety Frames.

Fireworks wyświetli okno dialogowe Add Frames (rysunek 23.3).

Rysunek 23.3. Okno dialogowe Add Frames daje możliwość precyzyjnej kontroli nad liczbą i położeniami wstawianych klatek

620. Wpisz liczbę klatek w polu dialogowym Number lub ustal ją za pomocą suwaka (maksymalnie 10 klatek .

621. Wybierz położenie wstawianych klatek. Dostępne opcje to: At the beginning (Na początku), Before current frame (Przed bieżącą klatką), After current frame (Po bieżącej klatce) i At the end (Na końcu). Kliknij przycisk OK.

Nowe klatki zostaną utworzone i dodane w zdefiniowanym miejscu palety Frames.

Nazywanie klatek

Fireworks nadaje klatkom nazwy „Frame 1” lub „Frame 2”. Takie nazwy mogą wprowadzać zamieszanie podczas tworzenia animacji i przemieszczania obiektów pomiędzy klatkami. Aby nadać klatce opisową nazwę, kliknij dwukrotnie jej nazwę w palecie Frames. Fireworks otworzy małe okno dialogowe, w którym możemy wpisać dowolną nazwę (rysunek 23.4). Po wpisaniu nowej nazwy, usuń okno dialogowe przez kliknięcie poza obszarem tego okna lub przez naciśniecie klawisza Enter (Return).

		Fireworks 4 umożliwia wprowadzanie nazw opisowych dla klatek w palecie Frames.
Rysunek 23.4. Kliknij dwukrotnie nazwę klatki, aby wprowadzić żądaną nazwę

Usuwanie klatek XE "animacja:usuwanie klatek"

Najważniejszą rzeczą, o której musisz pamiętać przy usuwaniu klatek jest to, że usu­nię­cie klatki powoduje również usunięcie wszystkich znajdujących się w niej obiektów, z wy­jątkiem tych, które wchodzą w skład warstwy współużytkowanej. Musisz za­cho­wać szcze­gólną ostrożność przy identyfikowaniu i usuwaniu właściwych klatek.

Jeśli przez przypadek usuniesz jakąś klatkę i będziesz chciał ją przy­wró­cić, wybierz z menu polecenie EditUndo lub użyj skrótu klawia­tu­ro­wego Ctrl+Z (Command+Z).

Aby usunąć klatkę, zaznacz ją w liście palety Frames i wykonaj jedną z poniższych czyn­ności:

• Kliknij przycisk Delete Frames (ikona kosza na śmieci) u dołu palety Frames.

• Przeciągnij nazwę klatki na przycisk Delete Frames u dołu palety Frames.

• Wybierz polecenie Delete Frames z rozwijanego menu palety Frames.

Zmiana kolejności klatek XE "animacja:zmiana kolejności klatek"

W czasie pracy z animacją być może będziesz chciał zmienić kolejność klatek, aby nie­któ­re z nich znajdowały się we wcześniejszej lub późniejszej części animacji.

W tym celu zaznacz wybrane klatki i przeciągnij je w górę lub w dół listy palety Fra­mes.

	Jeżeli pracowałeś wcześniej z paletą Layers, być może przyzwyczajony je­steś do tego, że po przeciągnięciu warstwy w dół lub w górę listy za­cho­wuje ona przez cały czas taką samą nazwę. Jednak zmiana kolej­noś­ci klatek spowoduje ich przenumerowanie, odzwierciedlające nowe po­ło­żenia. Pierwsza klatka animacji zawsze będzie miała nazwę Fra­me 1.

Duplikowanie klatek XE "animacja:duplikowanie klatek"

Jednym ze sposobów na zaoszczędzenie czasu jest kopiowanie sekwencji ist­nie­jących klatek i późniejsze modyfikowanie ich zawartości. Jeżeli utworzyłeś na przy­kład animację przedstawiającą wschód słońca, możesz skopiować jej wszystkie klatki i od­wrócić ich kolejność, aby otrzymać animację zachodzącego słońca. W ten sposób nie tylko zaoszczędzisz czas, który musiałbyś poświęcić na utworzenie animacji, ale tak­że otrzymasz takie same położenia słońca, jakie miało przy wschodzeniu.

Aby zduplikować pojedynczą klatkę, przeciągnij jej nazwę z listy palety Frames na przy­cisk Add Frames, który znajduje się u dołu palety Frames. Fireworks wstawi kopię klat­ki zaraz po klatce oryginalnej.

Aby zduplikować jedną lub więcej klatek i umieścić kopie w określonych położeniach w liście palety Frames:

497. Wybierz polecenie Duplicate Frames z rozwijanej listy palety Frames.

Fireworks wyświetli okno dialogowe Duplicate Frames.

	Okno dialogowe Duplicate Frames jest bardzo podobne do okna Add Fra­mes przestawionego na rysunku 22.3.

622. Wpisz numery duplikowanych klatek w polu dialogowym Number lub wybierz mak­symalnie 10 klatek za pomocą suwaka.

623. Wybierz położenie duplikowanych klatek. Dostępne opcje to: At the beginning (Na początku), Before current frame (Przed bieżącą klatką), After current frame (Po bieżącej klatce) i At the end (Na końcu). Kliknij przycisk OK.

Klatki zostaną zduplikowane, a kopie umieszczone w określonym miejscu listy palety Frames.

Animowanie obiektów XE "animacja:animowanie obiektów"

Ważną częścią tworzenia animacji jest zarządzanie wyglądem zmieniających się w cza­sie obiektów dokumentu. Jeżeli tworzysz prosty animowany wschód słońca, animacja roz­poczyna się od słońca położonego u dołu obszaru roboczego, które następnie prze­su­wa się w miarę upływu czasu (przez dziesięć kolejnych klatek) do wyższego położenia w obszarze ro­bo­czym. W tym samym czasie przesuwać się mogą także chmury, podczas gdy ziemia i niebo pozostają nieruchome.

Na pewno nie będziesz chciał rysować każdego z tych obiektów po kilka razy. Nie dość, że przysporzyłoby Ci to mnóstwo dodatkowych zajęć, to jeszcze przypuszczalnie każ­dy z obiektów byłby nieco inny. Jeśli wygląd słońca zmieniałby się w każdej klatce, zni­kłoby wrażenie ruchu, a pojawiłby się oczywisty obraz „podmieniania” obiektów.

Podczas tworzenia animacji utwórz raz wszystkie potrzebne obiekty, a następnie kopiuj lub rozkładaj je na poszczególne klatki. Następnie kopie obiektów możesz przesuwać lub modyfikować, aby uzyskać wrażenie obiektów poruszających się lub zmieniających w czasie.

Przechowywanie podobnych obiektów na ich własnych warstwach pozwoli Ci pracować je­dy­nie z wybranymi obiektami i łatwiejsze kopiowanie ich do kolejnych klatek. W przy­kła­dzie animowanego wschodu, słońce możesz przechowywać na jednej warstwie, na in­nej chmury i na jeszcze innej statyczne obiekty tła.

Kopiowanie obiektów do klatek

W większości przypadków będziesz dodawał obiekty do innych klatek poprzez ich ko­pio­wanie. Aby skopiować obiekt lub obiekty do innej klatki:

498. Zaznacz obiekt(y).

624. Wybierz polecenie Copy to Frames (Kopiuj do klatek) z rozwijanego menu pa­le­ty Frames.

Fireworks wyświetli okno dialogowe Copy to Frames (rysunek 23.5).

625. Wybierz położenie kopiowanych obiektów. Dostępne opcje to: All frames (Wszys­tkie klatki), Previous frame (Poprzednia klatka), Next frame (Następna klat­ka) lub Range (Zakres klatek), która umożliwia zdefiniowanie określonego ze­stawu klatek. Kliknij przycisk OK.

Rysunek 23.5. Użyj okna dialogowego Copy to Frames, aby skopiować obiekty do wszystkich klatek lub tylko do określonego zestawu klatek

Rozkładanie obiektów na klatki

Jeśli będziesz chciał rozłożyć grupę obiektów na klatki, wszystkie obiekty zostaną roz­ło­żone po bieżącej klatce, zgodnie z ich kolejnością w stosie. Obiekt znajdujący się naj­wy­żej w grupie pozostanie w bieżącej klatce, obiekt pod nim zostanie przeniesiony do na­stępnej klatki itd. Jeżeli rozpoczniesz pracę od pustego obszaru roboczego i utwo­rzysz trzy obiekty, na przykład kwadrat, okrąg i gwiazdę, gwiazda będzie się znaj­do­wa­ła na samym wierzchu stosu, gdyż została utworzona jako ostatnia. Jeżeli zaznaczysz te obiekty i rozłożysz je na klatki, gwiazda (która była narysowana jako ostatnia) będzie się znajdowała w ostatniej klatce animacji. Jeżeli będzie to konieczne, do dokumentu zo­staną dodane nowe klatki, aby pomieścić wszystkie obiekty. Jeśli na przykład chcesz roz­łożyć dziesięć obiektów w dokumencie posiadającym pięć klatek, zostanie dodanych pięć nowych klatek, aby pomieścić wszystkie obiekty.

Za pomocą wyżej opisanej metody możesz bardzo szybko prze­kształ­cić statyczny dokument w animację. Obiekty utworzone jako pierwsze będą znajdowały się na samym po­czątku animacji.

Aby rozłożyć wybrane obiekty na wiele klatek, zaznacz je i wykonaj jedną z poniższych czyn­ności:

• Kliknij przycisk Distribute to Frames (ikona taśmy filmowej) u dołu palety Frames.

• Wybierz polecenie Distribute to Frames z rozwijanego menu palety Frames.

• Przeciągnij ikonę selekcji (niebieski kwadrat) na przycisk Distribute to Frames.

Zarządzanie statycznymi obiektami

Fireworks upraszcza zarządzanie statycznymi obiektami animacji poprzez współużyt­ko­wa­nie warstw przez wszystkie klatki dokumentu. Jeżeli na przykład w pierwszej klatce utwo­rzysz tło animacji, możesz ustawić warstwę z tłem jako współużytkowaną, co spra­wi, że tło będzie widoczne we wszystkich klatkach dokumentu. Po ustawieniu warstwy ja­ko współużytkowanej, znajdujące się na niej obiekty możesz modyfikować w do­wol­nej klatce, a dokonane zmiany będą odzwierciedlane w pozostałych klatkach animacji. Wszys­tkie statyczne obiekty animacji wystarczy utworzyć tylko raz.

Aby zdefiniować warstwę jako współużytkowaną przez wszystkie klatki animacji:

499. Kliknij dwukrotnie w palecie Layers nazwę warstwy, która ma być współ­uży­t­kowana.

Fireworks wyświetli okno dialogowe Layer Options (Opcje warstwy).

626. Zaznacz opcję Share Across Frames i kliknij przycisk OK.

Fireworks wyświetli ostrzeżenie, że wszystkie obiekty tej warstwy, na innych klatkach, zostaną usu­nię­te. Kliknij przycisk OK, aby usunąć te obiekty i ustawić warstwę jako współ­­użytkowaną.

Aby usunąć współużytkowanie warstwy przez wszystkie klatki animacji:

500. Kliknij dwukrotnie w palecie Layers nazwę warstwy, której współużytkowanie chcesz usunąć.

Fireworks wyświetli okno dialogowe Layer Options (Opcje warstwy).

627. Usuń zaznaczenie opcji Share Across Frames i kliknij przycisk OK.

Fireworks zapyta Cię, czy zawartość warstwy chcesz pozostawić we wszys­tkich klatkach dokumentu, czy tylko w bieżącej klatce. Wybierz opcję Current, aby pozostawić zawartość warstwy tylko w bieżącej klatce. Wybierz opcję All, aby zawartość warstwy pozostawić we wszystkich klatkach dokumentu.

	Innym sposobem ustawiania współużytkowania warstwy jest wybranie war­stwy w palecie Layers i zaznaczenie lub usunięcie zaznaczenia po­le­cenia Share Layer w rozwijanym menu palety Layers.

Kontrolki animacji XE "animacja:kontrolki animacji"

W trakcie budowania animacji w Fireworks na pewno będziesz chciał ją odtworzyć, aby zo­baczyć, jak wyglądają zmiany pomiędzy klatkami. Fireworks oferuje kontrolki przy­po­minające przyciski magnetowidu, znajdujące się u  do­łu okna dokumentu, które umożliwiają podgląd animacji (rysunek 23.6).

Rysunek 23.6. Kontrolki animacji znajdujące się w oknie dokumentu Fireworks umożliwiają sterowanie wieloklatkowym dokumentem jak filmem wideo

Last ... — Przejdź do ostatniej klatki

Play/Stop button (stopped) — Odtwarzaj/Zatrzymaj odtwarzanie (zatrzymany)

First ... — Przejdź do pierwszej klatki

VCR ... — Kontrolki animacji

Next ... — Następna klatka

Previous ... — Poprzednia klatka

Current ... — Numer bieżącej klatki

Play/Stop button (playing) — Odtwarzaj/Zatrzymaj odtwarzanie (odtwarzany)

Po kliknięciu przycisku Play Fireworks odtworzy animację z wykorzystaniem tempa zde­finiowanego w palecie Frames lub zakładce Animation okna dialogowego Export Pre­view. Jeżeli nie ustawisz żadnego tempa, Fireworks będzie odtwarzał animację z przer­wą po­między klatkami wynoszącą domyślnie 0,07 sekundy. Ustawieniom opóź­nień w odtwa­rzaniu animacji przyjrzymy się w kolejnym podrozdziale.

W trakcie odtwarzania animacji przycisk Play zamieniany jest na przycisk Stop. Fire­works wyświetla również numer bieżącej klatki oraz oferuje przyciski, które umo­żli­wia­ją szybkie przejście do poprzedniej, kolejnej, pierwszej lub ostatniej klatki animacji.

	Odtwarzanie animacji możesz zatrzymać także poprzez kliknięcie w do­­wolnym miejscu okna dokumentu.

Animacja odtwarzana w oknie dokumentu jest zawsze zapętlana, niezależnie od tego, czy zapętlanie będzie włączone czy wyłączone w palecie Frames. Ustawienia zapętlania w palecie Frames mają znaczenie jedynie w eksportowanych plikach animowanych GIF-ów.

Opóźnienia w odtwarzaniu klatek

Pierwszą rzeczą do zapamiętania przy ustawianiu prędkości odtwarzania animacji jest to, że definiowane ustawienia są ostatecznie odczytywane jedynie w przybliżeniu. Pod­czas gdy Fireworks traktuje je bardzo precyzyjnie - po wyeksportowaniu animacji jako ani­mo­wa­nego GIF-a - jej tempo znajduje się w „wirtualnych rękach” oprogramowania od­twa­rza­jącego, przeważnie przeglądarki internetowej. Internet Explorer zwykle od­twa­rza animacje szybciej niż Navigator. Prędkość uzależniona jest także od szybkości kom­putera.

	Jeśli obliczane tempo odtwarzania animowanego GIF-a nie jest do­sta­tecz­nie wysokie, tempo zdefiniowane w aktualnie pobieranej animacji jest zupełnie pomijane, a każda jej klatka jest odtwarzana bezpo­śred­nio po pobraniu do komputera użytkownika. W podrozdziale „Pro­jek­towanie stron z animowanymi GIF-ami” znajdziesz kilka sztuczek do­tyczących odtwarzania pobieranych GIF-ów.

Domyślne opóźnienie w odtwarzaniu nowych klatek wynosi 7 i jest definiowane w set­nych częściach sekundy. Przykładowo, 25 oznacza ćwierć sekundy, 50 to pół se­kun­dy, zaś 200 to dwie sekundy.

Aby zmienić opóźnienie w odtwarzaniu klatek:

501. Wybierz z menu polecenie WindowFrames lub użyj skrótu klawiaturowego Shift+F2, aby wyświetlić paletę Frames.

502. Kliknij dwukrotnie czas klatki, który chcesz modyfikować. Fireworks wy­świe­tli okno edycyjne z ustawieniami opóźnienia klatki (rysunek 23.7).

503. Wpisz nową wartość w polu tekstowym Frames Delay.

Rysunek 23.7. Kliknij dwukrotnie czas klatki, aby wyświetlić okno edycyjne z ustawieniami opóźnienia w odtwarzaniu

504. Usuń zaznaczenie opcji Include when Exporting, jeśli chcesz, aby ustawienia opóź­nienia stosowane były jedynie w trakcie odtwarzania animacji w Fire­works i były pomijane przy eksporcie animowanego GIF-a.

628. Kliknij w dowolnym miejscu poza oknem edycyjnym lub wciśnij klawisz Enter (Return), aby ukryć to okno.

Jeśli do eksportu animowanego GIF-a wykorzystujesz okno dialogowe Export Preview, opóź­nienie w odtwarzaniu klatki możesz ustawić w polu tekstowym Frame Delay znaj­du­jącym się w zakładce Animation.

Technika „Onion skinning” XE "animacja:technika skóry cebuli"

W większości przypadków w oknie dokumentu wyświetlana jest tylko zawartość bie­żą­cej klatki. Zawartość kolejnych możesz obejrzeć, przechodząc z jednej klatki do drugiej, ale jest to dość kłopotliwe. Bardziej precyzyjny podgląd zmian pomiędzy klatkami za­pew­nia widok Onion Skinning, w którym możesz jednocześnie edytować wie­le różnych klatek.

	„Onion skinning” jest tradycyjną techniką animacyjną polegającą na ry­so­waniu na półprzezroczystej kalce (podobnej do skóry cebuli) i poz­wa­lającą na jednoczesne wyświetlenie wielu różnych rysunków.

Przycisk Onion Skinning znajdujący się w lewym dolnym rogu palety Frames daje do­stęp do rozwijanego menu Onion Skinning (rysunek 23.8) i możliwość wyboru wyświe­tla­nych klatek. Możesz zdefiniować dowolny zakres lub wszystkie klatki animacji.

Rysunek 23.8. Znajdujące się w palecie Frames menu Onion Skinning oferuje kilka metod wyboru jednocześnie wyświetlanych lub nawet edytowanych klatek

Onion Skinning range selector — Znacznik zakresu klatek używanych w technice „Onion Skinning”

Onion Skinning menu — Menu „Onion Skinning”

Po włączeniu techniki „Onion skinning”, wszystkie obiekty znajdujące się w bieżącej klat­ce są wyświetlane normalnie, zaś obiekty z innych klatek są lekko przyciemniane. Po włą­czeniu odtwarzania animacji za pomocą kontrolek, które znajdują się u dołu okna do­ku­mentu, technika „Onion skinning” jest chwilowo wyłączana.

Ustawianie zakresu klatek używanych w technice „Onion skinning”

Włączenie techniki „Onion skinning” i zdefiniowanie zakresu wyświetlanych klatek jest moż­liwe dzięki jednej z poniższych metod:

• Zdefiniuj zakres klatek za pomocą znacznika Onion Skinning, znajdującego się po lewej stronie palety Frames (rysunek 23.2). Jest to najszybsza metoda okre­ślania zakresów klatek, zwłaszcza w krótkich animacjach. Aby dodać do za­kresu klatki poprzednie, kliknij w pustym polu nad znacznikiem. Aby do­dać do zakresu klatki kolejne, kliknij w pustym polu pod znacznikiem. Aby za­wę­zić za­kres klatek, kliknij znacznik. Aby wyłączyć „Onion skinning”, kliknij u dołu zna­cz­nika.

• Wybierz predefiniowany zakres klatek z menu Onion Skinning w palecie Fra­mes. Aby wyświetlić bieżącą i następną klatkę, zaznacz opcję Show Next Fra­me. Aby wyświetlić klatkę bieżącą, poprzednią i następną, zaznacz opcję Be­fo­re and After. Aby wyświetlić wszystkie klatki, zaznacz opcję Show All.

• Wybierz z rozwijanego menu Onion Skinning polecenie Custom, aby wyświe­tlić okno dialogowe Onion Skinning (rysunek 23.9), które daje Ci możliwość pre­cyzyjnego definiowania wyświetlanych klatek. W polach tekstowych Before Current Frame (Przed bieżącą klat­ką) i After Current Frame (Po bieżącej klatce) wpisz liczbę klatek, które chcesz wyświetlić, oraz określ stopień krycia tych klatek za pomocą wartości Opacity. Przy wartości 0 zawartość klatek jest nie­widzialna, podczas gdy przy wartości 100 wszystkie obiekty w innych klat­kach wyświetlane są jakby znajdowały się w klatce bieżącej.

Rysunek 23.9. W oknie dialogowym Onion Skinning możesz zdefiniować zakres klatek używanych w technice Onion skinning oraz ustawić stopień krycia tych klatek

Edycja wielu klatek

Po włączeniu opcji Multi-Frame Editing możesz w oknie dokumentu zaznaczać i edy­to­wać obiekty znajdujące się w różnych klatkach. Nieważne, czy obiekty znajdują się w bie­żącej klatce i są wyświetlane „normalnie”, czy też w innej klatce, w której są przy­ciem­nione. Łatwo możesz zaznaczać wszystkie wersje określonego obiektu we wszys­tkich klatkach i przesuwać je oraz skalować, jakby były jednym obiektem.

Aby włączyć możliwość edycji wielu klatek, zaznacz opcję Multi-Frame Editing w oknie dia­logowym Onion Skinning lub w menu Onion Skinning. Aby wyłączyć edycję wielu kla­tek, usuń zaznaczenie opcji Multi-Frame Editing w oknie dialogowym Onion Skin­ning.

Ustawienia i opcje eksportu XE "animacja:ustawienia i opcje eksportu"

Animowany GIF obsługuje opóźnienia w odtwarzaniu klatek, zapętlanie i różne metody usu­wania klatek. Wszystkie te opcje znajdziesz w palecie Frames i w zakładce Ani­ma­tion okna dialogowego Export Preview.

Pierwsze ustawienie eksportu, które musisz zdefiniować dla animowanego GIF-a to jego for­mat. Wybierz z menu polecenie WindowOptimize, aby wyświetlić paletę Optimize i z rozwijanej listy formatów wybierz opcję Animated GIF (rysunek 23.10).

Rysunek 23.10. W palecie Optimize jako format eksportu wybierz Animated GIF

Jak zwykle, ostatnim krokiem przed opublikowaniem grafiki w Internecie jest jej „od­chu­dzenie”. Wszystkie zasady dotyczące eksportowania zwykłych statycznych GIF-ów
sto­sują się również do GIF-ów animowanych. Zredukowanie liczby kolorów powoduje zmniej­szenie rozmiaru pliku, a zdefiniowanie przezroczystości ułatwia połączenie gra­fi­ki z tłem przeglądarki, gdy animowany GIF staje się częścią strony WWW.

	Więcej o specyficznych dla animowanego GIF-a opcjach eksportu do­wiesz się z rozdziału 15.

Usuwanie klatek

Oprócz opcji oferowanych dla zwykłego GIF-a, animowany GIF ma dodatkową funk­cję, która umożliwia redukowanie rozmiaru pliku - usuwanie klatek. W większości przy­padków możesz wykorzystywać domyślne ustawienia usuwania klatek, aby two­rzyć bardzo małe animowane GIF-y. Poznanie ustawień eksportu pozwoli Ci, w za­leż­noś­ci od typu tworzonej animacji, zaoszczędzić kilka kilobajtów.

Opcje usuwania klatek dostępne są jedynie w menu Frame Disposal znajdującym się w za­kładce Animation okna dialogowego Export Preview. Aby otworzyć okno dia­lo­go­we Export Preview, wybierz z menu polecenie FileExport Preview. Wybierz w nim jed­ną z następujących opcji:

• Unspecified (Nieokreślona). Fireworks automatycznie wybierze metodę usu­wa­nia dla każdej klatki animacji. Jest to domyślne ustawienie, które w więk­szości przypadków pozwala na tworzenie animowanych GIF-ów o bardzo ma­łych roz­miarach.

• None (Żadna). Nakłada każdą klatkę na wierzch poprzedniej klatki. Najpierw wy­świetlana jest pierwsza klatka, następnie nad nią dodawana jest kolejna, póź­niej jeszcze jedna itd. Jest to działanie odpowiednie dla małych, statycz­nych obiektów dodawanych nad dużym tłem. Technika ta działa dobrze na przy­kład w animacjach, w których przez cały czas odtwarzania animacji wy­świe­tlane jest statyczne logo.

• Restore to Background (Przywróć do tła). Wyświetla zawartość każdej nowej klatki nad kolorem tła. Używana jest na przykład do przesuwania obiektów w prze­zroczystych animowanych GIF-ach.

• Restore to Previous (Przywróć do poprzedniej). Wyświetla zawartość nowej klat­ki nad zawartością klatki poprzedniej. Używana jest na przykład przy prze­su­waniu obiektów po obrazku tła.

Oprócz ustawień dostępnych w menu Frame Disposal, istnieją jeszcze dwie opcje w du­żym stopniu wpływające na rozmiary plików:

• Auto Crop (Automatyczne kadrowanie). Fireworks porównuje każdą klatkę ani­macji z klatką poprzednią i usuwa z niej wszystko poza zmieniającym się ob­szarem. Redukcja rozmiaru pliku spowodowana jest tym, że informacje o każ­dym animowanym GIF-ie zapisywane są tylko raz. Można w ten sposób unik­­nąć sytuacji, w których na przykład niebieska plama znajdująca się w okre­ślonym położeniu jest zapisywana osobno w każdej klatce animacji.

Przy eksporcie animowanego GIF-a do edycji w innej aplikacji, za­le­ca­ne jest wyłączenie opcji Auto Crop. Niektóre typy aplikacji niezbyt dob­rze obsługują ten rodzaj optymalizacji i mogą w nich powstawać różne zniekształcenia. Jedną z takich aplikacji jest Macromedia Director 7.

• Auto Difference (Automatyczna różnica). Przekształca niezmieniające się pik­se­le w obszarze Auto Crop na przezroczystość, co niekiedy umożliwia jeszcze więk­sze zredukowanie rozmiaru pliku.

Opcje Auto Crop i Auto Difference mogą być włączane i wyłączane za pomocą roz­wi­ja­ne­go menu palety Frames lub w zakładce Animation okna dialogowego Export Preview.

Zapętlanie

Zapętlanie jest funkcją dość prostą w stosowaniu. Każdy animowany GIF może być od­twa­rzany dowolną ilość razy lub ustawiany na ciągłe zapętlanie, a to oznacza, że nigdy nie będzie zatrzymywany. Jeżeli ostatnia klatka animacji jest dobrze wyglądającym punk­tem końcowym, najlepszym rozwiązaniem jest ustawienie animacji na zapętlanie skoń­czoną liczbę razy.

Przy tworzeniu animowanych rolloverów najlepszym rozwiązaniem jest ustawienia „wiecz­nego” zapętlania. Umieść kursor nad animowanym GIF-em, który jest od­twa­rza­ny tylko jeden raz, a być może stwierdzisz, że nie jest on odtwarzany w ogóle lub tylko poło­wicznie. Różne przeglądarki internetowe inaczej traktują przeładowywane animo­wa­ne GIF-y.

Aby zmienić ustawienia zapętlania animowanego GIF-a, wykonaj jedną z poniższych czyn­ności:

• Wybierz opcję No Looping (Brak zapętlania), określoną liczbę lub opcję Fo­rever (Ciągłe zapętlanie) z menu Looping w palecie Frames (rysunek 23.11).

Rysunek 23.11. Z menu Looping w palecie Frames wybierz opcje zapętlania animacji

• Zaznacz przycisk Play Once (Odtwarzaj tylko raz) lub Loop (Zapętlaj) w za­kład­ce Animation okna dialogowego Export Preview, podczas eksportowania ani­macji. Jeśli wybierzesz przycisk Loop, wybierz także opcję Forever (Ciągłe) lub liczbę z rozwijanej listy Number of Loops (Liczba pętli). Liczbę pętli mo­żesz też wpisać bezpośrednio w polu tekstowym.

Eksportowanie animacji za pomocą okna dialogowego Export Preview

Mimo że większość opcji eksportu animowanych GIF-ów możesz zdefiniować w pale­tach Frames i Optimize, wszystkie te ustawienia znajdziesz również w innym miejscu
- w ok­nie dialogowym Export Preview, oferującym bardziej wiarygodny podgląd animacji niż ten dostępny w oknie dokumentu.

Aby wyeksportować animację za pomocą okna dialogowego Export Preview:

505. Wybierz z menu polecenie FileExport.

Fireworks wyświetli okno dialogowe Export Preview (rysunek 23.12).

Rysunek 23.12. W zakładce Animation okna dialogowego Export Preview znajdują się wszystkie ustawienia eksportowanej animacji

Frame View ... — Pokaż/Ukryj klatkę

Animation tab — Zakładka Animation

Frame Disposal ... — Menu z opcjami usuwania klatek

Frame Delay ... — Pole wartości opóźnienia klatki

Play Once ... — Odtwarzaj tylko raz

Loop button — Przycisk pętli

Number of ... — Lista rozwijana z liczbami powtórzeń animacji

VCR controls — Kontrolki odtwarzania animacji

629. W zakładce Options z rozwijanej listy formatów plików wybierz Animated GIF.

630. W zakładkach Options i File zdefiniuj ustawienia, dostępne również dla sta­tycz­nych GIF-ów, takie jak Bit Depth (Głębia bitowa) i Transparency (Prze­zro­czystość).

631. W zakładce Animation zaznaczaj kolejno wszystkie klatki animacji i wpisz dla każ­dej z nich żądaną wartość (w setnych częściach sekundy) w polu teks­to­wym Frame Delay (Opóźnienie klatki). Aby klatki były wyświetlane naj­szyb­ciej, jak to tylko możliwe, wartość Frame Delay powinna wynosić 0. Obejrzyj usta­wienia tempa animacji za pomocą kontrolek odtwarzania, które znajdują się pod oknem Preview w prawym dolnym rogu okna dialogowego Export Preview.

	Więcej o ustawieniach optymalizacji eksportowanych GIF-ów znaj­dziesz w rozdziale 15.

632. Jeśli chcesz, możesz użyć przycisku Frame View/Hide (ikona oka), który znaj­du­je się po lewej stronie nazwy każdej z klatek, aby ukryć lub wyświetlić daną klat­kę. Jeżeli klatka będzie ukryta, nie zostanie wyeksportowana i nie będzie wy­świetlana w animacji odtwarzanej w Fireworks.

	Ustawienie Frame Delay (Opóźnienie klatki) jest zapisywane wraz z eks­portowanym plikiem. Fireworks będzie korzystał z tego usta­wie­nia w czasie odtwarzania animacji w oknie dokumentu z wyko­rzys­ta­niem kontrolek animacji.

633. Określ metodę usuwania klatek za pomocą odpowiedniej opcji z rozwijanego me­nu Frame Disposal (przycisk z koszem na śmieci, który znajduje się obok po­la Frame Delay).

634. Za pomocą przycisków Loop i Play Once określ, czy animacja ma być za­pęt­la­na, czy nie. Jeśli klikniesz przycisk Loop, musisz wybrać z listy rozwijanej Num­ber of Loops liczbę powtórzeń animacji. Możesz wybrać liczbę powtórzeń z listy, wpisać inną liczbę w polu tekstowym lub wybrać opcję Forever, aby ani­macja była zapętlana w nieskończoność. Kliknij przycisk Next (Dalej).

Fireworks wyświetli okno dialogowe Export.

635. Określ ścieżkę dostępu i nazwę eksportowanego animowanego GIF-a, a na­stęp­nie kliknij przycisk Save.

Animacja zostanie wyeksportowana jako animowany GIF.

Wykorzystywanie animowanych GIF-ów w projektach internetowych

Jedną z najważniejszych zalet animowanych GIF-ów jest fakt, że można je umieszczać na stronach WWW prawie tak łatwo jak zwykłe obrazki w formacie GIF. W tym pod­roz­dziale znajdziesz opisy kilku metod wstawiania animowanych GIF-ów na strony WWW, pozwalających na tworzenie kompletnych prezentacji.

Animowanie obrazków tła

Przeglądarki internetowe (wersje 4 i późniejsze) mogą wyświetlać animowane GIF-y ja­ko obrazki tła. Za pomocą małego animowanego GIF-a można wypełnić całą stronę WWW, tworząc w ten sposób bardzo dynamiczną prezentację o małym rozmiarze fi­zycz­nym pliku.

Wielokrotne wykorzystywanie animacji

Przeglądarka musi pobrać animowanego GIF-a tylko jeden raz. Jeśli wykorzystasz ani­mację ponownie na tej samej lub innej stronie, będzie ona odtwarzana z pamięci pod­ręcznej przeglądarki. Funkcja ta jest szczególnie przydatna w przypadku wyko­rzys­ty­wania animowanych logo i przycisków.

Skalowanie animacji

Za pomocą atrybutów height i width znacznika <img> można wyświetlać animacje o więk­szych rozmiarach bez zwiększania rozmiarów ich plików. Niewielka utrata jakoś­ci występująca po przeskalowaniu obrazka do podwójnych rozmiarów (zmniejszasz wów­czas o połowę rozdzielczość obrazka) jest niewielką ceną za znaczne zwiększenie wrażenia jakie robi duża animacja. Jeżeli tworzysz na przykład animację o wymiarach 200×200 pik­seli, możesz na stronie WWW podwoić jej rozmiary za pomocą następującego znacz­nika <img>:

<img src="examaple.gif" width="400" height="400">

Do dostosowywania rozmiarów animacji możesz także wykorzystać procentowe war­toś­ci jej szerokości i wysokości. W jednych animacjach działanie takie sprawdza się le­piej niż w innych, ale również umożliwia zaoszczędzenie wielu kilobajtów. Ustaw atry­bu­ty width i height na 100%, aby animacja wypełniła całe okno przeglądarki. Znacz­nik <img> wyglądałby wówczas mniej więcej tak:

<img src="example.gif" width="100%" height="100%">

Wykorzystywanie tła przeglądarki w obrazku

Jednym z ograniczeń animowanych GIF-ów jest mała liczba kolorów obsługiwanych przez ten format i wysoka cena, jaką trzeba zapłacić za każdy dodatkowy kolor. Możesz jed­nak dać swojej animacji pełnokolorowe tło poprzez nadanie jej przezroczystości i umie­szczenie jej nad tłem stworzonym z obrazka w formacie JPG. Rozmiar całej pre­zen­tacji pozostanie niewielki, gdyż łączone są ze sobą zalety formatu GIF (animacja i prze­zroczystość) oraz formatu JPEG (wiele kolorów przy małym rozmiarze pliku).

Wstępne ładowanie animacji

Istnieją dwie metody wstępnego ładowania animowanych GIF-ów, zapobiegające „ska­ka­niu” odtwarzania animacji w trakcie ich pobierania z Internetu:

• Zastosowanie atrybutu lowsrc znacznika <img>. Do czasu załadowania ca­łe­go obrazka przeglądarka będzie wyświetlała obrazek o małej jakości wska­zy­wany znacznikiem lowsrc. Poniższy wiersz kodu mówi przeglądarce, aby w trakcie ładowania pliku animated. gif wyświetlała spacer.gif, a następnie za­stą­piła spacer.gif załadowanym plikiem animated.gif:

<img src="animated.gif" lowsrc="spacer.gif" width="200" height="200">

Plik spacer.gif. jest przezroczystym obrazkiem o wymiarach 1×1 piksel, uży­wa­nym przez Fireworks do rozmieszczania grafiki w tabelach. Będziesz miał kil­ka kopii takich obrazków, jeśli choć raz eksportowałeś plastrowane obrazki z Fire­­works. Gdy nie masz ani jednego, utwórz obrazek o wymiarach 1×1 pik­sel z prze­zroczystym obszarem roboczym i wyeksportuj go. Plik taki ma bar­dzo ma­łe rozmiary, więc nie wpłynie na rozmiar pliku całej strony WWW. Obrazek jest także przezroczysty, więc do czasu rozpoczęcia animacji będzie widać przez niego kolory tła.

	Internet Explorer nie obsługuje atrybutu lowsrc znacznika img.

• Zastosowanie behawiora Swap Image do zamieniania statycznego obrazka spacer.gif za pomocą animacji. Zmień zdarzenie uruchamiające behawior Swap Ima­ge na onLoad. Behawior zostanie uruchomiony po załadowaniu całej za­war­tości strony i statyczny obrazek zostanie zastąpiony pobranym z Internetu ani­mowanym GIF-em.

	Więcej informacji o behawiorach Fireworks znajdziesz w rozdziale 21.

Animowane rollovery XE "animacja:animowane rollovery"

Zastąpienie stanu Over rollovera za pomocą animacji o takich samych wymiarach poz­wa­la uzyskać bardzo ciekawe rezultaty. Gdy użytkownik umieści kursor nad przyciskiem, roz­po­czy­na się odtwarzanie animacji. Po usunięciu kursora z obszaru przycisku animacja jest zatrzy­mywana.

	Niektóre przeglądarki mają kłopoty z odtwarzaniem złożonych animacji GIF w rolloverach. Najlepiej sprawdzają się małe, proste animacje z usta­wionym ciągłym zapętlaniem.

Aby utworzyć prosty animowany rollover:

506. Utwórz rollover zawierający przynajmniej trzy stany (Up, Over i Down), a na­stęp­nie wyeksportuj jako GIF. (Rollover zawierający tylko dwa stany będzie ra­czej skakał niż się poruszał.) Zwróć uwagę na nazwę pliku eksportowanego przez Fireworks stanu Over. Będzie to nazwa w stylu _r2_c2_f2, gdzie f2 oznacza dru­gą klatkę, w której utworzyłeś stan Over.

	Szczegółowe informacje o tworzeniu rolloverów znajdziesz w rozdziale 21.

Po wyeksportowaniu pliku jako rollover, musisz go wyeksportować ponownie jako animowany GIF. Poszczególne klatki, w których znajdowały się wszys­tkie stany rollovera, zostaną przekształcone na klatki animacji.

636. Aby wyeksportować plik jako animowany GIF, wybierz z menu polecenie FileExport Preview.

Fireworks wyświetli okno dialogowe Export Preview.

637. Z listy formatów znajdującej się w zakładce Options wybierz opcję Ani­ma­ted GIF.

638. Kliknij przycisk Loop w zakładce Animation, wybierz opcję Forever i kliknij przy­cisk Next.

Fireworks wyświetli okno dialogowe Export.

639. Z rozwijanej listy Slicing wybierz opcję No Slicing.

640. Z rozwijanej listy HTML Style wybierz opcję None.

641. Zaznacz plik reprezentujący stan Over Twojego rollovera i kliknij przycisk Save, aby pod taką samą nazwą zapisać animowanego GIF-a.

Fireworks zapyta Cię, czy chcesz zastąpić plik oryginalny. Kliknij przycisk Yes.

Gdy otworzysz utworzony przez Fireworks plik HTML, zobaczysz, że umieszczenie kur­sora nad przyciskiem spowoduje odtworzenie stanów Up, Over i Down rollovera.

	Możesz również utworzyć animowanego rollovera, którego animacja bę­dzie zatrzymywana po umieszczeniu nad nim kursora. Za pomocą ani­macji zastąp w tym celu obrazek f1, a nie f2. Animacja zostanie uru­chomiona po załadowaniu strony WWW i zatrzymana po umiesz­cze­niu kursora nad przyciskiem.

Plastrowanie animacji

W pracy z animacjami możesz wykorzystywać wszystkie narzędzia Fireworks służące do plastrowania.

	W palecie Object wybierz dla wszystkich statycznych plastrów animacji format GIF, JPEG, PNG lub inny żądany format. Ustaw opcje eks­por­to­wa­nych plastrów na Export Defaults, a następnie wybierz Animated GIF jako format eksportu dla całego dokumentu.

Oto niektóre koncepcje przydatne przy plastrowaniu animacji:

• Dołączanie dodatkowych kolorów: Utwórz plastry z pełnokolorowych, sta­tycz­nych obszarów, a następnie wyeksportuj je jako obrazki JPEG lub PNG. Ani­macja będzie posiadała wówczas obszary 24-bitowego koloru.

• Dodawanie interakcji: Zastąp puste plastry animowanego GIF-a za pomocą ele­mentów formularzy HTML, takich jak listy opcji lub przyciski opcji.

	Więcej informacji o plastrowaniu obrazków w Fireworks znajdziesz w roz­dziale 20.

Sekwencjonowanie XE "animacja:sekwencjonowanie" symboli graficznych

Animacje tworzone w Fireworks możesz rozwijać poprzez umieszczanie w nich sym­bo­li graficznych. Symbole są wielokrotnie wykorzystywanymi obiektami, umieszczanymi w bi­bliotekach Fireworks. Kopie symboli zlokalizowane w obszarze roboczym na­zy­wa­ne są „In­stances". Posiadają one łącza z symbolami oryginalnymi, więc zmodyfi­ko­­wa­­nie określonych właściwości symbolu powoduje zastosowanie tych zmian we wszys­tkich jego kopiach.

	Aby dobrze zrozumieć zagadnienia opisywane w kolejnych pod­roz­dzia­łach, musisz mieć podstawowe wiadomości na temat symboli. Więcej o symbolach graficznych dowiesz się z rozdziału 17.

Dwie lub więcej kopii tego samego symbolu może być automatycznie sekwen­cjo­no­wa­ne przez Fireworks. Sekwencjonowanie jest terminem używanym w animacji i ozna­cza­ją­cym generowanie pośrednich klatek pomiędzy dwoma obrazkami, w celu utwo­rze­nia ła­godnego przejścia jednego obrazka w inny. Wystarczy, że utworzysz w Fireworks po­cząt­kowy i końcowy punkt sekwencji, a program automatycznie utworzy wszystkie kro­ki pośrednie. Każda nowo tworzona kopia jest lekko modyfikowana w stosunku do po­przed­niej, co powoduje powstanie efektu ewoluowania pierwszej kopii do ostatniej. Mo­żesz również sekwencjonować więcej niż dwie kopie (rysunek 23.13). W takim przy­padku o każdej kopii powinieneś myśleć jako o kluczowej klatce animacji.

Rysunek 23.13. Każda kopia jest klatką kluczową animacji. Fireworks automatycznie utworzy wszystkie pośrednie obiekty

Original — Kopia oryginalna

Sekwencjonowanie można naturalnie wykorzystywać do symulowania ruchu, ale sek­wen­cjonując właściwości obiektów można również zmieniać je w czasie. Jeśli prze­ska­lu­jesz kopię do większych rozmiarów i będziesz ją sekwencjonował z inną kopią o niezmienionych wymiarach, sekwencjonowane kopie będą skalowane w celu uzy­ska­nia płynnego przejścia pomiędzy nimi (rysunek 23.13). Wszystkie właściwości kopii, które można modyfikować, mogą być także sekwencjonowane. Oto te właś­ciwości:

• Przekształcenia, takie jak zmiana szerokości, wysokości lub przekrzywienie wy­­ko­nywane narzędziami transformacji dostępnymi w podmenu ModifyTransform.

Fireworks zawsze sekwencjonuje dwie lub więcej kopii tego sa­me­go symbolu, niemożliwe jest więc sekwencjonowanie kształtów, po­nie­waż kształty kopii zawsze są takie same. Jeżeli chcesz sek­wen­cjo­no­­wać kształty obiektów, możesz utworzyć przejście w programie Ma­cro­media FreeHand, a następnie zaimportować je do Fireworks i roz­ło­żyć na klatki. Sekwencjonowanie kształtów możesz wykonać również w apli­kacji Macromedia Flash, zapisać rezultat jako dokument Adobe Illu­stratora i zaimportować go do Fireworks z zachowaniem informacji o wektorach.

• Krycie i tryby mieszania ustawiane w palecie Object.

• Live Effects. Jeżeli do wszystkich kopii zastosowany jest ten sam efekt, mo­żesz sekwencjonować jego właściwości. Jeśli chciałbyś, aby obiekt nie­po­sia­dający na początku żadnego efektu został zamieniony na obiekt zmo­dy­fi­ko­wa­ny efektem, musisz wyzerować ustawienia efektu pierwszej kopii, zaś dla drugiej kopii zdefiniować większe wartości parametrów efektu.

Fireworks zawsze wykonuje sekwencjonowanie w kierunku od obszaru roboczego: naj­pierw bierze pod uwagę obiekty znajdujące się najniżej w stosie, na końcu zaś obiekty, któ­re są na samym wierzchu (rysunek 23.14). Jeżeli sekwencjonujesz więcej niż dwa obiek­ty, najpierw dostosuj ich kolejność w stosie.

Rysunek 23.14. Po sekwencjonowaniu cztery kopie stają się jedną animacją. Zwróć uwagę, że Fireworks wykonuje sekwencjonowanie zgodnie z kolejnością obiektów w stosie. Zaczyna od obiektów znajdujących się najbliżej obszaru roboczego, zaś na końcu sekwencjonuje obiekty, które są na samym wierzchu

Original — Kopia oryginalna

	Nie myśl, że obiekty są sekwencjonowane od lewej do prawej strony ob­szaru roboczego. Kierunek sekwencjonowania determinowany jest ko­lejnością obiektów w stosie.

Po ustaleniu właściwej kolejności w stosie sekwencjonowanych obiektów, musisz rów­nież zdecydować, ile kroków pośrednich powinien utworzyć Fireworks pomiędzy po­szcze­gól­nymi obiektami. Ponownie przyjrzyj się rysunkowi 23.13. W tym sekwen­cjo­no­waniu wykorzystane zostały trzy kroki, więc Fireworks pomiędzy oryginalnymi kopiami utworzy trzy obiekty pośrednie.

Do tej pory sekwencjonowaliśmy obiekty i tworzyliśmy pojedynczą klatkę przedsta­wia­ją­cą obiekty rozłożone na całym obszarze roboczym. Zazwyczaj jednak, aby utworzyć praw­dziwą animację, będziesz musiał rozłożyć sekwencjonowane obiekty do różnych kla­tek. Możesz to zrobić w trakcie sekwencjonowania lub w dowolnym momencie za­zna­czyć sekwencjonowane obiekty i kliknąć w palecie Frames przycisk Distribute to Fra­mes. Fireworks rozłoży obiekty na klatki, rozpoczynając od obiektu znajdującego się na spodzie stosu, czyli tak samo jak wykonywane jest sekwencjonowanie. Zacho­wa­na zostanie więc właściwa kolejność obiektów.

Aby sekwencjonować kopie:

507. Utwórz obiekt lub grupę obiektów, a następnie przekształć je na symbol. Za­znacz w tym celu obiekt i wybierz z menu polecenie InsertConvert to Sym­bol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przy­cisk OK. Obiekt zostanie przekształcony na symbol i zapisany w biblio­te­ce. W obszarze roboczym pozostanie kopia tego symbolu.

508. Wybierz z menu polecenie EditDuplicate lub użyj skrótu klawiaturowego Ctrl+Alt+D (Command+Option+D), aby utworzyć nową kopię. Duplikat kopii jest również kopią. Pamiętaj, że kopia będzie się znajdowała wyżej w sto­sie obiektów niż oryginał.

642. Umieść duplikat kopii w miejscu, w którym ma się kończyć sekwencja.

643. Zaznacz obie kopie, rysując wokół nich ramkę selekcji lub klikając je ko­lej­no z wciśniętym klawiszem Shift.

644. Wybierz z menu polecenie ModifySymbolTween Instances.

Fireworks wyświetli okno dialogowe Tween Instances (rysunek 23.15).

Rysunek 23.15. W oknie dialogowym Tween Instances ustaw liczbę operacji pośrednich sekwencji i określ, czy chcesz rozłożyć obiekty na klatki

645. Wpisz liczbę etapów sekwencjonowania. Ustawienie trzech kroków spowoduje utwo­rzenie przez Fireworks trzech nowych obiektów pomiędzy wszystkimi kopiami ory­ginalnymi.

646. Zaznacz opcję Distribute to Frames, aby rozłożyć sekwencjonowane obiekty na klat­ki i przekształcić je w animację. Kliknij przycisk OK.

Fireworks utworzy nowe obiekty, a Ty będziesz miał błyskawicznie utworzoną ani­mację.

Technika Fireworks: sekwencjonowanie Xtra

W przeciwieństwie do Live Effects, rozszerzenia Xtra nie można sekwencjonować, gdyż są one stosowane bezpośrednio jedynie do obiektów bitmapowych. Zastosowanie Xtra do po­łączonego obiektu powoduje zerwanie połączenia i przekształcenie obiektu na zwy­kły. Możesz jednak używać sekwencjonowania do szybkiego tworzenia animacji, w któ­rych w każdej klatce zmieniane są jedynie ustawienia Xtra.

W naszym przykładzie użyłem Xtra o nazwie Fire, które jest częścią pa­kietu Eye Candy produkcji firmy Alien Skin. Fire jest dostępny zarówno w wersji Eye Candy 3.1, jak i Eye Candy 4000. Jeśli nie posiadasz tego pa­kietu, użyj jednego z filtrów Eye Candy 4000 LE wbudowanych do Fire­works 4 lub innego Xtra, których wiele znajdziesz w Internecie. Więcej in­formacji o rozszerzeniach Xtra i pakiecie Eye Candy 4000 znajdziesz w roz­dziale 12.

Aby animować Xtra w Fireworks:

509. Utwórz obiekt lub obiekty, do których będziesz chciał stosować Xtra i prze­kształć je na symbol z wykorzystaniem polecenia InsertConvert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przy­cisk OK. Symbol zostanie umieszczony w bibliotece, zaś jego kopia w ob­sza­rze roboczym.

510. Zaznacz kopię i utwórz jej kolejną kopię bezpośrednio nad oryginałem za pomocą po­le­cenia EditClone lub skrótu klawiaturowego Ctrl+Shift+D (Com­mand +Shift+D).

647. Zaznacz obie kopie, rysując wokół nich ramkę selekcji. Jeśli obiekty te są je­dynymi obiektami Twojego dokumentu, możesz je szybko zaznaczyć za po­mo­cą polecenia EditSelect All lub skrótu klawiaturowego Ctrl+A (Com­mand+A).

648. Utwórz sekwencjonowane kopie pomiędzy dwoma istniejącymi kopiami za pomocą polecenia ModifySymbolTween Instances.

Fireworks wyświetli okno dialogowe Tween Instances.

649. Ustaw małą liczbę operacji, na przykład 5.

650. Usuń zaznaczenie opcji Distribute to Frames i kliknij przycisk OK.

Otrzymasz stos identycznych obiektów, do których zastosujemy Xtra, zmieniając nieco ustawienia, aby każ­dy obiekt wyglądał inaczej.

651. Zaznacz wszystkie kopie, rysując za pomocą myszy otaczającą je ramkę selekcji.

652. Wybierz z menu polecenie XtrasEye Candy 4000Fire.

Fireworks wyświetli okno dialogowe Fire dla pierwszej kopii.

653. Zdefiniuj żądane ustawienia i kliknij przycisk OK.

Fireworks wyświetli okno dialogowe Fire dla drugiej kopii.

654. Kontrolki efektu będą znajdowały się w takich samych położeniach, w jakich zo­stawiłeś je przy ustawianiu parametrów efektu dla pierwszej kopii. Zmo­dy­fikuj nieco wartości, aby utworzyć różnicę w wyglądzie kopii. Kliknij przycisk OK.

Fireworks wyświetli okno dialogowe Fire dla trzeciej kopii.

655. Kontynuuj modyfikowanie ustawień efektu w każdym wyświetlanym oknie dia­logowym, dopóki nie zdefiniujesz parametrów dla wszystkich kopii.

W dowolnej chwili możesz w oknie dialogowym Xtra kliknąć przycisk Can­cel, aby anulować stosowanie Xtra do wszystkich kopii.

656. Utrzymując zaznaczenie wszystkich kopii, kliknij znajdujący się w palecie Fra­mes przycisk Distribute to Frames (ikona taśmy filmowej).

Wszystkie kopie zostaną rozłożone na klatki, aby utworzyć animację taką, jak przed­stawiona na rysunku 23.16. Możesz obejrzeć utworzoną animację za pomocą kon­tro­lek dostępnych u dołu okna dokumentu. Możesz także wybrać z menu polecenie FileExport Preview i obejrzeć ani­ma­cję w oknie dialogowym Export Preview lub sprawdzić jej działanie w przeglądarce in­ter­netowej za pomocą polecenia FilePreview in Browser.

Rysunek 23.16. Przedstawiona na rysunku animacja palącej się czaszki pracuje w oparciu o zmiany parametrów efektu Fire zastosowanego do wszystkich kopii

Technika Fireworks: sekwencjonowanie głębi

Szybkim i przydatnym efektem, który możesz utworzyć, sekwencjonując kopie jest trój­­wymiarowa głębia, przy której obiekty wyglądają tak, jakby „wylatywały” z obszaru ro­­boczego.

Aby utworzyć efekt głębi za pomocą sekwencjonowanych kopii:

511. Utwórz obiekt lub grupę obiektów, z którymi będziesz pracował, a następnie prze­kształć je na symbol za pomocą polecenia InsertConvert to Symbol. Wpisz nazwę symbolu w oknie dialogowym Symbol Properties i kliknij przy­cisk OK. Symbol zostanie umieszczony w bibliotece, zaś jego kopia pozo­sta­nie w obszarze roboczym.

657. Umieść kopię w pobliżu górnej krawędzi obszaru roboczego.

658. Wybierz z menu polecenie EditClone lub użyj skrótu klawiaturowego Ctrl +Shift+D (Command+Shift+D), aby utworzyć kolejną kopię dokładnie nad pierwszą.

659. Przytrzymaj wciśnięty klawisz Shift i użyj klawisza ze strzałką w dół, aby prze­su­nąć nową kopię w dół bez przemieszczania w prawo lub w lewo. Aby utwo­rzyć realistycznie wyglądający efekt głębi, najlepiej przesunąć kopię o kilkaset pikseli.

660. Utrzymując zaznaczenie kopii, wybierz z menu polecenie ModifyTran­s­formNumeric Transform.

Fireworks wyświetli okno dialogowe Numeric Transform (Przekształć nu­me­rycznie).

661. Wybierz z rozwijanej listy pozycję Scale (Skalowanie), zaznacz opcję Scale Attri­butes (Skaluj atrybuty) oraz Constrain Proportions (Zachowaj proporcje) i wpisz wartość 30 w polu tekstowym, aby przeskalować kopię do 30% jej ory­ginalnych rozmiarów. Kliknij przycisk OK.

662. Kliknij dwukrotnie kopię i wpisz wartość 10 w znajdującym się w palecie Object polu tekstowym Opacity, aby zmniejszyć krycie kopii do 10%.

663. Wybierz z menu polecenie ModifyArrangeSend to Back lub użyj skrótu kla­wia­turowego Ctrl+Shift+strzałka w dół (Command+Shift+strzałka w dół), aby przesunąć kopię na spód stosu.

664. Wciśnij klawisz Shift i klikaj kolejno kopie, aby je zaznaczyć. Jeśli są one je­dynymi obiektami w dokumencie, możesz użyć polecenia EditSelect All lub skrótu klawiaturowego Ctrl+A (Command+A).

665. Wybierz z menu polecenie ModifySymbolTween Instances.

Fireworks wyświetli okno dialogowe Tween Instances.

666. Zdefiniuj liczbę kroków, jakie mają być utworzone pomiędzy kopiami, usuń zaznaczenie opcji Distribute to Frames i kliknij przycisk OK.

Fireworks wykona sekwencjonowanie kopii.

	Jeśli będziesz chciał zmodyfikować liczbę kroków tworzonych w sek­wen­cjonowaniu, możesz wybrać polecenie EditUndo, a następnie pow­tórzyć polecenie dziesiąte i jedenaste.

667. Jeżeli chcesz, możesz zaznaczyć oryginalną kopię i wyróżnić ją poprzez za­sto­sowanie efektu blasku lub wewnętrznego fazowania.

Obiekty będą wyglądały teraz, jakby „wylatywały” z obszaru roboczego (rysunek 23.17).

Rysunek 23.17. Fireworks utworzy za pomocą sekwencjonowania kroki pośrednie pomiędzy wyższą i niższą kopią. Do wyższego obiektu został zastosowany efekt Glow (Blask), aby wyróżnić go z tła
		Aby przekształcić utworzony efekt głębi na animację, zaznacz wszys­tkie kopie, rysując wokół nich ramkę selekcji (jeśli są one jedy­ny­mi obiektami Twojego dokumentu, możesz też użyć polecenia EditSelect All) i kliknij przycisk Distribute to Frames w palecie Fra­mes. Obiekty bę­dą animowane tak, jakby „wylatywały” prosto na użyt­kownika.

Technika Fireworks: rozjaśnianie i ściemnianie

Rozjaśnianie i ściemnianie obiektów jest bardzo często stosowanym efektem, łatwym do wykonania w Fireworks. Rozjaśnianie lub ściemnianie obiektów można uzyskać po­przez sekwencjonowanie dwóch kopii, które znajdują się w tych samych poło­że­niach, ale różnią się wartościami krycia. Krycie jednej z nich wynosi 0%, zaś drugiej
- 100%. To czy obiekt będzie rozjaśniany, czy też ściemniany zależy od ich kolejności w sto­sie. W tym rozdziale utworzymy animację, w której obiekty są najpierw ściem­nia­ne, a następnie rozjaśniane. Później następuje zapętlenie, więc obiekt jest stale rozjaś­nia­ny i ściemniany.

Aby rozjaśniać i ściemniać obiekt:

512. Utwórz obiekt lub grupę obiektów, zaznacz je i przekształć na symbol za po­mo­cą polecenia InsertConvert to Symbol. Wpisz nazwę symbolu w oknie dia­lo­gowym Symbol Properties i kliknij przycisk OK. Symbol zostanie zapisany w bibliotece, zaś jego miejsce w dokumencie zajmie kopia.

513. Zaznacz kopię i wybierz z menu polecenie EditClone lub wciśnij skrót Ctrl+Shift+D (Command+Shift+D), aby utworzyć kolejną kopię położoną do­kład­nie nad poprzednią.

514. Otwórz paletę Object i ustaw w polu tekstowym Opacity wartość krycia nowej kopii na 0%.

	Początkowo może wydawać się, że ustawienia krycia nie odnoszą żad­nych skutków, gdyż będziesz widział oryginalną kopię przez nową kopię, która jest teraz przezroczysta.

668. Wybierz z menu polecenie ModifyArrangeSend to Back, aby przezroczystą kopię umieścić za oryginalną.

669. Zaznacz obie kopie, rysując otaczającą je ramkę selekcji. Jeśli kopie są je­dynymi obiektami w Twoim dokumencie, możesz je zaznaczyć za pomocą po­lecenia EditSelect All lub skrótu klawiaturowego Ctrl+A (Command+A).

670. Wybierz z menu polecenie ModifySymbolTween Instances.

Fireworks wyświetli okno dialogowe Tween Instances.

671. Zdefiniuj 5 operacji sekwencjonowania.

	Jeśli chcesz, możesz zdefiniować inną liczbę, ale ten przykład cały zo­stał oparty na pięciu poleceniach i takiej samej liczbie klatek.

672. Zaznacz opcję Distribute to Frames i kliknij przycisk OK.

Włącz odtwarzanie animacji. Obiekty zostaną ściemnione, zaś animacja po­win­na mieć siedem klatek. W pierwszej klatce kopia jest całkowicie prze­zro­czys­ta (krycie ustawiona na 0%), w drugiej klatce kopia będzie mniej prze­zro­czys­ta, czyli zostanie ściemniona, zaś w ostatniej, siódmej klatce będzie już kom­­pletnie nieprzezroczysta.

	W tym punkcie możesz pozostawić animację w aktualnej postaci lub kontynuować jej tworzenie i wykonać rozjaśnianie obiektów.

673. Otwórz paletę Frames i zaznacz ostatnią klatkę animacji, aby wyświetlić ją w ok­nie dokumentu. Klatka ta zawiera kompletnie nieprzezroczystą kopię.

674. Zaznacz kopię i wybierz z menu polecenie EditClone lub użyj skrótu kla­wia­turowego Ctrl+Shift+D (Command+Shift+D), aby utworzyć kopię po­ło­żoną dokładnie nad pierwszą.

675. Otwórz paletę Object i w polu Opacity ustaw wartość krycia kopii na 0%.

676. Zaznacz obie kopie, rysując otaczającą je ramkę selekcji. Jeśli kopie są je­dynymi obiektami w Twoim dokumencie, możesz je zaznaczyć za pomocą po­lecenia EditSelect All lub skrótu klawiaturowego Ctrl+A (Command+A).

677. Wybierz z menu polecenie ModifySymbolTween Instances.

Fireworks wyświetli okno dialogowe Tween Instances.

678. Ustaw taką samą liczbę operacji, jakiej używałeś przy ściemnianiu kopii (w na­szym przypadku 5).

679. Zaznacz opcję Distribute to Frames i kliknij przycisk OK.

680. Zaznacz ostatnią klatkę animacji w palecie Frames i usuń ją za pomocą przy­cis­ku Delete Frame (ikona kosza na śmieci). Klatka ta jest zbędna, ponieważ kom­plet­nie przezroczysty obiekt znajduje się także w pierwszej klatce animacji. Ani­ma­cja bę­dzie odtwarzana bardziej płynnie bez tej klatki.

Kliknij przycisk Play, aby włączyć odtwarzanie animacji. Obiekty będą ściemniane, a nas­tępnie rozjaśniane (rysunek 23.18). Jeśli chcesz, możesz kliknąć dwukrotnie cał­ko­wi­cie nieprzezroczystą klatkę znajdującą się w środku animacji (w naszym przykładzie jest to klatka 7) i zdefiniować większe opóźnienie, co sprawi wydłużenie przerwy po­mię­dzy ściemnieniem a rozjaśnieniem. Wybierz z menu polecenie ExportExport Pre­view, aby obejrzeć swoją animację w oknie dialogowy Export Preview, w którym ani­ma­cje są odtwarzane bardziej płynnie niż w oknie dokumentu.

Rysunek 23.18. Rozjaśnianie i ściemnianie obiektów za pomocą sekwencjonowania jest prostym zadaniem

Symbole animacyjne

Symbole animacyjne to samodzielne i wieloklatkowe symbole o określonych właściwościach animacji, jak liczba klatek, obrót i skalowanie Symbol animacyjny można utworzyć z dowolnego obiektu, może również zawierać inny symbol. Podobnie jak symbole przycisków i symbole graficzne, są one przechowywane w bibliotece i mogą być ponownie wykorzystywane.

	Symbole animacyjne są nowością w Fireworks 4.

Symbol animacyjny można utworzyć graficznie w edytorze symboli (Symbol Editor), a jego właściwości określić w palecie Object lub za pomocą polecenia ModifyAnimateSettings. Ścieżkę ruchu symbolu można modyfikować bezpośrednio w oknie dokumentu.

Tworzenie symboli animacyjnych

Nowy symbol animacyjny można utworzyć od podstaw lub przekształcić w tym celu obiekt istniejący.

Aby utworzyć nowy symbol animacyjny:

1. Wybierz polecenie InsertNew Symbol.

Fireworks wyświetli okno dialogowe Symbol Properties (rysunek 23.19).

Rysunek 23.19. W oknie dialogowym Symbol Properties określamy nazwę symbolu i wybieramy Animation jako jego typ

2. Wpisz nazwę nowego symbolu.

3. Zaznacz przycisk opcji Animation i kliknij przycisk OK.

Fireworks otworzy edytora symboli.

4. Korzystając z narzędzi do rysowania, utwórz nową grafikę.

5. Po zakończeniu zamknij okno Symbol Editor.

Fireworks umieści nowy symbol animacyjny w bibliotece, a jego kopię w dokumencie.

6. Aby dodać nowe klatki do nowego symbolu animacyjnego, zaznacz go w obszarze roboczym i dostosuj ustawienie suwaka Frames w palecie Object.

7. Aby edytować właściwości animacji symbolu, zaznacz go i wybierz polecenie ModifyAnimate w celu otwarcia okna dialogowego Animate.

Aby przekształcić istniejący obiekt na symbol animacyjny:

1. Zaznacz obiekt, który chcesz przekształcić na symbol animacyjny.

2. Wybierz polecenie ModifyAnimateAnimate Selection lub użyj skrótu klawiaturowego Alt+Shift+F8 (Option+Shift+F8).

Fireworks wyświetli okno dialogowe Animate (rysunek 23.20).

Rysunek 23.20. W oknie dialogowym Animate możemy dokonywać modyfikacji ustawień animacji

3. Zmodyfikuj ustawienia w oknie dialogowym Animate:

• Frames (Klatki): Liczba klatek umieszczanych w animacji.

	Maksymalna liczba klatek ustawiana przez suwak Frames to 250, ale w polu tekstowym można wpisać większą liczbę. Fireworks automatycznie doda żądaną liczbę klatek do dokumentu.

• Movement (Ruch): Odległość, na jaką chcesz przemieszczać każdy z obiektów. Zakres wartości od 0 do 250 pikseli, ustawienie domyślne — 72.

• Direction (Kierunek): Kierunek, w którym obiekt ma być przemieszczany. Zakres od 0 do 360 stopni.

• Scaling (Skalowanie): Zmiana rozmiaru od wielkości początkowej do końcowej, wyrażona w procentach. Zakres od 0 do 250%, ustawienie domyślne — 100%.

• Opacity (Krycie): Określenie stopnia rozjaśniania lub ściemniania od początku do końca animacji. Wartości od 0 — pełna przezroczystość, do 100 (ustawienie domyślne) — pełna nieprzezroczystość.

• Rotation (Obrót): Kąt obrotu symbolu od początku do końca animacji. Ustawieniem domyślnym jest 0 stopni, co oznacza brak obrotu. Wybór 90 stopni daje ćwierć obrotu, 180 stopni daje pół obrotu, a 360 stopni — pełny obrót. Wprowadzenie wartości większej niż 360 powoduje rozpoczęcie drugiego obrotu.

• CW i CCW: Odpowiednio zgodnie z ruchem i przeciwnie do ruchu wskazówek zegara; określa kierunek obrotu obiektu.

4. Kliknij OK.

Nowy symbol zostanie dodany do biblioteki, a kopia zostanie umieszczona w obszarze roboczym.

Modyfikowanie symbolu animacyjnego

Rzadko się zdarza, że od razu uda się stworzyć idealny symbol animacyjny. W większości przypadków niezbędne jest precyzyjne dopasowywanie ustawień symbolu animacyjnego, aby osiągnąć zamierzony efekt.

Istnieje wiele metod zmieniania ustawień symbolu animacyjnego. Poniżej znajduje się ich opis.

Zmiany ustawień animacji

Zaznacz symbol animacyjny i wybierz polecenie ModifyAnimateSettings, aby otworzyć okno dialogowe Animate, w którym możesz dokonać żądanych zmian.

	Ustawienia w oknie dialogowym Animate zostały opisane we wcześniejszym podrozdziale „Tworzenie symboli animacyjnych”.

Wykorzystanie palety Object

Po zaznaczeniu symbolu animacyjnego, w palecie Object wyświetlane są opcje symbolu animacyjnego, podobne do opcji w oknie dialogowym Animate (rysunek 23.21). Zmodyfikuj opcje, aby dostosować odpowiednie ustawienia.

Rysunek 23.21. W palecie Object dokonujemy modyfikacji opcji symbolu animacyjnego

Modyfikacja ścieżki ruchu

Po zaznaczeniu symboli animacyjnych, wyświetlana jest ścieżka ruchu, przedstawiająca ich ruch przez obszar roboczy, klatka po klatce (rysunek 23.22). Punkt początkowy ścieżki jest oznaczony zieloną kropką, a punkt końcowy — czerwoną. Niebieskie kropki reprezentują kolejne klatki animacji. Sam obiekt jest przedstawiany na ścieżce bieżącej.

Rysunek 23.22. Ścieżka ruchu przedstawia ruch symbolu animacyjnego. Widoczny obiekt znajduje się na czwartej klatce — klatce bieżącej

Kierunek ruchu symbolu animacyjnego może być zmieniony przez zmianę kąta ścieżki ruchu. Przeciągnij jeden z uchwytów animacji w nowe miejsce:

	Trzymając wciśnięty klawisz Shift w trakcie przeciągania, ograniczamy ruch do pionowego lub poziomego.

• Przesuń zielony punkt, aby przemieścić początkowy punkt animacji.

• Przesuń czerwony punkt, aby przemieścić końcowy punkt animacji.

• Przesuń dowolny niebieski punkt, aby przemieścić obiekt na odpowiedniej klatce. Kliknij niebieski punkt, aby przełączyć się na tę klatkę.

Przekształcanie na symbol graficzny

Wybierz polecenie ModifyAnimateRemove Animation, aby przekształcić symbol animacyjny na symbol graficzny. Symbol nie będzie już animowany, ale Fireworks zachowa ustawienia animacji, na wypadek gdybyś chciał ponownie przekształcić symbol na symbol animacyjny.

Usuwanie symbolu

Aby usunąć symbol animacyjny z biblioteki:

1. Wybierz polecenie WindowLibrary, aby wyświetlić paletę Library.

2. W palecie Library zaznacz symbol animacyjny, który chcesz usunąć.

3. Kliknij przycisk Delete Symbol (ikona kosza na śmieci).

Fireworks wyświetli okno dialogowe z prośbą o potwierdzenie operacji usunięcia symbolu.

4. Kliknij Delete, aby usunąć symbol.

Modyfikowanie grafiki symbolu

Podobnie jak symbole przycisków i symbole grafiki, symbole animacyjne są oparte na grafice, którą można modyfikować w edytorze symboli (Symbol Editor). Podczas modyfikowania grafiki, w oparciu o którą jest utworzony symbol, zmieniane są również wszystkie jego kopie — te znajdujące się w obszarze roboczym.

Aby zmodyfikować grafikę w symbolu animacyjnym:

1. Zaznacz symbol animacyjny, który chcesz modyfikować.

2. Wybierz polecenie ModifySymbolEdit Symbol, aby otworzyć edytora symboli. Możesz również wybrać polecenie WindowLibrary i następnie kliknąć dwukrotnie określony symbol w palecie Library.

3. Dokonaj zmian grafiki w edytorze symboli.

4. Po zakończeniu zamknij okno Symbol Editor.

	W rozdziale 17. znajdziesz więcej informacji o edytorze symboli.

Podsumowanie

Fireworks pozwala na tworzenie i edytowanie animacji z wykorzystaniem wielu róż­nych technik, z których większość skupiona jest wokół palety Frames. Podczas pracy z ani­macjami powinieneś pamiętać o następujących rzeczach:

• Bardzo ważnym czynnikiem jest zawsze całkowity rozmiar fizyczny animacji. Każ­da decyzja musi być podejmowana pod kątem jej wpływu na rozmiar pliku.

• Centrum zarządzania narzędziami animacyjnymi jest paleta Frames, ale nie bez znaczenia jest także paleta Layers.

• Każdą klatkę dokumentu Fireworks można porównać do klatki tradycyjnej taś­my filmowej. Skopiuj obiekty do innych klatek za pomocą palety Frames, a nas­tępnie zmodyfikuj ich położenie względem obszaru roboczego lub ich właś­ci­woś­ci, aby utworzyć animację.

• Warstwy mogą być współużytkowane przez wiele klatek, co umożliwia łat­wiej­sze zarządzanie statycznymi obiektami animacji.

• Technika „Onion Skinning” pozwala na podglądanie i edycję wie­lu klatek jednocześnie.

• Istnieje wiele możliwości dla projektów internetowych, które nadają się do wykorzystania w for­ma­cie animowanych GIF-ów. Są to na przykład animowane rollovery, plas­tro­wane animacje i animowane tła przeglądarek.

• Sekwencjonowanie jest techniką pozwalającą zaoszczędzić wiele pracy i czasu pro­jektanta, gdyż Fireworks automatycznie wykonuje za niego wszystkie po­śred­nie etapy animacji. Sekwencjonować można dwie lub więcej kopii tego sa­mego symbolu.

• Fireworks sekwencjonuje obiekty zgodnie z ich kolejnością w stosie, roz­po­czy­na­jąc od obiektu położonego na samym spodzie, czyli najbliżej obszaru robo­czego.

• Rozłóż sekwencję na klatki, aby błyskawicznie utworzyć animację.

• Sekwencjonowania możesz używać do tworzenia zaawansowanych efektów, ta­kich jak ściemnianie i rozjaśnianie obiektów lub ich „wylatywanie” z obszaru ro­boczego.

• Symbole animacyjne ułatwiają animowanie obiektów.

W następnym rozdziale poznasz stosowanie technik animacyjnych umożliwiających two­rzenie najpopularniejszej odmiany animowanych GIF-ów - banerów rekla­mowych.




Rozdział 24.
Animowane banery reklamowe

W tym rozdziale:

• Standardowe banery reklamowe.

• Umieszczanie banerów reklamowych na stronach WWW.

• „Język” reklamy.

• Tworzenie banerów reklamowych w Fireworks.

• Rozmywanie jako sposób na oszczędzanie klatek.

Banery reklamowe - prawie wszechobecne w Sieci - są czynnikiem, który znacznie przy­czynił się do tak gwałtownego rozwoju World Wide Web. Po umieszczeniu na stro­nie banera reklamowego sponsora, strona sama zaczyna zarabiać na siebie, a Ty mo­żesz skupić się na projektowaniu i nie martwić się o rosnące koszty jej utrzymania.

Podstawowe wiadomości
o banerach reklamowych

Banery reklamowe XE "bannery" są miejscem, w którym widać prawdziwą potęgę animowanych GIF-ów. Reklama internetowa powinna przyciągać oko i być wyświetlana u większości użyt­kowników. Jedynym formatem spełniającym te wymagania jest właśnie animowany GIF. Kiedy animowany GIF przestaje być zwykłym animowanym GIF-em, a staje się banerem reklamowym? Spełnione muszą zostać cztery warunki:

• Musi mieć określoną szerokość i wysokość.

• Musi mieć określony, mały rozmiar fizyczny pliku.

• Musi zostać umieszczony na stronie WWW.

• Musi coś reklamować.

Wszystkim tym warunkom przyjrzymy się w kolejnych podrozdziałach.

Rozmiar - standardy XE "bannery:standardy rozmiarów" IAB/CASIE

Gdy banery reklamowe stały się tak popularne w Internecie okazało się, że korzyścią dla reklamodawców i stron WWW wyświetlających reklamy jest utrzymanie ich w stan­dar­dowych rozmiarach. Jeśli tworzysz stronę WWW, na której zostawiłeś obszar o wy­mia­rach 450×50 pikseli na baner reklamowy, a ja prześlę Ci reklamę o wymiarach 460×60, pojawi się problem. Jeżeli dziesięciu innych ludzi prześle Ci reklamy, z któ­rych każda będzie miała inne wymiary, problem będzie jeszcze większy.

Aby go rozwiązać, dwie agencje: Internet Advertising Bureau (IAB - Biuro reklamy in­ter­netowej) oraz Coalition for Advertising Supported Information and Entertainment (CASIE - Agencja reklamy i widowisk) wspólnymi siłami utworzyły listę rozmiarów stan­dar­do­wych. Lista ta została przedstawiona wszystkim reklamodawcom i od­bior­com, którzy zaakceptowali ją przytłaczającą większością głosów. Prawie wszystkie reklamy in­ternetowe tworzone są obecnie według standardów IAB/CASIE.

	Więcej informacji o standardach IAB/CASIE znajdziesz w witrynach in­ter­­netowych organizacji IAB - www.iab.net oraz CASIE - www.casie.com.

W tabeli 24.1 zamieściłem zestawienie standardowych rozmiarów banerów rekla­mo­wych oraz ich nazw.

Tabela 24.1.

Standardy IAB/CASIE banerów reklamowych

Wymiary w pikselach	Nazwa
468×60	Full Banner (Baner pełnowymiarowy)
392×72	Full Banner with Vertical Navigation Bar (Pełnowymiarowy baner z pionowym paskiem nawigacyjnym)
234×60	Half Banner (Baner o połowę mniejszy od pełnowymiarowego)
125×125	Square Button (Kwadratowy przycisk)
88×31	Micro Button (Mikroprzycisk)
120×90	Button 1 (Przycisk 1)
120×60	Button 2 (Przycisk 2)
120×240	Vertical Banner (Baner pionowy)

Najpopularniejszym typem reklamy jest pełnowymiarowy baner, na drugim miejscu znajduje się najprawdopodobniej mikroprzycisk, ale coraz większą po­pularność w In­ternecie uzyskują także inne rozmiary. Stosowane one są do wy­świe­tla­nia reklam zajmujących bardzo mało miejsca, na przykład na marginesach stron lub na­wet we wcięciach akapitowych. Jeśli nie możesz się zdecydować, który rozmiar wy­brać, użyj pełnowymiarowego banera o wymiarach 468×60 pikseli.

	Na dołączonym do książki CD-ROM-ie znajdziesz zestaw plików PNG o standardowych rozmiarach reklam, które możesz wykorzystać pod­czas tworzenia banerów reklamowych w Fireworks.
	Obecnie większość osób korzystających z Internetu używa rozdzielczości 800x600 lub większej i wiele witryn jest skonstruowanych tak, aby móc pomieścić rozszerzoną zawartość poziomą. W tej sytuacji, reklamodawcy zaczęli wprowadzać baner o wymiarach 600x60. Nie znajduje się on na liście IAB/CASIE, ale można brać pod uwagę możliwość wykorzystania takiego banera, jeżeli oczywiście witryna będzie mogła przyjąć taki rozmiar.

Rozmiar pliku XE "bannery:rozmiar pliku"

Oprócz właściwych rozmiarów banera reklamowego, musisz wziąć pod uwagę rów­nież jego rozmiar fizyczny. Nie istnieje żaden standard regulujący rozmiary plików re­kla­mowych. Większość administratorów WWW definiuje maksymalną wielkość tych plików i nie przyj­mą od Ciebie reklamy o większych rozmiarach. Jeśli projektujesz reklamę prze­zna­czoną na konkretną witrynę WWW, sprawdź najpierw ograniczenia narzucone przez jej administratora lub przynajmniej rozmiary reklam, które już istnieją w tej witrynie. Jeśli Twój baner nie jest jeszcze przeznaczony na żadną określoną witrynę, powinien mieć roz­miar pliku mniejszy niż 10 kB lub 12 kB. Jeśli uda Ci się stworzyć dos­ko­na­łą reklamę o rozmiarze pliku 8 kB, tym lepiej dla Ciebie. Będzie ona szybko pobierana z In­ternetu i zobaczy ją więcej użytkowników.

Umieszczanie banerów na stronach WWW XE "bannery:umieszczanie na stronach WWW"

Baner reklamowy jest oczywiście takim samym obrazkiem jak każdy inny GIF, więc miej­scem, w którym powinien zostać umieszczony na stronie jest zwykły znacznik <img>. Gdy eksportujesz kod HTML z Fireworks, baner reklamowy jest wyświetlany właś­nie za pomocą tego znacznika.

Przeważnie jednak na większości witryn internetowych uzależnionych od rekla­mo­da­wców towarzyszy pewnego rodzaju rotacja banerów reklamowych, w której reklamy są umieszczane na stronie „w locie” przez serwer tak, aby użytkownik, który po­now­nie odwiedza daną stronę i zobaczył reklamy inne niż te, które obejrzał poprzednim ra­zem. Serwer zapamiętuje także liczbę powtórzeń każdej reklamy, gdyż reklamodawcy płacą zazwyczaj za wyświetlenie reklamy określoną ilość razy.

Wykonanie systemu rotacji banerów reklamowych nie jest tak trudne, jak mogłoby się wydawać. W Internecie można znaleźć wiele tanich - a nawet bezpłatnych - skryp­tów CGI (Common Gateway Interface). Wystarczy kilka godzin pracy, aby prosta wi­try­na internetowa zaczęła obsługiwać reklamy tak, jak witryny najbardziej profesjonalne.

	Miejscem, w którym powinieneś rozpocząć poszukiwania skryptów CGI jest witryna CGI Resource Index znajdująca się pod adresem www.cgi-resources.com.

Przekaz informacji

Kompletny kurs metod Madison Avenue wykracza poza zakres tej książki, ale po­wi­nie­neś znać choć kilka terminów wchodzących w skład „języka” reklamy:

• Odsłona jest jednym wyświetleniem strony z umieszczoną na niej reklamą.

• Trafienie jest żądaniem pliku, znajdującego się na serwerze (dokumentu HTML lub pliku obrazka albo pliku multimedialnego) wysyłanym przez przeglądarkę. Wie­lu ludzi zamiennie używa terminów „odsłona” i „trafienie”, ale jedna stro­na WWW może składać się z dwudziestu pojedynczych plików, podczas gdy in­na tylko z dziesięciu. Najlepiej jest więc zdefiniować własne terminy i wy­ko­rzys­tywać je w dyskusjach o „trafieniach”.

• CPM jest kosztem za tysiąc odsłon strony (M jest tutaj rzymskim oznaczeniem licz­by 1000). Jest to standard używany w sprzedaży reklam w Internecie. W wi­trynie o doskonałych wskaźnikach oglądalności cena za tysiąc odsłon re­kla­my może być wysoka.

• Bezpośrednie kliknięcie definiuje sytuację, w której użytkownik szczególnie za­in­teresowany banerem reklamowym klika go, aby przejść do witryny in­ter­ne­towej reklamodawcy. Średnia bezpośrednich kliknięć może być mniejsza niż 1%.

• Współczynnik kliknięć oznacza procent użytkowników odwiedzających stronę, któ­rzy kliknęli określoną reklamę.

• Identyfikacja oznacza rozpoznanie pewnych znaków firmowych. Nawet jeśli użyt­kownik nie kliknie banera reklamowego, przynajmniej go zobaczy i za­pa­mię­ta wyświetlany na nim znak firmy.

Technika Fireworks:
tworzenie XE "bannery:tworzenie" banerów reklamowych

Mimo że banery reklamowe często są tworzone przez całe sztaby ludzi związanych z reklamą, pro­du­centów, projektantów internetowych, najlepszą metodą na zastosowanie poniższej te­chniki jest utworzenie kampanii reklamowej dla fikcyjnej firmy, wymyślonej na wła­sne po­trze­by. W taki właśnie sposób utworzymy krok po kroku baner reklamowy w Fire­works.

	Na dołączonym do książki CD-ROM-ie znajdziesz przykład two­rzo­ne­go w tym rozdziale banera reklamowego „Mundane Magazine” zarówno w źród­łowym formacie PNG, jak i w wyeksportowanym jako ani­mo­wa­ny GIF.

Krok 1: Ustawiamy scenografię

Pierwszym krokiem w tworzeniu banera reklamowego jest zdefiniowanie właściwych wy­miarów. Niekiedy wymiary reklamy będą determinowane rodzajem projektu, ale w więk­szości przypadków będziesz musiał utworzyć baner o z góry ustalonych wy­mia­rach. W swoich projektach przestrzegam standardów IAB/CASIE i tworzę pełno­wy­mia­rowe banery o wymiarach 468×60 pikseli, które mogą być wyświetlane na więk­szoś­ci wi­tryn internetowych.

Krok 2: Piszemy scenariusz

Teraz, kiedy masz już „pustą kartkę” o właściwych wymiarach i kształcie, możesz usiąść i tak długo się jej przyglądać, aż wpadniesz na jakiś pomysł. W pracy z banerami re­kla­mowymi możesz stosować te same koncepcje, których używałeś przy tworzeniu zwy­kłych animacji. Obowiązuje więc zwięzłość wypowiedzi, planowanie z wyprze­dze­niem oraz utrzymywanie określonych rozmiarów plików.

Spójrzmy prawdzie w oczy: w banerze o rozmiarach 10 lub 12 kB nie można utworzyć zbyt wielu aktorów lub zmian scenografii. Jeżeli nie możesz wyrazić swoich myśli w kil­ku wierszach tekstu, prawdopodobnie nie będziesz mógł także stworzyć dobrego banera. Myśl raczej w kategoriach haseł, a nie szerszych wypowiedzi.

Baner przedstawiony w naszym przykładzie reklamuje fikcyjne czasopismo o nazwie „Mun­dane Magazine”. Jest to czasopismo o Internecie przeznaczone dla młodych czy­tel­ników. Chcę więc utworzyć coś, co przyciągnie uwagę wielu młodych, „od­jaz­do­wych” internautów. Scenariusz tej reklamy powinien być następujący: „UFO rozbija się przy lądowaniu na jałowej, odległej planecie. Pilot myśli: '&*/$.” Niewielki scenariusz, ale co można zrobić w pliku o rozmiarach 12 kB?

Krok 3: Tworzymy aktorów

Nasz mały film posiada już scenografię i scenariusz. Teraz potrzebujemy aktorów.

Banery reklamowe są celowo zmniejszane do jak najmniejszych rozmiarów i może to być nie­co kłopotliwe przy rysowaniu obiektów. Obiekty w banerach reklamowych i tak częs­to są kadrowane i zmniejszane, więc wolę rysować i budować obiekty w drugim, więk­szym oknie dokumentu (rysunek 24.1), czyli w swoistym rodzaju notatnika lub - trzy­ma­jąc się terminologii teatralnej - za kulisami, za którymi obiekty czekają na swój występ. Obiek­ty Fireworks mogą być w każdej chwili edytowane i łatwo przeciągane pomiędzy do­kumentami, więc tworzenie kulis jest bardzo dogodnym sposobem pracy.

Rysunek 24.1. W trakcie budowania banera reklamowego użyj drugiego dokumentu jako szkicownika lub kulis, aby uchronić się przed pracą wewnątrz samej reklamy

Kompleksowe efekty, takie jak zewnętrzne cienie i blaski, zwiększą rozmiar końcowy ani­mowanego GIF-a, ponieważ w tym formacie lepiej kompresowane są obszary jed­no­li­tych kolorów. Na razie skoncentruj się na rysowaniu dobrze wyglądających obiektów, a efekty zostaw na później. Jeśli Twoja końcowa animacja będzie miała rozmiar mniej­szy od dopuszczalnego, będziesz mógł wrócić i dodać do obiektu jakieś efekty.

W mojej reklamie „obsada” tworzona jest z następujących elementów:

• Jałowe, „nieziemskie” góry służące za scenografię.

• Obiekty tekstowe: nazwa magazynu i łatwe do zapamiętania hasło.

• Latający spodek, rozbijający się przy lądowaniu.

• Dymek ze słowem „&*/$”.

Każdy z tych elementów można traktować jako aktora, niezależną jednostkę, której mu­sisz „powiedzieć” co ma robić, aby utworzyć reklamę.

Krok 4: Akcja!

Jesteśmy już przygotowani do umieszczenia obiektów na swoich miejscach. Utwórz osob­ną warstwę dla każdego z aktorów. Mam czterech aktorów i dobrze byłoby ich uło­żyć od razu we właściwej kolejności w stosie. Tło powinno znajdować się na spodzie, a tekst na samym wierzchu, potrzebne są więc cztery warstwy:

• Tekst;

• Dymek;

• Spodek;

• Tło.

Wielokrotne wykorzystywanie elementów Niewielka ilość informacji, jaką można przekazać za pomocą banerów reklamowych, bardzo ogranicza pracę twórczą. Jest jednak pew­na zaleta: wszystkie obiekty, łącznie z bitmapami, które były stwo­rzo­ne na potrzeby strony WWW lub do druku można szybko prze­ska­lo­wać i ponownie wykorzystać bez utraty jakości. Tworzenie banera reklamowego na stronę WWW wiąże się najczęściej z budowaniem zna­ków graficznych i innych ilustracji łatwo dostępnych do późniejszego wy­ko­rzystania w banerze, jak pokazano na poniższym rysunku. Opisywana strategia jest wydajna z punktu widzenia produkcji grafiki, ale sprawdza się również w projektowaniu, pozwalając na zachowanie spój­nego wyglądu elementów graficznych znajdujących się w jednej wi­try­nie WWW oraz reklamujących ją banerów

Wszystkie warstwy przedstawione zostały na rysunku 24.2. Na warstwie o nazwie back­ground umieszczone są góry, które są współużytkowane przez wszystkie klatki do­ku­men­tu. Zablokuj warstwę tła i na razie zapomnij o niej.

	Aby ustawić współużytkowanie warstwy, kliknij dwukrotnie jej nazwę w pa­lecie Layers, aby wyświetlić okno dialogowe Layer Options i za­znacz opcję Shared Across Frames.

Rysunek 24.2. Tło jest takie samo dla całej animacji, więc warstwa ta została ustawiona jako współużytkowana

Rozdzielanie obiektów na odrębne warstwy umożliwia ustawienie w dowolnej chwili któ­rejś z nich jako współużytkowanej, jeśli zdecydujesz, że znajdujący się na niej aktor ma być statyczny. Jeszcze nie jestem pewien, czy nazwa czasopisma oraz hasło rekla­mo­we powinny być obiektami statycznymi. Prawdopodobnie tak, ale być może zmienię zda­nie, gdy zobaczę rozmiar pliku animowanego GIF-a. Na razie umieszczę tekst w banerze i ustawię jego warstwę jako współużytkowaną.

Pierwsza klatka animacji właściwie jest gotowa. Góry i logo znajdują się na swoich miej­scach, a UFO jeszcze się nie pojawiło. Następnie tworzę ostatnią klatkę animacji, w któ­rej animacja jest na chwilę zatrzymywana przed zapętleniem. Muszę upewnić się, że UFO i dymek mają właściwe wymiary, aby ładnie wyglądały w tej klatce, zanim zacznę ani­mować te obiekty w klatkach pośrednich (rysunek 24.3).

Rysunek 24.3. Po stworzeniu pierwszej klatki, utwórz nową klatkę, która będzie ostatnią klatką animacji. Twoja dwuklatkowa animacja ma teraz początek i koniec, co znacznie ułatwia stworzenie wszystkich klatek pośrednich

Utworzenie pierwszej i os­tat­­niej klatki przed pozostałymi pozwoli o wiele łatwiej utwo­rzyć zawartość wszystkich pośrednich klatek. Nadanie opisowych nazw klatkom pierwszej i ostatniej pozwoli upewnić się, że zawsze będą one pierwszą i ostatnią. Nazwę możemy wprowadzić w oknie dialogowym otwieranym po dwukrotnym kliknięciu nazwy klatki w palecie Frames.

	Po dwukrotnym kliknięciu nazwy klatki w palecie Frames, możemy zmienić standardową nazwę „Frame 1” na dowolną inną.

Wreszcie możemy na poważnie zająć się animowaniem. W pierwszej klatce UFO jesz­cze nie widać, zaś w ostatniej - UFO już wylądowało. Kopiuję UFO z ostatniej klatki, wkle­jam je do pierwszej i przesuwam do górnej krawędzi obszaru roboczego tak, żeby by­ło widać tylko jego mały fragment.

Zatem w pierwszej klatce UFO dopiero się pojawia w zasięgu wzroku. Chcę, aby ko­lej­na klatka była prawie identyczna z tym wyjątkiem, że spodek powinien przesunąć się bli­żej w kierunku miejsca lądowania. Nie ma on zbyt długiej drogi do przebycia, a chciał­bym, by pokonał ją w siedmiu lub ośmiu klatkach, więc cała animacja powinna li­­czyć dziewięć lub dziesięć klatek. Im mniejsze wymiary będzie miała animacja i mniej­szą liczbę klatek, tym mniejszy będzie rozmiar fizyczny końcowego pliku.

W dowolnym momencie możesz rozłożyć obiekty do ich własnych klatek za pomocą przy­cisku Distribute to Frames z palety Frames, więc najlepiej jest zbudować całą ani­ma­cję tylko w jednej, pierwszej klatce. W moim przykładzie jedynie zduplikowałem i roz­mieściłem we właściwych położeniach wszystkie kopie spodka. W efekcie pierw­sza klatka zawiera kilka spodków znajdujących się we właściwych położeniach, ale w nie­właściwych klatkach (rysunek 24.4).

Rysunek 24.4. Po zduplikowaniu spodka i umieszczeniu kopii w odpowiednich położeniach w obszarze roboczym, możesz zacząć je rozkładać na odpowiednie klatki

	Najszybszym sposobem duplikowania obiektów jest ich przeciąganie z wciś­niętym klawiszem Alt (Option).
	Jeżeli w Twojej animacji obiekty poruszają się po linii prostej, do utwo­rze­nia pośrednich kroków animacji użyj sekwencjonowania, które zos­ta­ło opisane w rozdziale 23.

Ostatnia klatka animacji jest już gotowa, więc chcę ręcznie utworzyć klatki, zanim klik­nę przycisk Distribute to Frames, aby Fireworks nie utworzył żadnych klatek nakła­da­ją­cych się na klatkę końcową. W pierwszej klatce mam siedem spodków, więc mu­szę utworzyć sześć kolejnych klatek.

Po rozłożeniu spodków na klatki, mogą obejrzeć animację z wykorzystaniem kontrolek od­twarzania i utworzyć efekt opadania spodka. W tym celu, jeśli to będzie konieczne, w okre­ślonych klatkach musze go lekko przesunąć w lewo lub na prawo, aby utworzyć po­żądany efekt, czyli nierówne lądowanie UFO.

Po dojściu do miejsca, w którym następuje odtwarzanie animacji, musimy przejść do nieodzownego prze­ra­bia­nia obiektów. W naszym przykładzie zdecydowałem, że nie chcę mieć dymka w os­tat­niej klatce animacji. Ostatnie trzy klatki powinny wyglądać następująco: statek ląduje, po­jawia się dymek ze słowem, który następnie znika. Zdałem sobie również sprawę z te­go, że lądujący spodek powinien zostać uszkodzony, aby zaakcentować efekt je­go rozbicia.

Utworzenie uszkodzenia spodka jest prostym zadaniem, ale uszkodzenie musi się pojawić w siódmej i ósmej klat­ce. Po zmodyfikowaniu spodka w siódmej klatce, zaznaczam go i przeciągam z wciś­niętym klawiszem Alt (Option) ikonę selekcji w palecie Frames (rysunek 24.5) z klat­ki siódmej do ósmej. Spowoduje to skopiowanie zaznaczenia z klatki 7. do klatki 8.

Najszybszym sposobem na wykonanie dodatkowej klatki na końcu animacji jest zdu­pli­ko­wanie ostatniej klatki i usunięcie z niej dymka. Przyrost rozmiaru pliku będzie bardzo ma­ły, gdyż dwie ostatnie klatki są prawie identyczne, a jedyną zmianą jest większy ob­szar jednolitego koloru w ostatniej klatce, powstały po usunięciu dymka. Aby zdu­pli­ko­wać ostatnią klatkę animacji, wystarczy przeciągnąć jej nazwę w palecie Frames na przy­cisk New Frame (Nowa klatka).

Rysunek 24.5. Przeciągnięcie ikony selekcji z klatki do klatki w palecie Frames powoduje przeniesienie zaznaczonych obiektów. Po przeciągnięciu z wciśniętym klawiszem Alt obiekty zostaną skopiowane

Jedyne, co nam pozostało do zrobienia to ustawienie tempa tak, aby trzy ostatnie klatki by­ły odtwarzane nieco wolniej od pozostałych. Opóźnienia w odtwarzaniu klatek, zapę­tla­nie i tym podobne parametry można ustawiać w palecie Frames lub w zakładce Animation okna dialo­go­wego Export Preview. Podczas pracy w oknie dialogowym Export Preview (rysunek 24.6) animacje odtwarzane są bardziej płynnie niż w oknie dokumentu. W oknie tym znaj­dują się też wszystkie niezbędne kontrolki sterowania animacjami. Możesz zo­ba­czyć, że czasy trwania trzech ostatnich klatek są ustawione odpowiednio na jedną, dwie i jedną sekundę (wyrażone w setnych częściach sekundy). Najpierw za pomocą kontrolek odtwarzania znaj­du­ją­cych się w ok­nie dialogowym przetestowałem kilka różnych ustawień opóźnień. Zapęt­lanie usta­wi­łem na dziesięć razy, co wystarcza, aby animacja była zapętlana przez około 1 mi­nu­tę, gdyż jednokrotne odtworzenie banera trwa trochę ponad 5 sekund. Po od­two­rzeniu baner staje się statyczny i zachęca użytkownika do odwiedzenia strony „Mundane Ma­ga­zine” bez irytującego, ciągłego odtwarzania.

Rysunek 24.6. Ustaw opóźnienia poszczególnych klatek i zapętlanie całej animacji. Zwróć uwagę, że animacja jest odtwarzana w oknie dialogowym Export Preview

Jeśli nie ustawisz niekończącego się zapętlania upewnij się, że os­tat­nia klatka animacji zawiera wszystkie elementy niezbędne do dos­tar­cze­nia użytkownikowi wszystkich żądanych informacji.

Krok 5: Usuwamy zbędne elementy

Czasami trzeba stosować dosyć drastyczne metody przy eksportowaniu animacji i tworzeniu ani­mo­wa­nego GIF-a. Pamiętaj, że musisz skupić się na przekazaniu wszystkich koniecznych infor­macji. Nie dostaniesz nagrody za to, że Twoja animacja ma dużo kolorów. Mój baner ma mniej niż 12 kB, ale jeśli utworzę większy plik, próbuję go zmniejszyć na je­den z poniższych sposobów:

• Usuwam niektóre klatki, co może spowodować mniej płynne odtwarzanie ani­macji.

• Przesuwam spodek bliżej pomiędzy klatkami tak, aby zmniej­szyć obszar animacji.

• Tworzę obszary jednolitych kolorów, na przykład w miejscu gór posiadających teks­tury. Obszary jednolitych kolorów są lepiej kompresowane.

• Usuwam niektóre kolory, wyrzucając je z palety.

• Usuwam efekty, na przykład wewnętrzną fazę z tekstu i spodka, aby uzyskać więk­sze obszary jednolitych kolorów.

• Zmniejszam niektóre obiekty, na przykład tekst tak, aby było widać więcej jed­no­­litego niebieskiego koloru tła.

Niekiedy warto zrezygnować z wartości artystycznych grafiki, a polepszyć wartość pre­zen­tacyjną i prędkość ładowania banera reklamowego.

Ostateczny wygląd banera „Mundane Magazine” możesz zobaczyć na rysunku 24.7.

	Barwną wersję banera reklamowego tworzonego w tym rozdziale znaj­dziesz w kolorowej wkładce.

Technika Fireworks:
Rozmywanie jako sposób
na oszczędzanie klatek

Przeważnie chcesz, aby baner reklamowy był dynamiczną, szybko zmieniającą się ani­ma­cją. Musisz jednak - jak zawsze - wziąć pod uwagę przepustowość łączy inter­ne­to­wych i rozmiary plików. Każda dodatkowa klatka animacji zwiększa rozmiar koń­co­we­go pliku.

Rysunek 24.7. W końcowym banerze reklamowym animacja odtwarzana jest w małym obszarze i w niewielkiej liczbie klatek. Dobrze kompresowane jest tło o jednolitym kolorze. Rozmiar pliku banera jest mniejszy niż 12 kB

Najczęściej stosowaną techniką tworzenia banerów reklamowych o dynamicznej akcji bez drastycznego zwiększania liczby klatek i rozmiaru pliku jest wykorzystanie filtra umo­żliwiającego tworzenie efektu poruszenia obiektu z punktu A do punktu B (ry­su­nek 24.8). Jednym z takich filtrów jest Motion Trail dostępny w pakiecie Eye Candy 4000 LE wbu­dowanym do Fireworks. Spodek, zamiast w pięciu lub sześciu klatkach, porusza się jedynie w trzech, ale nadal wygląda, jakby leciał. Bez zastosowania tego filtra, zbyt długie odstępy pomiędzy poszczególnymi rysunkami spodka spowodowałyby, że zamiast się poruszać, spodek pojawiałby się i znikał.

Rysunek 24.8. Spodek szybko przelatuje przez cały baner, a wszystko kosztem jedynie trzech klatek.
		W drugim banerze „Mundane Magazine” zostały wyko­rzys­tane elementy tworzone na potrzeby pierwszego banera. Two­rze­nie banerów będących dalszym ciągiem poprzednich jest często sto­so­wa­ną techniką, która pomaga w lepszej identyfikacji wizualnej.

Wrażenie szybciej poruszających się obiektów możesz tworzyć także poprzez zmiany stop­nia ich krycia. Stopień krycia rozmytych spodków przedstawionych na rysunku 24.7 wynosi 70%. Eksperymentując z ustawieniami krycia i filtra Eye Candy 4000 LE Motion Trail, możesz osiągnąć całkiem interesujące efekty.

	Na dołączonym do książki CD-ROM-ie znajdziesz opisywany w tym roz­dziale baner w formacie animowanego GIF-a oraz jako źródłowy plik PNG Fireworks.

Podsumowanie

Banery reklamowe są bardzo popularnym i praktycznym zastosowaniem animo­wa­nych GIF-ów. Tworząc banery reklamowe w Fireworks, musisz pamiętać o nastę­pu­ją­cych rzeczach:

• Banery reklamowe powinny mieć ustalone, standardowe wymiary. Zanim za­czniesz tworzyć baner, upewnij się, że zdefiniowałeś dla niego właściwy roz­miar, tak aby mógł być wykorzystywany na wielu różnych witrynach WWW.

• Większość witryn internetowych ma zdefiniowane maksymalne rozmiary akcep­towanych przez nie plików. Rozmiar pliku banera reklamowego powi­nien być mniejszy niż 12 kB.

• Zastosowanie filtra poruszenia umożliwia usunięcie zbędnych klatek animacji, bez żadnego wpływu na jej płynne odtwarzanie.

W następnym rozdziale poznasz sposoby dostosowywania Fireworks do własnych potrzeb.




Część VII
Programowanie w Fireworks




Rozdział 25.
Dostosowywanie Fireworks do własnych potrzeb

W tym rozdziale:

• Interpreter HTML i JavaScript.

• Katalog Configuration.

• Dodawanie nowych plików rozszerzających możliwości programu.

• Plik preferencji Fireworks 4.

Internet jest niewiarygodnie szybko zmieniającym się środowiskiem. Niczym nad­zwy­czaj­nym nie jest już tworzenie osobistych stron WWW za pomocą bardzo rozbu­do­wa­nych aplikacji internetowych, które potrafią generować strony WWW „w locie” i ofe­ru­ją funkcje dostępne dotychczas w wielu odrębnych aplikacjach. Przy mnogości tech­no­lo­gii stosowanych we współczesnym Internecie, trudno jest wyobrazić sobie narzędzie autor­skie, które oferowałoby różnym użytkownikom wszystkie potrzebne im rozwią­zania.

Macromedia za pomocą Fireworks daje nam do zrozumienia, iż wierzy, że kon­figu­ro­wal­ne narzędzie autorskie jest dobrym narzędziem autorskim. Prawie każda funkcja pro­gramu jest dostępna poprzez JavaScript API, a wiele z tych funkcji jest inter­pre­to­wa­nych w prostych do modyfikowania językach HTML i JavaScript. Wszystkie prefe­ren­cje programu znajdują się w łatwo dostępnym, zwykłym pliku tekstowym. Rozszerzenia można dodawać do programu poprzez kopiowanie ich do odpowiedniego podkatalogu katalogu Configuration , wewnątrz katalogu programu Fireworks.

	Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 — dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 — dla MacOS..

W tym rozdziale omówimy niektóre sposoby dostosowywania Fireworks do własnych po­trzeb i tworzenia własnego, komfortowego graficznego edytora grafiki sieciowej.

Interpreter HTML i JavaScriptu

Jednym z czynników, który przyczynił się do tak gwałtownego rozwoju Internetu jest przy­stępność wykorzystywanych w nim kodów. HTML jest prostym i ogólnodo­stęp­nym językiem programowania. JavaScript jest trudniejszy od HTML, ale i tak dużo łat­wiej­szy niż inne, kompilowane języki programowania, takie jak C lub C++. Twórcy Fire­works bardzo nowatorsko podeszli do dostępności: część Fireworks napisana jest w ko­dach HTML i JavaScript napisanych w plikach tekstowych, które znajdują się w podkatalogu katalogu Configuration , wewnątrz katalogu programu Firewors.

Fireworks używa odpowiednich szablonów do generowania kodów JavaScript i HTML, skryp­ty automatyzujące zadania Fireworks napisane są w JavaScripcie. Umożliwia to pro­jektantom internetowym łatwe dostosowywanie dowolnych elementów środowiska ro­boczego Fireworks.

Skryptlety są autonomicznymi apletami JavaScript, które mogą być uruchamiane w Fire­works. Można je umieszczać w katalogu Commands i uruchamiać z poziomu menu Com­mands - lub za pomocą polecenia FileRun Script, a nawet otwierać jak każdy in­ny dokument Fireworks - poprzez dwukrotne kliknięcie. Skryptlety mają własną ikonę (ry­sunek 25.1). Dwukrotne kliknięcie skryptletu lub przeciągnięcie go na ikonę apli­ka­cji Fireworks powoduje uruchomienie Fireworks i wykonanie skryptletu.

Rysunek 25.1. Skryptlety Fireworks są plikami JavaScript z rozszerzeniem .jsf, które mogą być uruchamiane w Fireworks

W systemach z rodziny Windows skryptlety mają własny typ pliku z rozszerzeniem .jsf. Skryptlet możesz utworzyć podobnie, jak tworzysz zwykły plik tekstowy, a następnie zmie­nić jego rozszerzenie z .txt na .jsf.

W MacOS, skryptlety są plikami tekstowymi z kodem Fireworks Creator podobnie, jak do­kumenty Fireworks są obrazkami PNG z kodem Fireworks Creator. Skryptlety mo­żesz tworzyć i edytować jak zwykłe pliki tekstowe. Skompiluj poniższy Apple Script ja­ko aplikację w programie Script Editor i upuść na nią pliki, aby nadać im kod Fire­works
Creator. Przeciągnięte pliki tekstowe zostaną przekształcone na skryptlety. Do zmia­ny kodów Creator w MacOS lub typu pliku w Windows możesz również wyko­rzys­tać jeden z dostępnych programów narzędziowych, takich jak File Buddy lub Fin­derPop.

on open

tell application “Finder"

set creator type of every file of selection to “MKBY"

end tell

end open

Skryptlety można stosować do wykonywania zadziwiającej ilości wielu różnych zadań. W grę wchodzą wszystkie funkcje dostępne poprzez API Fireworks, a jest ich naprawdę dużo. Skryptlety mogą zmieniać preferencje, automatyzować zadania, prze­twarzać wsadowo pliki i wykonywać wiele innych czynności.

Skryptlety także są poleceniami. Po umieszczeniu skryptletu w katalogu Commands, można go uruchomić z poziomu menu Command programu Fireworks. W Fire­works można go także uruchomić przez wybranie z me­nu polecenia FileRun Script i zaznaczenie go w otwieranym oknie dialogowym Open.

	Aby zacząć tworzyć własne skryptlety, najpierw musisz poznać Java­Script API opisywany w rozdziale 26.

Katalog Configuration XE "konfiguracja: katalog Settings"

Centralnym miejscem rozszerzania i dostosowywania Fireworks do własnych potrzeb jest katalog Configuration (rysunek 25.2). Katalog Configuration znajdziesz w katalogu programu Fireworks. Podkatalogi znajdujące się w tym katalogu za­wie­ra­ją pli­ki powiązane w pewien sposób z określonymi funkcjami Fireworks. Umie­szcza­nie dodatkowych plików w tych podkatalogach powoduje dodawanie do programu no­wych teks­tur, dodatkowych poleceń do menu Commands lub rozszerzeń do menu Xtras. Więk­szość z tych plików to pliki tekstowe zawierające wyrażenia napisane w języku HTML lub JavaScript, które możesz łatwo modyfikować.

Użytkownicy Dreamweavera już od dłuższego czasu mogą tworzyć i wymieniać się po­przez Internet obiektami, behawiorami i poleceniami tego programu. W niektórych źród­łach elementów Dreamweavera można znaleźć także polecenia, szablony i inne pli­ki dla Fireworks. Istnieje kilka witryn przeznaczonych tylko dla użytkowników Fire­works. Oto kilka dobrych źródeł:

• Fireworks Support Center firmy Macromedia: www.macromedia.com/support/ fireworks (kliknij łącze Extensibility).

• Strona Josepha Lowery o Fireworks: www.idest.com/fireworks.

Rysunek 25.2. Katalog Configuration jest miejscem, w którym możesz dodawać własne pliki

• Strona Derrena Whitemana o Fireworks: www.derren.com/geek/fireworks.

• Doskonała strona Massimo Fotiego: www.massimocorner.com.

Oprócz wykorzystywania rozszerzeń tworzonych przez innych użytkowników, możesz tak­że budować własne. Najprostszym sposobem na szybkie osiągnięcie pożądanych re­zul­tatów i lepsze poznanie możliwości Fireworks jest modyfikowanie istniejących ko­dów. Zawsze jednak pracuj z kopią pliku, który modyfikujesz, tak abyś w razie czego mógł po­wrócić do pliku oryginalnego.

Batch Code XE "konfiguracja:Batch Code"

W katalogu Batch Code przechowywane są szablony przetwarzania wsadowego. Do­myśl­nie znajdują się tam tylko dwa pliki: BatchGen.jst i BatchTemplate.jst.

Commands XE "konfiguracja:Commands"

W katalogu Commands przechowywane są skryptlety. Każdy skryptlet z katalogu Commands jest wyświetlany jako polecenie w menu Commands Fireworks.

Otwórz skryptlet w edytorze tekstu lub w nowym widoku Code Dreamweavera 4, a zobaczysz, że składa się on z prostego kodu JavaScript. Prawie wszys­tkie funkcje Fireworks dostępne są z poziomu Fireworks JavaScript API. Oprócz stan­dardowych funkcji Fireworks, dostępne są również inne funkcje, takie jak dom.ap­plyEffects() i dom.setDocumentCanvasSize() dające poleceniom moż­li­wość auto­matyzowania powtarzalnych zadań. Najwygodniejszą cechą poleceń jest to, że aby je utworzyć, dzięki palecie History nie trzeba pisać żadnych kodów.

Domyślnie, Fireworks zawiera siedemnaście poleceń zorganizowanych w czterech kata­lo­gach. Dwa pojedyncze polecenia znajdują się bezpośrednio w katalogu Commands. Aby do­dać nowe polecenie, przeciągnij plik do katalogu Commands. Wszystkie skryptlety znajdujące się w katalogu Commands lub w jednym z podkatalogów tego katalogu są wyświetlane w me­nu Commands Fireworks, więc możesz je uruchamiać poprzez wybranie pozycji me­nu. Nowo utworzone polecenia są natychmiast dostępne w menu Commands, bez ko­nieczności ponownego uruchamiania Fireworks.

	Więcej informacji o poleceniach znajdziesz w rozdziale 19., zaś o Fire­works API - w rozdziale 26.

Export Settings XE "konfiguracja:Export Settings"

Katalog Export Settings (Ustawienia exportu) domyślnie jest pusty. Po zapisaniu usta­wień eksportu jako zestawu ustawień w palecie Optimize (za pomocą polecenia Save Set­tings z menu rozwijanego), Fireworks utworzy w katalogu Export Settings plik teks­to­wy zawierający opis zachowanych ustawień. Plik ten może być kopiowany do innych kom­puterów, aby ujednolicić ustawienia eksportu w całej grupie roboczej.

HTML Code XE "konfiguracja:HTML Code"

W katalogu HTML Code (Kody HTML) przechowywane są szablony generowanego przez Fireworks kodu HTML. Szablony kodów HTML są sza­blonami HyperText (.htt), które informują Fireworks jak stworzyć określoną „odmianę” kodu HTML. I tak na przykład, wygenerowanie w Fireworks kodu HTML przy użyciu szablonu Dreamweavera powoduje utworzenie pliku, który Dreamweaver będzie traktował jak swoją własną stronę.

Szablony są przechowywane w podkatalogu katalogu HTML Code, w którym nazwa katalogu odpowiada nazwie szablonu. Zgodnie z ustawieniem domyślnym, Fireworks oferuje szablony Dreamweaver, GoLive, FrontPage i Generic (rysunek 25.3).

Rysunek 25.3. Podkatalogi katalogu HTML Code określają opcje generowanego w Fireworks kodu HTML

Ponieważ szablony HTML Code to proste HTML-e lub JavaScripty, możliwe jest zarówno modyfikowanie szablonu domyślnego, jak i tworzenie własnego od podstaw.

Aby uruchomić nowy szablon:

681. Wykorzystując Explorera w Windows lub Findera w MacOS, utwórz nowy pod­katalog w katalogu HTML Code. Powinieneś mu nadać nazwę nie powtarzającą się, ułat­wiającą jego identyfikację.

682. Nadaj nowo utworzonemu lub zmodyfikowanemu szablonowi nazwę slices.css i umieść go w swoim nowym katalogu.

683. W Fireworks wybierz polecenie FileHTML Setup, aby wyświetlić okno dialogowe HTML Setup.

684. W zakładce General wybierz swój nowy szablon z listy HTML Style i po zakończeniu kliknij OK.

Nie musisz ponownie uru­cha­miać Fireworks, aby korzystać z nowo utworzonych szablonów.

	Dokładny opis okna dialogowego HTML Setup znajduje się w rozdziale 3.

jsextensions XE "konfiguracja:JSExtensions"

Większość programów komputerowych pisanych jest w języku C lub C++ i kompi­lo­wa­nych do niedostępnych dla użytkownika obiektów przez ich wypuszczeniem na rynek. Wie­le funkcji Fireworks jest dostępnych poprzez JavaScript. Jeszcze więcej funk­cjo­nal­noś­ci można dodać do Fireworks za pomocą bibliotek C, które można dołączyć prze­cią­ga­jąc je do katalogu jsextensions. Zgodnie z ustawieniem domyślnym, ten katalog zawiera rozszerzenie MMNotes.

Libraries XE "konfiguracja:Libraries"

W katalogu Libraries (Biblioteki) znajdują się pliki PNG zawierające przeważnie bi­blio­teki symboli. Znajdują się tam tylko cztery pliki zawierające przykładowe animacje, znaki wypunktowania, symbole przycisków i motywy graficzne. Biblioteki symboli są zwykłymi dokumentami Fire­works, zawierającymi symbole eksportowane z poziomu palety Library. Najczęściej wy­ko­rzystywane przyciski, obiekty graficzne i kliparty można przekształcić na symbole i prze­chowywać w bibliotekach. Biblioteki symboli umieszczone w katalogu Libraries moż­na wywoływać w Fireworks z podmenu InsertLibraries. Każdy plik jest wy­świe­tla­ny jako osobna pozycja menu.

	Szczegółowy opis bibliotek znajdziesz w rozdziale 17.

Nav Menu

Style przechowywane w katalogu Nav Menu są dostępne dla behawiora Set Pop-Up Menu (Wyświetl listę rozwijaną), w celu wykorzystania ich przy tworzeniu list rozwijanych. Skopiuj pliki stylów z katalogu Configuration/Styles lub wyeksportuj poszczególne style z palety Styles i zapisz je w Configuration/Nav Menu.

	Szczegółowy opis behawiora Set Pop-up Menu znajdziesz w rozdziale 21.

Patterns XE "konfiguracja:Patterns"

Desenie są pełnokolorowymi obrazkami zapisywanymi w standardowym formacie PNG. Początkowo w katalogu Patterns (Desenie) znajduje się czterdzieści sześć deseni o wy­glą­dzie na przykład cegieł, dżinsu lub drewna. Możesz utworzyć dowolny obrazek i za­pi­sać go w katalogu Patterns. Po ponownym uruchomieniu Fireworks, wszystkie pliki znaj­dujące się w katalogu Patterns będą dostępne w liście deseni w palecie Fill.

	Aby dowiedzieć się czegoś więcej o deseniach, zerknij do rozdziału 11.

Styles XE "konfiguracja:Styles"

Style Fireworks w Windows mają rozszerzenia .stl, zaś w MacOS - typ pliku STYf.

Mimo że już na początku paleta Styles zawiera wiele różnych stylów, można utworzyć jesz­cze wiele własnych. Choć style są z reguły przechowywane w katalogu Styles, nie czy­ni ich to bezpośrednio dostępnymi z Fireworks. Aby użyć stylu zapisanego w okre­ślo­nym pliku, musisz zaimportować ten plik za pomocą palety Styles.

Po zainstalowaniu Fireworks, w katalogu Styles znajduje się tylko jeden plik o nazwie Style Defaults.stl. Jak wskazuje nazwa pliku (defaults - domyślne), zawiera on domyślne sty­le, jaki mogą być ładowane do palety Styles za pomocą polecenia Reset Styles, które znaj­duje się w rozwijanym menu palety. Jeśli chcesz, aby poleceniem Reset Styles ła­do­wany był inny, Twój ulubiony zestaw stylów, zmień nazwę stylu Style Defaults.stl i za­pisz pod tą nazwą własne style.

	Więcej informacji o stylach znajdziesz w rozdziale 16.

Textures XE "konfiguracja:Textures"

Katalog Textures (Tekstury) zawiera obrazki PNG, które są wykorzystywane w Fire­works jako tekstury. Pliki znajdujące się w tym katalogu są wyświetlana jako tekstury w roz­wijanej liście Textures, dostępnej w paletach Fill (Wypełnienie) i Stroke (Obrys).

Tekstury są obrazkami nakładanymi za pomocą palety Fill na obiekty Fireworks w celu na­dania im bardziej realistycznych powierzchni. Mimo że obrazki tekstur mogą być peł­no­kolorowe, tekstura przed wykorzystaniem w Fireworks zawsze jest konwertowana na ska­lę szarości. Obrazki PNG dodane do katalogu Textures są dostępne w Fireworks bez ko­nieczności ponownego uruchamiania programu. Początkowo w Fireworks dostęp­nych jest czterdzieści dziewięć tekstur, umożliwiających tworzenie powierzchni takich jak pia­sek, trawa lub dym.

	Jeśli chcesz się dowiedzieć, jak tworzyć własne tekstury, zerknij do roz­działu 11.

URL Libraries XE "konfiguracja:URL Libraries"

Po zainstalowaniu Fireworks w katalogu URL Libraries (Biblioteki URL-i) znajduje się po­jedynczy, pusty plik o nazwie URLs.htm.

Ważnym elementem w pracy każdego projektanta internetowego jest tworzenie i za­rzą­dza­nie hiperłączami. Zamiast żmudnie wpisywać w Fireworks URL jeden po drugim, za każ­dym razem, gdy będą Ci potrzebne, możesz wpisać je wszystkie w dokumencie HTML i skopiować ten dokument do foldera URL Libraries. Następnie, za pomocą palety URL możesz ko­rzys­tać z URL-i zapisanych w tym pliku i łatwo przydzielać je do obiektów internetowych.

	Więcej informacji o bibliotekach URL znajdziesz w rozdziale 18.

Xtras XE "konfiguracja:Xtras"

Katalog Xtras (Rozszerzenia) zawiera Xtras Fireworks i moduły dodatkowe zgodne z Photo­sho­pem. Aby dodać moduł dodatkowy Photoshopa do Fireworks, wystarczy przeciągnąć plik (lub skrót do pliku w Windows albo alias w MacOS) do katalogu Xtras. Zazwyczaj Xtras prze­chowywane są we własnych, odrębnych katalogach. Ich miejsce w menu Xtras deter­minowane jest przez ustawienia samego modułu dodatkowego. Aby dodany moduł dodatkowy był dos­tęp­ny w menu Xtras lub w liście Effects Category znajdującej się w palecie Effect, musisz po­nownie uruchomić Fireworks.

Początkowo w katalogu Xtras znajduje się szereg Xtras umożliwiających Fireworks rozpoznawanie pewnych typów plików oraz moduły dodatkowe zgodne z Photoshopem, wcho­dzą­ce w skład pakietu Eye Candy 4000 LE.

	Więcej informacji o Xtras znajdziesz w rozdziale 12.

Plik preferencji XE "konfiguracja:plik preferencji" Fireworks 4

Graficzny podgląd preferencji Fireworks jest możliwy dzięki oknu dialogowemu Pre­fe­ren­ces, które możesz otworzyć za pomocą polecenia FilePreferences. Do wyboru jest tam wiele różnych ustawień, ale są to jedynie podzbiory kompletnych ustawień pre­fe­ren­cji znajdujących się w pliku preferencji Fireworks.

	Okno dialogowe Preferences zostało szczegółowo opisane w rozdziale 3.

Plik preferencji Fireworks 4 można znaleźć w następujących lokalizacjach:

• W Windows, plik preferencji Fireworks 4 znajdziesz w katalogu programu, czyli przeważnie w C:\Program Files\Macromedia\Fireworks 4\Fireworks 4.ini.

W Windows plik preferencji Fireworks 4 nazywa się Fireworks 4.ini, ale w katalogu Fireworks znajduje się również plik Fireworks 4 Preferences.txt. Jest to plik pusty i istnieje tylko dla zapewnienia zgodności z Fireworks 3. W obrębie niniejszej części będziemy korzystać tylko z pliku Fireworks 4.ini. Niektóre wersje Windows ukrywają cztery ostatnie znaki nazwy pliku, więc nazwa pliku może brzmieć po prostu Fireworks 4, ale plik będzie miał charakterystyczną ikonę rozpoczęcia.

• W MacOS, plik preferencji Fireworks 4 znajduje się tam, gdzie inne pliki pre­fe­rencji, czyli w katalogu Macintosh HD:System Folder:Preferences:Fire­works 4 Preferences.

		Pamiętaj, że należy stworzyć kopie zapasowe powyższych plików przed dokonaniem w nich jakichkolwiek zmian., aby nie utracić osobistych ustawień preferencji w Fireworks 4. Istnieją dwie metody edytowania zawartości pliku preferencji Fireworks 4. Pierwsza polega na otwarciu pliku w edytorze tekstu, takim jak Notepad (Notatnik) w Windows lub SimpleText w MacOS (rysunek 25.4). Plik ten jest domyślnie otwierany w tych edyto­rach, gdy zostanie dwukrotnie kliknięty.
Rysunek 25.4. Otwórz plik preferencji Fireworks 4 do edycji w edytorze tekstowym, np. Notepad w Windows lub SimplText w MacOS

W Windows format pliku preferencji wygląda następująco:

(Preference Heading)

PreferenceKeyword=value

Jego mały fragment widać na rysunku 25.4.

W MacOS format pliku preferencji wygląda następująco:

(PreferenceKeyword)(value)

Jego mały fragment wygląda tak:

(FindReplaceOptions_LogChanges)(1)

(FindReplaceOptions_ReplaceThenFind)(1)

(StylesOptions_LargePreview)(0)

(InfoPanelColorModel)(1)

(InfoPanelRulerUnits)(0)

(ColorMixerColorModel)(1)

(CurrentFavoritesFile)(URLs.htm)

Aby zmienić określone ustawienie preferencji, odszukaj jego słowo kluczowe i zmo­dy­fi­kuj wartość znajdującą się obok niego. Pamiętaj, że nie możesz wprowadzać dodatkowego przejścia do nowego wiersza, ani w żaden inny sposób zmieniać formatowania pliku. Po zakończeniu edycji za­pisz plik i ponownie uruchom Fireworks.

Na pewno się domyślasz, że zmiana wartości preferencji na chybił-tra­fił może mieć destrukcyjny wpływ na działanie programu. Wiele pre­fe­ren­cji nie może być modyfikowanych przez użytkownika, na przykład współ­rzędne preferencji DragTab. Jeśli przypadkowo uszkodzisz plik pre­ferencji, możesz przywrócić ich wartości domyślne poprzez usu­nię­cie pliku Fireworks 4 Preferences i ponowne uruchomienie programu. Fireworks utworzy nowy plik preferencji, zawierający wartości domyślne.

Inna metoda modyfikacji pliku preferencji Fireworks 4 to wykorzystanie Fireworks API. Metody getPref() i setPref() obiektu Fireworks (fw lub fireworks) umożliwiają odczytywanie i mo­dy­fi­ko­wanie dowolnych preferencji Fireworks. Na przykład, poniższy kod wyświetla okno dia­logowe ze ścieżką dostępu do głównej przeglądarki internetowej:

alert(fw.getPref('PrimaryBrowser'));

Zwróć uwagę, że ustawienie preferencji podawane jest w nawiasach. Za pomocą me­to­dy fw.getPref() możesz odczytywać ustawienia preferencji, zaś za pomocą metody fw.setPref() możesz je modyfikować. W poniższym zapisie, metoda setPref() zos­tała wykorzystana, aby „powiedzieć” Fireworks, że nigdy nie ma prosić użyt­kow­ni­ka o zarejestrowanie:

fw.setPref('NeverBugForRegistration', 'true');

Opisywane powyżej techniki mogą zostać wykorzystane do utworzenia skryptletu wy­świe­tlającego listę przeglądarek i dającego użytkownikowi możliwość wyboru głównej i dru­gorzędnej przeglądarki lub też do utworzenia polecenia, które będzie zmieniało głów­ną i drugorzędną przeglądarkę z wersji 4 na wersję 3, w zależności wskazanej przez Ciebie generacji przeglądarek. Oczywiście inne, podobne polecenie możesz wy­ko­rzystać do przywrócenia poprzednich wersji.

Główne ustawienia preferencji zostały opisane w tabeli 25.1. Kompletne zestawienie wszys­tkich ustawień możesz znaleźć w pliku Fireworks 4 Preferences.

Tabela 25.1.

Główne preferencje i ich ustawienia

Preferencja	Typ wartości
AliasTransformMode	Liczba
AllowFilePreviewInOpenDialog	True | False
AllowPictRgba	True | False
AllowPreviewOfNonLocalFiles	True | False
AllowTweeningOf3rdPartyEffects	True | False

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
AlwaysAppendFileExtensions	True | False
AnimGifDangerousOpt	True | False
AntiAliasFillAmount	Liczba
ApplyNPreviewVisible	True | False
ArtyFileExportType	Liczba
ArtyWriterFH8Compatible	True | False
AskWhenDuplicatingSymbols	True | False
AttemptToMatteEPSFiles	True | False
AutoGenBehaviors	True | False
AutoGrowImages	True | False
AutoImageEdit	True | False
BatchCustomOutputDest	Ścieżka dostępu
BatchDoBackup	True | False
BatchDoExport	True | False
BatchDoReplace	True | False
BatchExpFileFitHeight	Liczba
BatchExpFileFitWidth	Liczba
BatchExpFileHeight	Liczba
BatchExpFileMod	Tekst
BatchExpFileModType	Liczba
BatchExpFilePct	Liczba
BatchExpFileScaleType	Liczba
BatchExpFileSettings	Ustawienie eksportu
BatchExpFileWidth	Liczba
BatchGenName	Nazwa pliku
BatchIncrementalBackup	True | False
BatchOverwriteExstFiles	True | False
BatchTemplateName	Nazwa pliku
BatchWhichFiles	Liczba
BezFitCornerAngle	Liczba
BezFitExtraTightTolerance	Liczba
BezFitExtraTightToleranceStep	Liczba
BezFitMaxPctLenDiff	Liczba
BezFitTolerance2	Liczba

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
BezHandlePickDist	Liczba
BezInterpMaxErr	Liczba
BlackAndWhiteForDirector	True | False
BorderSelectionAmount	Liczba
BrushCurrentColor	Wartości kanałów Red-Green-Blue-Alfa
BrushDefaultColor	Wartości kanałów Red-Green-Blue-Alfa
BrushMaskCurrentColor	Wartości kanałów Red-Green-Blue-Alfa
BrushMaskDefaultColor	Wartości kanałów Red-Green-Blue-Alfa
BucketFillsSelection	True | False
BucketMouseOverPreview	True | False
ButtonEditor_Pos	Współrzędne X, Y
ButtonEditor_Size	Współrzędne X, Y
CheckForMissingStuffDuringScripts	True | False
ClipNuggetDragsMask	True | False
ColorMixerAutoApply	True | False
ColorMixerColorModel	Liczba
ContractSelectionAmount	Liczba
CopyAsPathsFH8Compatible	True | False
CropDocCropsImages	True | False
CropToolStickiness	Liczba
CropTool_Constraint	Liczba
CropTool_Horiz	Liczba
CropTool_Vert	Liczba
CurrentFavoritesFile	URLs.htm
CurrentShortcutSet	Nazwa zestawu
CustomCanvasColor	Wartości kanałów Red-Green-Blue-Alfa
DefaultDocColorState	Liczba
DefaultDocHorzSizeUnitName	„inch” (cale), „cm” lub „piksele”
DefaultDocRes	Liczba
DefaultDocResUnitName	“inch” (cale) lub “cm”
DefaultDocSize	Współrzędne X, Y
DefaultDocVertSizeUnitName	Piksele
DefaultJsMaskCompression	Liczba
DisableTextFontPreview	True | False
DisableWelcomeMovie	True | False
DoIdleTimePaging	True | False
DontShowPSOptions	True | False
DragOutThreshInPixels	Liczba
EditTransformMode	Liczba
EditURLChangesAll	True | False

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
EraserToolDiameter	Liczba
EraserToolEraseMode	Liczba
EraserToolIsCircle	True | False
EraserToolSoftEdge	Liczba
EraserToolStampSpacing	Liczba
ExpandAnimatedGifFrames	True | False
ExpandCapType	Liczba
ExpandJoinType	Liczba
ExpandMiterLimit	Liczba
ExpandSelectionAmount	Liczba
ExpandWidth	Liczba
ExportPngWithAdam7Interlacing	True | False
ExportPreviewPos	Współrzędne X, Y
ExportPreviewSize	Współrzędne X, Y
ExportSilently	True | False
ExportSlicesImageFolder	Ścieżka dostępu
ExportTransformMode	Liczba
ExtraPatternsDir	Ścieżka dostępu i nazwa pliku
ExtraPhotoshopPluginsDir	Ścieżka dostępu i nazwa pliku
ExtraTeksturesDir	Ścieżka dostępu i nazwa pliku
EyeDropperExtraSamples	Liczba
FeedbackColor	Wartości kanałów Red-Green-Blue-Alfa
FFReplaceFont	Nazwa czcionki
FFSearchFont	Nazwa czcionki
FillCurrentColor	Wartości kanałów Red-Green-Blue-Alfa
FillDefaultColor	Wartości kanałów Red-Green-Blue-Alfa
FillMaskCurrentColor	Wartości kanałów Red-Green-Blue-Alfa
FillMaskDefaultColor	Wartości kanałów Red-Green-Blue-Alfa
FindReplaceOptions_BackupOpts	Liczba
FindReplaceOptions_LogChanges	Liczba
FindReplaceOptions_ReplaceThenFind	Liczba
FindReplaceOptions_SaveNClose	Liczba
ForceLowercaseFilenames	True|False
FreeFormGravDiameter	Liczba

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
FreeFormGravDiameter_Sens	True|False
FreeFormGravity_Preview	True|False
FreeFormGravPower	Liczba
FreeFormGravPower_Sens	True|False
FreeFormPushNPull_Preview	True|False
FreeFormPushNPullLen	Liczba
FreeFormPushNPullLen_Sens	True|False
GridGuideSnapDist	Liczba
GuidePickDist	Liczba
HideEdgesAutoResets	True|False
HTMLCommentsOn	True|False
HTMLEmptyCellColor	Wartości kanałów Red-Green-Blue-Alfa
HTMLEmptyCellContents	Liczba
HTMLEmptyCellUsesCanvasColor	True|False
HTMLExtension	Rozszerzenie pliku
IgnorePNGGammaOnRead	True | False
ImageMapInspOpen	True | False
ImageMapInspPos	Współrzędne X, Y
ImageMapInspSize	Współrzędne X, Y
ImageSizeTransformMode	Liczba
InfoPanelColorModel	Liczba
InfoPanelOpen	True | False
InfoPanelPos	Współrzędne X, Y
InfoPanelRulerUnits	Liczba
InitialSettings_Alt	Tekst
InitialSettings_DoDemo	True | False
InitialSettings_ExportUndefined	True | False
InitialSettings_ImageMap	Liczba
InitialSettings_NameMode	Liczba
InitialSettings_ShimMode	Liczba
InitialSettings_URL	URL
InsetAmount	Liczba
InsetDirection	Liczba
InsetJoinType	Liczba

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
InsetMiterLimit	Liczba
InspectorsAutoApply	True | False
JsHeapLimit	Liczba
JsInterpIdleThreshInMilliseconds	Liczba
JsStackSize	Liczba
LassoToolAntiAliased	True | False
LassoToolFeatherAmount	Liczba
LastExportLocation	Ścieżka dostępu
LastImportLocation	Ścieżka dostępu
LastOpenLocation	Ścieżka dostępu
LastSaveLocation	Ścieżka dostępu
LayersExpandedByDefault	True | False
LayersList_ShowWebLayer	True | False
LayersList_ThumbnailSize	Liczba
LegLookForPNG	Liczba
LocalGamma	Liczba
LockGuides	True | False
LoptLookForPNG	Liczba
LZWSmoothingAmount	Liczba
MakeDocsDirtyOnOpen	True | False
MarqueeToolAntiAliased	True | False
MarqueeToolFeatherAmount	Liczba
MarqueeToolMode	Liczba
MarqueeToolModeRatioX	Liczba
MarqueeToolModeRatioY	Liczba
MarqueeToolModeWidthX	Liczba
MarqueeToolModeWidthY	Liczba
MaskBarberColor	Wartości kanałów Red-Green-Blue-Alfa
MaxFolderDropDepth	Liczba
MaxLenForPSPutTextProc	Liczba
MaxUndos	Liczba
MoveBitsWithPtrToolUsesFillColor	True | False
MultiFileBatchTypes	Lista formatów
MultiFileSearchTypes	Lista formatów
MultiFrameEditing	True | False
NeverBugForRegistration	True | False

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
NewDocHTMLTemplate	Nazwa pliku
NewDocSlicing	True | False
NewWindowsShowRulers	True | False
NumericXformXformsBFE	True | False
NumFloatingInspectors	Liczba
ObjectMgrOpen	True | False
ObjectMgrPos	Współrzędne X, Y
OnionSkin_AfterOpacity	Liczba
OnionSkin_BeforeOpacity	Liczba
OnionSkinInButtonEditor	True | False
OpenAsAnimation	True | False
OpenAsUntitled	True | False
OptAltTogglesClipNuggetDragsMask	True | False
OriginalFilesFolderName	Oryginalne pliki
OtherGamma	Liczba
PasteExportOrder	Lista formatów
PasteImportOrder	Lista formatów
PencilAntiAlias	True | False
PencilAutoErase	True | False
PickDistance	Liczba
PixelTrimThreshold	Liczba
PointerToolPaintHandles	True | False
PolygonToolIsAuto	Liczba
PolygonToolIsStar	True | False
PolygonToolSides	Liczba
PolygonToolSpikiness	Liczba
PopupMenuOvrCellClr	Wartości kanałów Red-Green-Blue-Alfa
PopupMenuOvrTxtClr	Wartości kanałów Red-Green-Blue-Alfa
PopupMenuPointSize	Liczba
PopupMenuTextOnly	True | False
PopupMenuTxtBold	True | False
PopupMenuTxtItalic	True | False
PopupMenuUpCellClr	Wartości kanałów Red-Green-Blue-Alfa
PopupMenuUpTxtClr	Wartości kanałów Red-Green-Blue-Alfa
PopupSwatchesColorPaletteChoice	Liczba
PopupSwatchesShouldSnapToWebSafe	True | False
PreserveAlpha	True | False
PreviewDrag	True | False
PreviewDragThreshInMilliseconds	Liczba
PreviewInBrowserOpensNewWindow	True | False
PrimaryBrowser	Ścieżka dostępu i nazwa pliku
PrimaryScratchDiskName	Nazwa/litera napędu
PsdExport_Effects	Liczba
PsdExport_Layers	Liczba
PsdExport_Settings	Liczba
PsdExport_Text	Liczba
PsdExport_Warn100	True | False
PSLayersAsFrames	True | False
PSSharedLayers	True | False
PSTekstEditable	True | False

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
RapidRedrawThreshhold	Liczba
RectToolCornerRadius	Liczba
ReplaceLogNazwa pliku	Nazwa pliku
ResizeConstrain	True | False
ResizeResample	True | False
SaveAsMinimalFileWithBogusPngData	True | False
SaveMkb1CompatFiles	True | False
SavePngWithAdam7Interlacing	True | False
ScriptFilesSaveAsText	True | False
ScrubPressure	True | False
ScrubRate	Liczba
ScrubVelocity	True | False
SecondaryBrowser	Ścieżka dostępu i nazwa pliku
SecondaryFeedbackColor	Wartości kanałów Red-Green-Blue-Alfa
SelectionAdjustTolerance	Liczba
SelectionMouseOverPreview	True | False
SelectiveJPEGColor	Wartości kanałów Red-Green-Blue-Alfa
SelectiveJPEGOpacity	Liczba
ShowAllFontsInMenu	True | False
ShowAllPreview_Up	True | False
ShowBarberPole	True | False
ShowGrid	True | False
ShowGuides	True | False
ShowPenPreview	True | False
ShowSolidPoints	True | False
SimplifyAmount	Liczba
SingleLayerEditing	True | False
SliceGuideColor	Wartości kanałów Red-Green-Blue-Alfa
SmoothSelectionAmount	Liczba
SnapDistance	Liczba
SnapToGrids	True | False
SnapToGuides	True | False
StampToolEdge	Liczba
StampToolMode	Liczba
StampToolSize	Liczba
StampToolSource	Liczba
StampToolStampSpacing	Liczba

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
StopImageEditModeInPixels	Liczba
StylesOptions_LargePreview	Liczba
SuppressWarningsOnShortcutConflict	True | False
SwapFileChunkSize	Liczba
SwapFileReclaimThreshFraction	Liczba
SwapFileReclaimThreshInMegs	Liczba
SwfExportAllFrames	True | False
SwfExportFromFrame	Liczba
SwfExportToFrame	Liczba
SwfFrameRate	Liczba
SwfJpegQuality	Liczba
SwfMaintainObjEditable	True | False
SwfMaintainTextEditable	True | False
SymbolEditor_Pos	Współrzędne X, Y
SymbolEditor_Size	Współrzędne X, Y
Text_AntiAliasedFill	True | False
Text_AntiAliasLevel	Liczba
Text_AutoKern	True | False
Text_BaselineShift	Liczba
Text_Bold	True | False
Text_FillColor	Nazwa czcionki
Text_Font	Nazwa czcionki
Text_HorizScale	Liczba
Text_Italic	True | False
Text_Justification	Liczba
Text_Leading	Liczba
Text_LeadingMode	Liczba
Text_Orientation	Liczba
Text_RangeKerning	Liczba
Text_Size	Liczba
Text_Underline	True | False
TextEditor_AutoApply	True | False

Tabela 25.1.

Główne preferencje i ich ustawienia (ciąg dalszy)

Preferencja	Typ wartości
TextEditor_AutoApplyTime	Liczba
TextEditor_RememberALLSettings	True | False
TextEditor_ShowFont	True | False
TextEditor_ShowSizeAndColor	True | False
TextEditorPos	Współrzędne X, Y
TextEditorSize	Współrzędne X, Y
TextToolRevertsToPointer	True | False
ThrobRedrawThreshhold	Liczba
TilePercentForRender	Liczba
ToolboxOpen	True | False
ToolboxPos	Współrzędne X, Y
TransformConstrain	True | False
TransformToolsAutoTrim	True | False
Transmogrify	Liczba
TryInterleaveSwapFiles	True | False
TryToRetainLayers	True | False
TryToUseVecOps	True | False
TwainSource	Ścieżka dostępu
UseBrushSizeCursors	True | False
UseExtraPatternsDir	True | False
UseExtraPhotoshopPluginsDir	True | False
UseExtraTeksturesDir	True | False
UseLastExportDirectory	True | False
UseMPIfPresent	True | False
UsePrecisionCursors	True | False
UseSmallVectorImportPages	True | False
WandToolAntiAliased	True | False
WandToolFeatherAmount	Liczba
WandToolTolerance	Liczba
WebsnapRange	Liczba
WriteDWNotes	Liczba
WriteThumbnailPreview	True | False
XformToolXformsBFE	True | False
XPDPaletteFeedback	True | False

Podsumowanie

Jak dla mnie, prawdziwa siła każdego narzędzia tkwi w możliwościach dostosowania go do indywidualnych potrzeb użytkownika. Możliwości Fireworks 4 mogą być znacz­nie rozszerzane za pomocą własnych poleceń, skryptletów i innych funkcji. Dosto­so­wu­jąc Fireworks do własnych potrzeb, musisz pamiętać o następujących rzeczach:

• Fireworks może być w dużym stopniu dostosowywany do indywidualnych po­trzeb użytkownika poprzez dodawanie plików do podkatalogów katalogu Configuration, w których znajdują się polecenia, Xtras i inne elementy programu.

• Skryptlety to autonomiczne aplety JavaScript, które mogą być uruchamiane w Fire­works. W Windows wszystkie pliki skryptletów muszą mieć roz­sze­rze­nia .jsf. W MacOS skryptlety powinny mieć kod Creator MKBY oraz kod File Type TEXT.

• Wszystkie preferencje Fireworks przechowywane są w prostym pliku teks­to­wym, który można modyfikować w dowolnym edytorze tekstowym lub za po­mo­cą skryptletów i poleceń.

W następnym rozdziale przyjrzymy się bliżej interfejsowi programowania Fireworks
- JavaScript API.




Rozdział 26.
Interfejs programowania aplikacji - Fireworks API

W tym rozdziale:

• Rozszerzenia Fireworks.

• Niestandardowe typy danych.

• Fireworks API.

• Tworzenie poleceń.

W jaki sposób aplikacja graficzna, taka jak Fireworks, potrafi przetwarzać kody Java­Scriptu? Otóż do Fireworks wbudowany jest interpreter JavaScript 1.4. JavaScript to in­ter­netowy język skryptowy i jako taki doskonale nadaje się do sterowania narzę­dzia­mi auto­rskimi. Fireworks JavaScript API (application programming interface
- interfejs pro­gramowania aplikacji) zawiera bardzo duży zestaw specjalnych obiek­tów z właści­woś­ciami i metodami umożliwiającymi sterowanie i modyfikowanie do­kumentów Fire­works.

Fireworks API XE "API" obsługuje statyczne oraz metody i właściwości oparte na kopiach. Statyczna me­toda lub właściwość (nazywane również klasami) są związane z samymi obiektami za­miast z kopiami obiektów. Jak wskazuje ich nazwa, me­to­da lub właściwość oparta na kopii związana jest z kopią obiektu.

Aby dobrze zrozumieć zagadnienia opisywane w tym rozdziale, musisz pamiętać o na­stę­pujących rzeczach:

• W tym rozdziale opisywane są zaawansowane zagadnienia dotyczące języków HTML i JavaScript. Jeśli dopiero stawiasz pierwsze kroki w JavaScripcie, warto mieć pod ręką inne źródło dotyczącego tego języka. Polecam czwarte wydanie książki Danny'ego Goodmana pt. „JavaScript. Księga Eksperta” opu­blikowanej przez Wydawnictwo Helion w 2000r.

• W tym rozdziale w opisach określonych elementów Fireworks API trzymałem się pewnych konwencji. Argumenty metod wyróżniane są kursywą, zaś opcjo­nal­ne argumenty wpisywane są w nawiasach.

• W związku z tym, że Fireworks API zawiera teraz wiele różnych metod i obiektów, czasami od­woły­wałem się do dokumentacji technicznej firmy Macromedia zatytułowanej Ex­tending Fireworks, dostępnej na CD-ROM-ie instalacyjnym Fireworks w for­macie PDF lub w witrynie Fireworks, pod adresem www.macromedia.com/software/fireworks/extensability.html.

Niestandardowe typy danych XE "API:niestandardowe typy danych"

Fireworks pracuje z obiektami graficznymi, na przykład maskami oraz określonymi usta­wieniami, takimi jak rozdzielczość, które nie są powszechnie obsługiwane przez Java­Script, dlatego potrzebne są pewne standardowe metody formatowania tych da­nych. Macromedia dostarcza pewnych wskazówek dotyczących formatowania kolorów, URL plików, masek, matryc, punktów, prostokątów i rozdzielczości.

Kolory

Kolory definiowane są w szesnastkowym modelu RGB (Red - czerwony, Green - zie­lo­ny i Blue - niebieski), który jest jednym z modeli dostępnych w palecie Color Mixer Fire­works. Jest to standardowy model definiowania kolorów w języku HTML. Wartości ko­lorów w tym modelu wpisywane są w formacie „#RRGGBB”, gdzie każdy z kanałów po­dawany jest jako liczba szesnastkowa. Przykładowo - czysta czerwień posiada war­tość „#FF0000”. Dodatkowo w formacie „#RRGGBBAA” zdefiniować można kanał alfa.

	Jeśli nie zostaną zdefiniowane wartości kanału alfa, Fireworks auto­ma­tycznie zakłada, że kanał alfa jest kompletnie nieprzezroczysty. Jed­no­lity, czerwony kolor wypełnienia posiadający wartość #FF0000 jest więc interpretowany przez Fireworks tak, jakby miał wartość #FF0000FF.

URL plików

Fireworks definiuje nazwy plików i ścieżki dostępu w skryptach jako URL plików. Na przy­kład - ścieżka dostępu do katalogu Commands Fireworks w Windows

C:\Program Files\Macromedia\Fireworks 4\Configuration\Commands

po zapisaniu jako URL pliku, wyglądałaby tak:

file:///C|Program%20Files/Macromedia/Fireworks%204/Configuration/Commands

Zwróć uwagę, że wszystkie lewe ukośniki zostały zastąpione zwykłymi ukoś­ni­ka­mi, zaś dwukropek występujący po literze dysku zastąpiono pionową kreską. Spacja za­stą­piona została kodem%20.

W MacOS, ścieżka dostępu do katalogu Commands (przy założeniu, że dysk posiada naz­wę Grover) wygląda mniej więcej tak:

Grover:Applications:Macromedia Fireworks 4:Configuration:Commands

Jako URL pliku, ścieżka wyglądałaby następująco:

file:///Grover/Applications/Macromedia%20Fireworks%204/Configuration/Commands

Ponownie spacja została zastąpiona kodem%20 i użyte zostały zwykłe ukośniki.

	Przy pisaniu hybrydowych skryptów użyj właściwości platform obiektu fw, aby określić, czy skrypt będzie uruchamiany w Windows czy w Mac­OS i poprawnie napisz adresy URL plików.

Maski

Maski alfa definiowane są za pomocą następujących właściwości:

• maskBounds definiuje prostokąt będący obszarem maski.

• Za pomocą właściwości maskKind określ jeden z pięciu typów maski: rec­tan­­gle, oval, zlib compressed, rle compressed lub uncom­pressed.

• maskEdgeMode może przyjmować wartości "hard" lub "antialiased".

• Wartość właściwości featherAmount może być liczbą z przedziału od 0 do 1000, która reprezentuje stopień zmiękczania w pikselach. Wartość 0 oznacza brak zmiękczania.

• Dla masek typu rectangle i oval wartość maskData jest ignorowana. Dla in­nych typów masek, właściwość maskData powinna zawierać 8-bitowe dane mas­ki podawane w formacie szesnastkowym.

Maska jest definiowana w formacie {maskBounds: prostokąt, maskKind: łańcuch, mask­EdgeMode: łańcuch, featherAmount: liczba całkowita, maskData: łańcuch szesnastkowy}.

Matryce

W programowaniu, grafika komputerowa jest opisywana z wykorzystaniem macierzy o wy­miarach 3×3 nazywanej matrycą. W Fireworks, format matrycy jest następujący:

{matrix: [liczba zmiennoprzecinkowa, liczba zmiennoprzecinkowa, liczba zmien­­no­prze­cinkowa, liczba zmiennoprzecinkowa, liczba zmiennoprzecinkowa, liczba zmienno­przecin­ko­wa, liczba zmiennoprzecinkowa, liczba zmienno­prze­cinkowa, liczba zmiennoprzecinkowa].

Omówienie matryc wykracza poza zakres tej książki.

Punkty

Punkty definiowane są w formacie {x: liczba zmiennoprzecinkowa, y: liczba zmiennoprzecinkowa}. I tak przy korzystaniu z na­rzę­dzia Pen (Pióro) położenie pierwszego punktu wyrażone zostałoby następująco:

fw.getDocumentDOM().addNewSinglePointPath({x:124, y:37},

{x:124, y:37},{x:124, y:37},true);

W tym przykładzie współrzędne wszystkich trzech punktów są takie same i opisują od­po­wiednio pierwszy uchwyt kontrolny Béziera, właściwy punkt i drugi uchwyt kon­trolny.

	W powyższym przykładzie i pozostałych podrozdziałach książki, wyra­że­nie fw.getDocumentDOM() jest używane jako odwołanie do aktyw­ne­go dokumentu Fireworks.

Prostokąty

Prostokąty są definiowane w formacie {left; liczba, top: liczba, right: liczba, bottom: liczba}. Jeżeli narysujesz na przykład prostokąt o wymiarach 50×50 pikseli, kod opisujący początkowy, lewy górny wierzchołek kształtu wyglądałby tak:

fw.getDocumentDOM().addNewRectangle({left:0, top:0, right:100, bottom:50},0);

Rozdzielczość

Rozdzielczość jest definiowana w Fireworks w następującym formacie {pixel­sPer­Unit: liczba, units: [„inch” (cale) lub „cm”]. Poniższy kod ustawia roz­dziel­czość bieżącego dokumentu na 72 dpi:

fw.getDocumentDOM().setDocumentResolution({pixelsPerUnit:72,

units:"inch "})

Metody globalne

Globalne metody są zawsze dostępne dla wszystkich skryptów Fireworks. Interaktywne funk­cje są bardzo pomocne przy usuwaniu błędów kodu i dostarczaniu wskazówek dla użyt­kownika. Dla operacji eksportu dostępne są tylko dwie funkcje umożliwiające ge­ne­rowanie plików: WRITE_HTML() i write().

alert XE "API:alert" (komunikat)

Metoda alert() wyświetla proste okno dialogowe (rysunek 26.1) z tytułem, komu­ni­ka­tem i przyciskiem OK. Komunikat może być łańcuchem tekstowym, zawartością zmien­nej lub wynikiem wyrażenia JavaScriptu. Okno dialogowe alert() musi być usunięte, za­nim użytkownik będzie mógł kontynuować pracę (taki typ okna nazywany jest mo­dalnym).

Rysunek 26.1. Metoda alert() jest prostym sposobem dostarczania użytkownikom dowolnych informacji

Poniższy kod informuje użytkownika o zakończeniu operacji przetwarzania wsado­wego:

alert("Ukończone!");

confirm XE "API:confirm" (komunikat)

Metoda confirm() wyświetla łańcuch tekstowy w modalnym oknie dialogowym, a nas­tęp­nie oczekuje, aż użytkownik kliknie przycisk OK lub Cancel (rysunek 26.2). Wartość zwra­cana funkcji to prawda, gdy użytkownik kliknie przycisk OK i fałsz po kliknięciu przycisku Ca­n­cel.

Rysunek 26.2. Użyj metody confirm(), aby uzyskać od użytkownika potwierdzenie w czasie operacji eksportu lub przetwarzania wsadowego

Poniższy kod pyta użytkownika, czy jest gotów przeprowadzić określoną operację. Jeśli nie, operacja zostanie przerwana:

function doConfirm(curBeh){

var message = "Ready to proceed with integrating " + curBeh;

if (confirm(message)){

doFile(curBeh)

}

}

prompt XE "API:prompt" (nagłówek, tekst)

Metoda prompt() umożliwia użytkownikowi wpisywanie w modalnym oknie dialo­go­wym (rysunek 26.3) informacji, które mogą być dodawane do kodów JavaScript lub HTML. Okno dialogowe prompt() składa się z pola tekstowego (wartość domyślna) oraz przycisków OK i Cancel. Po kliknięciu przycisku OK zwracana jest zawartość pola teks­towego, w przeciwnym wypadku zwracane jest zero.

Rysunek 26.3. W oknie dialogowym otwieranym za pomocą metody prompt() użytkownik może wpisać łańcuch tekstowy

Poniższy kod umożliwia użytkownikowi wybranie nazwy bazowej plastrów w czasie pra­cy skryptu:

function getName() {

var baseName = ""

prompt("Enter the basename for the slice now being ù

exported.", baseName)

}

Obecnie metoda prompt() jest jedynym mechanizmem umożli­wia­jącym programistom, rozszerzającym możliwości Fireworks, groma­dze­nie para­me­trów od użytkownika. Niektórzy autorzy rozszerzeń do po­bie­ra­nia danych od użytkownika używają wielu metod prompt lub jed­nej, zawie­rającej wartości oddzielane od siebie przecinkami. Jednym z bar­dziej zaawansowanych zastosowań jest otwarcie formularza parame­trów Dreamweavera i wykorzystanie ich do uruchomienia polece­nia Fire­works.

WRITE_HTML XE "API:WRITE_HTML" (arg1[, arg2, ..., argN])

Metoda WRITE_HTML() przekształca wszystkie argumenty na łańcuchy i generuje łań­cuch tekstowy w aktualnie eksportowanym pliku HTML. Metoda ta dostępna jest jedy­nie w trak­cie eksportu. Wszystkie argumenty są zapisywane jeden po drugim, co umoż­li­wia łat­we łączenie tekstu i wartości. Aby utworzyć znak końca wiersza, użyj wyrażenia \n, któ­re jest automatycznie przekształcane na znak Carriage Return Line Feed (CR LF) dla
Win­dows i Carriage Return dla systemów MacOS. Cudzysłowy mogą być eliminowane po­przez poprzedzanie ich lewymi ukośnikami. Interpretowane są wówczas jako częś­ci łańcucha, a nie jako cudzysłowy.

Poniższy kod zapisuje znacznik <title> w pliku HTML z wykorzystaniem nazwy pli­ku oraz pierwszego znacznika <meta>:

WRITE_HTML("<title>", exportDoc.filename, "</title>\n");

WRITE_HTML("<meta name=\"description\" content==\"Fireworks ¬ Splice HTML \">\n");

Jeżeli nazwą pliku byłoby Muzeum, kod wyglądałby następująco:

<title>Muzeum</title>

<meta name="description " content="Fireworks Splice HTML">

write XE "API:write" (arg1[, arg2, ..., argN])

Metoda write() działa dokładnie tak samo, jak metoda WRITE_HTML(). Macromedia za­leca stosowanie metody WRITE_HTML() zamiast write(), aby zapobiec sytuacji, w któ­rej programista pomyli ją z metodą JavaScriptu - document.write().

Obiekty globalne

Obiekty globalne Fireworks umożliwiają zarządzanie plikami, inicjowanie operacji „znajdź i zamień”, generowanie raportów o błędach w zlokalizowanym języku oraz do­star­czanie prawie wszystkich informacji o ustawieniach dokumentów lub bieżącej apli­ka­cji. Kluczowym obiektem globalnym jest fireworks , czyli w skrócie fw (zauważ, że pisany małymi literami). Globalne obiekty oraz związane z nimi metody i właściwości są szczególnie przy­dat­ne przy tworzeniu poleceń, szablonów i skryptletów.

	W poprzednich wersjach, głównym obiektem globalnym był obiekt App. Fireworks 4 wciąż obsługuje obiekt App, dla zachowania zgodności, ale nie powinien być on już używany.

fw XE "API:obiekt App"

Obiekt fw daje dostęp do informacji o aplikacji Fireworks zainstalowanej w systemie użyt­kownika. Poprzez obiekt fw programiści mogą określać wersję systemu ope­ra­cyj­ne­go, położenia określonych katalogów, takich jak Commands i Templates, typy aktual­nie otwartych plików oraz wiele innych danych.

Dwie najbardziej przydatne metody obiektu fw to getPref() i setPref(). Za ich po­mo­cą możesz sterować każdym elementem interfejsu Fireworks, jego ustawieniami i op­cja­mi przywracania.

Właściwości

Większość właściwości obiektu fw jest przeznaczonych tylko do odczytu (możesz je pobierać, ale nie mo­żesz ich ustawiać). Wyjątkami są metody batchStatusString, dismissDia­log­WhenDone, progressCountCurrent oraz progressCountTotal.

appBatchCodeDir

Wartością zwracaną jest ścieżka dostępu do katalogu Batch Code.

appDir

Wartością zwracaną jest ścieżka dostępu do katalogu aplikacji Fireworks.

appExportSettingsDir

Wartością zwracaną jest ścieżka dostępu do katalogu Export Settings.

appFavoritesDir

Wartością zwracaną jest ścieżka dostępu do katalogu URL Libraries.

appHelpDir

Wartością zwracaną jest ścieżka dostępu do katalogu Help.

appHtmlCodeDir

Wartością zwracaną jest ścieżka dostępu do katalogu HTML Code.

appJsCommandsDir

Wartością zwracaną jest ścieżka dostępu do katalogu Commands.

appJsExtensionsDir

Wartością zwracaną jest ścieżka dostępu do katalogu JSExtensions.

appMacCreator

Macintosh identyfikuje aplikację otwierającą dany plik za pomocą jego kodu Creator. W MacOS właściwość appMacCreator zwraca dla Fireworks kod Creator MKBY.

appMacJsfFileType

Mac identyfikuje typ pliku określonego dokumentu za pomocą wbudowanego kodu File Ty­pe (Typ pliku). W systemach MacOS kodem File Type plików tekstowych jest TEXT. Po­lecenia i skryptlety Fireworks są plikami tekstowymi, więc właściwość appMac­Jsf­FileType zwraca łańcuch TEXT.

appPatternsDir

Wartością zwracaną jest ścieżka dostępu do katalogu Patterns.

appPresetsDir

Wartością zwracaną jest ścieżka dostępu do katalogu Presets.

appSettingsDir

Wartością zwracaną jest ścieżka dostępu do katalogu Settings.

appStylesDir

Wartością zwracaną jest ścieżka dostępu do katalogu Styles.

appSymbolLibrariesDir

Wartością zwracaną jest ścieżka dostępu do katalogu Libraries.

appTexturesDir

Wartością zwracaną jest ścieżka dostępu do katalogu Textures.

appXtrasDir

Wartością zwracaną jest ścieżka dostępu do katalogu Xtras.

batchStatusString

Właściwość batchStatusString (która jest tylko do odczytu) jest używana do wy­świe­tlania bieżącego łańcucha w oknie dialogowym Batch Progress. Możesz ustawić no­wy komunikat wyświetlany w tym oknie poprzez ustawienie wartości na żądany łań­cuch. Poniższy kod zapisany w pliku BatchTemplate.jst wyświetla nazwę każdego prze­twarzanego pliku:

fw.batchStatusString = Files.getFilename(sourceDocumentPath);

dismissBatchDialogWhenDone

Przy wyświetlaniu okna dialogowego Batch Progress możesz je automatycznie opusz­czać poprzez ustawienie właściwości dismissBatchDialogWhenDone (która oczy­wiś­cie nie jest tylko do odczytu) na TRUE, jak w poniższym przykładzie:

fw.dismissBatchDialogWhenDone = true;

documentList

Właściwość documentList zwraca za pomocą obiektu Document tablicę, zawierającą wszys­tkie dokumenty aktualnie otwarte w Fireworks.

Poniższy kod najpierw uaktywnia pierwszy dokument Fireworks, a następnie przenosi go na wierzch, umożliwiając jego edycję:

var editFirst = fw.documentList [0 ].makeActive();

platform

Właściwość platform zwraca win, jeśli Fireworks jest uruchomiony w Windows i mac, jeśli jest uruchomiony w MacOS.

progressCountCurrent

W czasie operacji przetwarzania wsadowego, okno dialogowe informuje o ilości prze­two­rzonych plików, wyświetlając tekst typu „1 of 6 files processed” („Przetwo­rzono 1 z 6 plików”). Właściwość progressCountCurrent (która nie jest tylko do od­czytu) jest odpowiedzialna za pierwszą liczbę wyświetlaną w tym oknie dia­lo­go­wym. Używana jest w pętli zwiększającej liczbę o jeden po każdym zakończeniu prze­twa­rzania pliku.

progressCountTotal

Właściwość progressCountTotal jest odpowiedzialna za drugą liczbę wyświetlaną w oknie dialogowym Batch Progress, czyli całkowitą liczbę plików do przetworzenia. War­tość tej właściwości może być ustawiana dla liczby dokumentów wybieranych w ok­nie dialogowym wyświetlanym na początku operacji przetwarzania wsadowego. Ta­ką listę plików zwraca właściwość chooseScriptTargetDialog(). Aby zatem zde­­­fi­niować całkowitą liczbę plików do przetworzenia, możesz użyć następującego kodu:

var theDocList = fw.chooseScriptTargetDialog(PNG);

fw.progressCountTotal = theDocList.length;

Metody

Wszystkie funkcje związane z obiektem fw są bardzo przydatne. Za ich pomocą mo­żesz otworzyć określony plik, zmienić dowolną preferencję Fireworks lub nawet zam­knąć program.

	Wszystkie metody obiektu fw są statyczne.

chooseScriptTargetDialog(listaFormatów)

Podobnie jak locateDocDialog(), metoda chooseScriptTargetDialog() wyświe­tla okno dialogowe, w którym użytkownik może wybrać pliki, które mają być prze­twa­rza­ne. W przeciwieństwie do locateDocDialog(), w tej metodzie jako argument wy­ma­gana jest lista formatów i nie trzeba definiować maksymalnej liczy dokumentów. W po­niż­szym przykładzie lista formatów została ograniczona do plików TIFF:

var theFiles = fw.chooseScriptTargetDialogù ("kMoaCfFormat_TIFF")

	Aby ograniczyć okno dialogowe wyświetlane za pomocą metody choose­ScriptTargetDialog() do wielu typów plików, użyj tablicy po­dob­nej do tej, jakiej używaliśmy w metodzie locateDocDialog().

findOpenDocument(ścieżkaDostępu)

Metoda findOpenDocument() sprawdza, czy w oknie dokumentu Fireworks otwarty jest dokument o określonej ścieżce dostępu. Jeśli tak, zwracany jest obiekt Document. Je­śli nie, zwracane jest zero. Przeważnie metoda findOpenDocument() pobiera argu­ment ścieżki dostępu z tablicy nazw plików, jak w poniższym przykładzie:

theDocList = fw.chooseScriptTargetDialog(fw.getPref("PNG"));

for (var i = 0; i < theDocList.length; i++){

theDoc = fw.findOpenDocument(theDocList[i]);

if theDoc == null {

alert("No file found");

}

}

getPref(nazwaPreferencji) i setPref(nazwaPreferencji, wartośćPreferencji)

Metody getPref() i setPref() pozwalają odczytywać (i zmieniać) ustawienia prawie wszys­tkich preferencji Fireworks. Możliwości oferowane przez te dwie metody są na­praw­dę duże — od zmiany domyślnego koloru wypełnienia po modyfikacje współ­rzęd­nych x i y wyświetlanych w oknie dialogowym Edit Gradient.

Argumenty prefname (nazwaPreferencji) i prefval (wartośćPreferencji) są słowami klu­czowymi zawartymi w pliku Fireworks 4 Preferences.

	Więcej informacji o pliku Fireworks 4 Preferences i o ustawieniach pre­­ferencji znajdziesz w rozdziale 25.

locateDocDialog(maksymalnaLiczbaDokumentów [, listaFormatów])

Metoda locateDocDialog() wyświetla okno dialogowe (rysunek 26.4) umożliwiające użyt­kownikowi wybranie jednego lub więcej plików.

Rysunek 26.4. Za pomocą metody locateDocDialog() możesz otworzyć okno dialogowe pozwalające wybrać pliki dla określonej operacji

Argument maksymalnaLicz­ba­Pli­ków mówi Fireworks, czy użyć standardowego okna dialo­go­we­go Open do otwarcia po­jedynczego pliku, czy też okna Open Multiple Files do zała­do­wa­nia więcej niż jednego pli­ku. Użyj wartości 1, 0 lub -1, aby otworzyć okno dialo­go­we Open, lub dowolnej war­tości większej od 1, aby otworzyć okno dialogowe Open Multiple Files. Liczba wyko­rzys­tana jako argument nie ogranicza ilości plików, które mogą być otwierane.

Argument listaFormatów jest opcjonalną listą typów plików, które mogą być otwie­ra­ne w Fireworks. Jeśli argument ten zostanie pominięty, w oknie dialogowym wyświe­tla­ne będą wszystkie pliki. Argument listaFormatów podawany jest w formie ta­bli­cy. Aby na przykład zdefiniować formaty PNG i TIFF dla okna dialogowego Open, użyj na­­stępującego kodu:

var formats = [ "PNG", "kMoaCfFormat_TIFF" ];

var theFiles = fw.locateDocDialog(1, formats);

for (f in theFiles){

alert(theFiles[f]);

}

	Wyświetlane powyższym kodem okno dialogowe umożliwia użyt­kow­ni­ko­wi także wybranie opcji All Readable Files (Wszystkie zgodne pliki) i All Files (Wszystkie pliki).

Metoda locateDocDialog() zwraca tablicę nazw plików lub - jeśli okno dialogowe zo­stanie anulowane - zero.

	Możesz również udostępnić wszystkie typy plików znajdujących się w sys­temie użytkownika, definiując ustawienie MultiFileBatchTypes za po­mocą następującego kodu: var thePrefs = fw.getPrefs(MultiFileBatchTypes); var theFile = fw.locateDocDialog(1,thePrefs);

W tabeli 26.1 znajdziesz wszystkie argumenty listy formatów.

Tabela 26.1.

Argumenty listy formatów

Argument	Dokument	Rozszerzenie pliku	Kod File Type w MacOS
ADOBE AI3	Adobe Illustrator	.ai	uMsk
Fireworks JavaScript	Fireworks JSF	.jsf	TEXT
kMoaCfFormat_BMP	Bitmapa	.bmp	BMP
kMoaCfFormat _FreeHand7and8	Macromedia FreeHand 7.0 lub 8.0	.fh7 lub .fh8	AGD3
kMoaCfFormat_GIF	Obrazek GIF	.gif	GIFf
kMoaCfFormat_JPEG	Obrazek JPEG	.jpg lub .jpeg	JPEG
kMoaCfFormat_PICT	Obrazek MacOS	.pict, .pic lub .p	PICT
kMoaCfFormat_RTF	Rich Text Format	.rtf	RTF
kMoaCfFormat_Text	Plik tekstowy ASCII	.txt	TEXT
kMoaCfFormat_TIFF	Obrazek TIFF	.tif lub .tiff	TIFF
PNG	Obrazek PNG	.png	PNGf
PS30	Dokument Photoshopa (w wersji 3.0 lub późniejszej)	.psd	8BIM

openDocument (ścieżkaDostępu[, otwórzJakoBezTytułu])

Metoda openDocument() otwiera plik znajdujący się w lokalizacji definiowanej argu­men­tem ścieżkaDostępu. Metoda ta otwiera kolejną kopię aktualnie otwartego pli­ku, zatem metoda openDocument() najczęściej jest stosowana w połączeniu z metodą findOpenDocument().. Jeżeli plik nie może zostać otwarty, openDocument() zwraca ze­ro. Jeżeli opcjonalny argument otwórzJakoBezTytułu jest ustawiony na TRUE, do­ku­ment jest otwierany w nowym oknie bez tytułu.

quit()

Metoda quit() zamyka Fireworks. Jeśli nie ma otwartych żadnych dokumentów, które zo­stały zmodyfikowane i nie były zapisane, nie jest wyświetlane żadne potwierdzenie zam­knięcia programu. Wykorzystując metodę confirm() możesz jednak utworzyć włas­ne okno potwierdzenia:

if (confirm("Na pewno chcesz wyjść?")){

fw.quit();

}

Obiekt Document XE "API:obiekt Document"

Obiekt Document w Fireworks podobny jest do obiektu Document używanego w Java­Script. Oba umożliwiają precyzyjne sterowanie dokumentami. Obiekt Document Fire­works jest wykorzystywany do definiowania parametrów eksportu oraz o wiele pros­t­szych usta­wień, takich jak opcje operacji „znajdź i zamień”.

Ponieważ w większości przypadków obiekt ten występuje w połączeniu z konkretnym do­kumentem, nie posiada żadnych statycznych właściwości, ma tylko dwie statyczne me­tody: findExportFormatOptionsByName() i makeGoodNativeFilePath().

Właściwości

Obiekt Document posiada wiele właściwości umożliwiających określanie, czy plik jest otwarty, czy został zmodyfikowany, pobieranie nazwy aktualnie otwartego pliku i wiele in­nych operacji.

Wszystkie właściwości obiektu Document dotyczą określonych dokumentów, więc mu­szą być związane z określoną kopią obiektu Document, a nie z samym obiektem. Aby po­brać kopię obiektu Document, użyj następującego kodu wykorzystującego funk­cję getDocumentDOM():

var theDoc = fw.getDocumentDOM();

Teraz właściwości bieżącego dokumentu będą już dostępne. Aby na przykład ustawić bie­żący kolor tła, użyj następujących wyrażeń:

var theDoc = fw.getDocumentDOM();

alert(theDoc.backgroundColor);

backgroundColor

Właściwość koloru tła dokumentu.

backgroundUrl

Względny lub absolutny URL przydzielony do łącza tła.

brushes

Właściwość brushes jest tylko do odczytu i zawiera tablicę obiektów Brush (pę­dzle) dostępnych w bieżącym dokumencie. Obiekt Brush posiada właściwości, takie jak antiAliased, diameter i flowRate umożliwiające sterowanie parametrami ob­ry­sów używanych w dokumencie. Kompletną listę wszystkich właściwości i wartości obiek­tu Brush znajdziesz w dokumentacji Extending Fireworks.

currentFrameNum

Aktualnie zaznaczona klatka w palecie Frames.

currentLayerNum

Aktualnie zaznaczona warstwa w palecie Layers.

defaultAltText

Domyślny tekst zastępczy, jeśli nie został określony żaden inny dla pojedynczego lub plas­trowanego obrazka.

exportFormatOptions

Identyczna jak właściwość exportOptions (opisywana poniżej). Została zachowana, aby zapewnić zgodność ze skryptami Fireworks 2.

exportOptions

Mimo że ważne są wszystkie właściwości wszystkich obiektów, najbardziej złożoną i naj­­prawdopodobniej najczęściej stosowaną właściwością obiektu Document jest ex­por­tOptions. Właściwość ta zwraca obiekt zawierający bieżące ustawienia eks­por­tu. Większość ustawień eksportu wyrażanych jest za pomocą wartości liczbowych za­miast łańcuchów. Na przykład poniższy kod

var theFormat = theDoc.exportOptions.exportFormat

zwraca 0, jeśli formatem pliku jest GIF, lub 1, jeśli formatem tym jest JPEG. Kilka usta­wień: paletteInfo, paletteEnries i frameInfo wyrażanych jest za pomocą ta­blic.

W tabeli 26.2 znajduje się szczegółowa lista ustawień właściwości exportOptions.

Tabela 26.2.

Ustawienia właściwości exportOptions

Ustawienie	Możliwe wartości
animAutoCrop	True|False
animAutoDifference	True|False
applyScale	True|False
ColorMode	0 (indeksowany), 1 (24-bitowy kolor) lub 2 (32-bitowy). Indeksowany jest wartością domyślną
crop	True|False
cropBottom	0 - wysokość obrazka minus 1
cropLeft	0 - szerokość obrazka minus 1
cropRight	0 - szerokość obrazka minus 1
cropTop	0 - wysokość obrazka minus 1
ditherMode	0 (brak), 1 (2 x 2) lub 2 (dyfuzja), domyślne jest „brak”
ditherPercent	0-100, domyślne jest 100
exportFormat	0 (GIF), 1 (JPEG), 2 (PNG), 3 (własne, wliczając TIFF i BMP) lub 4 (Animowany GIF)
frameInfo (array)
delayTime	0-100000
frameHidden	True|False
frameName	Tekst: nazwa klatki pokazywanej w palecie Frames
gifDisposalMethod	0 (nieokreślona), 1 (brak), 2 (tło) lub 3 (poprzednia)
interlacedGIF	True|False
jpegQuality	1-100, domyślne jest 80
jpegSmoothness	0-8, domyślne jest 0
jpegSubsampling	0-4, domyślne jest 1
localAdaptive	True|False
lossyGifAmount	0-100, domyślne jest 0
macFileCreator	„XXXX” (kod Macintosh Creator code, dla Fireworks jest to „MKBY”)
macFileType	„XXXX” (kod Macintosh File Type, używany do wyboru formatu pliku jeśli exportFormat = 3)
name	Tekst-Nazwa ustawienia

Tabela 26.2.

Ustawienia właściwości exportOptions (ciąg dalszy)

Ustawienie	Możliwe wartości
numCustomEntries	0-256, domyślne jest 0
numEntriesRequested	0-256, domyślne jest 128
numGridEntries	0-256, domyślne jest 6
optimized	True|False
paletteEntries (array)
colorstring1 colorstring2 itd.	Wartości kanałów Red-Green-Blue-Alpha (Czerowny-Zielony-Niebieski-Alfa, z których każda należy do zakresu od 0 do 255. Przykład: „255 0 0 255”. Jeśli wartość kanału alfa wynosi 0, kolor jest kompletnie przezroczysty.
paletteInfo (array)
colorLocked	True|False
colorModified	True|False
colorSelected	True|False
colorTransparent	True|False
colorDeleted	True|False
paletteMode	„adaptacyjna” (domyślne), „własny”, „siatka”, „monochromatyczna)”, „Macintosh”, „Windows”, „dokładna” lub „Web 216”
paletteTransparencyType	0 (brak), 1 (indeksowana), 2 (indeksowana alfa) lub 3 (RGBA); domyślne jest „brak”
percentScale	1-100000, domyślne jest 100
progressiveJPEG	True|False
savedAnimationRepeat	0-1000000, domyślne jest 0
sorting
transparencyIndex	0-255 lub -1, jeśli brak przezroczystości
useScale	True|False
webSnapAdaptive	True|False
webSnapTolerance	Zawsze ustawiona na 14
xSize	-100000 do 100000
ySize	-100000 do 100000

Ustawienia useScale i applyScale obiektu Document są uzależnione od siebie przy de­finiowaniu stosowanej metody skalowania. Przy jej określaniu obowiązują na­stę­pu­ją­ce zasady:

• Jeśli useScale i applyScale wynoszą FALSE, przy eksporcie nie jest wy­ko­ny­wane żadne skalowanie.

• Jeśli useScale wynosi TRUE, niezależnie od ustawienia applyScale stoso­wa­na jest percentScale.

• Jeśli useScale wynosi FALSE, zaś applyScale wynosi TRUE, do de­fi­nio­wa­nia skali używane są właściwości xSize i ySize:

• Jeśli wartość jest dodatnia, wykorzystywana jest do definiowania współ­rzęd­nych na osi x lub y.

• Jeśli wartość wynosi 0, współrzędne x i y mogą się zmieniać bez ogra­niczeń.

• Jeśli wartość jest ujemna, współrzędne x i y mogą się zmieniać, ale nie mo­gą być większe niż wartość bezwzględna określonej liczby.

Pamiętaj, że jeśli jedna liczba jest dodatnia a druga ujemna, zawsze używana jest war­tość dodatnia.

ExportSettings

Obiekt ExportSettings posiada właściwości, takie jak htmlDestination ("sa­me", one up", "custom", "clipboard") i shimGeneration ("none", "tran­s­pa­rent", "internal", "nested tables"). Kompletną listę właściwości i wartości związ­anych z obiektem ExportSettings znajdziesz w dokumentacji tech­nicznej Extending Fireworks.

filePathForRevert

Właściwość filePathForRevert zwraca ścieżkę dostępu, którą może odczytać po­le­ce­nie Revert (Przywróć). Innymi słowy, zwracana jest ścieżka dostępu do pliku ot­war­te­go przy tworzeniu dokumentu. Stosuj filePathForRevert do determinowania orygi­nal­nej ścieżki dostępu dla plików nie będących plikami źródłowymi Fireworks oraz doku­men­tów otwieranych jako „Bez tytułu”. Właściwość ta zwraca zero, jeśli dokument jest nowo utworzony i nie można go odczytać z pliku.

filePathForSave

Właściwość filePathForSave jest używana do odnajdywania i ustawiania nazwy pli­ku bieżącego dokumentu. Właściwość ta jest niezbędna do tworzenia zapasowych kopii pli­ków. Jeżeli plik nie został zapisany, zwracane jest zero. Poniższy kod używa właś­ci­woś­ci filePathForSave do przechowania nazwy pliku do późniejszego wykorzys­ta­nia w trakcie operacji tworzenia kopii zapasowych:

function saveName(theDoc) {

var sourcePath

if (theDoc.filePathForSave != null) {

sourcePath = theDoc.filePathForSave

}

}

fills

Właściwość fills jest tylko do odczytu i zawiera tablicę obiektów Fill dostępnych w bieżącym dokumencie. Obiekt Fill posiada właściwości takie jak gradient i pat­tern. Kompletną listę właściwości i wartości obiektu Fill znajdziesz w doku­men­ta­cji Extending Fireworks.

frameCount

Liczba klatek w dokumencie.

frameLoopingCount

Możliwe wartości właściwości frameLoopingCount to:

• 0: Ciągłe zapętlanie;

• 1: Nie zapętlaj (odtwórz tylko raz);

• 2 lub więcej: Zapętlaj zdefiniowaną liczbę razy;

frames

Właściwość frames jest tylko do odczytu i jest tablicą zawierającą obiekty Frames znaj­dujące się w dokumencie. Obiekt Frame posiada właściwości takie jak layers i delay. Kompletną listę właściwości i wartości obiektu Frame znajdziesz w doku­men­ta­cji Extending Fireworks.

gammaPreview

Właściwość gammaPreview może być ustawiana na TRUE lub FALSE. W systemach Win­dows TRUE oznacza, że włączona jest opcja ViewMacintosh Gamma. W MacOS TRUE oznacza, że włączona jest opcja ViewWindows Gamma.

gradients

Właściwość gradients jest przeznaczoną tylko do odczytu tablicą zawierającą obiek­ty Gradient dostępne w bieżącym dokumencie. Kompletną listę właściwości i war­tości obiektu Gradient znajdziesz w dokumentacji Extending Fireworks.

gridColor

Kolor, w jakim wyświetlana jest siatka dokumentu, który można ustawiać również w ok­nie dialogowym Grid.

gridOrigin

Punkt definiujący początek siatki. Początek siatki może być również ustawiany poprzez prze­ciąganie punktu przecięcia linijki poziomej z pionową.

gridSize

Odległości pomiędzy poziomymi i pionowymi liniami siatki dokumentu. Odległości poziome definiowane są właściwością gridSize.x, zaś pionowe - właściwością gridSize.y.

guides

Właściwość guides jest tylko do odczytu i jest związana z obiektem Guides, po­sia­da­ją­cym właściwości, takie jak color i locked. Kompletną listę właściwości i wartości obiek­tu Guides znajdziesz w dokumentacji Extending Fireworks.

height

Wysokość dokumentu, mierzona w pikselach.

isDirty

Często przed wykonaniem operacji na plikach konieczne jest określenie, czy pli­ki te zostały zmodyfikowane. Właściwość isDirty zwraca TRUE, jeśli dokument zo­stał zmodyfikowany od ostatniego zapisu lub nie został w ogóle zapisany. W prze­ciw­nym wypadku, zwracane jest FALSE.

isPaintMode

Właściwość tylko do odczytu, która zwraca TRUE, jeśli dokument jest w edycji trybu malowania; w prze­ciw­nym wypadku, zwracane jest FALSE.

isSymbolDocument

Właściwość tylko do odczytu, która zwraca TRUE, jeśli dokument jest symbolem gra­ficznym lub symbolem przycisku. W przeciwnym wypadku zwracane jest FALSE. Ok­no edycji symbolu jest dokumentem jak każdy inny.

isValid

Właściwość isValid zwraca TRUE, jeśli bieżący dokument jest nadal otwarty, lub FALSE, jeśli został zamknięty.

lastExportDirectory

Docelowy katalog ostatniej operacji eksportu, wyrażany jako URL pliku.

lastExportFile

Docelowy plik ostatniej operacji eksportu, wyrażany jako URL pliku.

layers

Właściwość tylko do odczytu będąca tablicą zawierającą obiekty Layer znajdujące się w dokumencie. Właściwości obiektu Layer to sharing i layerType. Kompletną lis­tę właściwości i wartości obiektu layer znajdziesz w dokumentacji Extending Fire­works.

left

Właściwość left jest podawaną w pikselach wartością określającą odległość najdalej wy­suniętego obiektu dokumentu od lewej krawędzi obszaru roboczego.

mapType

Typ mapy obrazka tworzonej przez dokument. Możliwe wartości to client, server lub obie naraz.

matteColor

Wartość koloru Matte w dokumencie, która może być definiowana także w palecie Optimize.

onionSkinAfter

Liczba klatek znajdujących się po bieżącej klatce, które mogą być wyświetlane w tech­ni­ce „onion skinning”. Wartość ta może być definiowana również w oknie dialogowym Onion Skinning, dostępnym z poziomu palety Frames.

onionSkinBefore

Liczba klatek znajdujących się przed bieżącą klatką, które mogą być wyświetlone w tech­nice „onion skinning”.

pathAttributes

Właściwość związana z obiektem PathAttrs, o właściwościach takich jak brush i fill. Kompletną listę właściwości i wartości obiektu znajdziesz w doku­men­ta­cji Extending Fireworks.

pngText

Właściwość pngText jest tekstem znajdującym się w obiekcie Fireworks.

resolution

Ustawienia rozdzielczości drukowania dokumentu. Wartości tej właściwości należą do przedziału od 1 do 5000.

resolutionUnits

Jednostka miary ustawień rozdzielczości drukowania dokumentu (właściwości reso­lution). Jednostkami tymi mogą być cale lub centymetry, oznaczane odpo­wied­nio "inch" i "cm".

textures

Właściwość textures jest przeznaczoną tylko do odczytu tablicą obiektów Texture dostępnych w bieżącym dokumencie. Obiekt Texture posiada jedną właś­ci­wość tylko do odczytu - name - zawierającą nazwę tekstury.

top

Właściwość określająca odległość najwyżej położonego obiektu od gór­nej krawędzi dokumentu.

useMatteColor

Może wynosić TRUE lub FALSE. Jeśli wynosi TRUE, przy eksportowaniu używany jest ko­lor Matte zdefiniowany w palecie Optimize lub za pomocą właściwości matteColor.

width

Mierzona w pikselach szerokość dokumentu.

Metody

Metody obiektu Document pozwalają użytkownikowi na wykonywanie wielu przy­dat­nych operacji. Za ich pomocą można uaktywniać, zapisywać, zamykać pliki i wyko­ny­wać wiele innych zadań. Metody findExportFormatOptions() i make­Good­Native­Fi­lePath() są statyczne, zaś wszystkie pozostałe są oparte na kopiach.

exportTo(ścieżkaDostępu [, opcjeEksportu])

Operacje eksportu obsługiwane są przez metodę exportTo(). Argument ścieżkaDo­stę­pu jest obowiązkowy, zaś jeśli pominiesz argument opcjeEksportu, użyte zo­sta­ną bieżące ustawienia eksportu. Jeżeli opcjeEksportu zostaną zdefiniowane, ich wykorzystanie nie będzie miało żadnego wpływu na właściwość dokumentu - ex­port­Options. Jeśli metoda exportTo() zakończy się powodzeniem, zwracane jest TRUE.

findExportFormatOptionsByName(nazwa)

Statyczna metoda, używana w celu uzyskania dostępu do wbudowanych ustawień eks­por­tu. Jeśli ustawienie posiada określoną nazwę, zwracany jest obiekt Document z takimi samy­mi ustawieniami, jakie ma właściwość exportOptions. Jeśli nie ma usta­wień o podanej nazwie, zwracane jest zero.

makeActive()

Metodę makeActive() można wykorzystać do uaktywniania dokumentów w Fire­works. Aktywny dokument jest następnie przenoszony na wierzch wszystkich pozos­ta­łych dokumentów.

makeGoodNativeFilePath(ścieżkaDostępu)

Statyczna metoda makeGoodNativeFilePath pozwala upewnić się, czy podana ścież­ka do­stępu kończy się właściwym rozszerzeniem pliku, czyli .png. Po zastosowaniu tej me­tody, wszystkie rozszerzenia plików zamieniane są na .png. Poniższy kod, jako wynik wszys­tkich wyrażeń, zwraca jedną ścieżkę dostępu - „file:///images/logo.png”:

var theFile = ù

Document.makeGoodNativeFilePath("file:///images/logo.ping")

var theFile = ù

Document.makeGoodNativeFilePath("file:///images/logo.bmp")

var theFile = ù

Document.makeGoodNativeFilePath("file:///images/logo")

save([gotoweAbyZapisaćJako])

Metoda save() jest wykorzystywana do zapisywania dokumentów w loka­li­zacjach domyślnych. Jeśli opcjonalny argument gotoweAbyZapisaćJako wynosi TRUE, użyt­kow­nik zostanie poproszony o podanie lokalizacji pliku, jeżeli zapisuje go po raz pierwszy. Jeśli argument gotoweAbyZapisaćJako wynosi FALSE i plik nie został jeszcze nigdy za­pisany, operacja zakończy się niepowodzeniem i zwrócone zostanie FALSE. Po po­praw­nym zapisaniu pliku, znacznik dokumentu jest usuwany. Metoda save() zwraca TRUE, je­śli operacja zapisu zakończy się powodzeniem i FALSE w przeciwnym przypadku.

	Aby wymusić wyświetlenie okna dialogowego Save As (Zapisz jako), przed wywołaniem Document.save() ustaw właściwość fw.filePath­For­Save na zero.

saveCopyAs(pathname)

Aby zapisać kopię bieżącego dokumentu, możesz użyć metody saveCopyAs(). Musi zo­stać użyta pełna ścieżka dostępu do pliku, na przykład „file:///images/logo.png”. Za po­mocą tej metody nie są modyfikowane właściwości filePathForSave i isDirty.

Błędy XE "API:błędy"

Fireworks API zawiera obiekt Errors informujący użytkownika o błędach wystę­pu­ją­cych w jego kodach. Każda z właściwości obiektu Errors zwraca łańcuch w zlokalizowanym języku programu.

Na przykład kod:

var theError = Errors.EFileIsReadOnly;

zwraca tekst w języku angielskim: „File is locked” (Plik jest zablokowany). W tabeli 26.3 znaj­d­ziesz wszystkie właściwości obiektu Errors i generowane przez nie komunikaty w języku angielskim.

Tabela 26.3.

Właściwości obiektu Errors

Właściwość	Komunikat
EAppAlreadyRunning	An internal error occurred. Fireworks is optimizing an image. (Wystąpił wewnętrzny błąd. Fireworks optymalizuje obrazek.)
EAppNotSerialized	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EArrayIndexOutOfBounds	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EBadFileContents	Unsupported file format. (Nieobsługiwany format pliku.)
EBadJIsVersion	This script does not work in this version of Fireworks. (Ten skrypt nie działa w tej wersji Fireworks.)
EBadNesting	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EBadParam	A parameter was incorrect. (Nieprawidłowy parametr.)
EBadParamType	A parameter was not the correct type. (Nieprawidłowy typ parametru.)
EBadSelection	The selection was incorrect for this operation. (Niewłaściwy wybór dla tej operacji.)
EBufferTooSmall	An internal error occurred. (Wystąpił wewnętrzny błąd.)
ECharConversionFailed	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EDatabaseError	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EDeletingLastMasterChild	A symbol must contain at least one object. (Symbol musi zawierać co najmniej jeden obiekt.)
EDiskFull	The disk is full. (Dysk jest pełny.)

Tabela 26.3.

Właściwości obiektu Errors (ciąg dalszy)

Właściwość	Komunikat
EDuplicateFileNname	File name is already in use. (Taka nazwa pliku już istnieje.)
EFileIsReadOnly	File is locked. (Plik jest zablokowany.)
EFileNotFound	The file was not found. (Plik nie został odnaleziony.)
EGenericErrorOccurred	An error occurred. (Wystąpił błąd.)
EGroupDepth	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EIllegalThreadAccess	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EInternalError	An internal error occurred. (Wystąpił wewnętrzny błąd.)
ELowOnMem	Memory is nearly full. (Pamięć jest prawie zapełniona.)
ENoActiveDocument	This command requires an active document. (Polecenie wymaga aktywnego dokumentu.)
ENoFilesSelected	At least one file must be selected for scripts to operate. (Aby wykonać skrypt, trzeba zaznaczyć przynajmniej jeden plik.)
ENoNestedMastersOrAliases	Although symbols may contain other symbols, a symbol can not contain a copy of itself. Symbols may not contain Instances or other Symbols. (Mimo że symbole mogą zawierać inne symbole, symbol nie może zawierać kopii samego siebie. Symbole nie mogą zawierać kopii.)
ENoNestedPasting	The JavaScript contains a paste step, which would create an endless loop. (JavaScript zawiera wklejony krok, który może utworzyć niekończącą się pętlę.)
ENoSliceableElems	No paths were found. Objects were cut. (Ścieżki nie zostały odnalezione. Obiekty zostaną wycięte.)
ENoSuchElement	An internal error occurred. (Wystąpił wewnętrzny błąd.)
ENotImplemented	An internal error occurred. (Wystąpił wewnętrzny błąd.)
ENotMyType	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EOutOfMem	Fireworks is low on memory. (Zbyt mało pamięci dla Fireworks.)
EResourceNotFound	An internal error occurred. (Wystąpił wewnętrzny błąd.)
ESharingViolation	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EUnknownReaderFormat	Unknown file type. (Nieznany typ pliku.)
EUserCanceled	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EUserInterrupted	An internal error occurred. (Wystąpił wewnętrzny błąd.)
EWrongType	An internal error occurred. (Wystąpił wewnętrzny błąd.)

Celowe wywoływanie błędów Podczas programowania w Fireworks na pewno przyda Ci się wiedza na temat błędów, na jakie może natknąć się użytkownik podczas pra­cy ze stworzonym przez Ciebie programem. Kiedy użytkownik zgłasza błąd, zwykle podaje kod błędu, jaki otrzymał. Na szczęście Fireworks wy­świetla opisowe komunikaty błędów, a nie ciągi cyfr zrozumiałe je­dy­­nie dla kogoś, kto posiada ich opis. W dokumentacji Extending Fireworks kody błę­dów opisane są jedynie w postaci posortowanej alfabetycznie listy: EAppAlreadyRunning, EAppNotSerialized, EArrayIndexOutOfBounds, EBadFileContents, EBadJsVersion, EBadNesting, EBadParam, EBadParamType, EBadSelection, EBufferTooSmall, ECharConversionFailed, EDatabaseError, EDeletingLastMasterChild, EDiskFull, EDuplicateFileName, EFileIsReadOnly, EFileNotFound, EGenericErrorOccurred, EGroupDepth, EIllegalThreadAccess, EInternalError, ELowOnMem, ENoActiveDocument, ENoFilesSelected, ENoNestedMastersOrAliases, ENoNestedPasting, ENoSliceableElems, ENoSuchElement, ENotImplemented, ENotMyType, EOutOfMem, EResourceNotFound, ESharingViolation, EUnknownReaderFormat, EUserCancelled, EUserInterrupted, EWrongType. Komunikaty błędów wymienione w tabeli 26.3 występują w angielskiej wer­sji programu. Jak więc programista może zorientować się, co te ko­munikaty oznaczają w je­go języku? Używam do tego celu samego Fire­works i makropoleceń. Jeśli muszę przekonwertować tekst pomiędzy różnymi formatami, uży­wam do tego celu Worda. W tym przypadku musiałem wykorzystać lis­tę kodów oddzielanych przecinkami i wstawić ją do kodu generującego ko­munikaty błędów. Kod mojego generatora błędów wyglądał nastę­pująco: var theError = Errors.errorCode Alert (theError) W którym zmienna errorCode wskazywała na jeden z trzydziestu sied­miu kodów. Aby zrealizować mój plan, najpierw wykorzystałem wyszu­ki­wanie w Wordzie do znalezienia w li­ście kodów wszystkich połączeń prze­cinka i spacji (te znaki oddzielają od siebie kody błędów) i zamia­ny ich na kod nowego wiersza. W ten sposób otrzymałem listę, w któ­rej każ­dy kod znajdował się w nowej linii. Potem wykorzystałem makro­po­le­cenie wsta­wiające do listy tekst var theError = errors. przed kodem błę­du i tekst alert(theError) po kodzie błędu. Teraz więc to, co wyglą­da­ło tak: EAppAlreadyRunning EAppNotSerialized EArrayIndexOutOfBounds zostało zmienione na: var theError = Errors.EAppAlreadyRunning alert(theError) var theError = Errors.EAppNotSerialized alert(theError) var thError = Errors.EArrayIndexOutOfBounds alert(theError) W ten sposób zamieniona została cała lista błędów. Następnie za­pi­sa­łem ten plik jako standardowy plik tekstowy, dodając mu rozsze­rze­nie .jsf i tworząc w ten sposób polecenie Fireworks. Po uruchomieniu tego polecenia Fireworks wyświetlił kolejno wszystkie komunikaty błę­dów.

Obiekt Find XE "API:obiekt Find"

W Fireworks API istnieje osobny obiekt Find, który umożliwia uruchamianie operacji „znajdź i zamień”. Aby połączyć obiekt Find z określonym dokumentem, użyj metody MakeFind(), aby utworzyć obiekt Find i zdefiniować jego kryteria. Podobnie jak funk­cja „znajdź i zamień” w Fireworks umożliwia wyszukiwanie bardzo różnych ele­men­tów, takich jak tekst, czcionka, kolor i URL, argument findParms pozwala pobierać ta­bele w czterech różnych formatach.

Na przykład, operacja „znajdź i zamień” poszukująca skrótu „FW” z użyciem opcji Whole Word (Całe wyrazy) i zamieniająca go na „Fireworks” jest definiowana za pomocą na­stę­pującego kodu:

var findParms = {

whatToFind: "text",

find: "FW ",

replace: "Fireworks",

wholeWord: true,

matchCase: false,

regExp: false

};

var theFinder = Document.makeFind(findParms);

Zwróć uwagę na wykorzystanie cudzysłowów i nawiasów do określania parametrów.

W zależności od typu operacji „znajdź i zamień”, dostępne są różne właściwości obiek­tu Find, określane za pomocą metody whatToFind(). W tabeli 23.4 znajduje się szcze­gó­łowy opis czterech typów parametrów obiektu Find: text (tekst), font (czcionka), color (kolor) i url (URL).

	Podczas definiowania kolorów w operacjach „znajdź i zamień”, dobrze jest określić kilka kluczowych zmiennych i wielokrotnie je wyko­rzys­tywać: var kSolidWhite = "255 255 255 255"; var kSolidBlack = "0 0 0 255"; var kTransparent = "255 255 255 0"; var kRed = "255 0 0 255"; var kGreen = "0 255 0 255"; var kBlue = "0 0 255 255";

Obiekt Files XE "API:obiekt Files"

Obiekt Files jest ważnym obiektem Fireworks API, który zawiera ponad 20 funkcji umo­żli­wia­jących wykonywanie większości operacji na plikach. Wszystkie metody obiektu Fi­les, z wyjątkiem close(), readline() i write(), są statyczne i muszą być wy­wo­ły­wane bezpośrednio z obiektu Files. Z obiektem Files nie są związane żadne właś­ciwości.

Tabela 26.4.

Właściwości i metody obiektu Find

Typ wyszukiwania	Właściwość lub metoda	Możliwe wartości
tekst	whatToFind	„text”
	find	„Dowolny łańcuch tekstowy”
	replace	„Dowolny łańcuch tekstowy”
	wholeWord	(TRUE|FALSE)
	matchCase	(TRUE|FALSE)
	regExp	(TRUE|FALSE)
czcionka	whatToFind	„font”
	find	„nazwa poszukiwanej czcionki”
	replace	„nazwa zamiennej czcionki”
	findStyle	(od -1 do 7)
		gdzie -1 to (dowolny styl),
		0 - (brak stylów), 1 - (pogrubienie), 2 - (kursywa),
		3 - (pogrubienie i kursywa),
		4 - (podkreślenie),
		5 - (pogrubienie i podkreślenie),
		6 - (kursywa i podkreślenie)
		i 7 - (pogrubienie, kursywa i podkreślenie)
	replaceStyle	(od -1 do 7) tak jak w metodzie findStyle
	findMinSize	(0-9999)
	findMaxSize	(0-9999)
	replaceSize	(0-9999 lub -1 oznaczające „ten sam rozmiar”)
kolor	whatToFind	„color”
	find	Wartości kanałów RGB i alfa z przedziału od 0 do 255
	replace	Wartości kanałów RGB i alfa z przedziału od 0 do 255
	fills	(TRUE|FALSE)
	strokes	(TRUE|FALSE)
	effects	(TRUE|FALSE)
URL	whatToFind	„url”
	find	„poszukiwany url”
	replace	„zamienny url”
	wholeWord	(TRUE|FALSE)
	matchCase	(TRUE|FALSE)
	regExp	(TRUE|FALSE)

close()

Jak można wywnioskować z jej nazwy, metoda close() zamyka pliki. Nie jest ona nie­zbęd­na - wszystkie pliki otwarte lub utworzone za pomocą obiektu File są zamykane po zakończeniu wykonywania skryptu - ale umożliwia sterowanie dostępem do plików za pomocą skryptów.

copy(źródłowaŚcieżkaDostępu, docelowaŚcieżkaDostępu)

Użyj metody copy(), aby szybko skopiować plik do innej lokalizacji (a nawet na inny dysk). Funkcja ta kończy się niepowodzeniem, gdy nazwa pliku zdefiniowana w argu­men­cie docelowaŚcieżkaDostępu już istnieje. Innymi słowy - copy() nie potrafi nad­pisywać plików. Za pomocą tej funkcji nie można także kopiować całych kata­logów.

createDirectory(ścieżkaDostępu)

Rzadko w trakcie przetwarzania wsadowego występuje potrzeba utworzenia nowego ka­talogu, ale można wykonać takie zadanie za pomocą metody createDirectory(). Je­śli katalog zostanie utworzony, metoda zwraca TRUE, jeśli nie - FALSE.

createFile(ścieżkaDostępu[, mactype [, maccreator]])

Użyj metody createFile(), aby utworzyć nowy plik dowolnego typu. Jeśli plik o po­da­nej nazwie już istnieje, metoda zakończy się niepowodzeniem. Argumenty mactype (typ pliku) i maccreator (związana z plikiem aplikacja) są niezbędne do poprawnego two­rzenia plików w systemach MacOS.

	Więcej informacji o kodach typów plików w MacOS znajdziesz w roz­dzia­le 14.

deleteFile(ścieżkaDostępu)

Metoda deleteFile() służy do usuwania plików lub całych katalogów. Jeśli zostanie z po­wodzeniem wykonana, zwrócone będzie TRUE. FALSE zwracane jest w przypadku, gdy ścieżka dostępu, podana jako argument metody, nie istnieje lub plik albo katalog nie mo­że zostać usunięty.

deleteFileIfExisting(ścieżkaDostępu)

Zamiast przed usunięciem pliku uruchamiać specjalną funkcję sprawdzającą, czy ten plik istnieje, możesz użyć metody deleteFileIfExisting(). TRUE jest zwracane za­rów­no po usunięciu pliku, jak i w przypadku, gdy nie istnieje podana ścieżka dostępu do pliku. FALSE zwracane jest tylko w przypadku, gdy metoda nie może usunąć odna­le­zio­nego pliku.

enumFiles(ścieżkaDostępu)

Metoda enumFiles() zwraca tablicę ścieżek dostępu wszystkich plików zdefi­nio­wa­nych w argumencie. Argument ścieżkaDostępu nie powinien być jednak wskaź­ni­kiem do pliku. Jeżeli tak będzie, metoda enumFiles() zwróci tylko jedną ścieżkę dostępu.

exists(ścieżkaDostępu)

Za pomocą metody exists() możesz sprawdzać, czy istnieje określony plik lub ka­ta­log. FALSE jest zwracane jedynie w przypadku, gdy plik lub katalog nie istnieje albo po­dana ścieżka dostępu jest nieprawidłowa.

getDirectory(ścieżkaDostępu)

Metody getDirectory() możesz użyć do odczytania ze ścieżki dostępu jedynie nazwy ka­talogu. Na przykład - poniższy kod zwraca file:///images/winter:

var theFolderName =ù

Files.getDirectory("file:///images/winter/seasonal.png");

getExtension(nazwaPliku)

Metoda getExtension() służy do odczytywania rozszerzeń plików. Jeżeli w nazwie pli­ku nie ma rozszerzenia, zwracany jest pusty łańcuch. Poniższy kod zwraca łańcuch „.png”:

var theExt = Files.getExtension("logo.png ");

getFilename(ścieżkaDostępu)

Odpowiednikiem funkcji getDirectory() pracującym z plikami jest funkcja getFi­lename(), która wydobywa z pełnej ścieżki dostępu jedynie nazwę pliku. Po­niż­szy kod zwraca łańcuch seasonal.png:

var theFileName =ù

Files.getFilename("file:///images/winter/seasonal.png");

getLastErrorString()

Jeśli ostatnie wywołanie metody z obiektu Files zwróciło błąd, funkcja getLastErrorString() zwróci tekst opisujący ten błąd. Jeśli zaś wywołanie metody zakończyło się pomyślnie, getLastErrorString() zwróci zero. Kod w poniższym przykładzie zwróci błąd, jeśli operacja ko­piowania pliku zakończyła się niepowodzeniem:

if (Files.copy(sourcePath, destPath) == false) {

return Files.getLastErrorString();

}

Zwracany błąd pobierany jest z obiektu Errors, który zostanie opisany w jednym z ko­lej­nych podrozdziałów. Zwróć uwagę, że metoda getLastErrorString() przeznaczona jest do zwracania błędów wywoływanych przez metody obiektu Files. Obiekt Errors jest uży­wany do wyświetlania komunikatów o błędach powstających w innych sy­tuacjach.

getTempFilePath([nazwaKatalogu])

Metoda getTempFilePath() zwraca ścieżkę dostępu do systemowego tymczasowego ka­talogu plików. Funkcja ta nie tworzy pliku, zwraca jedynie unikatową ścieżkę dos­tę­pu, nie kolidującą z żadnym istniejącym plikiem. Jeśli zostanie podany argument
nazwaKatalogu (i nie będzie wynosił zero), ścieżka dostępu będzie wskazywała plik w podanym katalogu, a nie w katalogu tymczasowym. Argument nazwaKatalogu traktowany jest dosłownie i nie są dodawane żadne inne informacje o ścieżce.

W systemach Windows - metoda getTempFilePath() - w zależności od ustawień sys­temowych - zwraca przeważnie ścieżkę file:///C|/windows/TEMP/00000001. Na MacOS zwracana jest przeważnie ścieżka file:///Ma­cintosh%20HD/Tem­po­rary Items/00000001, gdzie Macintosh HD jest nazwą dysku startowego.

isDirectory(ścieżkaDostępu)

Metoda isDirectory() pozwala upewnić się, czy podano ścieżkę dostępu do katalogu, a nie do pliku. Jeśli tak jest, metoda zwraca TRUE.

makePathFromDirAndFile(nazwaKatalogu, nazwaPliku)

Często w trakcie przetwarzania wsadowego zdarza się, że Fireworks musi pobrać nazwę ka­talogu z jednego źródła, zaś nazwę pliku z innego źródła, a następnie połączyć je, aby za­pisać plik. Taką właśnie operację wykonuje metoda makePathFromDirAndFile(). Naz­wa katalogu określana jest przez pierwszy argument, a nazwa pliku przez drugi ar­gu­ment, jak w poniższym przykładzie:

var dirname = "file:///fireworks";

var filename = "borg.png";

theNewFile = Files.makePathFromDirAndFile(dirname, filename)

W tym przykładzie zwracana jest ścieżka „file:///fireworks/borg.png”.

open(ścieżkaDostępu, wantWriteAccess)

Podstawowa funkcja obiektu Files - metoda open() - otwiera określony plik do odczy­ta­nia lub zapisywania. Aby zapisywać w pliku, argument wantWriteAccess musi zwrócić TRUE. Jeśli metoda open() zostanie wykonana pomyślnie, zwracany jest obiekt Files, w przeciwnym wypadku, zwracane jest zero. Metoda open() przeznaczona jest do pracy z plikami tekstowymi.

readline()

Pliki tekstowe często są odczytywane tylko po jednym wierszu. W Fire­works funkcja ta obsługiwana jest za pomocą metody opartej na kopiach — readline(). Wier­sze są zwracane jako łańcuchy bez znaku końca wiersza. Po napotkaniu znaku końca wiersza (lub jeśli wiersz składa się z więcej niż 2048 znaków), metoda zwraca zero.

rename(ścieżkaDostępu, nazwaPliku)

Za pomocą metody rename() można całkowicie modyfikować ścieżki dostępu. Na przy­kład poniższy kod:

Files.rename("file:///images/logo.png", "newlogo.png");

zmienia nazwę pliku „logo.png” na „newlogo.png” i zwraca file:///images/new­logo.png.

setFilename(ścieżkaDostępu, nazwaPliku)

Metoda setFilename() zamienia nazwę pliku znajdującego się w określonym poło­że­niu na inną. Na przykład kod

Files.setFilename("file:///images/logo.png", "newlogo.png" );

zwraca file:///images/newlogo.png. Pamiętaj, że ta funkcja nie wywiera żad­ne­go wpływu na pliki zapisane na dysku, lecz manipuluje ścieżkami dostępu. Podczas gdy me­toda setFileName() wykonuje takie same operacje co rename(), tylko rename() zmie­nia nazwy plików zapisanych na dysku.

swap(ścieżkaDostępu, ścieżkaDostępu)

Fireworks oferuje wiele metod umożliwiających przenoszenie plików w trakcie operacji eks­portu. Metoda swap() zamienia zawartość jednej ścieżki dostępu na inną. Funkcja ta jest przydatna, gdy musisz zamienić źródłowy plik na jego kopię zapasową.

	Metoda swap() posiada dwa ograniczenia. Po pierwsze - możesz pod­mie­niać tylko pliki, ale nie katalogi. Po drugie - oba wykorzystywane w zamianie pliki muszą znajdować się na tym samym dysku.

write(łańcuch)

Możesz użyć tej metody opartej na kopiach, aby wstawić tekst do pliku. Po każdym wierszu nie są automatycznie wstawiane znaki końca wiersza. Aby wygenerować taki znak, mu­sisz dołączyć do kodu wyrażenie \n, jak w poniższym przykładzie:

theString = "Log Report\n";

theFile.write(theString);

Obiekty Hotspot XE "API:obiekt Hotspot"

Obszary aktywne (ang. hotspots) są jednym z dwóch typów obiektów internetowych w Fire­works. Wraz z plastrami, aktywne obszary umożliwiają tworzenie wielu różnych in­terakcji. Obiekty obszarów aktywnych w Fireworks API to w większości właściwości prze­zna­czo­ne tylko do odczytu, które pozwalają na zbieranie dowolnych infor­ma­cji o ma­pach obrazków osadzanych w dokumentach Fireworks.

	Ponieważ obszary aktywne i plastry obsługiwane są przez wiele ta­kich samych mechanizmów, kilka obiektów Fireworks API (exportDoc, BehaviorInfo i BehaviorsList) wymienionych w poniższej tabeli dla obiek­tów Hotspot obowiązuje także dla plastrów.

exportDoc

Obiekt exportDoc można wykorzystywać we wszystkich szablonach eksportu: slices.htt, metafile.htt i Servermap.mtt. Pamiętaj, że exportDoc nie może jednak znajdować się po­za tymi plikami. Wszystkie jego właściwości są tylko do odczytu, a także są zwią­zane z bieżącym dokumentem i jego właściwościami, opisanym w tabeli 26.5.

Mapy obrazków

Z mapami obrazków związane są dwa obiekty Fireworks API: ImageMap i ImageMapList. Za pomocą tych dwóch obiektów można nie tylko pobierać kształty i współrzędne ak­tyw­nych obszarów, ale i określać, jakie behawiory są do nich przydzielone.

Tabela 26.5.

Właściwości obiektu exportDoc

Właściwość	Możliwe wartości	Opis
altText	Tekst	Łańcuch tekstowy wykorzystywany jako zastępczy tekst (Alt Text) dla dokumentu
backgroundColor	Łańcuch szesnastkowy	Łańcuch definiujący szesnastkowy kolor obszaru roboczego dokumentu
backgroundIsTransparent	TRUE|FALSE	Zwraca TRUE, jeśli obszar roboczy jest przezroczysty lub jeśli obszar jest eksportowany jako przezroczysty GIF
backgroundLink	URL	Względny lub absolutny adres URL łącza tła
docID	Liczba	Liczba przydzielana do każdego dokumentu dla identyfikacji stworzonego z niego HTML. Liczba nie zmienia się, ale wynikiem wielu poleceń „Save As” (Zapisz jako) może być wiele dokumentów z tą samą właściwością docID
docSaveName	Tekst	Nazwa pliku użyta podczas jego zapisywania, np. „nav.gif”. Informacje o ścieżce dostępu nie są zamieszczone
emptyCellColor	Tekst	Łańcuch koloru komórki pustej tabeli
emptyCellContents	Liczba	Określa, co należy do pustych komórek; wartości 1 (nic), 2 (obrazek jednopikselowy), 3 (odstęp nieprzerwany)
emptyCellUsesCanvasColor	TRUE|FALSE	Jeżeli TRUE, puste komórki otrzymują wartość backgroundColor; jeżeli FALSE, otrzymują wartość emptyCellColor
filename	Względny URL	Adres URL eksportowanego obrazka zależny od generowanego dokumentu HTML, na przykład images/Button.gif. W szablonie slices.htt właściwość ta zwraca nazwę bazową i rozszerzenie, na przykład Button_r2_c2.gif
generateHeader	TRUE|FALSE	Zwraca TRUE, jeśli eksportowany jest plik HTML, zaś FALSE jeśli kod HTML jest eksportowany do schowka
hasAltText	TRUE|FALSE	Zwraca TRUE, jeśli w oknie dialogowym HTML Properties został zdefiniowany tekst zastępczy
hasBackgroundLink	TRUE|FALSE	Zwraca TRUE, jeśli w oknie dialogowym HTML Properties zostało zdefiniowane łącze tła
height	Liczba	Wysokość eksportowanego obrazka, mierzona w pikselach. W szablonie slices.htt jest to suma wysokości wszystkich eksportowanych obrazków.

Tabela 26.5.

Właściwości obiektu exportDoc (ciąg dalszy)

Właściwość	Możliwe wartości	Opis
htmlOutputPath	URL	Kompletny URL pliku, do którego zostanie zapisany kod HTML
imagename	Tekst	Nazwa bazowa obrazka, bez rozszerzenia pliku, na przykład Button
includeHTMLComments	TRUE|FALSE	Jeżeli TRUE, komentarze pozostają w HTML; jeżeli FALSE, usuwane są wszystkie zbędne komentarze
numFrames	Liczba	Liczba klatek w pliku
pathBase	Ścieżka dostępu bez rozszerzenia pliku	Nazwa pliku bez rozszerzenia, na przykład images/Button
pathSuffix	Rozszerzenie w nazwie pliku	Rozszerzenie nazwy pliku, na przykład gif
startColumn	Liczba	Wskazuje kolumnę dla plastra podczas eksportowania kodu HTML dla pojedynczego plastra. Używana jedynie w szablonie metafile.htt
startRow	Liczba	Wskazuje rząd plastra podczas eksportowania kodu HTML dla pojedynczego plastra. Używana jedynie w szablonie metafile.htt
style	Tekst	Styl HTML użyty do eksportu, np. „Dreamweaver”, „Generic” lub „FrontPage”
width	Liczba	Szerokość eksportowanego obrazka, mierzona w pikselach. W szablonie slices.htt jest to suma szerokości wszystkich eksportowanych plastrów

Obiekt ImageMap XE "API:obiekt ImageMap"

Podobnie jak w przypadku kilku innych rozszerzeń Fireworks API, większość zadań obiek­tu ImageMap obsługiwana jest za pomocą tablic. Każdy element tablicy tego obiek­tu reprezentuje jeden aktywny obszar znajdujący się w bieżącym dokumencie. Okre­ślony obiekt ImageMap możesz pobrać za pomocą następującego kodu:

var theHotspot = imagemap[0];

Właściwości

Właściwości obiektu ImageMap są właściwościami opartymi na kopiach i przeznaczonymi tylko do odczytu. Zostały one szczegółowo opisane w tabeli 26.6.

Metody

Jedyne dwie metody obiektu ImageMap służą do gromadzenia danych o współrzędnych x i y aktywnego obszaru: xCoord() i yCoord().

Tabela 26.6.

Właściwości obiektu ImageMap

Właściwość		Możliwe wartości	Opis
altText		Tekst	Definiuje tekst zastępczy
behaviors		Obiekt BehaviorsList (opisany w jednym z kolejnych podrozdziałów)	Zwraca opis behawiorów przydzielonych do aktywnych obszarów
hasAltText		TRUE|FALSE	Zwraca TRUE, jeśli określony został tekst zastępczy
hasHref		TRUE|FALSE	Zwraca TRUE, jeśli do aktywnego obszaru został przydzielony URL
hasTargetText		TRUE|FALSE	Zwraca TRUE, jeśli został zdefiniowany cel aktywnego obszaru
href		Względny lub absolutny URL	Przydzielony URL
numCoords		1 dla okręgu, 2 dla prostokąta i dowolna liczba dla wielokąta	Współrzędne służące do opisu obszaru aktywnego w kodzie HTML
radius		Liczba	Promień okrągłego obszaru aktywnego
shape		circle (okrąg), rectangle (prostokąt) lub polygon (wielokąt)	Typ obszaru aktywnego
targetText		Nazwa ramki HTML	Określony cel
		Z obiektem ImageMap związana jest jeszcze jedna właściwość - Be­ha­viors. Obiekt BehaviorInfo pracuje również z plastrami, więc został opi­sany szczegółowo w kolejnym podrozdziale.

Zarówno xCoord(), jak i yCoord() pracują tak samo. Każda z nich pobiera jedną współ­rzędną punktu index, podawaną w pikselach. Obie metody użyte w połączeniu z właś­ci­wością numCoords pozwalają uzyskać listę współrzędnych dla całej mapy obrazka, jak zostało pokazane w poniższym kodzie:

for (var j=0; j<curImagemap.numCoords; j++) {

if (j>0) WRITE_HTML(",");

WRITE_HTML(curImagemap.xCoord(j), ",", curImagemap.yCoord(j));

}

Obiekt ImageMapList XE "API:obiekt ImageMapList"

Obiekt ImageMapList jest tablicą obiektów ImageMap, opisującą obszary występujące w mapie obrazka. Obiekt ImageMapList posiada tylko jedną właściwość - numberOfURLs - która jest przeznaczoną do odczytu statyczną właściwością.

Właściwość numberOfURLs ma duże znaczenie, gdyż zawiera liczbę obszarów aktywnych występujących w określonej mapie obrazka. Dlatego też często jest wykorzysty­wa­na w pętlach działających wewnątrz tablicy obiektów ImageMap, jak w poniższym kodzie:

var i =0;

while (i <imagemap.numberOfURLs) {

hasImagemap = true;

}

i++;

Jeśli w dokumencie nie ma żadnych map obrazków, numberOfURLs zwróci zero.

Behawiory

Behawiory Fireworks to elementy umożliwiające eksportowanie kodów JavaScript do­łą­cza­nych do stron WWW. Behawior jest przydzielony do obiektu internetowego (plastra lub obszaru aktywnego) i uruchamiany przez określoną czynność użytkownika, na przy­kład kliknięcie myszą lub najechanie na obrazek. Z behawiorami związane są dwa obiek­ty: BehaviorList i BehaviorInfo.

Obiekt BehaviorInfo XE "API:obiekt BehaviorInfo"

Wszystkie właściwości obiektu BehaviorInfo przeznaczone są tylko do odczytu, a obiekt ten nie posiada żadnych metod.

Mimo że w liście palety Behaviors znajdują się cztery główne grupy behawiorów: Simple Rollover, Swap Image, Set Nav Bar i Set Text of Status Bar, dla obiektu BehaviorInfo istnieje sześć różnych behawiorów: Status Message, Swap Image, Button Down, Swap Image Restore, Button Highlight i Button Restore. Rozpoznawane są tylko cztery zda­rze­nia: onMouseOver, OnClick, onMouseOut i onLoad.

W tabeli 26.7 znajdziesz właściwości obiektu BehaviorInfo i ich możliwe wartości.

Obiekt BehaviorsList XE "API:obiekt BehaviorsList"

Jedyna właściwość obiektu BehaviorsList - numberOfBehaviors - jest używana w ten sam sposób, co numberOfURLs z obiektem ImageMap, aby określić, ile beha­wio­rów znajduje się w bieżącym dokumencie. W poniższym kodzie, właściwość numberOfBehaviors jest używana w pętli przebiegającej przez tablicę behawiorów:

for (var I=0;i<theCurBehaviors.numberOfBehaviors; i++){

var curBehavior = theCurBehaviors[i];

if (curBehavior.action == kActionRadioGroup) {

groupName = curBehavior.groupName;

}

}

Plastry

Plastrowanie umożliwia dzielenie grafiki na wiele odrębnych plików, z których każdy mo­że być oddzielnie zapisany z własnymi ustawieniami eksportu lub behawiorami. Z plas­trami związane są dwa obiekty: SliceInfo i Slices.

Tabela 26.7.

Właściwości obiektu BehaviorInfo

Właściwość	Możliwe wartości	Opis
action	1 (Status Message), 2 (Swap Image), 4 (Button Down), 5 (Swap Image Restore), 6 (Button Highlight) 7 (Button Restore) lub 9 (lista rozwijana)	Typ behawiora
downHighlight	TRUE|FALSE	Zwraca TRUE dla behawiora Button Highlight, jeśli istnieje wyróżniony obrazek
event	0 (onMouseOver), 1 (onClick), 2 (onMouseOut) lub 3 (onLoad)	Zdarzenie uruchamiające behawior
hasHref	TRUE|FALSE	Zwraca TRUE dla behawiora Swap Image, jeśli przełączany obrazek znajduje się w zewnętrznym pliku, a nie w innej klatce Fireworks
hasStatusText	TRUE|FALSE	Zwraca TRUE dla behawiora Status Message, jeśli tekst wyświetlany w pasku stanu nie jest pusty
hasTargetFrame	TRUE|FALSE	Zwraca TRUE dla behawiora Swap Image, jeśli przełączany obrazek znajduje się w innej klatce pliku Fireworks, a nie w pliku zewnętrznym
horzOffset	Liczba	Jeżeli właściwość action ma wartość 9 (lista rozwijana), właściwość horzOffset jest poziomym przesunięciem listy, w pikselach
href	URL pliku	URL używany w behawiorze Swap Image do przełączenia obrazka na plik zewnętrzny
preload	TRUE|FALSE	Zwraca TRUE dla behawiora Swap Image, jeśli obrazek będzie wstępnie ładowany
restoreOnMouseout	TRUE|FALSE	Zwraca TRUE dla behawiora Swap Image, jeśli zdarzenie onMouseOut przywraca oryginalny obrazek
statusText	Łańcuch tekstowy	Tekst używany w behawiorze Status Message
targetColumnNum	Liczba	Dla behawiora Swap Image oznacza kolumnę w tabeli plastrów, która powinna zostać wymieniona
targetFrameNum	Liczba (od 0 do liczby klatek minus 1)	Jeśli właściwość hasTargetFrame dla behawiora Swap Image wynosi TRUE, właściwość ta oznacza numer klatki, na którą będzie przełączany dokument. Pierwsza klatka ma numer 0
targetRowNum	Liczba	Dla behawiora Swap Image oznacza wiersz w tabeli plastrów, który powinien zostać wymieniony
vertOffset	Liczba	Jeżeli właściwość action ma wartość 9 (lista rozwijana), właściwość vertOffset jest pionowym przesunięciem listy, w pikselach

Obiekt SliceInfo XE "API:obiekt SliceInfo"

Obiekt SliceInfo umożliwia przeanalizowanie każdego aspektu pojedynczego plastra bę­dącego częścią większego obrazka.

Właściwości

Wszystkie właściwości obiektu SliceInfo są tylko do odczytu. Ich szczegółowy opis znajdziesz w tabeli 26.8.

Tabela 26.8.

Właściwości obiektu SliceInfo

Właściwość	Możliwe wartości	Opis
altText	Tekst	Zastępczy tekst dla plastra
behaviors	Obiekt BehaviorsList	Obiekt BehaviorsList opisujący dowolne behawiory przydzielone do bieżącego plastra
cellHeight	Liczba pikseli	Wysokość bieżącego wiersza tabeli HTML
cellWidth	Liczba pikseli	Szerokość bieżącej kolumny tabeli HTML
downIndex	Liczba	Wskaźnik plastra używany przy eksporcie przycisku jako wielu plików
getFrameFileName (frameIndex)	Liczba	Zwraca nazwę bazową plastra na określonej klatce
hasAltText	TRUE|FALSE	Zwraca TRUE, jeśli plaster posiada tekst zastępczy
hasHref	TRUE|FALSE	Zwraca TRUE, jeśli plaster posiada URL
hasHtmlText	TRUE|FALSE	Zwraca TRUE, jeśli plaster jest tylko tekstowy
hasImage	TRUE|FALSE	Zwraca TRUE, jeśli bieżący plaster zawiera obrazek. W przypadku plastra tekstowego zwracane jest FALSE
hasImageMap	TRUE|FALSE	Zwraca TRUE, jeśli z bieżącym plastrem związany jest jakiś obszar aktywny
hasTargetText	TRUE|FALSE	Zwraca TRUE, jeśli dla bieżącego plastra zdefiniowany jest jakiś cel
height	Liczba pikseli	Wysokość obrazka znajdującego się w plastrze. Wliczane są także odległości od marginesów komórki tabeli
href	URL	URL bieżącego plastra
htmlText	Tekst	Łańcuch tekstowy dla tekstowego plastra
imagemap	Obiekt ImageMapList	Obiekt ImageMapList opisujący wszystkie aktywne obszary przydzielone do plastra
imageSuffix	Rozszerzenie pliku	Rozszerzenie pliku obrazka znajdującego się w bieżącym plastrze, wraz z kropką

Tabela 26.8.

Właściwości obiektu SliceInfo (ciąg dalszy)

Właściwość	Możliwe wartości	Opis
isUndefined	TRUE|FALSE	Zwraca TRUE, jeśli bieżący plaster nie jest związany z żadnym plastrem narysowanym przez użytkownika. Fireworks automatycznie generuje plastry dla pokrycia tych niezdefiniowanych komórek
left	Liczba pikseli	Lewy bok komórki podawany w pikselach, rozpoczynając od zera
nestedTableSlices	Obiekt Slices (opisany w kolejnym podrozdziale)	Obiekt Slices opisujący tabelę zagnieżdżoną w bieżącej komórce tabeli. Zwraca zero, jeśli w komórce nie jest zagnieżdżona żadna tabela
setFrameFileName (frameIndex)	Liczba całkowita, poczynając od zera	Sprawdza określoną klatkę i nadaje nazwę pliku dla plastra, bez informacji o ścieżce. Jeżeli ustawisz nazwę ”” (pusty łańcuch), obrazek nie będzie eksportowany
skipCell	TRUE|FALSE	Zwraca TRUE, jeśli komórka tabeli z bieżącym plastrem znajduje się w poprzednim wierszu lub kolumnie tabeli
targetText	Nazwa ramki HTML	Cel bieżącej ramki
top	Liczba pikseli	Górna krawędź komórki podawana w pikselach, rozpoczynając od 0
width	Liczba pikseli	Szerokość obrazka znajdującego się w plastrze. Wliczane są także odległości od marginesów komórki tabeli

Metody

Obiekt SliceInfo posiada dwie metody: getFrameFileName() i setFrameFileName(). Obie są metodami statycznymi.

getFrameFileName(klatka)

Metoda getFrameFileName() odczytuje nazwę pliku dla bieżącego plastra i klatki. Zwra­cana nazwa nie zawiera żadnych informacji o ścieżkach dostępu, takich jak rozszerzenie ka­talogu lub pliku. Na przykład, korzystając z wartości domyślnych Fireworks, nazwa pierw­szego plastra pliku o nazwie newLogo.gif powinna brzmieć newLogo_r1_c1. Pierw­sza klatka pliku ma zawsze numer 0, a wszystkie znajdujące się w niej plastry są prze­ważnie nazwane. Dla klatki z numerem 1 i następnych, nazywane są tylko plastry uży­wane w rolloverach lub w przełączaniu obrazków.

Poniższy kod demonstruje wykorzystanie metody getFrameFileName() ze stałą i ze zmienną:

var curFile = SliceInfo.getFrameFileName(0);

for (var curFrame = 0; curFrame <exportDoc.numFrames;ù curFrame++){

var curFile = SliceInfo.getFrameFileName(curFrame);

// processing code for each slice goes here

}

setFrameFileName(klatka, nazwaPliku)

Metodę setFrameFileName() można wykorzystać do zmiany nazwy pliku plastra. Za po­mocą dwóch argumentów określ numer klatki i nową nazwę plastra, jak w po­niż­szym kodzie:

SliceInfo.setFrameFileName(swapFrame, fileName);

Interesującym efektem ubocznym metody setFrameFileName() jest moż­liwość określenia, które obrazki są zapisane. Domyślnie Fire­works jest tak ustawiony, że wszystkie plastry znajdujące się w klatce z numerem 0 są nazwane, a wszystkie inne pozostają bez nazw. Jeśli be­hawior Swap Image używa plastra z drugiego wiersza, trzeciej ko­lum­ny w klatce 2, szablon eksportu ustawi nazwę pliku klatki, aby mógł zostać zapisany. Plastrom znajdującym się w klatce zero możesz rów­nież przydzielać puste łańcuchy, jeśli nie chcesz, aby były za­pi­sy­wa­ne. Jest to dokładnie taka sama metoda, jakiej używa opcja „Don't export undefined slices” („Nie eksportuj niezdefiniowanych plastrów”).

Obiekt Slices XE "API:obiekt Slices"

Obiekt Slices jest tablicą obiektów SliceInfo. Plastry istnieją w tabelach, więc każ­dy z nich jest identyfikowany za pomocą jego położenia w wierszu i kolumnie tabeli. Tablica dwu­wy­miarowa przechowuje numery wierszy i kolumn oraz oznacza każdą kopię plas­tra. Na przykład plaster znajdujący się w pierwszym wierszu pierwszej kolumny ozna­czany jest wyrażeniem slices[0][0]. Kod podobny do poniższego umożliwi Ci prze­tworzenie wszystkich poszczególnych plastrów:

var curRow;

var curCol;

for (curRow = 0; curRow < Slices.numRows; curRow++){

for (curCol=0; curCol < Slices.numColumns; curCol++){

var curSlice = Slices [curRow][curCol];

// do whatever processing with curSlice.

}

}

Zwróć uwagę, że do przetworzenia wszystkich plastrów muszą być użyte dwie sta­tycz­ne właściwości: numRows i numColumns. Po zdefiniowaniu dwuwymiarowej tablicy iden­tyfikującej plaster można odczytać właściwości kopii plastra.

Opcje plastrów definiowane są za pomocą kilku statycznych właściwości: doShimEdges, doShimInternal i doSkipUndefined. Te wszystkie opcje można definiować również w oknie dialogowym HTML Properties. Aby dowiedzieć się, czy użytkownik zaznaczył op­cję No Shims, użyj następującego kodu:

if (Slices.doShimInternal || Slices.doShimEdges) {

//create shim code here

}

W tabeli 26.9 znajdziesz wszystkie statyczne właściwości obiektu Slices.

Dostęp do Fireworks API

Dodana do Fireworks paleta History oferuje wiele funkcji związanych z Fireworks API. Aby każda akcja użytkownika mogła zostać wyświetlona jako oddzielny, możliwy do po­wtórzenia krok, każda z nich musi być dostępna jako osobna funkcja.

Tabela 26.9.

Właściwości obiektu Slices

Właściwość	Możliwe wartości	Opis
demoindex		Wskaźnik każdego pliku generowanego przy eksporcie wielostanowego przycisku
doDemoHTML	TRUE|FALSE	Zwraca TRUE dla eksportu rollovera składającego się z wielu plików
doShimEdges	TRUE|FALSE	Zwraca TRUE, jeśli znajdująca się w preferencjach dokumentu opcja Table Shims jest ustawiona na Transparent Image
doShimInternal	TRUE|FALSE	Zwraca TRUE, jeśli znajdująca się w preferencjach dokumentu opcja Table Shims jest ustawiona na Shims from Image
doSkipUndefined	TRUE|FALSE	Zwraca TRUE, jeśli znajdująca się w preferencjach dokumentu opcja Export Undefined Slices jest wyłączona
imagesDirPath	Względny URL	Ścieżka dostępu katalogu używanego do przechowywania obrazków znajdujących się w plastrach w tabeli. Jeśli obrazki i plik HTML znajdują się w tym samym katalogu, zwracany jest pusty łańcuch
numColumns	Liczba	Całkowita liczba kolumn tabeli HTML, z wyłączeniem kolumn zawierających jednopikselowe obrazki
numRows	Liczba	Całkowita liczba wierszy tabeli HTML, z wyłączeniem wierszy zawierających jednopikselowe obrazki
shimPath	Względny URL	Ścieżka do pliku GIF używanego jako jednopikselowy obrazek, na przykład images/shim.gif

Funkcje Fireworks JavaScript API można podzielić na trzy grupy, funk­cje dokumentu, funkcje palety History i ogólne funkcje Fireworks. Za pomocą tych funk­cji możesz powielić prawie każde polecenie Fireworks.

Fireworks JavaScript API (a także wszystkie inne metody i właściwości Fireworks) zos­tał opisany przez firmę Macromedia w dokumentacji Extending Fireworks. Zamiast po­wie­lać informacje zawarte w dokumentacji, w tym podrozdziale przedstawię, jak najlepiej je wyko­rzystać.

Funkcje obiektu Document XE "API:funkcje obiektu Document"

Jak zostało wspomniane już wcześniej, model rozszerzalności Fireworks jest w dużym stop­niu uzależniony od Document Object Model (DOM) - Obiektowego Modelu Doku­mentu. W Fireworks API, każda funkcja Document do poprawnej pracy wymaga modelu DOM okre­ślonego dokumentu. DOM można wydobywać na dwa sposoby za pomocą funkcji getDocumentDOM(). Po pierwsze, funkcja ta może wypisać wszystkie akcje:

fw.getDocumentDOM.align(top);

Metoda ta jest używana w palecie History. Możesz to sprawdzić, zaznaczając dowolną ak­cję, klikając przycisk Copy Selected Steps to Clipboard (Kopiuj zaznaczone kroki do schow­ka) i wklejając zawartość schowka do edytora tekstowego. Mimo tego, że tego typu dzia­łanie doskonale sprawdza się w operacjach wykonywanych na pojedynczych wier­szach, wypisywanie za każdym razem całej funkcji może być nieco kłopotliwe w pro­gra­mowaniu, więc najczęściej stosowana jest następująca składnia:

var theDOM = fw.getDocumentDOM();

Po zadeklarowaniu zmiennej i ustawieniu jej na DOM, wszystkie późniejsze odwołania do DOM będą wykorzystywały tę zmienną. Przykładowo - serię wyrażeń można od­czy­tać następującym kodem:

var theDOM = fw.getDocumentDOM();

theDoc.addNewOval({left:20, top:20, right:100, bottom:50});

theDOM.applyStyle(stylename, 0);

theDOM.setDocumentCanvasSizeToDocumentExtents(true);

fw.exportDocumentAs(theDOM, exportPath, exportOptionsGif);

fw.closeDocument(theDOM, false);

Wykorzystana w tym kodzie zmienna - theDOM - jest zupełnie przypadkowa i możesz zdefiniować dowolną inną.

Funkcje obiektu Document są największą i najbardziej kompletną grupą funkcji. Naj­szyb­szym sposobem na zapisanie kodu odpowiedzialnego za wykonywanie okre­ślo­nych akcji jest skopiowanie jednego z kroków do schowka za pomocą przycisku Copy Selected Steps to Clipboard, znajdującego się w palecie History.

Poniższe instrukcje pomogą Ci uchronić się przed poszukiwaniami określonych funkcji w dokumentacji Extending Fireworks:

685. Wykonaj żądaną akcję, na przykład rysowanie elipsy lub dodawanie nowych klatek.

686. Wybierz z menu polecenie WindowHistory, aby otworzyć paletę History.

687. Zaznacz w palecie Frames polecenia reprezentujące Twoje akcje.

688. Kliknij przycisk Copy Selected Steps to Clipboard.

689. Wklej zawartość schowka do swojego ulubionego edytora tekstu.

Skopiowane z Fireworks polecenia będą zawierały cały kod niezbędny do dokładnego od­tworzenia Twojej akcji. Następnym krokiem w tworzeniu polecenia jest zazwyczaj uogól­nienie parametrów, tak aby polecenie mogło być stosowane w wielu różnych przypad­kach. Jeśli na przykład w dokumencie Fireworks tworzony jest owal, Fireworks wy­ge­neruje kod podobny do poniższego:

fw.getDocumentDOM.addNewOval({left:20, top:20, right:100,

bottom:50});

Po zakończeniu dołączania funkcji do polecenia, ten sam kod wyglądałby następująco:

theDOM.addNewOval({left:theLeft, top:theTop, right:theRight,

bottom:theBottom});

Oprócz zastąpienia funkcji getDocumentDOM() zmienną, identyczne działanie prze­pro­wa­dziłem z wartościami bezwzględnymi definiującymi położenie lewej, górnej, prawej i dolnej krawędzi obiektu. Nowe zmienne będą mogły być modyfikowane przez użyt­kow­nika lub przez inne funkcje kodu.

Funkcje Fireworks XE "API:funkcje Fireworks"

Jedną z grup funkcji API tworzą funkcje Fireworks. Dotyczą one ogólnych operacji na dokumentach: tworzenia, eksportowania, zamykania i przywracania, a także przepro­wa­dzania operacji „znajdź i zamień”. W kategorii tej często stosowana jest również funk­cja getDocumentDOM().

	Funkcje Fireworks są poprzedzane przedrostkami fireworks lub fw, które mogą występować zamiennie.

Funkcja getDocumentDOM() nie jest jedynym sposobem na uzyskanie dostępu do Do­cu­ment Object Model. Obie funkcje: createDocument() i createFireworksDocument() zwra­­cają DOM, jeśli zostaną użyte w następujący sposób:

var theDOM = fw.createDocument();

var theDOM =

fw.createFireworksDocument({x:400,y:500},{pixelsPerUnit:72,unit

s,"inch"},"#ffffff");

Obie funkcje służą do tego samego - tworzenia dokumentu, ale różnią się od siebie tym, że fw.createDocument() używa bieżących wartości domyślnych, zaś w create­Fi­re­worksDocument() wymiary, rozdzielczość i kolor obszaru roboczego muszą zostać podane.

Kilka funkcji należących do tej kategorii jest używanych do połączeń z plikami znaj­du­ją­cymi się poza Fireworks. Za pomocą funkcji browseDocument() możesz obejrzeć doku­ment HTML lub inny zgodny plik w głównej przeglądarce internetowej. Jednym z za­stosowań tej funkcji jest wyświetlanie plików pomocy lub programowy podgląd eks­portowanych plików w przeglądarce internetowej. Dwie inne funkcje: browse­For­FileURL() i browseForFolderURL() pomagają w zapisywaniu plików w Fire­works. Funkcja browseForFileURL() wyświetla okno dialogowe Open lub Save i zwraca URL pliku, na przykład taki jak poniżej:

file:///C|images/clientlogo.gif

	W MacOS litera dysku (w tym przypadku C) zostanie zastąpiona nazwą napędu.

Funkcja browseForFolderURL() zwraca ścieżkę dostępu katalogu. Jest ona szcze­gól­nie przydatna, gdy chcesz zapisać grupę generowanych grafik we wspólnym katalogu i pro­gramowo nadać mu nazwę. Funkcja browseForFolderURL() zwraca łańcuch jak poniżej:

file:///C|images

Zwróć uwagę, że brak w tym łańcuchu końcowego ukośnika. Zadaniem programisty jest dodanie tego znaku w trakcie zapisywania plików.

Funkcje palety History XE "API:funkcje palety History"

Jak można wywnioskować z ich nazwy, funkcje palety History dotyczą wyłącznie ope­ra­cji wykonywanych na tej właśnie pływającej palecie Fireworks. Funkcje te umoż­liwiają programowe wykonywanie każdej funkcji dostępnej z poziomu palety History, a między innymi:

• Usuwanie wszystkich poleceń z palety History.

• Uzyskiwanie liczby bieżących poleceń.

• Powtarzanie wybranych poleceń.

Mimo że na pierwszy rzut oka funkcje te mogą wyglądać nieco tajemniczo, znacznie roz­szerzają możliwości automatyzacji pracy w Fireworks. Przykładowo, zbudowałem po­le­cenie Repeat History (Powtórz historię), które pozwala użytkownikowi na pow­tó­rze­nie dowolnej grupy zaznaczonych kroków (lub tylko ostatniej operacji) dowolną ilość razy. Polecenie Repeat History używa prawie wyłącznie funkcji palety History.

Oto kod całego polecenia:

var theSteps = fw.historyPalette.getSelection();

if (theSteps.length == 0) {

alert("Nie zaznaczono żadnych kroków.\nProszę zaznaczyć przynajmniej jeden krok i powtórzyć polecenie.");

}else {

var theNum = prompt("Powtórz historię\nWpisz liczbę żądanych powtórzeń");

for (i=0;i < parseInt(theNum);++i) {

fw.historyPalette.replaySteps(theSteps);

}

}

W pierwszym wierszu użyta jest funkcja palety History pobierająca tablicę kroków aktu­al­nie zaznaczonych w palecie History:

var theSteps = fw.historyPalette.getSelection();

Następnie konieczne jest sprawdzenie, czy zaznaczono jakieś polecenia. Jeśli w palecie His­tory nie wybrano żadnych akcji, użytkownik jest proszony o zaznaczenie przy­naj­mniej jednej i ponowne wydanie polecenia:

if (theSteps.length == 0) {

alert("Nie zaznaczono żadnych kroków.\nProszę zaznaczyć przynajmniej jeden krok i powtórzyć polecenie.");

}

Po wybraniu co najmniej jednego polecenia, użytkownik jest proszony o podanie żą­da­nej liczby powtórzeń zaznaczonych poleceń, za pomocą poniższej funkcji:

var theNum = prompt("Powtórz historię\nWpisz liczbę żądanych powtórzeń");

Liczba powtórzeń przechowywana jest w zmiennej theNum jako łańcuch tekstowy. Ko­lej­ny i ostatni fragment kodu przekształca łańcuch na liczbę i powtarza zaznaczone polecenia żą­daną liczbę razy.

for (i=0;i < parseInt(theNum);++i) {

fw.historyPalette.replaySteps(theSteps);

}

Polecenie Repeat History jest przydatne przy wykorzystaniu poleceń Clone (Klonuj) i Dupli­ca­te (Duplikuj). Jeśli na przykład zechcę utworzyć dziesięć gwiazd, z których każda bę­dzie obrócona o 5º w stosunku do poprzedniej, stworzę pierwszą z nich, sklonuję ją, a następnie obrócę o 5º za pomocą polecenia ModifyTransformNumeric Trans­form. Później zaznaczę Clone i Rotate w palecie History i wydam polecenie Repeat His­tory, określając dla niego dziesięć powtórzeń. Utworzony zostanie w ten sposób efekt wybuchającej gwiazdy.

	Polecenie Repeat History znajdziesz na dołączonym do książki CD-ROM-ie w katalogu Additional ExtensionsJoseph Lowery.

Przerabianie wbudowanych poleceń XE "API:przerabianie wbudowanych poleceń"

Doskonałym przykładem na to, jak niewielki kod może pomóc w pracy jest do­sto­so­wy­wa­nie wbudowanych poleceń Fireworks. Na przykład, działanie bardzo przydatnych po­le­ceń z podmenu Animation jest ograniczone do 12 klatek. Nieważne, jaką animację two­rzysz, zawsze będzie ona miała tylko 12 klatek.

Po uruchomieniu polecenia animacji zostanie wyświetlone okno dialogowe wyja­śnia­jące jego działanie. Okno dialogowe potwierdzenia jest generowane za pomocą funk­cji confirm(), co możesz zobaczyć w kompletnym kodzie polecenia Rotate:

//Wyjaśnij użytkownikowi działanie polecenia

var message = confirm("To polecenie tworzy wieloklatkową animację poprzez obracanie obiektów znajdujących się w dokumencie.");

if (message ==true)

{

//Dodaj klatki do animacji

var kNumFrames = 12;

fw.getDocumentDOM().addFrames(kNumFrames, "after current");

fw.getDocumentDOM().selectAll();

fw.getDocumentDOM().duplicateSelectionToFrames("all");

var angle = 30;

for (frameNum = 1;frameNum <= kNumFrames; frameNum++) {

fw.getDocumentDOM().currentFrameNum = frameNum;

fw.getDocumentDOM().selectAll();

fw.getDocumentDOM().rotateSelection(angle, "autoTrimImages transformAttributes");

angle += 30;

}

//Zdefiniuj opcje eksportu

fw.getDocumentDOM().setExportOptions({ exportFormat:"GIF animation " });

}

Oryginalny kod ustawia zmienną message na wartość zwracaną przez funkcję con­firm(). Jeśli użytkownik kliknie przycisk OK, funkcja confirm() zwraca TRUE. Jeśli zaś kliknięty zostanie przycisk Cancel (Anuluj), confirm() zwróci zero. W obu przy­padkach wartość funkcji confirm() jest przechowywana w zmiennej message. Następnym krokiem jest - „jeśli zmienna message wynosi TRUE, wykonaj polecenia znaj­dujące się w następnych nawiasach klamrowych”. Jeśli zmienna message wynosi TRUE, pierwsze wyrażenie w nawiasach klamrowych ustawia liczbę klatek (zmienna kNumFrames) na 12.

Zastąpienie funkcji confirm() w drugim wierszu polecenia za pomocą funkcji prompt() daje użytkownikowi możliwość zdefiniowania liczby klatek w tworzonej animacji. Róż­ni­ce w wyświetlanych oknach dialogowych możesz zobaczyć na rysunku 26.5.

Rysunek 26.5. Oryginalne polecenie Animation używa funkcji confirm() do wyświetlenia prostego okna dialogowego potwierdzenia (u góry). Jeśli funkcję confirm() zastąpisz funkcją prompt(), wyświetlone zostanie okno dialogowe (na dole), umożliwiające wpisanie liczby, która zostanie wykorzystana jako liczba klatek w tworzonej animacji

Najważniejszą zmianą w modyfikowanym kodzie jest ustawienie zmiennej kNumFrames (a więc liczby klatek tworzonych za pomocą polecenia) na wartość wprowadzaną przez użyt­kownika w wyświetlanym oknie dialogowym. Za pomocą funkcji prompt() możesz rów­nież ustalić wartość wyświetlaną domyślnie w polu tekstowym.

Dobrze byłoby również spróbować przewidzieć niecodzienne działania użytkownika. Jeśli użytkownik wpisze coś innego niż liczbę, Fireworks zignoruje wprowadzoną war­tość i polecenie nie wykona żadnych działań. Może się jednak zdarzyć, że użytkownik zde­finiuje 50, 100 lub 500 klatek i potem będzie tego gorzko żałował, gdy Fireworks będzie do­dawał do dokumentu klatkę po klatce, co na słabszych komputerach może trochę po­trwać. Większość animacji jest tworzonych z myślą o animowanych GIF-ach, więc praw­dopodobnie 30 klatek w zupełności wystarczy każdemu projektantowi. GIF skła­da­ją­cy się z 30 klatek jest powolną animacją o dużych rozmiarach fizycznych pliku. Jeśli więc użytkownik wpisze liczbę większą od 30, zostanie wyświetlone okno dialogowe z ostrze­żeniem i możliwością anulowania polecenia przed jego uruchomieniem.

Będziesz potrzebował także zmiennej angle, odpowiedzialnej za kąt obrotu, o takiej war­tości, która niezależnie od zdefiniowanej liczby klatek zawsze obróci obiekt o 360º. W ory­­ginalnym poleceniu liczba klatek jest sztywno ustawiona na 12, zaś kąt obrotu na 30º. Nie przypadkiem 12 pomnożone przez 30 daje 360, czyli kąt pełny. Aby kąt obrotu wy­niósł w rezultacie 360º, musisz ustalić właściwy kąt dla każdego kroku animacji. Mo­żesz go obliczyć, dzieląc 360º przez liczbę kroków animacji.

Przed rozpoczęciem pisania kodu dobrze jest wiedzieć, z ilu kroków ma się składać animacja. Pisanie kodów rozpoczynam przeważnie od komentarzy. Proste komentarze pomagają w późniejszym ana­li­zo­wa­niu kodu, ale nie są bez znaczenia także podczas jego pisania.

Oto ostateczny kod zmodyfikowanego polecenia Rotate:

//Ten skrypt został oparty na poleceniu Rotate

//dostarczanym wraz z Fireworks 3

//Wyjaśnij użytkownikowi działanie polecenia i zapytaj go

//o liczbę klatek animacji

var kNumFrames = prompt("To polecenie tworzy wieloklatkową animację poprzez obracanie obiektów znajdujących się w dokumencie. Proszę wpisać liczbę klatek nowej animacji.", "12");

//poproś użytkownika o potwierdzenie, jeśli liczba klatek jest większa niż 36

if (kNumFrames > 36) {

message = confirm("Generowanie animacji o takiej liczbie klatek może trochę potrwać. Kontynuować?");

}

else { //if less than 37 frames,just go ahead

message = true;

}

//Określ kąt obrotu, dzieląc 360 stopni przez

//liczbę klatek tak, aby w animacji został wykonany

//pełen obrót o 360 stopni

//ta zmienna zastępuje wartość "30" w oryginalnym skrypcie

//która jest odpowiednia tylko dla 12 klatek

var oneStepAngle = (360 / kNumFrames);

//jeśli zdefiniowano więcej niż 0 klatek i użytkownik kliknął OK, jeśli było ich więcej niż 36

//przystąp do działania

if (kNumFrames > 0 & message == true)

{

fw.getDocumentDOM().addFrames(kNumFrames, "after current");

fw.getDocumentDOM().selectAll();

fw.getDocumentDOM().duplicateSelectionToFrames("all");

//pierwotnie, w tym wierszu zmienna angle (kąt) ustawiana była na 30

//co było poprawne jedynie dla 12 kroków animacji

//teraz, ustawimy ją na zmienną oneStepAngle, która jest

//wynikiem dzielenia 360 stopni przez liczbę klatek zdefiniowaną przez //użytkownika

var angle = oneStepAngle;

for (frameNum = 1; frameNum <= kNumFrames; frameNum++) {

fw.getDocumentDOM().currentFrameNum = frameNum;

fw.getDocumentDOM().selectAll();

fw.getDocumentDOM().rotateSelection(angle,¬

"autoTrimImages transformAttributes");

//pierwotnie, w tym wierszu kąt był zwiększany o 30 stopni

//teraz, aby utworzyć kolejny krok animacji, dodamy zmienną oneStepAngle

angle += oneStepAngle;

}

//Ustaw opcje eksportu

fw.getDocumentDOM().setExportOptions({ exportFormat:"GIF animation " });

}

Jedną z zalet utworzonego polecenia jest to, że może ono działać (jeśli tylko zechce te­go użytkownik) jak oryginalne polecenie Rotate. Po kliknięciu przycisku OK, użyt­kow­nik otrzyma 12-klatkową animację obiektów obracających się o 360º. Użytkownik ma jed­nak, co najważniejsze, możliwość zdefiniowania innej liczby kroków animacji (rysunek 26.6).

Rysunek 26.6. Zmodyfikowane polecenie Rotate (które nazwałem RotatePlus) umożliwia tworzenia animacji o dowolnej liczbie kroków. Na ilustracji (rozpoczynając od lewej) widać 6-, 12- i 36-krokowe obroty stylizowanej litery S, wyświetlanej z wykorzystaniem techniki „Onion Skinning”
		Przed zmodyfikowaniem dowolnego polecenia dobrze jest najpierw sko­piować i zmienić nazwę pliku oryginalnego. Praca z kopią pliku poz­wala uchronić się przez zniszczeniem oryginalnego polecenia i za­cho­wać je na wypadek, gdybyś miał problemy przy two­rze­niu nowego polecenia. Zanim zacząłem modyfikowanie polecenia Rotate, skopiowałem je pod inną nazwą - RotatePlus i pozostawiłem w katalogu Commands/Animation. Aby je przetestować, wystarczyło za­pisać polecenie i wybrać jego nazwę z menu Commands Fireworks.

Poniżej zamieszczam listę zagadnień, o których powinieneś pamiętać przy tworzeniu po­leceń lub dowolnego typu skryptletów:

• Pamiętaj, że do Fireworks wbudowany jest interpreter JavaScript 1.4. Dla­te­go też jest dostępnych o wiele więcej poleceń, niż tylko te oferowane przez i tak silny Fireworks API. JavaScript 1.4 pozwala na tworzenie zwy­kłych wyrażeń, funkcji „znajdź i zamień” oraz wiele innych operacji.

• Upewnij się, że na końcu ostatniego wiersza kodu wstawiłeś znak końca wier­sza (Enter). Jeśli tego nie zrobisz, Fireworks nie wykona ostatniego wiersza ko­du, co może spowodować wystąpienie błędu.

• Tworzenie skryptów możesz rozpocząć od wykonania jakichś działań w Fire­works, zaznaczenia reprezentujących te działania kroków w palecie History i sko­pio­wania ich do schowka za pomocą przycisku Copy Selected Steps to Clipboard (Kopiuj zaznaczone kroki do schowka), znajdującego się w palecie History. Następnie możesz wkleić za­wartość schowka do edytora tekstu i dostosować kod do własnych potrzeb.

	Więcej informacji o palecie History znajdziesz w rozdziale 19.

Podsumowanie

Fireworks zawiera pełny zestaw JavaScript API umożliwiający dostęp z poziomu skryptów do większości funkcji aplikacji. Tworząc skrypty w Fireworks, pamiętaj o następu­ją­cych rzeczach:

• Poprzez skrypty Fireworks można uzyskać dostęp do prawie wszystkich funk­cji programu.

• Niestandardowe typy danych, takie jak kolory, maski i punkty, musisz właś­ci­wie sformatować w swoich skryptach.

• Dostępnych jest pięć globalnych metod: alert(), confirm(), prompt(), WRITE_HTML() i write(). Metody te możesz wykorzystać do wyświetlania okien dialogowych oraz pobierania danych od użytkownika i zapisywania teks­tu lub kodu HTML w eksportowanych dokumentach.

• Fireworks oferuje pięć zawsze dostępnych obiektów globalnych:

• Obiekt fw daje dostęp do wielu funkcji Fireworks, takich jak preferencje i typ plat­formy, na jakiej uruchomiony jest program.

• Obiekt Document daje dostęp do poszczególnych dokumentów, umożliwiając mo­dyfikowanie warstw, ustawianie opcji eksportu lub sprawdzanie, czy do­ku­men­ty były zmodyfikowane od ostatniego otwarcia.

• Obiekt Errors pozwala na generowanie w skryptach komunikatów o błędach, któ­re są wyświetlane w zlokalizowanym języku.

• Obiekt Files może być stosowany do kopiowania plików, tworzenia kata­lo­gów i wykonywania wielu innych operacji na plikach.

• Obiekt Find daje dostęp do funkcji związanych z operacjami typu „znajdź i za­mień”.

• Obiekty takie jak BehaviorInfo, BehaviorsList, exportDoc, ImageMap i ImageMapList umożliwiają sterowanie opcjami eksportu zdefiniowanymi w sza­blonach eksportu.

• Dobrym początkiem w tworzeniu własnych skryptów jest modyfikowanie wbu­do­wanych poleceń Fireworks.




Dodatki




Dodatek A
Podstawowe wiadomości o stronach WWW

Jeśli edukację graficzną rozpoczynałeś od Photoshopa, znasz już takie pojęcia jak ka­na­ły alfa i gradienty, ale prawdopodobnie brak Ci informacji na temat protokołów inter­ne­to­wych i programowania w HTML. W Fireworks kody HTML i JavaScript możesz two­rzyć równie łatwo jak GIF-y i JPEG-i, więc nic nie stoi na przeszkodzie, aby zbudować całą witrynę internetową (lub przynajmniej jej szkielet) bezpośrednio w Fireworks. Wie­dza na temat Internetu pomoże Ci w pełni wykorzystać wszystkie możliwości Fire­works.

	Znaczącym udogodnieniem w pracy z Internetem jest znajomość sto­so­wanych w nim akronimów. I chociaż może Cię przerażać sama myśl o protokołach sieciowych, kon­cep­cje stojące za tymi podniośle brzmiącymi terminami są dość proste. Nie daj się zastraszyć technicznym bełkotem.

Formatowanie stron

HTML XE "HTML" , czyli HyperText Markup Language (Język Znaczników Hipertekstowych) jest językiem opisu stron WWW. Doku­men­ty HTML wyświetlane w przeglądarce (rysunek A.1) są sformatowanymi stronami podobnymi do tych, które są spotykane w drukowanych czasopismach. Składają się z teks­tu formatowanego różnymi czcionkami i stylami, obrazków, a nawet multimediów, ta­kich jak odtwarzane potokowo dźwięki lub filmy.

Otwarcie dokumentu HTML w edytorze tekstu umożliwia wyświetlenie tworzącego go ko­du składającego się z opisów formatowania nazywanych znacznikami, które mówią prze­glądarce, jak wyświetlić tekst i jak dołączyć do strony obrazki i filmy.

Aby wyświetlić kod HTML tworzący stronę WWW, otwórz dokument HTML w prze­glą­darce i:

Rysunek A.1. Dokument HTML otwarty w przeglądarce internetowej jest odpowiednio formatowany z wykorzystaniem różnych czcionek i stylów

• Jeśli używasz Netscape Navigatora lub Communicatora, wybierz z menu po­le­ce­nie ViewPage Source.

• Jeżeli używasz Microsoft Internet Explorera, wybierz z menu polecenie View Source.

• Jeśli korzystasz z jeszcze innej przeglądarki, poszukaj polecenia podobnego do po­wyższych lub przejrzyj dokumentację techniczną aplikacji.

Kod HTML bieżącej strony jest przeważnie wyświetlany w edytorze tekstu lub spe­cjal­nym oknie kodu HTML, i będzie wyglądał mniej więcej tak jak na rysunku A.2.

Rysunek A.2. Oglądany w edytorze tekstu, dokument przedstawiony na rysunku A.1 wygląda teraz zupełnie inaczej

Nie przejmuj się, jeżeli to co widzisz to dla Ciebie kompletna „chińszczyzna”. Pozorna złożoność HTML kryje w sobie bardzo prostą strukturę.

Znaczniki i atrybuty XE "HTML:znaczniki i atrybuty"

Znaczniki w kodzie HTML można rozpoznać po otaczających je trójkątnych nawiasach (<>). Wszystkie elementy dokumentu HTML są albo znacznikami, albo zawartością znacz­ników. Znaczniki definiują, które fragmenty tekstu mają być nagłówkiem, a które aka­pitem oraz jak te fragmenty powinny być sformatowane. Na przykład, aby tekst We Got the Funk wyświetlić za pomocą wytłuszczonej czcionki, powinieneś wpisać go w znacz­niku Bold, oznaczanym literą b:

<b>We Got the Funk</b>

Zwróć uwagę, że ukośnik (/) w powyższym kodzie oznacza drugi znacznik jako znacz­nik zamykający. Konwencja taka jest stosowana w wielu innych znacznikach HTML, choć niektóre z nich nie wymagają znaczników zamykających.

Para znaczników: otwierający i zamykający, mówi, że „wszystko, co znajduje się mię­dzy nami jest właśnie tym”. Przykładowo, znaczniki <title></title> mówią, że „wszys­tko znajdujące się między nami jest tytułem”. Para znaczników <b></b> znaj­du­jąca się w powyższym kodzie mówi, że „wszystko znajdujące się między nami jest wy­tłuszczone”.

Wiele znaczników może również posiadać atrybuty jeszcze bardziej modyfikujące zna­cznik. Przykładowo, znacznik mówiący „wstaw tutaj tabelę” (znacznik <table>) może po­siadać atrybuty definiujące szerokość tabeli, grubość jej obramowania i wiele innych para­metrów. Atrybuty są umieszczane wewnątrz znaczników. Prosty, podstawowy zna­cz­nik <table> wygląda więc tak:

<table>

Znacznik <table> definiujący tabelę o szerokości 400 pikseli i obramowaniu o gru­boś­ci 3 pikseli wygląda następująco:

<table width="400" border="3">

Mimo że istnieje około stu różnych znaczników HTML, przytłaczająca większość stron WWW tworzona jest z wykorzystaniem jedynie ich małej części.

Dziesięć najważniejszych znaczników

Język HTML oferuje wszelkie rodzaje znaczników umożliwiające wszystkim pro­jek­tan­tom tworzenie rozmaitych rodzajów stron. Szczęśliwie dla początkujących projektantów in­ternetowych, nie wszystkie z nich są potrzebne, aby zbudować całą zawartość no­wo­czes­nej witryny WWW. Znajomość dziesięciu najważniejszych znaczników umożliwia utwo­rzenie większości kodów HTML i stron WWW. Po przyjrzeniu się każdemu z tych dzie­sięciu super-znaczników, zbudujemy prostą stronę WWW, aby nauczyć się wyko­rzys­tywać je w praktyce.

	Zapamiętanie wszystkich znaczników HTML i ich wszys­tkich znaczników nie jest konieczne. Ten podrozdział ma na celu opisanie struktury ko­dów używanych do tworzenia stron WWW. Nawet najbardziej za­awan­sowani programiści HTML bardzo często korzystają w pracy z pod­ręczników tego języka.

Znacznik HTML: <html></html>

Znacznik <html> mówi, że „wszystko znajdujące się wewnątrz mnie jest kodem HTML”. Każdy dokument HTML rozpoczyna się znacznikiem otwierającym <html> i koń­czy znacznikiem zamykającym </html>. Przeglądarki internetowe przeważnie igno­rują wszystko, co nie znajduje się pomiędzy tymi znacznikami. Dlaczego? Gdyż nie jest to kodem HTML. Znaczniki <html> nie posiadają żadnych atrybutów.

	Dokumenty XML (Extensible Markup Language) także posiadają parę znacz­ników <xml></xml> otaczających całą zawartość XML-a. Po­dob­nie dokumenty SMIL (Synchronized Multimedia Intergration Language) po­siadają parę znaczników <smil></smil>, wewnątrz których za­pi­sy­wa­ny jest kod SMIL. W językach tych również wykorzystywany jest znak / oznaczający znacznik zamykający.

Budowę strony WWW rozpoczniemy od wpisania znaczników <html>:

<html>

</html>

Znacznik head: <head></head>

O znaczniku <head> możesz myśleć jako o sposobie „przedstawienia” strony prze­glą­dar­ce. Jest to znajdująca się w tle informacja, która nie jest wyświetlana w przeglądarce. Znacz­nik <head> zawiera tytuł strony i indeksy wykorzystywane przez wyszukiwarki inter­netowe. Po dodaniu znacznika <head> do naszej przykładowej strony WWW (no­we fragmenty kodu są wytłuszczane), jej kod będzie wyglądał następująco:

<html>

<head>

</head>

</html>

	Inne rzeczy, jaki możesz znaleźć w znaczniku <head> to funkcje skryp­to­we nawiązujące do skryptów znajdujących się w sekcji <body> kodu (we­wnątrz znacznika <script>) i informacje o kaskadowych arkuszach sty­lów (CSS) używanych do formatowania zawartości strony (wewnątrz znacz­nika <style>).

Znacznik title: <title></title>

Znacznik <title> zawiera tytuł strony. Jest to bardzo ważny znacznik, ponieważ jest wy­korzystywany przez wiele wyszukiwarek internetowych przy indeksowaniu stron WWW. Innymi słowy - jeśli użytkownik szuka słowa Pokemon, w liście stron wy­świe­tlo­nych przez wyszukiwarkę więcej będzie dokumentów zawierających słowo Pokemon w tytule, niż stron zawierających to samo słowo w swej zawartości. Znacznik <title> zaw­sze znajduje się wewnątrz znacznika <head> i powinien być pierwszym znacz­ni­kiem wpisywanym po znaczniku otwierającym <head>. W przeciwnym przypadku nie­któ­re wyszukiwarki nie odnajdą dokumentu. Po dodaniu znacznika <title> do naszej stro­ny, jej kod będzie wyglądał następująco:

<html>

<head>

<title>An Example Page</title>

</head>

</html>

Znacznik meta: <meta></meta>

Znacznik <meta> umożliwia przechowywanie informacji o stronie WWW wewnątrz sa­mej strony. Znacznik ten można traktować jako pole w bazie danych. Do jednej strony WWW możesz dodać tyle znaczników <meta>, ile tylko zechcesz i każdemu z nich na­dać jego własną nazwę (typ danych) oraz zawartość (dane). Najczęściej wykorzy­sty­wa­ny­mi naz­wami znaczników <meta> są: description, która zawiera opis strony wyświe­tla­ny przez niektóre wyszukiwarki internetowe zaraz po tytule strony, oraz keywords, która za­wie­ra słowa kluczowe (oddzielane przecinkami) używane przez wyszukiwarki inter­ne­to­we do indeksowania stron w swoich bazach danych. Stosowanie precyzyjnych i opi­so­wych słów kluczowych w znacznikach <meta> zwiększa szansę na to, że Twoją stro­nę znajdą faktycznie nią zainteresowani użytkownicy używający wyszukiwarek. Możesz użyć dowolnej liczby słów klu­czowych, ale pierwszych szesnaście ma największe znaczenie. Powtarzanie słów klu­czowych może uniemożliwić zaindeksowanie Twojej strony w wyszukiwarce. Ist­nie­ją jeszcze inne znaczniki <meta>, na przykład takie, które wyświetlają w wyszukiwarce nazwisko auto­ra strony. Kod naszej przykładowej strony będzie wyglądał następująco:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content=="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

</head>

</html>

	Stosuj słowa kluczowe w liczbie mnogiej. Jeśli umieścisz w kodzie sło­wo kluczowe mp3s, Twoją stronę znajdą użytkownicy szukający słów mp3 oraz mp3s. Uwzględniaj także często spotykane błędy w pisowni.

Znacznik body: <body></body>

Znacznik <body> jest miejscem, w którym przechowywana jest cała zawartość strony wy­świetlana w przeglądarce. Tekst, obrazki, plug-iny, aplety Javy - wszystkie te ele­men­ty znajdują się w znaczniku <body>. Znacznik ten prawie zawsze posiada pewne atry­buty definiujące kolor tła i tekstu strony. Jeśli parametry te nie zostaną zdefi­nio­wa­ne, używane są domyślne kolory przeglądarki użytkownika (które mogą być u każdego użyt­kownika inne). Kolory są definiowane w języku HTML poprzez ich wartości w mo­de­lu RGB i podawane w zapisie szesnastkowym (heksadecymalnym). W naszym przy­kła­dzie użyjemy białego (#FFFFFF) tła i czarnego (#000000) tekstu, więc kod będzie wy­glądał następująco:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

</body>

</html>

Zauważ, że nasza strona posiada już znacznik <body>, ale jedyną rzeczą jaka zostanie wy­świetlona w przeglądarce jest białe tło.

Znacznik paragraph: <p></p>

Każda para otwierających i zamykających znaczników <p> zawiera akapit. Akapit mo­że składać się z tekstu, obrazków i prawie wszystkich innych elementów, które mogą być wyświetlane na stronie WWW. Pomiędzy poszczególnymi akapitami przeglądarki po­zostawiają jeden pusty wiersz. Do znacznika <p> możesz dodać atrybuty wyrów­na­nia, aby wyrównać zawartość akapitu do lewej, wyśrodkować lub wyrównać do prawej, jak w naszym przykładzie. Jeśli pominiesz atrybuty wyrównania, zawartość akapitu zos­tanie wyrównana do lewej.

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content=="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<p>Here is a paragraph full of text.</p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

</body>

</html>

Nasz strona WWW wyświetlana w przeglądarce (rysunek A.3) wreszcie ma jakąś za­wartość.

Rysunek A.3. Przeglądarki internetowe pozostawiają jeden wiersz odstępu pomiędzy akapitami i wyrównują akapity zgodnie z atrybutami znaczników <p>

Znacznik zamykający </p> nie jest wymagany przez przeglądarki, ale dob­rze jest go stosować. XML, SMIL i inne pochodne HTML zaw­sze wymagają znaczników zamykających, a specyfikacja HTML 4 wy­ma­ga znaczników zamykających dla zachowania pełnej zgodności.

Znacznik anchor: <a></a>

Znacznik <a> (anchor - odnośnik), jest bardzo ważny w Internecie, gdyż umożliwia two­rzenie hiperłączy. Czym byłby hipertekst bez hiperłączy? Utworzenie łącza to bar­dzo proste zadanie. Wystarczy otoczyć tekst lub obrazek, który ma być łączem za po­mo­cą otwie­ra­ją­cego i zamykającego znacznika <a> oraz nadać mu atrybut href, jak poniżej:

<a href="http://www.google.com ">Search at Google!</a>

Atrybut href mówi przeglądarce, jaką stronę ma otworzyć po kliknięciu przez użyt­kow­nika tekstu Search at Google! łącza są zazwyczaj podkreślane i wyświetlane w kolorze nie­bieskim. Gdy dodamy na naszej stronie łącze do słowa text, powstanie na­stę­pujący kod:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<p>Here is a paragraph full of <a href="http://www.dictionary.com ">text </a>.</p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

</body>

</html>

Na rysunku A.4 możesz zobaczyć, jak nasz kod będzie interpretowany przez prze­glą­darkę.

Rysunek A.4. łącza są domyślnie podkreślane

Znacznik image: <img>

Znacznik <img> mówi przeglądarce, aby wyświetliła w danym miejscu na stronie określony obrazek. Zwróć uwagę, że znacznik <img> nie posiada znacznika zamykającego, gdyż nie otacza żad­nych innych znaczników lub zawartości. Mimo że nie musisz definiować szerokości i wysokości obrazka za pomocą atrybutów width i height, ich określenie przyspiesza ła­dowanie strony. Dobrą praktyką jest także stosowanie atrybutu alt. Pozwala on na two­rzenie tekstu zastępczego dla przeglądarek nie obsługujących grafiki oraz dla użyt­kow­ni­ków, którzy wyłączyli wyświetlanie obrazków w swoich przeglądarkach lub mają sła­by wzrok. Znacznik <img> może być umieszczany wewnątrz innych znaczników, prze­waż­nie wewnątrz znaczników akapitów i tabel. Znacznik <img> można nawet otoczyć znacz­nikiem <a>, aby utworzyć z obrazka łącze.

Obrazki pełnią oczywiści w Internecie funkcję ilustracyjną, ale są również nieza­wod­nym sposobem na zachowanie określonego formatowania strony WWW. Dlatego też bar­dzo często są wykorzystywane do umieszczania na stronach tytułów, znaków gra­ficz­nych i tym podobnych elementów. W naszym przykładzie wykorzystamy dwa obraz­ki. Jeden z nich będzie ilustracją, drugi zaś tytułem strony.

Pliki obrazków są zazwyczaj przechowywane w pobliżu wykorzystujących je plików HTML, czyli w tych samych lub sąsiednich folderach, często nazywanych images (obraz­ki) lub podobnie. Obrazki wykorzystywane na naszej stronie znajdują się w tym sa­mym katalogu co plik HTML, więc atrybut src zawiera jedynie ich nazwy:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<p><img src="example_title.gif" width="400" height="50"alt="An Example Page "></p>

<p>Here is a paragraph full of <a href="http://www.dictionary.com ">text</a>.</p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

<p><img src="mona.gif" width="125" height="160" alt="A generic placeholder image of the Mona Lisa."></p>

</body>

</html>

Wynik powyższego kodu możesz zobaczyć na rysunku A.5.

Rysunek A.5. Znacznik <img> wyświetla plik obrazka, na przykład znajdującą się obok Monę Lisę, na stronie WWW

Możesz również wykorzystywać obrazki znajdujące się w innych katalogach albo nawet w dowolnych lokalizacjach w Internecie, dodając do opisującego obrazek atrybutu href właściwy adres URL.

Znacznik font: <font></font>

Prosty tekst może się szybko znudzić. Umieszczenie wokół tekstu znaczników <font> umo­żliwia zmodyfikowanie jego formatowania, zdefiniowanie wyglądu czcionki za pomocą atry­butu face i koloru za pomocą atrybutu color. Kolory są definiowane poprzez ich war­tości w modelu RGB, podawane w zapisie szesnastkowym. Musisz jednak zwrócić szcze­gólną uwagę na to, jakich czcionek możesz używać, a jakich nie. Czcionki są za­zwy­czaj definiowane w formie listy, na przykład „Arial, Helvetica, sans-serif”, po­nie­waż użytkownik musi posiadać wybraną czcionkę w swoim systemie operacyjnym. Jeśli pierw­sza czcionka nie zostanie znaleziona, przeglądarka pobiera drugą czcionkę z listy, następnie trze­cią itd. Opcja serif lub sans-serif zawsze powinna być ostatnią pozycją w liście. Opcje te mówią przeglądarce, aby użyła domyślnej, szeryfowej (na przykład Times Ro­man) lub bezszeryfowej czcionki (na przykład Helvetica).

	Możesz również użyć programu Bitsream Dynamic Fonts do ładowania do­wolnych czcionek wraz ze stroną WWW. Mogą być one wyświetlane bez­pośrednio w Netscapie 4+ oraz, za pomocą małej kontrolki Active X, w Internet Explorerze 4+.

W tym momencie naruszę nieco zasady i wykorzystam dwa dodatkowe znaczniki. Aby wy­tłuś­cić tekst, otoczę go znacznikiem <b> i określę dla niego kursywę za pomocą znaczników <i>.

Po dodaniu znaczników <font>, <b> i <i>, kod naszej strony będzie wyglądał nastę­pująco:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring ">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<p><img src="example_title.gif" width="400" height="50" alt="An Example Page "></p>

<p><font face="Verdana, Helvetica, sans-serif" color="FF0000 ”><i>Here</i> is a <b>paragraph</b> full of <a href="http://www.dictionary.com"> text</a>.</font></p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

<p><img src="mona.gif" width="125" height="160" alt="A generic placeholder image of the Mona Lisa."></p>

</body>

</html>

Na rysunku A.6 możesz zobaczyć, jak nasz kod będzie interpretowany przez prze­glądarkę.

Rysunek A.6. Znaczniki <font>, <b> i <i> sprawiają, że pierwszy akapit wygląda nieco inaczej niż drugi

Znacznik table: <table></table>

Znacznik <table> pierwotnie został stworzony z myślą o łatwiejszym wyświetlaniu na stro­nach WWW tabel zawierających dane (podobnych do tych, jakie można znaleźć w arku­szach kalkulacyjnych). Obecnie, jest powszechnie wykorzystywany do pro­jek­to­wa­nia szkieletów całych stron WWW, na których elementy takie jak tekst i obrazki są roz­mieszczane w komórkach tabeli. Elementy te mogą się wówczas znajdować mniej więcej w wybranych punktach na stronie. Znacznik <table> jest prawdopodobnie najtrudniejszy z dziesięciu najważniejszych znaczników, dlatego też najczęściej jest tworzony w edy­to­rach graficznych, zamiast poprzez ręczne programowanie.

Wybiegając poza ograniczenie do dziesięciu znaczników, znacznik <table> posiada dwóch „pomocników”: znacznik <tr> (table row - wiersz tabeli) i znacznik <td> (table data - da­ne tabeli). Znacznik <tr> mówi, iż „wszystko znajdujące się wewnątrz mnie jest wier­szem tabeli”. Znacznik <td>, który zawsze występuje wraz ze znacznikiem <tr>, defi­niuje komórkę tabeli. Kolumny nie są definiowane, lecz wyznaczane poprzez liczbę ko­mórek w wierszu tabeli. Oto jak wygląda kod pustej tabeli zawierającej dwa wiersze i trzy ko­lumny:

<table>

<tr> <td></td> <td></td> <td></td> </tr>

<tr> <td></td> <td></td> <td></td> </tr>

</table>

Zauważ, że liczba kolumn jest wyznaczana przez łańcuchy trzech par znaczników <td></td>. Jeśli wszystkie tabele są puste, ich ręczne formatowanie jest dość proste, ale gdy zaczniesz umieszczać w nich jakieś elementy, wszystko zacznie się kom­pli­ko­wać. Po umieszczeniu zawartości w tabeli o trzech wierszach i dwóch kolumnach pow­sta­nie następujący kod:

<html>

<head>

<title>An Example Page</title>

<meta name="description" content="A Web page built as an example of the most common tags and where they go.">

<meta name="keywords" content="HTML, code, examples, learning, tags, markup languages, hypertexts, Web designs, Web authoring">

<meta name="author" content="Simon White">

</head>

<body bgcolor="#FFFFFF" text=="#000000">

<table width="500" border="0">

<tr>

<td colspan="2"><img src="example_title.gif" width="400" height="50" alt="An Example Page"></td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td><p><img src="mona.gif" width="125" height="160" alt="A generic

placeholder image of the Mona Lisa."></p></td>

<td><p><font face="Verdana, Helvetica, sans-serif" color="FF0000"><i>Here</i> is a <b>paragraph</b> full of <a href="http://www.dictionary.com"> text</a>.</font></p>

<p align="right">Here is a right-aligned paragraph full of text.</p>

</td>

</tr>

</table>

</body>

</html>

Ukończona przykładowa strona (rysunek A.7) zawiera tytuł, informacje wymagane przy in­deksowaniu, sformatowany tekst, hiperłącze oraz tabelę, a wszystko to zostało utwo­rzo­ne z wykorzystaniem najczęściej stosowanych znaczników.

Zastosowanie Virtual PC w MacOS Po zainstalowaniu emulatora Virtual PC w MacOS, staje się on idealnym komputerem testowym dla każdego projektanta stron WWW, gdyż umożliwia uruchamianie wielu różnych wersji przeglądarki Netscape, Microsoft i AOL dla Windows, MacOS i Linux, jak również przeglądarki WebTV, i to wszystko na jednym urządzeniu (bez stosowania partycji lub ponownego uruchamiania). Należy w tym celu pominąć zalecenie IE i AOL dla Windows, które mówi, że na jednym komputerze można instalować tylko jedną wersję przeglądarki. Virtual PC umożliwia obejście tego problemu, pozwalając na utrzymanie wielu konfiguracji, każdej z nich odpowiadającej innej wirtualnej partycji startowej, a tak naprawdę jest to tylko plik na dysku twardym, dla aplikacji Virtual PC. Każda z konfiguracji może zawierać inną wersję Windows lub Linux, konfigurację i przeglądarkę (i (lub) zestaw zainstalowanych plug-inów przeglądarki). Wszystkie zrzuty ekranowe umieszczone w niniejszej książce zostały wykonane na jednym komputerze Macintosh, przy wykorzystaniu wielu wersji Windows i około dwudziestu przeglądarek.

Rysunek A.7. Otwarcie strony w Dreamweaverze pozwoli przyjrzeć się strukturze znacznika <table>. Za Dreamweaverem, ta sama strona jest otwarta w Netscapie
		Jeśli wciąż mało Ci znaczników, następne w kolejce do poznania są <style>, <form>, <script> oraz znacznik komentarza. Więcej o nich znaj­dziesz w źródłach języka HTML, na przykład na stronie Roba Schul­ter'a, znajdującej się pod adresem http://utopia.knoware.nl/users/schluter /doc/tags/index.html.

Zróżnicowanie
wśród przeglądarek internetowych

W idealnym Internecie o ograniczonym zestawie możliwości mógłbyś nakazać wyko­nać przeglądarce określoną akcję i miałbyś pewność, że wszystkie przeglądarki in­ter­netowe wykonają to samo zadanie dobrze i w podobny sposób. Jeżeli w pro­jek­to­wa­niu trzy­masz się funkcji obsługiwanych przez Netscape Navigatora 3.0, możesz założyć, że stro­na będzie poprawnie wyświetlana w większości przeglądarek, ale wciąż będziesz na­rażony na występowanie błędów w poszczególnych przeglądarkach lub w ich różnych wer­sjach. Jeżeli projektujesz zgodnie z jednym z bardziej współczesnych standardów, takich jak CSS 1 (Cas­ca­ding Style Sheets 1.0 - specyfikacja pierwsza kaskadowych arkuszy stylów), zobaczysz, że interpretacja strony przez przeglądarki będzie tylko sporadycznie poprawna. Naj­le­piej jest przetestować swój projekt w jak największej ilości różnych przeglądarek i ich wer­sji zarówno na samym początku tworzenia, jak i w jego trakcie.

Przeglądarki

Każdy z projektów może być przeznaczony dla innych użytkowników posiadających róż­ne przeglądarki internetowe. Jeśli tworzysz, na przykład, witrynę zawierającą rady dla użyt­kowników Windows 2000 możesz założyć, że przytłaczająca większość odwiedza­ją­cych będzie korzystała z Internet Explorera 5 uruchamianego w Windows 2000, gdyż ta przeglądarka stanowi część pakietu Windows 2000. Inter­ne­towy magazyn dla projektantów internetowych będzie odwiedzany przez użytkow­ni­ków po­sia­dających najnowsze wersje Internet Explorera i Netscapa uruchamianych zarówno w Win­dows, jak i w MacOS. Sklep internetowy będzie odwiedzany praktycznie przez wszys­tkich użytkowników posiadających różne wersje przeglądarek dla MacOS, Win­dows i AOL. Zapoznanie się z możliwościami i kaprysami wszystkich przeglądarek oraz testowanie, testowanie i jeszcze raz testowanie pozwolą uchronić się przed późniejszymi nie­spo­dziankami.

Netscape Navigator (Communicator) XE "Netscape Navigator (Communicator)"

Wersje 1, 2 i 3 Navigatora praktycznie już nie istnieją, ale jeśli projektujesz witrynę dla sze­ro­kiego grona użytkowników, dobrą przeglądarką testującą jest Navigator 3, który był bar­dzo popularny i wiele z jego funkcji zostało zaadoptowanych w nowszych prze­glą­dar­kach. W większości przypadków, jeśli Twoja strona dobrze pracuje w Navigatorze 3, będzie wymagała jedynie kilku udoskonaleń, aby wyglądała równie dobrze w późniejszych wersjach Navi­ga­to­ra, w Internet Explorerze i w innych przeglądarkach, jak np. Opera.

Chociaż Navigator 4.x stracił na popularności w oczekiwaniu na wersje 5. lub 6. tej przeglądarki, jest jednak wciąż najbardziej popularną przeglądarką spośród tych, które nie są produktem Microsoft. Navigator 4.x obsługuje niektóre funkcje CSS (wliczając warstwy), ale nie tak, jak ży­czy­łoby sobie World Wide Web Consortium (W3C). Przeglądarka ta posiada powszech­nie znany błąd - nie przeładowuje stron bez formatowania CSS, jeśli użytkownik prze­ska­lu­je okno przeglądarki. Navigator 4.x jest dostępny dla systemów Windows, MacOS, OS/2, Linux oraz wielu innych platform UNIX-owych. Pamiętaj, że plug-iny prze­glą­da­rek również są uzależnione od systemów operacyjnych i większość z nich przeznaczona jest wyłącznie dla Windows oraz MacOS. W połączeniu z pozostałymi elementami pakietu opro­gra­mowania, Netscape znany jest jako Netscape Communicator, ale cały czas chodzi o tę samą przeglądarkę.

	Odwiedź witrynę World Wide Web Consortium, która znajduje się pod ad­resem www.w3c.org.

Długo oczekiwanym uaktualnieniem oprogramowania Netscape jest Navigator 6, zupełnie nowy produkt oparty na otwartym dostępie do kodu źródłowego, zespołu pro­gramistów Mozilla.org. Navigator 6 w pełni obsługuje HTML-a 4 oraz CSS 1, ale został dosyć chłodno przyjęty przez recenzentów. Otwarty dostęp do kodu źródłowego oznacza, że interpreter HTML (nazywany Gecko) bę­dzie najprawdopodobniej zbudowany w oparciu o szeroki zakres różnych kom­po­nen­tów sprzętowych i programowych, takich jak inne przeglądarki internetowe. Profe­sjo­na­liści zajmujący się projektami internetowymi powinni więc trzymać rękę na pulsie.

Microsoft Internet Explorer XE "Microsoft Internet Explorer"

Internet Explorer 1 i 2 miały bardzo ograniczone możliwości i nie były zbyt szeroko sto­sowane, możemy więc zupełnie zignorować te przeglądarki. IE 3 zawiera niektóre pod­stawowe funkcje CSS, ale są one słabo zaimplementowane i różnią się całkowicie od tych spotykanych w IE 4, nie polecam więc testowania projektów w IE 3 z CSS. Wer­sja dla Windows nie obsługuje przełączania obrazków, ale nie zgłasza przy tym żad­nych błędów. Pamiętaj, że jeśli tworzysz skomplikowane przełączanie obrazków, ca­ły projekt pójdzie na marne, jeśli przełączanie nie będzie obsługiwane przez prze­glądarkę.

	IE 3 jest obecnie bardzo rzadko używany, ale zestaw jego funkcji został prze­jęty przez wiele przeglądarek AOL.

IE 4 dla Windows bardzo dobrze interpretuje dokumenty HTML i obsługuje wiele (acz­kol­wiek niekompletnie) zaawansowanych technologii internetowych. Popularność tej prze­glądarki wynika z jej wymuszonej integracji z systemami Windows oraz braku współpracy z za­in­stalowaną na tym samym komputerze przeglądarką Netscape. IE 5 dla Windows poprawił standardy obsługi, jednak wielu programistów wciąż bazuje na funkcjach IE 4 (chociaż wciąż zalecane jest testowanie w IE 5). IE 5.5 wprowadził nowy zakres rozszerzeń HTML, specyficznych dla Microsoftu, jakby chcąc przypomnieć czasy, gdy producenci przeglądarek rywalizowali w tym, jak przekonać programistę, żeby tworzył stronę dostępną tylko w ich przeglądarce.

Internet Explorer dla Windows i IE dla MacOS to zupełnie różne narzędzia obsługujące in­ne technologie internetowe oraz inaczej interpretujące HTML. IE3 i 4 dla MacOS są wyposażone w miłe interfejsy użytkownika, ale są to — mówiąc szczerze — beznadziejne przeglądarki. Jednak przeglądarka IE 5.5 jest czymś zupełnie innym. Wciąż korzysta z doskonałego interfejsu użytkownika, ale dodaje najlepszy z dostępnych na rynku interpreter Microsoft - Tazman., dostępny tylko w wersji IE 5 dla MacOS (rysunek A.8).

Rysunek A.8. Internet Explorer 5 dla Macintosha (pokazany tu na Mac OS X) jest jedyną przeglądarką, która jest w stanie poprawnie odtworzyć tzw. „CSS acid test” W3C, dokument testujący pełną zgodność ze specyfikacją CSS 1.0. Po wpisaniu „about:tasman” w pasku adresowym IE 5 dla MacOS, pojawi się specjalna wersja tego testu, zastępująca tekst obszaru zablokowanego nazwą programisty

	W3C CSS Acid Test znajdziesz pod adresem www.w3.org/Style/CSS/Test/ current/sec5526c-test.htm.

Wersje IE dla Windows i dla MacOS różnią się również bardzo pod względem obsługi plug-inów i skryptów. IE dla Windows wyko­rzy­stuje technologie pracujące tylko w tym systemie, takie jak ActiveX i VBScript (mi­mo że umożliwia również podstawową obsługę plug-inów Netscape oraz doskonałą obsługę Java­Scriptu). Wersja IE na MacOS używa wyłącznie plug-inów Netscape i JavaScript, mi­mo że obsługa tych elementów w wersjach 3 i 4 przeglądarki jest najgorsza ze wszys­tkich najważniejszych przeglądarek., niemniej jednak w IE 5 dla MacOs obsługa plug-inów i JavaScript jest tu doskonała. Należy pamiętać, że plug-iny przeglądarek zależą od platformy, chociaż są dostępne wersje MacOS wszystkich głównych plug-inów.

	Istnieją również wersje IE dla UNIX-a, ale nie są one zbyt szeroko sto­sowane i reklamowane.

America Online XE "America Online"

Przeglądarki AOL 3, 4 i 5 są zmodyfikowanymi wersjami Internet Explorer Microsoft, ale niestety numery wersji nie są ze sobą zgodne. Innymi słowy - przeglądarka AOL 4 mo­że być oparta na IE 3 lub IE 4. Najważniejszą różnicą pomiędzy AOL i IE jest to, iż prze­glądarki AOL mogą mieć otwarte jednocześnie tylko jedno okno. AOL dodatkowo jeszcze umieszcza obrazki w pamięci podręcznej i dokonuje ich powtórnej kompresji, co może powodować powstawanie zniekształceń w JPEG-ach, a obrazki są ograniczone do rozmiaru 640x480.

	Więcej informacji o projektowaniu witryn dla przeglądarek AOL znaj­dziesz na stronie AOL Webmaster znajdującej się pod adresem webmaster.aol.com.

WebTV XE "WebTV"

Przeglądarka WebTV nie wywołała burzy wśród internautów i jej użytkownicy stano­wią bardzo małą część społeczności internetowej. Dostęp do Internetu poprzez telewizję być może zdobędzie większą popularność w przyszłości i wtedy na pewno w wielu urzą­dzeniach znajdziesz funkcje przypominające przeglądarkę WebTV, dlatego też warto jej się nieco bliżej przyjrzeć.

WebTV wyświetla strony internetowe w dość wyjątkowy sposób, aby dostosować je do nis­kich rozdzielczości ekranów odbiorników telewizyjnych. Najważniejszą rzeczą do za­pamiętania jest to, iż „okno przeglądarki” ma ściśle ustalone wymiary: 544 piksele sze­rokości i 378 pikseli wysokości. Jeżeli strona będzie szersza, zostanie ściś­nię­ta. Jeśli zaś będzie wyższa, użytkownik będzie musiał użyć przewijania, aby zobaczyć jej pozostałe elementy. WebTV umożliwia otwarcie tylko jednego okna przeglądarki i dość nietypowo obsługuje ramki: zestaw ramek jest konwertowany na tabelę i ścis­ka­ny do szerokości 544 pikseli. WebTV umożliwia korzystanie z dowolnych czcionek, ale mu­szą mieć one rozmiary 14 pikseli i być wytłuszczone oraz bezszeryfowe. WebTV obsłu­guje Flasha 2.0 oraz RealAudio 3.0. Jedną z rzeczy dobrze obsługiwanych przez WebTV jest odtwarzanie plików MIDI za pomocą programowego syntezatora opartego na technologii firmy Beatnik.

Nie istnieje żadna możliwość sprawdzenia, jak Twoja strona będzie wyświetlana w WebTV. Na szczęście, twórcy WebTV oferują darmową przeglądarkę WebTV Viewer dla Win­dows i MacOS, które pomagają w tworzeniu stron „bezpiecznych” dla WebTV. Prze­glą­darkę taką możesz pobrać ze strony http://developer.webtv.net (rysunek A.9).

Wieloplatformowość

Internet jest zaskakująco wieloplatformowym medium, zwłaszcza gdy weźmiemy pod uwa­gę, że Netscape pracuje podobnie w Windows, w MacOS i w systemie Linux, ale ist­nieje kilka rzeczy, o których musisz pamiętać, jeśli chcesz, aby Twoje strony wy­glą­da­ły podobnie na każdej z wymienionych platform.

Rysunek A.9. Strona WWW z rysunku A.1 wyświetlona w przeglądarce WebTV Viewer 2.0 dla MacOS

Czcionki

Zanim powstał Internet, publikacje były głównie drukowane. Wybór czcionki w pro­gra­mie komputerowym oznaczał zatem przeważnie wybór jej rozmiaru, mierzonego w punk­tach (pt). Aby 12-punktowa czcionka mogła zostać wyświetlona na ekranie mo­ni­tora, komputer musi przekształcić punkty (jeden punkt to 1/72 cala) na piksele (naj­mniej­szy punkt, jaki może zostać wyświetlony na ekranie monitora).

Na rysunku A.10 widać stronę WWW wyświetlaną w MacOS, gdzie 10-punktowa czcion­ka ma rozmiar 10 pikseli, gdyż rozdzielczość wyświetlania na MacOS to 72 dpi.

Rysunek A.10. System MacOS do konwersji punktów na piksele używa rozdzielczości wynoszącej 72 dpi, więc czcionki o takich samych rozmiarach będą w MacOS mniejsze niż w Windows

Na rysunku A.11 pokazano tę samą stronę WWW wyświetlaną w systemie Windows, gdzie 10-punktowa czcionka jest wyświetlana w rozmiarze 12 pikseli, gdyż roz­dziel­czość wyświetlania w Windows to 96 dpi.

Rysunek A.11. System Windows do konwersji punktów na piksele używa rozdzielczości wynoszącej 96 dpi, więc czcionki o takich samych rozmiarach będą w Windows większe niż w MacOS
		Internet Explorer 5 dla MacOS wprowadził nową funkcję w celu poprawienia wyświetlania czcionek na różnych platformach. Zgodnie z ustawieniem domyślnym, rozdzielczość jest ustawiona na standard Windows, czyli 96dpi, ale zarazem rozmiar czcionki jest ustawiony na 16 punktów, dzięki czemu użytkownicy, którzy nie zmienią ustawień będą widzieć tekst o większym rozmiarze niż użytkownicy systemu Windows.

Elementy formularzy

Elementy formularzy są tworzone przez system operacyjny a nie przez przeglądarkę, dla­tego też na każdej platformie są inne i często mają inne rozmiary (rysunek A.12). Każdy projektant internetowy musi brać to pod uwagę w swoich projektach, pozostawiając, o ile to ko­niecz­ne, dodatkowe miejsce na stronie i testować stronę na każdej możliwej platformie. Często popełnianym błędem jest mylenie elementów formularzy z przyciskami obrazków, które mogą wyglądać podobnie do elementów formularzy w niektórych systemach operacyjnych. Elementy formularzy w MacOS X wyraźnie odróżniają się od tych elementów w innych systemach operacyjnych — wyglądają jak przezroczyste szkło — i potrafią bardzo odmienić wygląd strony.

Protokoły XE "protokoły"

Informacje „podróżują” po Internecie zgodnie z zestawem protokołów nazywanym TCP/IP (Transmission Control Protocol/Internet Prostocol). Zestaw protokołów jest gru­pą protokołów lub porozumieniem pewnej grupy ludzi dotyczącym sposobu wy­ko­na­nia określonej operacji. TCP/IP zawiera ponad sto takich elementów, ale tutaj przyj­rzy­my się tym najczęściej używanym.

HTTP i HTTPS XE "protokoły:HTTP i HTTPS"

HTTP (HyperText Transfer Protocol) wysyła żądania dokumentów HTML z prze­glą­dar­ki do serwera, a następnie wysyła te dokumenty z serwera do przeglądarki. Jak za­pew­ne wiesz, jest to bardzo często stosowana funkcja w Internecie. Gdy przeglądarka i serwer chcą sobie „porozmawiać w cztery oczy” (na przykład w trakcie transakcji in­ter­netowej), używają protokołu HTTPS (HyperText Transfer Protocol Secure).

Rysunek A.12. Elementy formularzy w każdym systemie operacyjnym wyglądają trochę inaczej i mogą mieć różne rozmiary

Gdy prze­glądarka korzysta z protokołu HTTPS, w jej pasku stanu wyświetlana jest ikona kłód­ki lub podobna, zaś wszelkie informacje są przed wysłaniem szyfrowane. Wszys­tkie przeglądarki obsługują protokół HTTP, a większość z nich obsługuje również HTTPS. URL HTTP wygląda tak: http://opensrs.com. URL HTTPS wygląda podobnie, z tym wyjątkiem, że korzysta z przedrostka https://.

FTP XE "protokoły:FTP"

FTP (File Tranfer Protocol) pozwala na kopiowanie plików pomiędzy komputerami (na­wet pomiędzy różnymi typami komputerów) oraz na podstawowe operacje na plikach, ta­kie jak wypisywanie zawartości katalogów na odległym komputerze. Przeglądarki ob­sługują FTP jedynie w podstawowym zakresie, zaś pełną kontrolę nad tym pro­to­ko­łem dają programy klienckie FTP, takie jak WS FTP dla Windows lub Anarchie dla Mac­OS. Wiele serwerów FTP pozwala na anonimowy dostęp do ich zasobów. Użyt­kow­nik podaje w takich serwerach jako hasło swój adres e-mail i ma ograniczone upra­w­nienia. URL FTP wygląda tak: ftp://ftp.panic.com.

	Mogłoby się wydawać, że w adresie ftp://ftp.panic.com protokół FTP jest definiowany dwukrotnie, ale tak nie jest. Pierwsze słowo ftp de­fi­niu­je protokół, zaś drugie jest częścią nazwy serwera FTP - panic.com. Serwery HTTP często posiadają w nazwie słowo www, jak w adresie http://www.panic.com.

SMTP i POP XE "protokoły:SMTP i POP"

SMTP (Simple Mail Transfer Protocol) umożliwia przekazywanie poczty elektronicznej pomiędzy różnymi kom­puterami w sieci. POP (Post Office Protocol) jest nowszą me­­to­dą od­bierania poczty. Klienci poczty elektronicznej, na przykład Netscape Mes­senger lub Micro­soft Outlook Express używają protokołów SMTP i POP do wysyła­nia i od­bie­ra­nia poczty.

NNTP XE "protokoły:NNTP"

NNTP (Network News Transfer Protocol) jest wykorzystywany przez programy od­czy­tu­jące listy dyskusyjne do kierowania zapytań do serwerów oraz przez serwery grup dys­kusyjnych do odbierania wiadomości. Protokół NNTP jest odpowiedzialny za znany przez wszystkich i lubiany Usenet. URL NNTP wygląda tak: news://forums.macrome­dia.com /macromedia.fireworks.

	Inne protokoły używają przedrostka takiego samego jak ich nazwy (na przy­kład protokół FTP korzysta z przedrostka ftp://), ale protokół NNTP używa przedrostka news://.

RTSP XE "protokoły:RTSP"

RTSP (Real-Time Streaming Protocol) jest prawdopodobnie najbardziej rozbudowanym pro­tokołem Internetowym umożliwiającym sprawne przesyłanie przez Internet od­twa­rza­nych potokowo plików multimedialnych, na przykład dźwięków i filmów wideo. Wy­rażenie real-time (w czasie rzeczywistym) oznacza, że pliki dźwiękowe i wideo są prze­syłane do klienta bez przerywania prezentacji. Oprogramowanie serwera, na przy­kład QuickTime Streaming Server lub RealServer używają protokołu RTSP do prze­sy­ła­nia informacji odpowiednio do QuickTime Playera lub RealPlayera (rysunek A.13). URL RTSP rozpoczyna się przedrostkiem rtsp://.

Rysunek A.13. QuickTime Player (po lewej) i RealPlayer używają protokołu RTSP do potokowego odbierania plików multimedialnych (w tym przypadku filmów wideo) przez Internet




Dodatek B
Skróty klawiaturowe

Fireworks oferuje pełny zestaw skrótów klawiaturowych pozwalających zaoszczędzić mnós­two czasu i problemów związanych z dostępem do najczęściej wykorzystywanych po­leceń. Ustawione domyślnie w Fireworks 4 skróty klawiaturowe stanowią część Macromedia Common User Interface i są podobne do ustawień domyślnych znajdujących się w innych aplikacjach Macromedia. W pierwszych dziesięciu tabelach przyjrzymy się skrótom związanym z po­szcze­gólnymi menu. W tabeli B.11 znajdziesz skróty do narzędzi Fireworks, po­ma­gające w szybkim wybieraniu najczęściej wykorzystywanych narzędzi. W tabeli B.12 znajduje się spis dziesięciu najważniejszych skrótów klawiaturowych Fireworks.

	Polecenia pisane wytłuszczoną czcionką są nowe lub zmieniły swoje po­ło­żenia w Fireworks 4.

Menu File (Plik)

W menu File znajdują się polecenia służące do operacji na plikach i obsługujące funkcje eksportu i importu. Tabela B.1 zawiera ich skróty klawiaturowe.

Tabela B.1.

Skróty klawiaturowe menu File

Polecenie	Windows	MacOS
New (Nowy)	Ctrl+N	Command+N
Open (Otwórz)	Ctrl+O	Command+O
ScanTwain Acquire (Skanuj Twain Acquire)	brak	brak
ScanTwain Select (SkanujTwain Select)	brak	brak
ScanYour Photoshop Acquire Plug-ins (Skanuj Twoje plug-iny Photoshop Acquire)(tylko na MacOS)	brak	brak

Tabela B.1.

Skróty klawiaturowe menu File (ciąg dalszy)

Polecenie	Windows	MacOS
Close (Zamknij)	Ctrl+W	Command+W
Save (Zapisz)	Ctrl+S	Command+S
Save As (Zapisz jako)	Ctrl+Shift+S	Command+Shift+S
Save a Copy (Zapisz kopię)	brak	brak
Update HTML (Uaktualnij HTML)	brak	brak
Revert (Przywróć)	brak	brak
Import (Importuj)	Ctrl+R	Command+R
Export (Eksportuj)	Ctrl+Shift+R	Command+Shift+R
Export Preview (Podgląd eksportu)	Ctrl+Shift+X	Command+Shift+X
Export Wizard (Kreator eksportu)	brak	brak
Batch Process (Przetwarzaj wsadowo)	brak	brak
Run Script (Uruchom skrypt)	brak	brak
Preview in BrowserPreview in Primary Browser (Otwórz w przeglądarceOtwórz w głównej przeglądarce)	F12	F12
Preview in BrowserPreview in Secondary Browser (Otwórz w przeglądarceOtwórz w drugorzędnej przeglądarce)	Shift+F12	Shift+F12
Preview in BrowserSet Primary Browser (Otwórz w przeglądarceUstaw główną przeglądarkę)	brak	brak
Preview in BrowserSet Secondary Browser (Otwórz w przeglądarceUstaw drugorzędną przeglądarkę)	brak	brak
Page Setup (Ustawienia strony)	brak	brak
Print (Drukuj)	Ctrl+P	Command+P
HTML Setup (Ustawienie HTML-a)	brak	brak
Recent Files (Ostatnio otwarte pliki - tylko w Windows)	brak	brak
Exit (Quit) (Wyjście)	Ctrl+Q	Command+Q

Menu Edit

W menu Edit znajdują się polecenia umożliwiające zaznaczanie, powielanie lub usuwanie obiektów. Niektóre z nich, np. Cut (Wytnij), Copy (Kopiuj) i Paste (Wklej) występują we wszystkich programach komputerowych. Inne, takie jak Paste Attributes (Wklej atrybuty) są niepowtarzalnymi poleceniami Fireworks. Znajduje się tu również opcja Preferences (przeniesiona z menu File w Fireworks 3), jak również polecenie pozwalające dostosować skróty klawiaturowe do Twoich potrzeb. W tabeli B.2 znajdziesz skróty klawiaturowe poleceń z menu Edit.

Tabela B.2.

Skróty klawiaturowe menu Edit

Polecenie	Windows	Macintosh
Undo (Cofnij)	Ctrl+Z	Command+Z
Redo (Ponów)	Ctrl+Y	Command+Y
Cut (Wytnij)	Ctrl+X	Command+X
Copy (Kopiuj)	Ctrl+C	Command+C
Copy as Vectors (Kopiuj jako wektory)	brak	brak
Copy HTML Code (Kopiuj kod HTML)	Ctrl+Alt+C	Command+Option+C
Paste (Wklej)	Ctrl+V	Command+V
Clear (Usuń)	Backspace	Delete
Paste as Mask (Wklej jako maskę)	brak	brak
Paste Inside (Wklej do)	Ctrl+Shift+V	Command+Shift+V
Paste Attributes (Wklej atrybuty)	Ctrl+Alt+Shift+V	Command+Option+Shift+V
Select All (Zaznacz wszystko)	Ctrl+A	Command+A
Select Similar (Zaznacz podobne)	brak	brak
Superselect (Zaznacz grupę)	brak	brak
Subselect (Zaznaczenie bezpośrednie )	brak	brak
Deselect (Usuń zaznaczenie)	Ctrl+D	Command+D
Duplicate (Duplikuj)	Ctrl+Alt+D	Command+Option+D
Clone (Klonuj)	Ctrl+Shift+D	Command+Shift+D
Find and Replace (Znajdź i zamień)	Ctrl+F	Command+F
Crop Selected Bitmap (Kadruj zaznaczoną bitmapę)	brak	brak
Crop Document (Kadruj dokument)	brak	brak
Preferences (Preferencje)	Ctrl+U	Command+U
Keyboard Shortcuts (Skróty klawiaturowe)	brak	brak

Menu View (Widok)

Za pomocą poleceń z menu View możesz pomniejszać lub powiększać widok swojej pra­cy lub wyświetlać siatkę i prowadnice pomagające w pracy. Wszystkie skróty kla­wia­turowe poleceń z menu View znajdziesz w tabeli B.3.

Tabela B.3.

Skróty klawiaturowe menu View

Polecenie	Windows	MacOS
Zoom In (Powiększ)	Ctrl+=	Command+=
Zoom Out (Pomniejsz)	Ctrl+Minus	Command+Minus
Magnification6%	brak	brak
Magnification12%	brak	brak
Magnification25%	brak	brak
Magnification50%	Ctrl+5	Command+5
Magnification100%	Ctrl+1	Command+1
Magnification200%	Ctrl+2	Command+2
Magnification400%	Ctrl+4	Command+4
Magnification800%	Ctrl+8	Command+8
Magnification1600%	brak	brak
Magnification3200%	Ctrl+3	Command+3
Magnification6400%	Ctrl+6	Command+6
Fit Selection (Powiększ do zaznaczenia)	Ctrl+Alt+zero	Command+Option+zero
Fit All (Zmieść wszystko)	Ctrl+zero	Command+zero
Full Display (Widok dokładny)	Ctrl+K	Command+K
Macintosh Gamma (Gamma Macintosha) (Tylko Windows)	brak	brak
Windows Gamma (Gamma Windows) (tylko Macintosh)	brak	brak
Hide Selection (Ukryj zaznaczenie)	Ctrl+L	Command+L
Show All (Pokaż wszystko)	Ctrl+Shift+L	Command+Shift+L
Rulers (Linijki)	Ctrl+Alt+R	Command+Option+R
GridShow Grid (SiatkaPokaż siatkę)	Ctrl+Alt+G	Command+Option+G
GridSnap to Grid (SiatkaPrzyciągaj do siatki)	Ctrl+Alt+Shift+G	Command+Option+Shift+G
GridEdit Grid (SiatkaEdytuj siatkę)	brak	brak
GuidesShow Guides (ProwadnicePokaż Prowadnice)	Ctrl+średnik	Command+średnik
GuidesLock Guides (ProwadniceZablokuj prowadnice)	Ctrl+Alt+średnik	Command+Option+średnik
GuidesSnap to Guides (ProwadnicePrzyciągaj do prowadnic)	Ctrl+Shift+średnik	Command+Shift+średnik

Tabela B.3.

Skróty klawiaturowe menu View (ciąg dalszy)

Polecenie	Windows	MacOS
GuidesEdit Guides (ProwadniceEdytuj prowadnice)	brak	brak
Slice Guides (Prowadnice plastrów)	Ctrl+Alt+Shift+średnik	Command+Option+Shift+średnik
Slice Overlay (Nakładka plastra)	brak	brak
Hide Edges (Ukryj krawędzie)	F9	F9
Hide Panels (Ukryj palety)	F4	F4
Status Bar (Pasek stanu) (tylko w Windows)	brak	brak

Menu Insert (Wstaw)

W menu Insert znajdziesz obiekty, które możesz wstawiać do swoich dokumentów. W ta­beli B.4 znajduje się spis wszystkich elementów dostępnych w menu Insert i ich skró­tów klawiaturowych.

Tabela B.4.

Skróty klawiaturowe menu Insert

Polecenie	Windows	MacOS
New Button (Nowy przycisk)	brak	brak
New Symbol (Nowy symbol)	Ctrl+F8	Command+F8
Convert to Symbol (Konwertuj na symbol)	F8	F8
LibrariesYour Libraries (BibliotekiTwoje biblioteki)	brak	brak
Animations (Animacje)	brak	brak
Bullets (Znaki wypunktowania)	brak	brak
Buttons (Przyciski)	brak	brak
Themes (Motywy graficzne)	brak	brak
LibrariesOther (BibliotekiInne)	brak	brak
Hotspot (Obszar aktywny)	Ctrl+Shift+U	Command+Shift+U
Slice (Plaster)	Alt+Shift+U	Option+Shift+U
Pop-up Menu (Menu rozwijane)	brak	brak
Image (Obrazek)	brak	brak
Empty Bitmap (Pusta bitmapa)	brak	brak
Layer (Warstwa)	brak	brak
Frame (Klatka)	brak	brak

Menu Modify (Obiekt)

W menu Modify znajdują się polecenia umożliwiające modyfikowanie istniejących se­lek­cji. Ich skróty klawiaturowe zostały opisane w tabeli B.5.

Tabela B.5.

Skróty klawiaturowe menu Modify

Polecenie	Windows	MacOS
Image Size (Wielkość obrazka)	brak	brak
Canvas Size (Wielkość obszaru roboczego)	brak	brak
Canvas Color (Kolor obszaru roboczego)	brak	brak
Trim Canvas (Przytnij obszar roboczy)	Ctrl+Alt+T	Command+Option+T
Fit Canvas (Dopasuj obszar roboczy)	Ctrl+Alt+F	Command+Option+F
Rotate CanvasRotate 180^º (Obróć obszar roboczyObróć o 180^º)	brak	brak

Tabela B.5.

Skróty klawiaturowe menu Modify (ciąg dalszy)

Polecenie	Windows	MacOS
Rotate CanvasRotate 90^0CW (Obróć obszar roboczyObróć o 90^º w prawo)	brak	brak
Rotate CanvasRotate 90^º CCW (Obróć obszar roboczyObróć o 90^º w lewo)	brak	brak
AnimateAnimate Selection (AnimacjaAnimacja wyboru)	Alt+Shift+F8	Option+Shift+F8
AnimateSettings (AnimacjaUstawienia)	brak	brak
AnimateRemove Animation (AnimacjaUsuń Animację)	brak	brak
SymbolEdit Symbol (SymbolEdytuj symbol)	brak	brak
SymbolTween Instances (SymbolSekwencjonuj kopie)	Ctrl+Alt+Shift+T	Command+Option+Shift+T
SymbolBreak Apart (SymbolRozerwij)	brak	brak
Edit Bitmap (Edytuj bitmapę)	Ctrl+E	Command+E
Exit Bitmap Mode (Opuść tryb edycji bitmapowej)	Ctrl+Shift+E	Command+Shift+E
MarqueeSelect Similar (ZaznaczenieZaznacz podobne)	brak	brak
MarqueeSelect Inverse (ZaznaczenieOdwróć zaznaczenie)	Ctrl+Shift+I	Command+Shift+I
MarqueeFeather (ZaznaczenieZmiękczanie)	brak	brak
MarqueeExpand (ZaznaczenieRozszerz)	brak	brak
MarqueeContract (ZaznaczenieZawęź)	brak	brak
MarqueeBorder (ZaznaczenieBrzeg)	brak	brak
MarqueeSmooth (ZaznaczenieWygładzanie)	brak	brak
MarqueeSave Selection (ZaznaczenieZapisz wybór)	brak	brak
MarqueeRestore Selection (ZaznaczeniePrzywróć wybór)	brak	brak
MaskReveal All (MaskaPokaż wszystko)	brak	brak
MaskHide All (MaskaUkryj wszystko)	brak	brak
MaskPaste as Mask (MaskaWklej jako maskę)	brak	brak
MaskGroup as Mask (MaskaGrupuj jako maskę)	brak	brak
MaskReveal Selection (MaskaPokaż wybór)	brak	brak
MaskHide selection (MaskaUkryj wybór)	brak	brak
MaskDisable Mask (MaskaWyłącz maskę)	brak	brak
MaskDelete Mask (MaskaUsuń maskę)	brak	brak
Selective JPEGSave Selection as JPEG Mask (Selektywne wyświetlanie JPEGZapisz wybór jako maskę JPEG)	brak	brak
Selective JPEGSettings (Selektywne wyświetlanie JPEGUstawienia)	brak	brak
Selective JPEGRestore JPEG Mask as Selection (Selektywne wyświetlanie JPEGPrzywróć wybór w postaci maski JPEG)	brak	brak
Selective JPEGRemove JPEG Mask (Selektywne wyświetlanie JPEGUsuń maskę JPEG)	brak	brak
Convert to Bitmap (Skonwertuj na bitmapę)	Ctrl+Alt+Shift+Z	Command+Option+Shift+Z
Flatten Layers (Spłaszcz warstwy)	brak	brak
TransformFree Transform (PrzekształćPrzekształć dowolnie)	brak	brak
TransformScale (PrzekształćSkaluj)	brak	brak
TransformSkew (PrzekształćPrzekrzyw)	brak	brak
TransformDistort (PrzekształćZniekształć)	brak	brak
TransformNumeric Transform (PrzekształćPrzekształć numerycznie)	Ctrl+Shift+T	Command+Shift+T
TransformRotate 180^º (PrzekształćObróć o 180^º)	brak	brak
TransformRotate 90^º CW (PrzekształćObróć o 90^º w prawo)	Ctrl+9	Command+9
TransformRotate 90^º CCW (PrzekształćObróć o 90^º w lewo)	Ctrl+7	Command+7
TransformFlip Horizontal (PrzekształćOdbij poziomo)	brak	brak
TransformFlip Vertical (PrzekształćOdbij pionowo)	brak	brak
TransformRemove Transformations (PrzekształćUsuń przekształcenia)	brak	brak
ArrangeBring to Front (KolejnośćPrzesuń na wierzch)	Ctrl+Shift+Up	Command+Shift+Up

Tabela B.5.

Skróty klawiaturowe menu Modify (ciąg dalszy)

Polecenie	Windows	MacOS
ArrangeBring Forward (KolejnośćPrzesuń do przodu)	Ctrl+Up	Command+Up
ArrangeSend Backward (KolejnośćPrzesuń do tyłu)	Ctrl+Down	Command+Down
ArrangeSend to Back (KolejnośćPrzesuń na spód)	Ctrl+Shift+Down	Command+Shift+Down
AlignLeft (WyrównajDo lewej)	Ctrl+Alt+1	Command+Option+1
AlignCenter Vertical (WyrównajWyśrodkuj w pionie)	Ctrl+Alt+2	Command+Option+2
AlignRight (WyrównajDo prawej)	Ctrl+Alt+3	Command+Option+3
AlignTop (WyrównajDo góry)	Ctrl+Alt+4	Command+Option+4
AlignCenter Horizontal (WyrównajWyśrodkuj w poziomie)	Ctrl+Alt+5	Command+Option+5
AlignBottom (WyrównajDo dołu)	Ctrl+Alt+6	Command+Option+6
AlignDistribute Widths (WyrównajRozłóż w poziomie)	Ctrl+Alt+7	Command+Option+7
AlignDistribute Heights (WyrównajRozłóż w poziomie)	Ctrl+Alt+9	Command+Option+9
Join (Połącz)	Ctrl+J	Command+J
Split (Rozdziel)	Ctrl+Shift+J	Command+Shift+J
CombineUnion (ŁączenieUnia)	brak	brak
CombineIntersect (Łączenie Przecięcie)	brak	brak
CombinePunch (Łączenie Odjęcie spodu)	brak	brak
CombineCrop (Łączenie Kadrowanie)	brak	brak
Alter PathSimplify (Modyfikuj ścieżkęUprość)	brak	brak
Alter PathExpand Stroke (Modyfikuj ścieżkęRozszerz obrys)	brak	brak
Alter PathInset Path (Modyfikuj ścieżkęRozszerz/Zawęź ścieżkę)	brak	brak
Alter PathHard Fill (Modyfikuj ścieżkęOstre wypełnienie)	brak	brak
Alter PathAnti-Alias Fill (Modyfikuj ścieżkęWygładzone wypełnienie)	brak	brak
Alter PathFeather Fill (Modyfikuj ścieżkęZmiękczone wypełnienie)	brak	brak
Group (Grupuj)	Ctrl+G	Command+G
Ungroup (Rozgrupuj)	Ctrl+Shift+G	Command+Shift+G

Menu Text (Tekst)

Menu Text umożliwia modyfikowanie opcji formatowania obiektów tekstowych i kon­wer­towanie ich na ścieżki. W tabeli B.6 znajdziesz wszystkie skróty klawiaturowe me­nu Text.

Tabela B.6.

Skróty klawiaturowe menu Text

Polecenie	Windows	MacOS
FontYour Font List (CzcionkaLista Twoich czcionek)	brak	brak
SizeOther (RozmiarInny)	brak	brak
Size8 to 120 (Rozmiar8 do 120)	brak	brak
StylePlain (StylUsuń style)	brak	brak
StyleBold (StylPogrubienie)	Ctrl+B	Command+B
StyleItalic (StylKursywa)	Ctrl+I	Command+I
StyleUnderline (StylPodkreślenie)	brak	brak
AlignLeft (WyrównajDo lewej)	Ctrl+Alt+Shift+L	Command+Option+Shift+L
AlignCenter Horizontally (WyrównajWyśrodkuj poziomo)	Ctrl+Alt+Shift+C	Command+Option+Shift+C
AlignRight (WyrównajDo prawej)	Ctrl+Alt+Shift+R	Command+Option+Shift+R
AlignJustified (WyrównajWyjustuj)	Ctrl+Alt+Shift+J	Command+Option+Shift+J
AlignStretched (WyrównajRozciągnij)	Ctrl+Alt+Shift+S	Command+Option+Shift+S
AlignTop (WyrównajDo góry)	brak	brak
AlignCenter Vertically (WyrównajWyśrodkuj pionowo)	brak	brak
AlignBottom (WyrównajDo dołu)	brak	brak
AlignJustified Vertically (WyrównajWyjustuj pionowo)	brak	brak
AlignStretched Vertically (WyrównajRozciągnij pionowo)	brak	brak
Editor (Edytor)	Ctrl+Shift+E	Command+Shift+E
Attach to Patch (Przydziel do ścieżki)	Ctrl+Shift+Y	Command+Shift+Y

Tabela B.6.

Skróty klawiaturowe menu Text (ciąg dalszy)

Polecenie	Windows	MacOS
Detach from Path (Oddziel od ścieżki)	brak	brak
OrientationRotate Around Path (OrientacjaObróć względem ścieżki)	brak	brak
OrientationVertical (OrientacjaPionowo)	brak	brak
OrientationSkew Vertical (OrientacjaPrzekrzyw pionowo)	brak	brak
OrientationSkew Horizontal (OrientacjaPrzekrzyw poziomo)	brak	brak
Reverse Direction (Zmień kierunek)	brak	brak
Convert to Paths (Przekształć na ścieżki)	Ctrl+Shift+P	Command+Shift+P

Menu Commands (Polecenia)

Wszystkie polecenia z me­nu Commands są napisane w JavaScripcie i mogą być dodawane przez użytkownika w celu dosto­so­wa­nia programu do własnych potrzeb. Mimo że polecenia z menu Commands nie mają skró­tów klawiaturowych, zostały tutaj uwzględnione dla zachowania ciągłości i moż­li­wości wykorzystywania tego podrozdziału jako listy dostępnych poleceń.

	Więcej informacji o menu Commands znajdziesz w rozdziale 19.

Tabela B.7.

Skróty klawiaturowe menu Commands

Polecenie	Windows	Macintosh
Edit Command List (Edytuj listę poleceń)	brak	brak
CreativeConvert to Grayscale (KreacjaPrzekształć na skalę szarości)	brak	brak
CreativeConvert to Sepia Tone (KreacjaPrzekształć na sepię)	brak	brak
CreativeCreate Picture Frame (KreacjaUtwórz ramkę do zdjęcia)	brak	brak
DocumentCenter in Document (DokumentWyśrodkuj w dokumencie)	brak	brak
DocumentDistribute to Layers (DokumentRozmieść na warstwach)	brak	brak
DocumentHide Other Layers (DokumentUkryj pozostałe warstwy)	brak	brak
DocumentLock Other Layers (DokumentZablokuj pozostałe warstwy)	brak	brak
DocumentReverse All Frames (DokumentOdwróć wszystkie klatki)	brak	brak
DocumentReverse Frame Range (DokumentOdwróć zakres klatek)	brak	brak
Panel Layout Sets1024×768 / 1280×1024 / 800×600 / Your Panel Layout Set (Konfiguracje palet1024×768 / 1280×1024 / 800×600 / Twoje Ustawienia Palet)	brak	brak
Panel Layout (Konfiguracja palet)	brak	brak
Reset Warning Dialogs (Zresetuj okna ostrzeżeń)	brak	brak
WebCreate Shared Palette (InternetUtwórz współużytkowaną paletę)	brak	brak
WebSelect Blank ALT Tags (InternetWybierz puste znaczniki tekstu zastępczego)	brak	brak
WebSet Alt Tags (InternetUstaw znaczniki tekstu zastępczego)	brak	brak

Menu Xtras

Xtras są dodatkowymi filtrami graficznymi (zazwyczaj zgodnymi z Photoshopem), któ­re roz­szerzają możliwości Fireworks. W tabeli B.8 wymienione zostały standardowe Xtras, które są instalowane wraz z Fireworks. Jeśli masz zainstalowane Xtra innych firm, być może będą one posiadały jakieś dodatkowe opcje.

Tabela B.8.

Skróty klawiaturowe menu Xtras

Polecenie	Windows	MacOS
Repeat Xtra (Powtórz Xtra)	Ctrl+Alt +Shift+X	Command+Option+Shift+X
Adjust ColorAuto Levels (Dostosuj koloryAuto-poziomy)	brak	brak
Adjust ColorBrightness/Contrast (Dostosuj koloryJasność/Kontrast)	brak	brak
Adjust ColorCurves (Dostosuj koloryKrzywe)	brak	brak
Adjust ColorHue/Saturation (Dostosuj koloryBarwa/Nasycenie)	brak	brak
Adjust ColorInvert (Dostosuj koloryOdwróć)	Ctrl+Alt +Shift+I	Command+Option+Shift+I
Adjust ColorLevels (Dostosuj koloryPoziomy)	brak	brak
BlurBlur (RozmycieRozmyj)	brak	brak

Tabela B.8.

Skróty klawiaturowe menu Xtras (ciąg dalszy)

Polecenie	Windows	MacOS
BlurBlur More (RozmycieRozmyj bardziej)	brak	brak
BlurGaussian Blur (RozmycieRozmyj gaussowsko)	brak	brak
OtherConvert to Alpha (InnePrzekształć na alfa)	brak	brak
OtherFind Edges (InneZnajdź krawędzie)	brak	brak
SharpenSharpen (WyostrzanieWyostrz)	brak	brak
SharpenSharpen More (WyostrzanieWyostrz bardziej)	brak	brak
SharpenUnsharp Mask (WyostrzanieMaska wyostrzająca)	brak	brak
Eye Candy 4000 LEBevel Boss (Faza)	brak	brak
Eye Candy 4000 LEMarble (Marmur)	brak	brak
Eye Candy 4000 LEMotion Trail (Poruszenie)	brak	brak

Menu Window (Okno)

Menu Window umożliwia zarządzanie oknami dokumentów oraz paletami Fireworks. Za pomocą znajdujących się w tym menu poleceń możesz otwierać, za­my­kać, układać, wyciągać na wierzch lub ukrywać okna Fireworks. W tabeli B.9 znaj­dziesz listę skrótów klawiaturowych menu Window.

	Wszystkie polecenia sterujące paletami i inspektorami działają na za­sa­dzie włącz-wyłącz. Pierwsze wybranie polecenia wyświetla okno pły­wa­ją­ce, zaś drugie wybranie tego samego polecenia - ukrycie okna.

Tabela B.9.

Skróty klawiaturowe menu Window

Polecenie	Windows	MacOS
New Window (Nowe okno)	Ctrl+Alt+N	Command+Option+N
ToolbarsMain (Paski narzędziGłówny) (tylko w Windows)	brak	brak
ToolbarsModify (Paski narzędziObiekt) (tylko w Windows)	brak	brak
Tools (Narzędzia)	brak	brak
Stroke (Obrys)	Ctrl+Alt+F4	Command+Option+F4
Fill (Wypełnienie)	Shift+F7	Shift+F7
Effect (Efekt)	Alt+F7	Option+F7
Info	Alt+Shift +F12	Option+Shift+F12
Optimize (Optymalizacja)	brak	brak
Object (Obiekt)	Alt+F2	Option+F2
Behaviors (Behawiory)	Shift+F3	Shift+F3
Color Mixer (Mikser kolorów)	Shift+F9	Shift+F9
Swatches (Próbki)	Ctrl+F9	Command+F9
Color Table (Tabela kolorów)	brak	brak
Tool Options (Opcje narzędzia)	Ctrl+Alt+O	Command+Option+O
Layers (Warstwy)	F2	F2
Frames (Klatki)	Shift+F2	Shift+F2
History (Historia)	Shift+F10	Shift+F10
Styles (Style)	Shift+F11	Shift+F11
Library (Biblioteka)	F11	F11
URL	Alt+Shift +F10	Option+Shift+F10
Find and Replace (Znajdź i zamień)	Ctrl+F	Command+F
Project Log (Dziennik projektu)	brak	brak
Cascade (Kaskada)	brak	brak
Tile Horizontal (Sąsiadująco w poziomie)	brak	brak
Tile Vertical (Sąsiadująco w pionie)	brak	brak
Your Open Document List (Lista otwartych dokumentów)	brak	brak

Menu Help (Pomoc)

Ostatnie menu - Help - daje dostęp do podręcznika Fireworks, a nawet - witryny in­ter­ne­towej Fireworks. W tabeli B.10 znajdziesz skróty klawiaturowe wszystkich znaj­du­ją­cych się w tym menu poleceń.

	Użytkownicy systemów MacOS 8/9 mogą wyświetlić okno dialogowe About Fireworks (Fireworks - informacje...), wybierając z menu Apple po­lecenie About Fireworks.

Tabela B.10.

Skróty klawiaturowe menu Help

Polecenie	Windows	MacOS
About Balloon Help (O pomocy w dymkach) (tylko na MacOS)	brak	brak
Show Balloons (Pokaż dymki) (tylko na MacOS)	brak	brak
Welcome (Witamy)	brak	Przycisk Help lub Command+?
Using Fireworks (Korzystanie z Fireworks)	F1	brak
What's New (Nowości)	brak	brak
Lessons (Lekcje)	brak	brak
Fireworks Support Center (Centrum pomocy Fireworks)	brak	brak
Macromedia Online Forums	brak	brak
Register Fireworks (Zarejestruj Fireworks)	brak	brak
About Fireworks (Fireworks - informacje...) (tylko w Windows)	brak	brak

Paleta narzędziowa

Oprócz skrótów klawiaturowych dla poleceń menu, Fireworks oferuje również skróty umo­żliwiające szybkie i proste zmienianie aktywnych narzędzi. Po najechaniu kursorem na wybrane narzędzie Fireworks wyświetli jego nazwę i skrót klawiaturowy. Wszystkie skróty umo­żli­wiające wybieranie narzędzi zostały wymienione w tabeli B.11.

	Niektóre ze skrótów klawiaturowych przełączają między sobą podobne na­rzędzia. Na przykład - klawisz V (lub zero) przełącza między sobą na­rzędzia Pointer (Wskaźnik) i Select Behind (Zaznaczanie ukrytych obiek­tów).

Tabela B.11.

Skróty klawiaturowe palety narzędziowej

Przycisk	Nazwa	Skrót
	Pointer (Wskaźnik)	V lub zero
	Select Behind (Zaznaczanie ukrytych obiektów)	V lub zero
	Export Area (Eksportowany obszar)	J
	Subselection (Zaznaczanie bezpośrednie)	A lub 1

Tabela B.11.

Skróty klawiaturowe palety narzędziowej (ciąg dalszy)

Przycisk	Nazwa	Skrót
	Marquee (Zaznaczenie prostokątne)	M
	Oval Marquee (Zaznaczenie owalne)	M
	Lasso	L
	Polygon Lasso (Wielokątne lasso)	L
	Crop (Kadrowanie)	C
	Magic Wand (Magiczna różdżka)	W
	Line (Linia)	N
	Pen (Pióro)	P
	Rectangle (Prostokąt)	R
	Rounded Rectangle (Prostokąt z zaokrąglonymi narożnikami)	R
	Ellipse (Elipsa)	R

Tabela B.11.

Skróty klawiaturowe palety narzędziowej (ciąg dalszy)

Przycisk	Nazwa	Skrót
	Polygon (Wielokąt)	G
	Text (Tekst)	T
	Pencil (Ołówek)	Y
	Brush (Pędzel)	B
	Redraw Path (Modyfikacja ścieżki)	B
	Scale (Skalowanie)	Q
	Skew (Przekrzywienie)	Q
	Distort (Zniekształcenie)	Q
	Freeform (Dowolne kształty)	F
	Reshape Area (Zmiana kształtu)	F
	Path Scrubber (+) (Zwiększenie nacisku ścieżki)	F
	Path Scrubber (-) (Zmniejszenie nacisku ścieżki)	F
	Eyedropper (Kroplomierz)	I
	Paint Bucket (Wiadro z farbą)	K
	Eraser (Gumka)	E
	Rubber Stamp (Stempel)	S
	Rectangle Hotspot (Prostokątny obszar aktywny)	U
	Circle Hotspot (Owalny obszar aktywny)	U
	Polygon Hotspot (Wielokątny obszar aktywny)	U
	Slice (Plaster)	G
	Polygon Slice (Wielokątny plaster)	G
	Hand (Rączka)	H lub przytrzymanie spacji
	Zoom (Powiększenie)	Z
	Default Brush and Fill Colors (Standardowe kolory narzędzia i wypełnienia)	D
	No Stroke or Fill (Brak obrysu lub wypełnienia)	3
	Swap Brush and Fill Colors (Zamień kolory wypełnienia i obrysu)	X
	Hide/Show Slices (Ukryj/Pokaż plastry)	2

Dziesięć najważniejszych
skrótów klawiaturowych Fireworks

Na pewno będziesz chciał się nauczyć uniwersalnych skrótów klawiaturowych, dla po­le­ceń takich jak Open (Otwórz), Save (Zapisz) i Close (Zamknij) (tabela B 1) oraz Select All (Zaznacz wszystko), Cut (Wytnij), Copy (Kopiuj) i Paste (Wklej) (tabela B.2). Ale kiedy poznasz już te podstawowe, przyjrzyj się tabeli B.12, w której umieś­ci­łem najbardziej przydatne według mnie skróty klawiaturowe obowiązujące jedynie w Fire­works. Najpierw wymieniłem skróty palety narzędziowej, a następnie skróty po­le­ceń z kolejnych menu (od lewej do prawej).

Tabela B.12.

Dziesięć najważniejszych skrótów klawiaturowych Fireworks

Polecenie	Windows	Macintosh
Pointer/Select Behind (Wskaźnik/Zaznaczanie ukrytych obiektów)	V lub zero	V lub zero
Text (Tekst)	T	T
ViewMagnification50%, 100%, 200%, 400% (WidokPowiększenie50%, 100%, 200%, 400%)	Ctrl+5, Ctrl+1, Ctrl+2, Ctrl+4	Command+5, Command+1, Command+2, Command+4
Deselect (Usuń zaznaczenie)	Ctrl+D	Command+D
EditDuplicate (EdycjaDuplikuj)	Ctrl+Alt+D	Command+Option+D

Tabela B.12.

Dziesięć najważniejszych skrótów klawiaturowych Fireworks

Polecenie	Windows	Macintosh
ModifyExit Bitmap Mode (Obiekt(Opuść tryb edycji bitmapowej)	Ctrl+Shift+E	Command+Shift+E
ModifyTransformNumeric Transform (ObiektPrzekształćPrzekształć numerycznie)	Ctrl+Shift+T	Command+Shift+T
ModifyAlignCenter Vertical (ObiektWyrównajWyśrodkuj w pionie)	Ctrl+Alt+2	Command+Option+2
ModifyAlignCenter Horizontal (ObiektWyrównajWyśrodkuj w poziomie)	Ctrl+Alt+5	Command+Option+5
ModifyGroup (ObiektGrupuj)	Ctrl+G	Command+G




Dodatek C
Co znajdziesz
na CD-ROM-ie

Na dołączonym do książki „Biblia Fireworks 4” CD-ROM-ie znajdziesz:

• W pełni funkcjonalne próbne wersje programów firmy Macromedia: Fireworks 4, Dreamweaver 4, Dreamweaver UltraDev 4, Flash 5 i FreeHand 9.

• Zgodne z Fireworks filtry graficzne wiodących firm, takich jak Alien Skin.

• Czasowo ograniczona wersja aplikacji ColorWeb Pro firmy Pantone.

• Przykładowe kursy Fireworks i Dreamweavera opracowane przez firmę eHandsOn.

Na płycie umieszczono także wiele różnych poleceń, obrysów, gradientów, tekstur oraz sza­blonów HTML stworzonych w celu ułatwienia pracy projektantom grafiki w Fire­works. Na CD-ROM-ie znajdziesz wreszcie kilka przykładowych grafik omawianych w książ­ce, które możesz spokojnie analizować i modyfikować.

Korzystanie z płyty CD-ROM

Kilka plików, głównie próbne wersje programów firmy Macromedia i innych ko­mer­cyj­nych programów, jest skompresowanych. Dwukrotne kliknięcie takiego pliku uru­cha­mia proces instalacji. Pozostałe pliki na płycie w większości nie są skompresowane i mo­żesz je kopiować na dysk twardy za pomocą menadżera pli­ków. Kilka rozszerzeń Fireworks zawierających pliki, które muszą zostać umieszczone w różnych katalogach, także jest poddanych kompresji.

Pliki i programy na CD-ROM-ie

Dołączona do książki „Biblia Fireworks 4” płyta CD-ROM zawiera główne programy i do­datkowe pliki pomagające w poznawaniu Fireworks i projektowaniu własnych wi­tryn inter­netowych.

W poniższych podrozdziałach znajdziesz opisy umieszczonych się na płycie plików i programów.

Wersje demonstracyjne Fireworks 4, Dreamweaver 4, Dreamweaver UltraDev 4, Flash 4 i FreeHand 9

Jeśli nie miałeś jeszcze okazji pracować w Fireworks (lub w Dreamweaverze, Flashu albo FreeHandzie), na CD-ROM-ie znajdziesz w pełni funkcjonalne próbne wersje pięciu kluczowych programów firmy Macromedia. Każda z tych wersji może być uży­wa­na przez 30 dni i nie można przedłużać tego czasu przez ponowną instalację programu.

Aby zainstalować demo, kliknij dwukrotnie ikonę instalatora znajdującą się w głównym ka­talogu na płycie i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

	Próbne wersje programów Macromedia są bardzo wyczulone na zmiany da­ty systemowej. Jeśli zmienisz tę datę, program zakończy okres prób­ny i nie będziesz mógł go używać.

Pełna wersja Fireworks zawiera doskonały zbiór stylów. Aby je wypróbować, odwiedź wi­trynę internetową Fireworks znajdującą się pod adresem www.macromedia.com/soft­ware/fireworks.

Dodatkowe oprogramowanie

Fireworks 4 to tylko jeden program, który dobrze współpracuje z wszystkimi po­zos­ta­ły­mi. Dobra wiadomość dla wszystkich użytkowników Photoshopa lub filtrów zgodnych z Photoshopem pochodzących z innych aplikacji: dowolny plug-in zgodny z Pho­to­shopem może być wykorzystywany jako efekt Fireworks. Kilku wiodących produ­cen­tów filtrów graficznych uprzejmie zgodziło się na umieszczenie ich oprogramowania na pły­cie CD-ROM. Oprócz opisywanych w tym podrozdziale filtrów, na krążku znaj­dziesz wyprodukowany przez sławnego specjalistę od kolorów - firmę Pantone - pro­gram ColorWeb Pro, pomagający projektantom w przejściu ze świata druku do świata In­ternetu.

Xenofex firmy Alien Skin

Alien Skin Software wzbogacił zawartość płyty próbną wersją kolekcji filtrów - Xenofex. Jest to kolekcja inspirujących filtrów graficznych pozwalających ożywić każdą grafikę. Two­rzenie realistycznych zjawisk i wyrafinowanych zniekształceń jeszcze nigdy nie by­ło tak proste.

Na płycie znajduje się również wspaniała kolekcja efektów, które można dodać do dowolnego obrazka w Fireworks — jest to Eye Candy 4000 firmy Alien Skin.

ColorWeb Pro firmy Pantone

Wielu początkujących projektantów internetowych (i ich klientów) już wcześniej miało do czynienia z grafiką tworzoną do druku. Jedną ze stałych rzeczy w druku jest system ko­loru Pantone. Wielu klientów wymaga, aby wszystkie ich grafiki (obojętnie, czy mają być wykorzystywane w druku, czy też w Internecie) były tworzone z wykorzystaniem okre­ślonych kolorów z palety Pantone. Aplikacja ColorWeb Pro przekształca kolory Pan­tone na ich odpowiedniki w modelu RGB.

	Specjalne techniki wykorzystywania programu ColorWeb Pro zostały opi­sane w rozdziale 7.

Nauka w trybie online

Czy można sobie wyobrazić lepsze miejsce do nauki technologii internetowych niż In­ter­net? Jedną z firm zajmujących się internetowymi szkoleniami jest eHandsOn, która nau­cza swoich członków przy pomocy czołowych specjalistów. Specjalizuje się w mu­ltimediach. Założycielem eHandOn jest Lisa Lopuck, profesjonalny projektant gra­fiki internetowej i szkoleniowiec. Znajdujące się na płycie dwa przykładowe kursy: je­den o Fireworks 4 prowadzony przez Lisę i drugi i Dreamweaverze 4 prowadzony przeze mnie. Więcej informacji o firmie eHandsOn znajdziesz w ich witrynie inter­ne­to­wej: www.ehendson.com.

Rozszerzenia Fireworks

Użytkownicy Fireworks to silna grupa projektantów, którzy nie tylko tworzą doskonałe gra­fiki i narzędzia, ale również dzielą się nimi. Na płycie CD-ROM znajduje się wiele stwo­rzonych przez nich rozszerzeń Fireworks: poleceń, stylów i tekstur. Elementy te nie tylko ułatwią Ci pracę, ale także pozwolą urozmaicić i ulep­szyć Twoje grafiki.

Na płycie znajdziesz rozszerzenia tworzone przez następujących projektantów (nie licząc mojej osoby):

• Kleanthis Economou.

• Massimo Foti.

• Linda Rathgeber.

• Eddie Traversa.

• Simon White.

Polecenia Fireworks

Dzięki dostępowi do funkcji Fireworks poprzez JavaScript API i Document Object Mo­del można tworzyć bardzo pomagające w pracy polecenia. Polecenia bez wątpienia można uznać za świetne narzędzia, obojętnie, czy są używane do automatyzacji produk­cji czy też do tworzenia efektów specjalnych. Polecenie Fireworks można uruchomić za po­mocą polecenia FileRun Script. Jeśli lubisz mieć wszystkie polecenia w jednym miej­scu, skopiuj je z CD-ROM-u do katalogu Fireworks/Settings/Commands. Po po­now­nym uruchomieniu Fireworks, wszystkie nowe polecenia zostaną wyświetlone w me­nu Commands.

Na płycie znajdziesz dwa polecenia (stworzone przeze mnie), które do po­prawnej pracy wymagają dwóch aplikacji: Fireworks i Dream­wea­vera. Są to polecenia StyleBuilder i BulletBuilder. Oba polecenia mo­gą zostać zainstalowane w Dreamweaverze za pomocą programu firmy Macromedia - Ex­ten­­sion Manager, dostępnego na stronie internetowej firmy Macromedia (lub na dołączonym do książki CD-ROM-ie). Aby je uruchomić, otwórz Dreamweavera i wybierz żądane polecenie z menu Com­mands.

Style i tekstury Fireworks

Jednym z elementów składających się na potęgę Fireworks jest możliwość poszerzania funk­cji tworzenia grafiki i generowania kodu HTML. Aby udostępnić Fireworks zestaw do­datkowych tekstur, wystarczy skopiować katalog z teksturami z jednego położenia w in­ne. W przypadku tekstur znajdujących się na płycie, wystarczy skopiować obrazki z ka­ta­logu Textures do katalogu o takiej samej nazwie na dysku twardym i ponownie uru­chomić Fireworks. Na CD-ROM-ie znajdziesz ponad pięćdziesiąt nowych tekstur.

	Możesz również wykorzystywać poszczególne tekstury bez koniecz­noś­ci kopiowania ich do katalogu Textures. Wybierz w tym celu pozycję Other (Inna) z listy tekstur Fireworks i odszukaj teksturę znajdującą się w innym katalogu w Twoim komputerze.

Gradienty, obrysy i biblioteki obrazków

Fireworks oferuje również możliwość dodawania wielu innych elementów obrazka, ta­kich jak obrysy lub wypełnienia gradientowe. Aby zapewnić Ci przyjemność tworzenia, na CD-ROM-ie znajduje się przydatne kompendium różnych wypełnień gradientowych, ob­rysów i bibliotek obrazków, z których każda znajduje się we własnym katalogu o od­po­wiedniej nazwie. Elementy te można także łatwo tworzyć własnoręcznie w Fire­works,
ale po co ponownie wymyślać koło, które już dawno wymyślił ktoś inny? W ko­lek­cji na CD-ROM-ie znajdziesz szeroki wybór kropkowanych i przerywanych obrysów oraz bo­gatą bibliotekę zakończeń strzałek.

Przykłady do książki

Przykładowe obrazki wykorzystane w książce można znaleźć w katalogu Examples Examples (Przykłady) na pły­cie CD-ROM. Katalog ten został podzielony na podkatalogi odpowiadające po­szcze­gól­nym rozdziałom książki. Znajdziesz tam prawie wszystkie przykłady: od przezro­czys­tości alfa po animowany baner reklamowy, który można dostosować do wymagań dowolnej firmy.

Zasoby internetowe

Istotnym źródłem informacji dla każdego projektanta grafiki internetowej, zarówno wy­traw­nego profesjonalisty, jak i „żółtodzioba” jest Internet. Na CD-ROM-ie znajdziesz stro­nę HTML zawierającą zestaw hiperłączy do różnych zasobów internetowych. Zaso­by te to zarówno ogólne informacje, jak i wyspecjalizowane dane o Fireworks.

Więcej informacji o nowej palecie History znajdziesz w rozdziale 19.

PAGE 18

PAGE 17

PAGE 22

PAGE 123

Część I - Poznajemy Fireworks

PAGE 32

Rozdział 1 - Witamy w Fireworks

PAGE 86

Rozdział 2 - Interfejs programu

PAGE 106

Rozdział 3 - Dostosowywanie środowiska pracy

PAGE 124

Rozdział 4 - Definiowanie właściwości dokumentów

PAGE 128

PAGE 255

Część II - Praca z narzędziami

PAGE 144

Rozdział 5 - Tworzenie obiektów wektorów

PAGE 166

Rozdział 6 - Praca z grafiką bitmapową

PAGE 184

Rozdział 7 - Zarządzanie kolorem

PAGE 210

Rozdział 8 - Obrysy

PAGE 232

Rozdział 9 - Konstruowanie ścieżek

PAGE 256

Rozdział 10 - Obiekty tekstowe

PAGE 282

Rozdział 11 - Wypełnienia i tekstury

PAGE 359

Część III - Efekty

PAGE 322

Rozdział 12 - Live Effects i Xtras

PAGE 358

Rozdział 13 - Rozmieszczanie i komponowanie obiektów

PAGE 386

Rozdział 14 - Przechwytywanie i import grafiki

PAGE 489

Część IV - Organizacja procesu tworzenia

PAGE 426

Rozdział 15 - Eksport i optymalizacja

PAGE 434

Rozdział 16 - Praca ze stylami Fireworks

PAGE 450

Rozdział 17 - Symbole i biblioteki

PAGE 472

Rozdział 18 - Aktualizowanie i utrzymywanie grafiki internetowej

PAGE 488

Rozdział 19 - Automatyzacja pracy za pomocą menu Commands i palety History

PAGE 514

Rozdział 20 - Mapy obrazków i plastry

PAGE 553

Część V - Obiekty sieciowe

PAGE 538

Rozdział 21 - Behawiory, czyli ożywiamy Fireworks

PAGE 554

Rozdział 22 - Integracja z Dreamweaverem

PAGE 584

Rozdział 23 - Techniki animacyjne

PAGE 595

Część VI - Animacja

PAGE 594

Rozdział 24 - Animowane banery reklamowe

PAGE 612

Rozdział 25 - Dostosowywanie Fireworks do własnych potrzeb

PAGE 645

Część VII - Programowanie w Fireworks

PAGE 646

Rozdział 26 - Interfejs programowania aplikacji - Fireworks API

PAGE 662

Dodatek A - Podstawowe wiadomości o stronach WWW

PAGE 677

Dodatki

PAGE 674

Dodatek B - Skróty klawiaturowe

PAGE 678

Dodatek C - Co znajdziesz na CD-ROM-ie

---