Ünite 5: Google Web Designer ile Grafik Tasarımı

Giriş

Web grafik tasarım konusunda kullanılan birçok programdan biri de Google tarafından 2013 yılında lanse edilen, çoklu işlevli entegre bir program olan Google Web Designer programıdır. Google Web Designer arayüzü ile projenin tasarım içeriği biçimlendirilir, kodlama yapılır, İnternet’e yüklenebilir ve yayınlanabilir.

Google’ın ücretsiz bir servisi olan Google Web Designer’ın kullanıcı dostu arayüzü ile reklam ve tanıtımlar dizüstü bilgisayarlar, tabletler, cep telefonları gibi farklı ekranlarla uyumlu hale getirilebilir.

Google Web Designer, profesyonellere ve amatörlere hitap ettiği kadar çeşitli düzeylerde tasarım öğrenimi gören öğrencilere ve sanatçılara da hitap etmektedir. Google Web Designer ile çalışırken başarılı olmak için uzun ve yoğun deneyim süreçleri gerekir.

Google Web Designer Programının Özellikleri

Adını bir matematik terimi olan “googol” sözcüğünden alan Google İnternet ağında faaliyet gösteren bir arama motorudur. Google, Larry Page ve Sergey Brin tarafından 1998 yılında Kalifornia’da kurulmuş, 2000’li yıllarda yaygınlaşmıştır. Google, arama motoru işlevine ek olarak İnternet kullanıcılarına birçok başka alanda da servis vermekte; küresel ve bireysel olarak deneyim, iletişim, paylaşım, üretim, tüketim, kreatif performans, reklam ve tanıtım, kazanç olanakları sağlamaktadır.

Google Web Designer programının işlevleri aşağıdaki gibi sıralanabilir:

• Google Web Designer çok işlevli bir programdır.
• Google Web Designer programı ağırlıklı olarak reklam, tanıtım ve pazarlamaya yönelik bir programdır.
• Pratik bir şekilde HTML5 reklamlarının grafik tasarımı, web tasarımı ve internette yayını gerçekleştirilebilir.
• Google Web Designer, ağırlıklı olarak banner tasarımlarına yöneliktir.
• Entegre bir programdır.

Günümüzde birçok tasarım programı kullanılmaktadır ve sürekli olarak listeye yeni yazılımlar eklenmektedir. Google Web Designer bunlardan biridir. Google Web Designer dizüstü bilgisayar, tablet, cep telefonu gibi çeşitli ekranlara uyumlu interaktif, profesyonel ya da amatör reklam ve banner tasarımlarının içerik, kodlama ve yayın olarak yapılabileceği pratik ve entegre bir programdır.

Google Web Designer programının sağladığı olanaklar aşağıdaki gibi sıralanabilir:

