Ücretsiz web aracı · Behance için
Behance’te video ve fotoğrafı yan yana koy.
Behance Grid, fotoğraf, video ve metni tek bir grid’de dizip Behance projene gömmeni sağlayan ücretsiz bir araç. Dikey videolar artık tek başına ekranı kaplamıyor; istediğin düzeni kuruyorsun.
- Ücretsiz
- Üyelik yok
- Dosyaların tarayıcında kalır
- TR / EN arayüz
Kısaca
Behance Grid, Kadir Apak’ın geliştirdiği ücretsiz bir web aracıdır. Behance’in kendi “Fotoğraf Grid’i” modülü yalnızca görsel kabul ettiği ve videolar projede tam genişlikte göründüğü için, fotoğraf ile videoyu aynı satırda göstermek mümkün değildir. Behance Grid bu sorunu çözer: Google Drive, YouTube, Vimeo ya da doğrudan dosya bağlantılarından gelen fotoğraf ve videoları Behance tarzı satırlarda (ya da masonry sütunlarda) dizer, aralara metin bloğu ekler, arka plan rengini ve boşlukları ayarlar. Hazır grid, Google Apps Script üzerinden ücretsiz yayınlanır ve Behance’in “Göm” (Embed) modülüne iframe kodu olarak yapıştırılır.
- Ne işe yarar
- Behance projesinde video + fotoğraf + metni aynı grid’de göstermek
- Fiyat
- Ücretsiz, üyelik veya kayıt yok
- Kaynaklar
- Google Drive, YouTube, Vimeo, .jpg / .png / .mp4 adresi, iframe kodu
- Düzen
- Satırlar (Behance ızgarası gibi) ya da sütunlar (masonry)
- Behance’e ekleme
- Google Apps Script ile yayınla → Behance “Göm” modülüne iframe kodu
- Gizlilik
- Dosyalar hiçbir sunucuya yüklenmez; her şey tarayıcında çalışır
- Geliştiren
- Kadir Apak, Art Director (İstanbul)
Neden yaptım
Dikey videolarım Behance’te tek başına kocaman duruyordu.
Behance’e video yüklediğinde video projenin tam genişliğini kaplıyor. Yatay bir reklam filmi için bu sorun değil; ama sosyal medya için ürettiğim 9:16 dikey videolar tek başına ekranı dolduruyor, sayfayı aşağı doğru uzatıyor ve hiç estetik görünmüyordu.
Behance’in bir grid özelliği var, ama o sadece fotoğrafları yan yana koyabiliyor. Yani bir videoyu bir fotoğrafın yanına, ya da iki dikey videoyu yan yana koyamıyorsun. Kampanya işlerinde tam da buna ihtiyacım vardı: aynı kampanyanın post’u, story videosu ve banner’ı bir arada.
Ben de bu aracı yaptım. Grid üzerinde fotoğraf, video ve aralara yazı koyabiliyorum; sayfanın arka planına renk verebiliyorum; en sonunda da hepsini iframe koduyla Behance projeme gömüyorum. Artık kendi işlerimi hep böyle yayınlıyorum.
— Kadir Apak · Art Director, Motion & Grafik Tasarımcı
Karşılaştırma
Behance’in kendi modülleri ile Behance Grid arasındaki fark.
| Özellik | Behance (varsayılan) | Behance Grid |
|---|---|---|
| Fotoğrafları yan yana dizme | Var (Fotoğraf Grid’i) | Var |
| Videoyu fotoğrafın yanına koyma | Yok | Var |
| İki ya da daha fazla videoyu yan yana koyma | Yok | Var |
| Dikey (9:16) videoyu küçük gösterme | Yok, tam genişlik | Var, satıra oranıyla sığar |
| Grid’in içine, satır aralarına metin koyma | Yok | Var |
| Grid arka plan rengi, boşluk ve köşe yuvarlaklığı | Kısıtlı | Serbest |
| Drive / YouTube / Vimeo kaynakları | Yalnızca tek tek gömme | Hepsi aynı grid’de |
| Tıklayınca büyütme (lightbox) | Yalnızca görsellerde | Fotoğraf ve videoda |
Canlı örnek
Petkit Türkiye kampanyası, Behance Grid ile.
Aşağıdaki grid, Behance’te yayında olan Petkit Türkiye projemin içindeki grid’in aynısı. Behance Grid ile hazırlandı ve Behance projesine iframe koduyla gömüldü. Videolara tıklayıp oynatabilirsin.
- Dikey videolar yan yana
- Fotoğraf ile video aynı satırda
- Bir satırda birden fazla fotoğraf
- Satır aralarında metin başlıkları
Nasıl kullanılır
Behance’e video grid’i 5 adımda.
Kurulum yok, hesap açmak yok. Aracı aç, bağlantılarını yapıştır, grid’i kur ve Behance’e göm.
- 01
Bağlantılarını ekle
Google Drive, YouTube ya da Vimeo bağlantısını, doğrudan bir .jpg / .png / .mp4 adresini veya bir iframe kodunu yapıştır. Tür otomatik algılanır; her öğenin en-boy oranı kapak görselinden ölçülür, hiçbir şey kırpılmaz. Drive dosyalarında paylaşım “Bağlantıya sahip olan herkes – Görüntüleyici” olmalı.
- 02
Sürükleyerek sırala
Öğeleri sürükle bırak ile sırala. Bir öğeyi “Tam genişlik” yapabilir, “Yeni satır” ile alt satıra başlatabilirsin. Videolara açıklama ve özel kapak ekleyebilir, istersen videodan kare seçip kapak yapabilirsin.
- 03
Aralara metin koy
Satırların arasına başlık ve açıklama bloğu ekle. Kampanyanın bölümlerini ayırmak ya da işi anlatmak için idealdir.
- 04
Tasarımı ayarla
Satır (Behance ızgarası gibi) ya da sütun (masonry) düzeni seç; satır başına öğe sayısını, boşluğu, köşe yuvarlaklığını, grid ve lightbox arka plan rengini belirle. Değişiklikler önizlemeye anında yansır; 1400, 1000, 600 px ve mobil genişlikte kontrol edebilirsin.
- 05
Yayınla ve Behance’e göm
Grid’in HTML’ini kopyala, kendi Google hesabınla ücretsiz bir Apps Script web uygulaması olarak yayınla ve aldığın iframe kodunu Behance proje editöründe “Göm” (Embed) modülüne yapıştır. Araç her adımı ekran görüntüleriyle anlatıyor.
Behance’e gömme
Neden Google Apps Script?
Behance’in “Göm” modülü yalnızca onaylı sağlayıcıların iframe kodunu kabul ediyor; kendi sitende barındırdığın bir sayfanın iframe’ini reddediyor. Behance google.com adreslerini kabul ettiği için grid, Google hesabınla ücretsiz bir Apps Script web uygulaması olarak yayınlanıyor.
Tek bir Apps Script projesinde birden fazla grid tutabilirsin (…/exec?g=kampanya gibi).
Grid’i değiştirdiğinde “Yeni sürüm” dağıtman yeterli; Behance’teki kod aynı kalır, grid güncellenir.
Alternatif olarak itch.io da çalışır. CodePen ve kendi barındırdığın adresler Behance tarafından reddedilir.
Grid mobilde orantılı küçülür, Behance içinde kaydırma çubuğu çıkmaz. İstersen dar ekranda iki sütuna düşmesini de seçebilirsin.
Özellikler
Behance projen için ihtiyacın olan her şey.
Video + fotoğraf aynı grid’de
YouTube, Vimeo, Drive videoları ve fotoğraflar aynı satırda, oranları korunarak.
Behance tarzı satırlar
Öğeler eşit yükseklikte satırlara dizilir, genişlikleri oranlarına göre ayarlanır. İstersen masonry sütunlar.
Metin blokları
Satır aralarına başlık ve açıklama; projeyi anlatan bir akış kur.
Renk ve boşluk kontrolü
Grid ve lightbox arka planı, boşluk, köşe yuvarlaklığı. Behance projenin rengiyle birebir eşleştir.
Lightbox ve oynat rozeti
Tıklayınca büyütme, videolarda oynat simgesi, üzerine gelince açıklama ve hafif yakınlaşma.
Videodan kapak seç
Videonun istediğin karesini kapak yap ya da kendi kapak görselini ekle.
Kaydet ve geri yükle
Projeni .json olarak indir, sonra kaldığın yerden devam et. Tarayıcı belleği silinse de dosyan elinde.
Mobil uyum
Grid telefonda orantılı küçülür; Behance mobil uygulamasında da düzgün görünür.
Kimler için
Behance’te video paylaşan herkes için.
Motion tasarımcılar
Animasyonlarını, loop’larını ve dikey reels’lerini tek tek değil, bir sunum olarak göster.
Grafik tasarımcılar
Kampanya görsellerini, animasyonlu post’ları ve banner’ları aynı grid’de bir arada sun.
Video kurgucular ve fotoğrafçılar
Kurguları, kamera arkasını ve fotoğraf serilerini tek bir akışta birleştir.
Ajanslar ve öğrenciler
Case study’lerde kampanyanın tüm çıktılarını düzenli ve profesyonel bir düzende göster.
Sık sorulanlar
Behance’te video grid hakkında sorular.
Behance’te video ve fotoğraf yan yana nasıl konur?
+
Behance’in kendi modülleriyle bu mümkün değil: Fotoğraf Grid’i yalnızca görsel kabul ediyor, videolar ise tam genişlikte ekleniyor. Behance Grid ile fotoğraf ve videoları tek bir grid’de dizip Google Apps Script üzerinden yayınlıyor, çıkan iframe kodunu Behance’in “Göm” modülüne yapıştırıyorsun. Böylece video ve fotoğraf aynı satırda görünüyor.
Behance’in grid modülüne video eklenebilir mi?
+
Hayır. Behance’in Fotoğraf Grid’i modülü sadece görselleri yan yana dizebiliyor; video ya da YouTube/Vimeo bağlantısı ekleyemiyorsun. Video ve fotoğrafı karışık bir grid’de göstermek için Behance Grid gibi bir araçla hazırlanıp gömülen bir iframe gerekiyor.
Dikey (9:16) videolar Behance’te neden çok büyük görünüyor?
+
Behance her videoyu projenin tam genişliğine oturtuyor. Dikey bir video tam genişlikte gösterildiğinde yüksekliği ekranın birkaç katına çıkıyor. Behance Grid’de dikey videolar diğer öğelerle aynı satıra, oranları korunarak yerleştiği için normal boyutta görünüyor; iki ya da üç dikey videoyu yan yana koyabiliyorsun.
Behance Grid ücretsiz mi? Üye olmam gerekiyor mu?
+
Tamamen ücretsiz ve üyelik gerektirmiyor. Yayınlama için yalnızca kendi Google hesabın gerekiyor (Apps Script de ücretsiz).
Hangi video ve görsel kaynaklarını destekliyor?
+
Google Drive paylaşım bağlantıları, YouTube, Vimeo, doğrudan .jpg / .png / .webp / .mp4 dosya adresleri ve iframe gömme kodları. Drive dosyalarının paylaşımı “Bağlantıya sahip olan herkes – Görüntüleyici” olmalı.
Dosyalarım bir sunucuya yükleniyor mu?
+
Hayır. Araç tamamen tarayıcında çalışıyor; dosya yüklemiyorsun, sadece zaten paylaştığın dosyaların bağlantılarını kullanıyorsun. Projen tarayıcında saklanıyor ve istersen .json dosyası olarak indirebiliyorsun.
Behance “Bu gömme kodu geçerli değil” diyor. Ne yapmalıyım?
+
Behance yalnızca onaylı sağlayıcıların iframe kodunu kabul ediyor. Grid’i Google Apps Script (script.google.com) ya da itch.io üzerinden yayınla; CodePen ve kendi barındırdığın adresler reddediliyor. Aracın “Yayınla” adımı bunu ekran görüntüleriyle anlatıyor.
Grid’i değiştirdim, Behance’te hâlâ eski hâli görünüyor.
+
Apps Script’te yeni HTML’i kaydettikten sonra “Dağıt → Dağıtımları yönet → Sürüm: Yeni sürüm” ile yeni sürüm yayınlamalısın. “Yeni dağıtım” yeni bir adres üretir ve Behance’teki kod eski grid’i göstermeye devam eder.
Grid mobilde ve Behance uygulamasında nasıl görünüyor?
+
Varsayılan olarak grid telefonda orantılı küçülür, Behance içinde kaydırma çubuğu çıkmaz. İstersen dar ekranda satırların ikişerli bölünmesini de seçebilirsin.
Grid’in içine yazı ekleyebilir miyim?
+
Evet. Satırların arasına başlık ve açıklamadan oluşan metin blokları ekleyebilirsin. Kampanyanın bölümlerini ayırmak ya da kullanılan yazılımları, ekibi anlatmak için kullanabilirsin.
Aynı Google hesabıyla birden fazla grid yayınlayabilir miyim?
+
Evet. Tek bir Apps Script projesine birden fazla HTML dosyası ekleyip her birini …/exec?g=dosyaadi adresiyle açabilirsin. Her Behance projesi için ayrı bir grid kullanabilirsin.
Geliştiren
İstanbul’da yaşayan, 11 yıllık deneyime sahip bir Art Director, motion ve grafik tasarımcıyım. Markalar için kampanya, sosyal medya, video ve 3D işler üretiyorum. Behance Grid’i kendi portföyümü yayınlarken yaşadığım bir sorunu çözmek için yaptım ve bütün tasarımcılar kullanabilsin diye ücretsiz yayınladım.
Öneri ya da hata bildirimi için yazİlgili yazı
Etkili bir Behance case study nasıl hazırlanır?
Behance projeni bir sonraki seviyeye taşı.
Aracı aç, ilk grid’ini birkaç dakikada kur. Ücretsiz, üyelik yok.
Behance Grid’i açSon güncelleme: