Projektuj w HTML5

Wciąż wiele urządzeń mobilnych nie obsługuje popularnego dotychczas Flasha, który przez lata był niekwestionowanym liderem wśród narzędzi do wykonywania animowanych aplikacji i materiałów reklamowych. Rosnąca popularność smartfonów i tabletów, na których wiele elementów flashowych nie wyświetlało się poprawnie, przyczyniła się do stopniowego wypierania tej technologii na rzecz języka HTML5, który w połączeniu z CSS3 i JavaScript, został wzbogacony o atrakcyjne elementy animacji, które bez problemu działają na nowoczesnych urządzeniach przenośnych.

Google Web Designer (aplikację można pobrać z serwisu PC Format Programy) to nowa, zaawansowana aplikacja, która umożliwia tworzenie materiałów reklamowych (w tym banerów animowanych) oraz elementów do stron WWW w HTML5. Wykonanie animacji w aplikacji nie wymaga żadnych umiejętności programistycznych, a co za tym idzie,
z tym zadaniem poradzi sobie nawet początkujący webmaster lub grafik. W programie można pracować w trybie wizualnym lub bezpośrednio z kodem, który docenią zaawansowani użytkownicy.

Instalacja i pierwsze uruchomienie

Po pobraniu aplikacji z adresu http://pcformat.pl/u/771 należy zainstalować program. Proces instalacji przebiega automatycznie.

Uruchom Google Web Designer z pulpitu lub z menu Start.

Zobaczysz okno startowe programu na czarnym tle. Pierwsze uruchomienie może potrwać nawet kilka minut, ze względu na konieczność pobrania najnowszych plików. Upewnij się, że masz dostęp do internetu.

Z menu Plik wybierz Nowy plik. W otwartym oknie Utwórz nowy plik jest domyślnie zaznaczona sekcja Baner. Z listy Środowisko wybierz, dla jakiej sieci reklamowej chcesz zaprojektować reklamę. Program umożliwia wygenerowanie baneru dla sieci DoubleClick lub AdMob. Jeśli chcesz wykonać niezależną reklamę, wybierz opcję  Generic. Następnie w sekcji Wymiary wybierz kształt reklamy. Możesz wybrać jeden z najpopularniejszych formatów z rozwijanej listy lub przygotować plik o niestandardowych wymiarach, wybierając z listy Custom oraz wpisując odpowiednie wymiary w pola Szerokość i Wysokość. W naszym przykładzie pokazujemy, jak zrobić reklamę o wymiarze 300x250 (tzw. rectangle box).

W kolejnym polu,  Nazwa, wpisz nazwę dla generowanego pliku, np. reklama-pcformat, a w polu Lokalizacja zdefiniuj miejsce, w którym mają być zapisane pliki. Domyślną lokalizację możesz zmienić, klikając ikonę Folder. Na koniec wybierz Tryb animacji (początkującym użytkownikom zalecamy pozostawienie opcji  Szybki) i kliknij OK. Uwaga! Tryb szybki pozwala na animowanie reklamy scena po scenie, a tryb zaawansowany umożliwia animację pojedynczych elementów na osobnych osiach czasu.

W obszarze roboczym programu zobaczysz pustą białą przestrzeń o zdefiniowanym wymiarze. Możesz już przystąpić do dodawania obrazów, zdjęć, tekstów, a nawet filmów, które wzbogacisz animacjami.