• Web projesiyle ilgili olarak, web grafik tasarımı ve web tasarımı, diğer bir ifadeyle içerik oluşumu ve kodlamayı aynı arayüzü kullanarak gerçekleştirilebilir.
• İçerik tasarlanırken, sosyal medya ortamları, YouTube, Google arama motorundaki ilgili sitelerden, vb. kaynaklardan alıntılar yapılabilir.
• Projenin görsel tasarımı tamamlandıktan sonra HTML5 İşaretleme Dili, CSS3 Tanım Dili ve Javascript Betik Dil aracılığıyla kodlanarak web ortamında yayınlanabilir.
• Google Web Designer ile gerçekleştirilen reklam ve pazarlamaya yönelik proje tasarımları Google’ın AdWords, YouTube gibi uzantılarında yer alabilir.
• Google Web Designer, birçok hazır şablon sunmaktadır. Gereksinime göre şablonlar veya serbest çalışmalar üzerinde çalışılabilir.
• 2D tasarımların yanı sıra 3D tasarımlar da gerçekleştirilmektedir.
• Görsel tasarım ve metin tasarımının yapıldığı farklı programların özelliklerini bünyesinde toplamıştır.
• Google Web Designer ile fotoğraf, resim, grafik gibi durağan görselleri işlenebilir, istediğinde içeriğe uygun olarak dönüştürülebilir. Film, video, animasyon gibi hareketli görselleri alıntılanabilir ve eklenebilir. Grafik çizimler yapılabilir. Projeye uygun tipografik font ve puntoları seçebilir, çeşitli değişiklikler yapılabilir. Renk araçlarını kullanılarak yapılan tasarımla ilgili zemin ve diğer görsel öğelerin renkleri düzenlenebilir.
• Zaman çizelgesi ile, tasarımı yapılan projenin işlem geçmişi kaydedilir, kronolojik olarak kontrol edilebilir ve layerları bir arada bulanabilir, gerek görüldüğünde layerlar üzerinde ve layerlar arası değişiklikler yapılabilir.
• Proje ile ilgili olarak gerçekleştirilen web grafik tasarımın, algoritmik karşılığı otomatik olarak kaydedilir ve bu kayıt üzerinde, duruma göre değişiklikler yapılabilir.
• Proje web ortamına yüklemeden önce Chrome, Internet Explorer gibi tarayıcılarda önizleme yapılabilir.
• Proje Google Drive gibi bir ortamda kaydedilebilir, Double Click Studio gibi bir ortamda paylaşabilir.
• Kullanıcılara kolayca uyum sağlayabilen bir arayüz tasarımı ve çalışma alanına sahiptir.
• Google Web Designer arayüzü, modüler bir tasarıma sahiptir. Kullanıcının tasarım amacına ve sırasına göre arayüz düzenlenebilir, arayüz bölümleri sırası geldikçe arayüze taşınabilir.
• Google Web Designer, kullanıcı dostu bir program olarak nitelendirilebilir.
• Çoklu dil seçeneği ile küresel bir kullanıma olanak sağlar.
• Google Web Designer, masaüstü bilgisayar, laptop gibi donanımlara kolayca ve ücretsiz olarak yüklenebilmektedir. Dolayısıyla kitlesel kullanıma sunulan ekonomik bir tasarım programıdır.
• Projelerimize masaüstü, laptop, tablet, cep telefonu gibi durağan ve mobil ortamlardan ulaşılabilir.
• Hem amatör hem profesyonel nitelikli gereksinimleri karşılayabilecek bir yapıya sahiptir.

Google Web Designer kullanılarak HTML5 dili ile kodlanmış, CSS3 dili ile biçimlendirilmiş olan zengin medya reklam öğesi türlerinin çeşitleri, biçimsel yapıları ve yayınlandıkları siteye göre aşağıdaki gibi sıralanabilir:

• Genişleyen geçişli banner (reklam bandı),
• Kayan reklamlı banner,
• Çok yönlü genişleyen, çoklu kayan geçiş reklamı,
• Aşağı açılan, yayın içi video, VPAID (Digital Video Player-Ad Interface Definition/Video Oynatıcı-Reklam Ara Yüzü Tanımı).

Google Web Designer programının genel olarak kullanım alanları aşağıdaki gibi sıralanabilir:

• Reklam, Tanıtım, Pazarlama, İletişim, Eğitim ve öğrenim, Yeni Medya Sanatı alanlarında kullanılabilir.
• İletişim Fakültesi, Güzel Sanatlar Fakültesi, Açıköğretim Fakültesi, Meslek Liseleri ve Güzel Sanatlar Liselerinde mevcut ders programlarında, ilgili meslek kursları ve atölyelerinde tasarım konusunda öğrencilerin yetişmesi ve deneyim kazanması amacıyla kullanılabilir.
• Taşıdığı geniş estetik olanaklar dolayısıyla, fotoğraf ve grafik sanatçıları, Yeni Medya bağlamında çalışmalar yapan kavramsal sanatçılar tarafından kullanılabilir.

Google Web Designer, İnternet girişimcileri, Grafik tasarımcılar, Web geliştiriciler, Web uzmanları başta olmak üzere profesyonel kullanıcılar, tasarım alanında çalışan öğretmenler, öğrenciler, sanatçılar ve Yeni Medya bağlamında çalışan tasarımcılara geniş olanaklar sunmaktadır.

Google Web Designer Programının Arayüzünün Görünüm ve Özellikleri

Google Web Designer programı arayüzü görsel tasarım, web tasarım, kodlama ve İnternete yükleme aşamalarında sırasıyla, senkronize işlev sergiler özellikte Araç Seçenekleri Çubuğu, Zaman Çizelgesi, Görünüm Çubuğu, Panellerden (Renk, Özellikler, CSS/Duyarlı,Etkinlikler/Dinamik, Kitaplık) oluşan kullanıcı dostu bir yapıya sahiptir. Aşağıda Google Web Designer Araç Çubuğunda yer alan araçlar ve yapılabilecek işlemler özetlenmiştir:

