Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Photoshop programında Bootstrap izgara yapısını kullanarak web tasarımı yapma konulu kapsamlı bir eğitim içeriğidir.
- Eğitim, Bootstrap izgara yapısının Photoshop'a nasıl ekleneceği ve düzenleneceği ile başlayıp, mobil uyumluluğu sağlamak için Chrome Developer Tools ve CSS Peeper eklentisi kullanımı ile devam etmektedir. Daha sonra Starbucks web sitesi örneği üzerinden başlık (header) oluşturma, menü öğelerini yerleştirme, lokasyon simgesi ekleme ve metin düzenleme gibi adım adım Photoshop teknikleri gösterilmektedir.
- Eğitim boyunca Bootstrap'in col-lg, col-md gibi sınıflarının kullanımı, farklı ekran boyutlarında (1200px, 960px, 768px, 576px) tasarım değişiklikleri, piksel hesaplamaları, renk kodları ve Lato yazı karakteri kullanımı gibi teknik detaylar da paylaşılmaktadır.
- 00:01Bootstrap İndirme ve Düzenleme
- Photoshop'ta ızgara yapısı klasörü kullanılabilecek bir dosya bulunmaktadır.
- Bootstrap psd grip yazarak indirilebilen bu dosya, Photoshop'a sürükle-bırak yöntemiyle aktarılabilir.
- İndirilen dosyada ızgara klasörü bulunur ve bu klasörün içindeki katmanlar değiştirilmemelidir.
- 01:19Katman Düzenlemesi
- ızgara klasörünün altına yeni bir katman eklenebilir ve bu katman ızgara bölümünün içerisinde en altta olmalıdır.
- Arka plan beyaz renk olarak boyanabilir, normalde saydam bir renk olan bu katman daha rahat görülebilir hale gelir.
- 02:25Tasarım Öncesi Hazırlık
- Tasarım yapmadan önce cetveller ve kılavuz çizgileri ayarlanması önemlidir.
- Cetvelleri açmak için Görünüm menüsünden Rulers seçeneği kullanılabilir.
- Cetvellerin piksel cinsinden ayarlanması web sayfası tasarımı için daha uygundur.
- 03:50Cetvel ve Kılavuz Ayarları
- Cetveller sıfırdan başlar ve sayfanın genişliği 1200 piksel olarak kabul edilebilir.
- Kılavuz çizgileri eklemek için View menüsünden yeni bir rehber eklenebilir.
- Işık kılavuz çizgileri sayfayı karmaşık gösterebileceği için tercih edilmemektedir.
- 06:18Starbucks Sayfası Analizi
- Starbucks sayfasında üst menü ve alt menü bulunmakta, her sayfa altındaki arka plan siyah renktir.
- Sayfa genişliğindeki boşluklar ve aralıklar tasarım açısından önemlidir.
- Sayfa küçültüldüğünde veya yakınlaştırıldığında, içeriklerin nasıl davranacağı önemlidir.
- 09:12Bootstrap Sütun Kullanımı
- Bootstrap'ta col-md kullanıldığında, menüler ve içerikler belirli genişliklerde değişir.
- Yazılar çok genişse col-lg, daha az alan kaplarsa col-md kullanılmalıdır.
- Sayfa boyutu 537 pikselin altına inildiğinde, menüler ve içerikler bir kademe aşağı kayar.
- 10:11Chrome'da Mobil Görünüm Ayarları
- Chrome'da mobil görünümü test etmek için sol taraftaki "Toggle Device Toolbar" butonuna tıklayarak sayfayı telefon görünümüne getirebilirsiniz.
- Mobil görünümde siyah kısım parmağınızı temsil eder ve dokunma yüzeyi yaklaşık 30-36 piksel arasında olmalıdır.
- Dimensions kısmından telefonlara uyumlu görünümü test edebilir, menüleri ayarlayabilir ve rotate ile yatay/dikey görünüm arasında geçiş yapabilirsiniz.
- 11:55Mobil Ekran Boyutları ve Ayarlar
- Mobil ekranlarda en fazla 468 piksel genişlik kullanılır, orta ekranlar 375-425 piksel, geniş ekranlar 425 piksel genişliğinde ayarlanır.
- Chrome'un kendi özelliklerinden telefonları otomatik ayarlayabilir veya edit seçeneğiyle özel telefon boyutları ekleyebilirsiniz.
- Sayfa küçültüldüğünde, kolon sayısı değişebilir ve logolar ortalanabilir gibi otomatik düzenlemeler gerçekleşir.
- 15:22Medya Sorguları Kullanımı
- Mobil uyumluluğu sağlamak için HTML kodunda "media" özelliği kullanılır.
- Medya sorgularında maksimum genişlik belirterek, belirli genişliklerde farklı düzenlemeler yapılabilir.
- Örneğin, en küçük boyut 750 pikselin altına indiğinde yazılar ortalansın, kalın olsun veya eğik olsun gibi ayarlar yapılabilir.
- 16:45CSS Peeper Eklentisi Kullanımı
- CSS Peeper eklentisi sayesinde sayfanın yazı karakterleri, renkleri ve fotoğrafları gibi özellikleri görüntülenebilir.
- Starbucks.com örneğinde yazı karakteri Lato, Helvetica, Arial sans-serif olarak kullanılmıştır.
- CSS Peeper ile sayfadaki renkleri ve fotoğrafları görebilir, kullanabilirsiniz.
- 18:33Sayfa Boyutları ve Photoshop Kullanımı
- Sayfada kırmızı ve beyaz bölümlerin alanlarını CSS Peeper ile tıklayarak öğrenebilirsiniz.
- Örneğin, beyaz kısım 1280x80 piksel boyutunda olabilir.
- Photoshop'ta sayfa boyutlarını oluşturmak için view menüsünden "New Guide" seçeneğiyle yatay rehber ekleyebilirsiniz.
- 24:24Photoshop'ta Grup Oluşturma ve Düzenleme
- Grup bir adlı bir grup oluşturulup ızgaraya yerleştiriliyor.
- ızgara kilitleme özelliği kullanılarak öğelerin yanlış yerleştirilmesi engelleniyor.
- Grup bir'e kırmızı renk veriliyor ve ismi "header" olarak değiştiriliyor, bu başlık anlamına geliyor.
- 26:21Header Bölümü Oluşturma
- Dikdörtgen aracı kullanılarak beyaz renkli bir kutu oluşturuluyor.
- Header'ın içine yeni bir katman (header zemin) eklenerek çizim yapılabilmesi sağlanıyor.
- Cetvel kullanılarak otomatik mıknatıs özelliğiyle doğru konumda çizim yapılıyor.
- 30:09Logo Ekleme
- Logonun 62 piksellik alan kapladığını ve header'ın 80 piksel olduğunu belirtiyor.
- Logo kopyalanıp Photoshop'a yapıştırılıyor, ancak PNG formatındaki resimler kopyalandığında arka plan siyah olabiliyor.
- Logo farklı kaydedilerek siyah arka plan sorunu çözülüyor ve Photoshop'a açılarak duplicate layer ile kopyalanıyor.
- 33:06Logo Yerleştirme ve Diğer Bölümler
- Logo sağdan 20 piksellik boşluk bırakılarak yerleştiriliyor ve otomatik olarak ortalanıyor.
- Kahve logosu için 50x100 piksel boyutunda bir kutu oluşturuluyor.
- Kutunun rengi #242221 olarak ayarlanıyor ve boyutları properties panelinden düzenlenebiliyor.
- 40:01Starbucks Logosunu Oluşturma
- Starbucks logosunda "kahve" yazısının kullanılacağı belirtiliyor.
- Lato yazı karakterinin kullanılması gerektiği, ancak bu karakterin bulunmadığı için font.tr.com üzerinden indirilmesi öneriliyor.
- Lato yazı karakteri indirilip Photoshop'a yükleniyor.
- 42:37Yazı Yapısı ve Düzenleme
- Yazı karakterinin boyutu ayarlanıyor ve kutunun görünmez iç tarafına, kenarları yuvarlak gelen bir kutu oluşturuluyor.
- Yazı karakteri aralığı ayarlanabiliyor ve metin seçildikten sonra karakter aralığı artırılabiliyor.
- Metin seçildikten sonra paragraf karakteri açılıp "va" kısmının aralığı artırılabiliyor.
- 46:02Menü Oluşturma
- Kahve yazısı ve dikdörtgen bir gruba alınarak "kahve" olarak isimlendiriliyor.
- Menü, mağaza, sosyal sorumluluk gibi kısımlar için metin aracı kullanılarak yazılar ekleniyor.
- T aracının iç tarafındaki küçük nokta, başlangıç konumunu belirtiyor ve metinler bu noktadan çiziliyor.
- 49:02Menü Düzenlemeleri
- Menü, mağaza, sosyal sorumluluk gibi yazılar büyük karakter olarak yazılıyor ve boşluklar bırakılıyor.
- Yazı karakteri boyutu 20 pikselden 14 piksele düşürülmüş ve kalınlaştırılmış.
- Starbucks logosu ve kahve yazısı da 14 piksel boyutuna getirilip kalınlaştırılmış.
- 54:12Son Düzenlemeler
- Mağazaların altında yerini belirten bir düğme eklenmesi planlanıyor.
- Metinsel bir düğme veya fotoğraf kullanılabilir.
- Sayfa düzenlemesi tamamlanıyor.
- 55:09PNG Simge Boyutlandırma
- Lokasyon PNG'lerden birini kopyalayıp, boyutu büyük olduğu için küçültme işlemi yapılabilir.
- Araçlar kısmından simge seçip, 120 piksel boyutundan başlayarak küçültme işlemi yapılabilir.
- Resmi farklı kaydederken kayıt türünün PNG olması gerekiyor, JPEG gibi diğer formatlar arka planı bozabilir.
- 57:43Photoshop'ta Düzenleme
- PNG dosyası akıllı obje olarak gelir ve shift tuşu ile oranla küçültülebilir.
- Simgenin boyutu 40 piksel olarak ayarlandıktan sonra 30 piksel olarak daha küçük yapıldı.
- Header'ın içine "Mağazalar" yazısı eklendi ve kalın yazı tipi kullanıldı.
- 59:50Sayfa Düzeni ve Kaydetme
- Metin "Mağazalar" yazısı sayfanın en son kısmına ortaladı.
- Yazı karakteri 16 olarak ayarlanarak daha iyi görünüm sağlandı.
- Ctrl+Shift+S tuş kombinasyonu ile sayfa kaydedildi ve menü mağazalar bölümü tamamlanmıştır.