Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Photoshop programında web sitelerinin mobil cihazlara uyarlanması konulu kapsamlı bir eğitim içeriğidir.
- Eğitim, masaüstü ve mobil cihazlar arasındaki farkları açıklayarak başlamakta ve ardından Photoshop'ta mobil tasarım yapma sürecini adım adım göstermektedir. Video, yeni dosya oluşturma, mobil cihaz boyutu seçme, mevcut web tasarımından öğeleri aktarma, görsel boyutlandırma, menü oluşturma, arka plan katmanını uzatma ve footer oluşturma gibi konuları içermektedir.
- Eğitmen, crop aracı, taşıma aracı ve boyutlandırma komutları gibi Photoshop araçlarını kullanarak mobil uyumluluğu sağlama tekniklerini detaylı olarak anlatmaktadır. Ayrıca, web sitesi tasarımında dikkat edilmesi gereken boşluklar, renk kullanımı ve içerik düzeni gibi konulara da değinilmektedir. Video sonunda, izleyicilerden aynı projenin hakkında, ürünler ve iletişim sayfalarını da mobil için uyarlamalarını ve sonuçlarını paylaşmaları istenmektedir.
- 00:03Web Tasarımının Mobil Uyarlaması
- Önceki videoda Lipton Ice Tea adlı bir arayüz tasarım projesi gerçekleştirilmiş, anasayfa, ürünler, Lipton hakkında ve bize ulaşın sayfaları tasarlanmış.
- Web sitelerinin mobil cihazlarda (telefon, tablet) daha düzgün açılabilmesi için içeriğin cihazlara uygun şekilde tasarlanması gerekiyor.
- Bu çalışma dosyaları videoların altına konulmuş, izleyiciler kendi bilgisayarlarında aynı şekilde çalışabilirler.
- 01:24Masaüstü ve Mobil Tasarım Arasındaki Farklar
- Masaüstü web siteleri mouse imleci ile yönetilebilir, menüler ve butonlar daha büyük olabilir.
- Mobil cihazlarda menüler parmak ile basılabilir veya reaksiyon gösterilebilir şekilde tasarlanmalı.
- Mobil içerik yazıları, butonlar, başlıklar ve altyazılar mobilde görünebilecek büyüklükte olmalı, ancak tasarımda kesin ölçü kuralları yoktur.
- 03:43Mobil Tasarım Örneği
- Mobil anasayfada logo mobilyaya oranla daha ufak kullanılmış, hamburger menü (basıldığında aşağı doğru açılan) tasarlanmış.
- Banner alanı mobil ekranın boyutuna uygun küçültülmüş, yan yana iki kutu alt alta konulmuş.
- İçerik ve görsel büyüklükleri, mobil cihazın yüzüne yaklaşık 30-40 cm uzaklıktan kolayca anlaşılabilecek şekilde boyutlandırılmış.
- 05:01Photoshop'ta Mobil Tasarım
- Photoshop'ta yeni dosya açarken "File" menüsünden "New" seçeneği ile web veya mobil ölçülerine uygun modlar seçilebilir.
- Mobil tasarım için iPhone 8/7/6 Plus boyutu gibi geniş akıllı mobil cihazlar sınıfından bir cihaz seçilebilir.
- Photoshop'un son versiyonlarında artboard mantığı var, birden fazla ekranı tasarlayabileceğiniz alanlar sunuyor.
- 07:18Tasarım Aktarımı
- Mobil tasarım için ana sayfadan gerekli öğeler (arka plan, logo vb.) taşıma aracıyla mobil sayfaya aktarılabilir.
- Aktarılan katmanlar Ctrl+T veya Mac OS'ta Command+T yöntemi ile büyütülebilir veya küçültülebilir.
- Akıllı cihazların ekranları çözünürlük olarak çok yüksek olduğu için, masaüstü veya laptoplardan daha küçük görünen öğeler olabilir.
- 09:48Görsel Boyutlandırma ve Düzenleme
- Ctrl+T yöntemi ile görselleri istediğiniz boyuta boyutlandırabilirsiniz.
- Görselleri çok fazla büyütmemek gerekir çünkü piksel çözünürlüğünden çalabilirsiniz.
- Görselleri ekranın ortasına yerleştirmek için Enter tuşuna basabilirsiniz.
- 10:24Mobil Tasarım İçin Örnek İnceleme
- Tasarımcı olarak popüler web sitelerinin mobil versiyonlarını incelemek önemlidir.
- Tarayıcıda web sitesini açıp ekranı daraltarak mobil görünümünü görebilirsiniz.
- Mobil versiyonda menüler hamburger menüye dönüşebilir ve açılır menüler kullanılabilir.
- 12:06Menü Tasarımı
- Menü arka planını seçip taşıma aracıyla sürükleyerek yerleştirebilirsiniz.
- Menü ikonu için Google'da "menü ikon" araması yaparak transparan arka planlı görseller bulabilirsiniz.
- Menü ikonunu Ctrl+T yöntemiyle boyutlandırıp istediğiniz yere koyabilirsiniz.
- 13:54Cetvel Çizgileri ve Düzenleme
- Soldan ve sağdan cetvel çizgileri kullanarak öğeleri düzenleyebilirsiniz.
- Cetvel çizgilerini alırken cetvellerin üzerinden basılı tutarak cetvel çizgileri alabilirsiniz.
- Cetvel çizgilerini ayarlayarak öğelerin arasında belirli boşluklar bırakabilirsiniz.
- 14:51Menü Renklendirme
- Menü katmanının üzerine sağ tıklayıp Blending Options seçeneğine gidebilirsiniz.
- Blending Options ile renk kaplama, gradient veya desenle kaplama yapabilirsiniz.
- Color Overlay seçeneği ile menüye istediğiniz renk verebilirsiniz.
- 15:54Katman Gruplama ve İçerik Ekleme
- Katmanları Ctrl+G kısayolu ile gruplayabilirsiniz.
- Banner görselini taşıma aracıyla sürükleyerek yerleştirebilirsiniz.
- Sol ve sağ kutuları gruplu olarak sürükleyerek yerleştirebilirsiniz.
- 17:15Boyutlandırma ve İçerik Düzenleme
- Ctrl+T kısayolu ile öğeleri boyutlandırabilirsiniz.
- Shift tuşuna basılı tutarak boyutlandırma yaparak en ve boy oranını koruyabilirsiniz.
- İçeriklerin sığması için yazı boyutlarını kontrol etmek önemlidir.
- 18:39Çalışma Alanını Genişletme
- Çalışmanızın alanı size yetmiyorsa, crop aracını kullanarak çalışma alanını genişletebilirsiniz.
- Crop aracını kullandığınızda çalışma alanının etrafını saran bir çerçeve gelir ve bu çerçeveyi aşağı doğru sürükleyerek istediğiniz kadar genişletebilirsiniz.
- Çalışma alanını genişlettikten sonra enter'a basarak işlemi onaylayabilirsiniz.
- 19:10Arka Plan ve Görsel Boyutlandırma
- Çalışmanızın altını doldurmak için arka plan katmanını aşağı doğru uzatmanız gerekiyor.
- Sağ kutu görselini seçip, zoom aracıyla yaklaştırdıktan sonra Ctrl+T veya T tuşuyla saracak kadar boyutlandırabilirsiniz.
- İçerisindeki yazıları boyutlandırırken mizanpaj (yazı büyüklüklerinin oranları) bozulmaması için dikkatli olmalısınız.
- 20:43Footer Ekleme ve Düzenleme
- Sayfanın altında bulunan footer (alt bilgiler veya alt linkler) eklemek için önce arka planı seçip taşıma aracıyla mobil çalışmanıza taşımalısınız.
- Footer için aşağıda bir bar oluşturup, gizlilik, yasal uyarı ve "Lipton Ice Tea her hakkı saklıdır" gibi yazıları getirmelisiniz.
- Yazıları boyutlandırırken sayısal değerler (örneğin 44 piksel) kullanmak daha iyi sonuç verir ve karakter penceresinden katman seçiliyken ayarlar yapılabilir.
- 22:32Çalışmayı Tamamlama ve Öneriler
- Çalışmanın alttaki fazla olan kısmını daraltmak için crop aracını kullanarak çerçeveyi aşağıdan sürükleyerek copyright yazısına kadar getirmelisiniz.
- Web sayfasını mobile göre uyarlamak basit aşamalarla gösterilmiş olsa da, font boyutları ve menü butonlarının boyutu gibi kriterler de önemlidir.
- İzleyicilerden aynı projenin içerisinde bulunan hakkında, ürünler ve iletişim sayfalarını da mobil için uyarlayıp görseller paylaşmaları isteniyor.