• Seçim aracı ile varsayılan konum stillerine ve varsayılan boyut stillerine göre tasarım ayarlamaları yapılabilir.
• 3D Nesne Döndürme Aracı ile tasarım yaparken kullanılan bir görsel, araç çubuğundan 3 boyutlu olarak yerel ve genel bir düzlemde tanımlanabilir.
• 3D Nesne Hareket Ettirme Aracı ile tasarım yaparken, bu seçeneği tıkladıktan sonra kullanılan bir görseli araç çubuğundan 3 boyutlu ortamda hareketli olarak tanımlayabilir ve istendiği zaman tasarım şekillendirilebilir.
• Etiket Aracı çoklu seçeneğini kullanarak tasarım alanında yeni tasarım alanları oluşturabilir; bunlara araç çubuğundan resim, video gibi durağan ve hareketli görseller ve diğer medya araçlarından alıntılar eklenebilir, renk konusunda değiştirme ve yorumlar yapılabilir.
• Kalem aracı ile tasarım için öngörülen tasarım formu ve buna ilişkin çizim alanı saptanır ve araç çubuğundan sabitleme noktası, ekle ve sil seçenekleri ile saptanan tasarım formunu geliştirilebilir ya da düzeltilebilir. Fırça veya kenarlık rengi ile bu çizgisel tasarım kenar ve yüzey-dolgu olarak renklendirilebilir.
• Oval aracı ile tasarım için öngörülen tasarım formu ve buna ilişkin oval alanı saptanır. Fırça ya da kenarlık rengi seçeneği ile bu çizgisel tasarımın kenarlarını renklendirebilir; renk seçeneği ile yüzey-dolgu olarak renklendirilebilir.
• Dikdörtgen aracı ile tasarım için ön görülen tasarım formu ve buna ilişkin dikdörtgen alan saptanır. Fırça ya da kenarlık rengi seçeneği ile bu çizgisel tasarımın kenarlarını renklendirebilir; renk seçeneği ile yüzey-dolgu olarak renklendirebilir. Dolgu aracı ve dolgu rengi ile renk çeşitlendirmeleri yapılabilir.
• Çizgi aracı ile tasarım için istenen uzunluk ve kombinasyonda dikey/yatay çizgiler çizilebilir. Fırça ya da kalınlık rengi ile bu çizgiler renklendirebilir, renk seçeneği ile çeşitlendirilebilir.
• Metin aracı ile araç çubuğunda devreye giren metin türleri, yazı tipi, stil, boyut, renk seçenekleri ile tasarımda kullanılan metni yerleştirebilir, bu metinde kullanılacak yazı tipi ve yazı stili seçilebilir, yazı boyutu kararlaştırılabilir ve istenen renk verilebilir.
• Dolgu aracı ile araç çubuğunda yer alan ikili seçenek kullanılarak tasarım için öngörülen tasarım formu ve buna ilişkin alanlar, dolgu aracı ile renklendirilebilir; renk seçeneği ile renk çeşitlendirmeleri yapabilir.
• Fırça aracı ile tasarım için öngörülen tasarım formu ve buna ilişkin alanlar, renklendirilebilir, renk çeşitlendirmeleri yapılabilir. Öğe fırça ya da kenarlık rengini etkinleştir ile çizgisel renklendirme yapılabilir; fırça ya da kalınlık rengi ile çizgisel renklendirme çeşitlendirilebilir, renk seçeneği ile istenen değişikliği yapabilir.
• Gradyan aracı ile tasarım için öngörülen tasarım formu ve buna ilişkin alanlar, renkten renge geçişler yapılarak renklendirilebilir, renk çeşitlendirmeleri eklenebilir.
• Zoom aracı ile ayrıntılar üzerinde dikkati yoğunlaştırmak veya tasarımın görünümünü kontrol etmek için üzerinde çalışılan tasarım yakınlaştırılabilir ya da uzaklaştırılabilir.
• Yeniden boyutlandırma aracı ile üzerinde çalışılan 2D ya da 3D tasarım genişlik, yükseklik ve yön olarak değiştirilebilir ve çevrilebilir.
• 3D sahne döndürme aracı ile üzerinde çalışılan tasarımı 3D olarak hareket ettirebilir ve buna göre seçim ilgili uzamda konumlandırılabilir.
• El aracı ile üzerinde çalışılan tasarımın çalışma alanındaki yeri değiştirilebilir.

Google Web Designer Zaman Çizelgesi, bir web grafik tasarımı çok katmanlı (layer) bir kombinasyondur. Zaman çizelgesinde yer alan, çeşitli seçenekleri değerlendirerek aşağıdaki işlemler yapılabilir:

• Üzerinde çalışılan bir katman seçilebilir, üzerinde değişiklikler yapılabilir.
• Üzerinde çalışılan katman kilitlenebilir, gizlenebilir ya da görünür hale getirilebilir.
• Tasarımda eğer hareketli görüntüler ve animasyon öğeleri yer alıyorsa bu durumda oynat, tekrar oynat ve hızlı moda geç seçenekleri ile tasarım oluşturulabilir. Böylece tasarımın bu özelliği ve sunumu için süre saptaması yapılabilir.

Modüler yapıya sahip Google Web Designer Paneller bölümünde Renk Paneli, Özellikler Paneli, Bileşenler Paneli, Etkinlikler Paneli, CSS/Duyarlı Paneli, Kitaplık Paneli olmak üzere çoklu seçeneklere sahip 6 panel yer alır. Bu paneller ile yapılabilecek işlemler aşağıdaki gibi özetlenebilir:

• Renk Panel ile zaman çizelgesi aracılığıyla seçilen herhangi bir tasarım katmanının dolgu ve kenarlık olarak renk yapısı oluşturulabilir.
• Özellikler Paneli ile tasarımın herhangi bir katmanını kodlama, kod kimliği verme, boyutlandırma, tasarım alanı içerisinde konumlandırma işlemleri yapılabilir.
• CSS Duyarlı Paneli ile CSS tanım dili kullanarak stil şablonları biçimlendirilebilir, bu panelin duyarlı bölümünü kullanarak ana kuralları uygulayabilir, buna göre gerekirse CSS tanım dili kullanarak tasarımın bütününde değişiklikler yapılabilir. Yine medya kurallarını kullanarak tasarımın yatay ve dikey konumu saptanabilir.
• Bileşenler panelindeki çeşitli seçenekler kullanılarak proje tasarımına kazandırılan özellikler, etkinlikler paneli kullanılarak işlerlik kazanır. Dinamik bölümü ise, tasarım için ön görülen kodlama ayarlarını etkinleştirir.
• Bir çeşit arşiv olarak tanımlanan Google Web Designer/Kitaplık Paneli ile internetten ya da bilgisayardan yararlanarak tasarımda kullanılacak veri ve görseller depolanır, depolanan içerik gerektiğinde buradan çalışma alanına sürüklenerek kullanılabilir.

Google Web Designer Programında Web İçin Grafik Tasarım Bileşenleri ve İşlevleri

Bu bölümde, Google Web Designer/Bileşenler Paneli ve Google Web Designer/Görünüm Çubuğu incelenmektedir.

Google Web Designer bileşenler panelinde dokunma alanı seçeneği, hareket seçeneği, resim düğmesi, telefon mesaj için hafifçe dokunma seçeneği ve model sayfası seçeneği, kaydırılabilir galeri seçeneği, Galeride Gezinme seçeneği, Atlı Karınca Galeri seçeneği, 360° Galeri seçeneği, video seçeneği, Youtube seçeneği, ses seçeneği, harita seçeneği, Street View seçeneği, takvime ekle seçeneği iFrame seçeneği ve Star Ratings seçeneği yer alır.

Google Web Designer ile İnternetten, tasarım için öngörülen herhangi bir görsel, ses, video, metin alıntısı yapabilir ve tasarım İnternet üzerinde interaktif hale getirilebilir.

Zengin Medya (Rich Media) kavramının özellikleri aşağıdaki gibi sıralanabilir:

• Çoklu ve farklı görseller içerir.
• Görseller durağan, hareketli; video, film, animasyon; albüm, galeri, slide gösterisi vb. gibi olabilir.
• İnteraktiftir.
• Alışveriş işlemleri yapılabilir.
• Reklam öğesinin tıklanma sayısı, sıklığı, izlenme süresi ile ilgili geri dönüşüm raporları elde edinilebilir.

Google Web Designer görünüm çubuğu ile yapılabilecek işlemler aşağıdaki gibi özetlenebilir:

• Çubukta yer alan “tasarım görünümü” ile gerçekleştirilen görsel tasarımı görüntülenebilir.
• Çubukta yer alan “kod görünümü” ile gerçekleştirilen görsel tasarımın algoritmik eş değeri görüntülenebilir ve düzeltebilir.
• Çubukta yer alan “önizle” ile tamamlanmış tasarımı kullanılacağı internet tarayıcısı ile görüntülenebilir.
• Çubukta yer alan “yayınla” ile bitmiş proje istenilen paylaşım ağında yayına sunulabilir.

Google Web Designer Programında Grafik Geliştirme Süreçleri ve Aşamaları: Basit Bir Banner Tasarımı

Dijital reklam sektöründe yaygın bir kullanıma sahip olan banner, dilimizde reklam bandı olarak ifade edilebilir. Bannerların özellikleri aşağıdaki gibi sıralanabilir:

• Durağan ya da hareketli olabilir. Bir başka deyişle web sitesi arayüzünde sabit bir şekilde bulunur ya da geçiş reklamı ile eş zamanlı yer alır, uzar, kayar, genişler.
• Görsel ve metin olarak çok zengin kreatif performans olanakları içerir.
• Kompakt, ucuz, pratik ve interaktif bir yapısı ve kullanımı vardır.
• Canlı, dinamik, hareketli bir iletişim dinamiği meydana getirir.

Web teknolojisi sürekli olarak yeni görsel anlatı ve sunu formlarının ortaya çıkmasını sağlamaktadır. Bannerlar bu yeni formlardan biridir.

Google Web Designer programı ile banner tasarlamak için aşağıdaki aşamalar takip edilebilir:

• Google Web Designer programı açılır.
• Açılan ekrandan, ekrana gelen seçeneklerden “Şablon Kullan” seçilir.
• Hazır oluşturulmuş şablonlardan, üzerinde çalışmak istenen şablon seçilir.
• Seçilen hazır şablondan, yeni bir dosya oluşturulması istenir. Bu kısımdan çalışmanın ismini yazıp ve kayıtlı olacak dosyanın konumunu seçip “Tamam” düğmesine tıklanır. Böylece programın çalışma alanı ve arayüzü açılmış olur.
• Arayüzün hemen alt kısmında yer alan “Zaman Çizelgesi”nden oluşturulacak bannerın layerlarını görülebilir.
• Programın sağ alt kısmındaki “Kitaplık” kısmından bannera eklemek istenen görüntüler “+” ikonuyla seçilir. Seçimleri yapıldıktan sonra eklenen görüntüler çalışma ekranına sürüklenir. Araç seçenekleri çubuğundan sol üst köşede “Dönüşüm Denetimi” kutucuğunu doldurulup, seçilen görüntülerin boyutu ayarlanır.
• Araç Çubuğu, “Kalem Aracı”ndan “Dikdörtgen Aracı”nı seçilir, çünkü çalışmak istenen banner için çalışma alanı oluşturulmalıdır.
• Dikdörtgen alanını seçildikten sonra layerdan da seçim yaparak, renk panelinden bannerın rengi ayarlanır.
• Renk işleminden sonra boyutunu ayarlanan görüntü bannerın üzerine yerleştirilir.
• Görüntü işlemlerini tamamladıktan sonra Araç Çubuğu, “Metin Aracı” ile bannerın üzerine istenilen metin eklenir.
• Sağ üst kısımdaki Görünüm Çubuğu, “Önizle” kısmından hangi internet tarayıcısı ile görüntülemek isteniyorsa seçilir. Böylece açılan internet tarayıcısından tamamlanmış bannerın son halini görülür.
• Üzerinde çalışılan banner “Dosya-Farklı Kaydet” aracılığıyla kaydedilir.

Sonuç

Google Web Designer programı ile ağa yönelik reklam, tanıtım, duyuru ve çağrı üretmek isteyen bir birey, bu programı kullanarak tasarım içeriğini hazırlayabilir, kodlayabilir, yayınlayabilir ve geri dönüş alabilir. Bu yüzden Google Web Designer programını kullanan kişi “tek kişilik bir reklam ajansı” gibidir. Google Web Designer programı ile özgün tasarımlar yapılabileceği gibi şablonlardan da yararlanılabilir; İnternet’ten çeşitli öğeler seçilerek tasarım, zengin medya haline getirilebilir.

Estetik olanaklarla teknolojik olanakların iç içe oluşturduğu bu dijital ortamda, web girişimcileri, grafik sanatçıları, web geliştiriciler, yeni medya sanatçıları, kavramsal sanatçılar, öğrenciler vb. gibi birçok Ağ tüketicisi, cazip, eğlenceli ve verimli sonuçlara ulaşabilir.