Eğitim: Adobe Photoshop ile Web Sayfası Nasıl Düzenlenir

Web sayfalarını tasarlamak ve kodu girmeden veya bunlara dokunmadan tamamen basit ve işlevsel bir şekilde çalışmak için çok çeşitli araçlar vardır. Uygulamalar tarafından önerilen sayısızdırlar (Adobe Dreamweaver bir örnektir) veya doğrudan Wix gibi çevrimiçi platformlar tarafından. Ancak, bir web tasarımcısı için manuel prosedürleri bilmek çok önemlidir. HTML5 ve CSS, web sitelerinin ve açılış sayfalarının düzeni için temel sütunlardır.

Ancak, beklediğinizden daha sık, Indesign gibi uygulamalara dönmeniz gerekecek veya Adobe Photoshop Düzen çalışmanızı tamamlamak ve onlara mükemmel bir sonuç vermek için. Bugün bu kapsamlı eğitimde Adobe Photoshop kullanarak bir web sayfasını nasıl düzenleyebileceğimizi göreceğiz. Bu ilk bölümde Photoshop'tan geliştirilecek çalışmamızda kalacağız, ancak ilerleyen bölümlerde bu çalışmayı işlevsel hale getirmek için zaten doğrudan HTML kodunda nasıl uygulayabileceğimizi göreceğiz.

Tel çerçevemizin tasarımından başlayarak

Bir web sayfasının düzeni ve tasarımıyla başlamak için, temel unsurların ne olacağını tanımlayarak başlamamız çok önemlidir, bu iskelettir. Bu yapı, tüm içeriğin (metinsel veya multimedya) tutulması için bir destek görevi görecek. Sayfamızı oluşturan bölümlerin her birini tanımlayarak, bunlar üzerinde tam bir doğrulukla çalışabileceğiz ve olabildiğince başarılı bir görsel tasarım sağlayabileceğiz.

Web sitemizin sahip olacağı boyutları dikkate almamız çok önemlidir. kutulu veya Tam genişlikli. Kutulu bir web sayfası küçük bir kabın içinde olacak ve bu nedenle etrafında bir boşluk görünecektir. Aksine, sayfayı çoğaltan cihazın tüm ekranını tam bir web sayfası kaplayacaktır. Bir modalite veya diğeri arasında seçim yapmak, yalnızca biçimsel sorulara yanıt verir ve aynı zamanda üzerinde çalıştığımız projenin ihtiyaçlarına da bağlı olacaktır. Bu örnekte kutulu mod ile çalışacağız, böylece tarayıcı tarafından sağlanan tüm alanı kaplamayacaktır.

Tel çerçevemizi oluşturmak için yapmamız gereken ilk şey Adobe Photoshop uygulamasına girmek ve sayfamızın sahip olmasını istediğimiz boyutları eklemek. Bu örnekte sayfamız 1280 piksel genişliğinde olacaktır. Ancak boyut sorunu, son hedefe veya sayfamızı çoğaltmak istediğimiz cihaza bağlı olarak değişebilir. Hiç şüphe yok ki bir web tasarımının işlevsel ve verimli olması için, duyarlı ve piyasadaki tüm cihazlara uyum sağlamalıdır. Ancak, bu durumda, bir masaüstü bilgisayarda yeniden üreteceğimiz bir prototip oluşturmak için çalışacağız. Öyle olsa bile, duyarlılık konusu daha sonra tartışılacaktır, şimdilik burada, bu örnekte üzerinde çalışılacak bir ekran boyutları hiyerarşisi verilmiştir. Bu durumda Adobe Photoshop'ta açılış sayfasının mizanpajını yapacağımızı ve ardından bunu HTML5 VE CSS3'e taşıyacağımızı unutmayın. Bu küçük uygulamanın amacı, Photoshop'ta oluşturulan bir tasarımı, kullanıcının hareketlerine yanıt veren, kullanılabilir ve etkileşimli bir web tasarımına dönüştürmektir.

Cep telefonları için ölçümler

iPhone 4 ve 4S: 320 x 480

iPhone 5 ve 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384x598

Nexus 5: 360x598

Galaxy S3, S4, S5: 360x640

HTC One: 360x640

Tablet ölçümleri

iPad tüm modellerin yanı sıra iPad Mini: 1024 x 768

Galaxy Tab 2 ve 3 (7.0 inç): 600 x 1024

Galaxy Tab 2 ve 3 (10.1 inç): 800 x 1280

Nexus 7: 603x966

Nexus 10: 800x1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Masaüstü bilgisayarlar için ölçümler

Küçük ekranlar (örneğin netbook'larda kullanılır): 1024 x 600

Orta boy ekranlar: 1280 x 720/1280 x 800

Büyük ekranlar: 1400 pikselden büyük genişlik, örneğin 1400 x 900 veya 1600 x 1200.

Web modelimizdeki öğeleri dağıtmaya ve bölümleri atamaya başlamak için, okunabilir ve melodik bir son sağlamak için oranları hesaba katmamız çok önemlidir. Görünüm üst menüsünde bulabileceğiniz kuralları ve kılavuz seçeneklerini kullanmanız çok önemli olacaktır. Orantılı ve kesin bir şekilde çalışmak için, en iyisi yüzdelere göre çalışmaktır. Görünüm menüsünü ve ardından bölümün modalitesini seçmek için «Yeni kılavuz» seçeneğini tıklayacağız. Bu durumda% 25 oranında dört dikey bölme yapacağız ve bunları altbilgiye görsellerimizi ve logomuzun görselini üstbilgiye yerleştirmek için referans olarak alacağız.

Bölgemizi işgal edecek alanların her birini belirlemek için bir kod vardır. model ve her birinin sahip olacağı işlevi. Örneğin, bir görüntünün kaplayacağı alanı belirtmek için, bir tür çarpı işareti olan dikdörtgenler oluşturacağız. Videoları belirli bir alana dahil etmek istediğimizi belirtmek için, kapsayıcımızın içine oynatma sembolünü ekleyeceğiz. Bu ilk örnekte sadece görüntülerle çalışacağız, üst çekimde görüntülerin bulunduğu alanı görebilirsiniz. logo web sitemizden.

Bu, bizim wireframe. Gördüğümüz gibi, logonun bulunacağı görüntüden oluşan ve iki sekme, bir arama motoru ve arama kutusunda dört düğme eşliğinde ana sayfaya bir bağlantı görevi görecek bir başlığa bölünmüştür. Buna ek olarak, halihazırda gövde içinde, bir bölme çubuğu ve web sitemizde yer alacak içerik türünü kategorize eden bir dizi kategoriden oluşan bir kenar çubuğu ekledik. Sitemizde var olacak girişleri içeren bir numaralandırmaya sahip başka bir bölüm ve son olarak sitemizdeki en temsili meta etiketleri veya etiketleri içeren bir liste.

İçereceği bir bölümle tanımlanacak içerik alanında kendi kendine yönetilebilir içerikmakalelerimizin içeriğini bulacağız. Bu durumda, ekmek kırıntıları veya içerik haritası (web sitemizin organik yapısını, makalenin başlığını, meta verileri, metin gövdesi olarak bir paragrafı ve içinde bir resmin bulunduğu).

Altbilgi olarak, sayfamızın diğer alanlarına bağlantı görevi görecek dört resim ekledik. Buraya logoları veya diğer ilginç bölümleri ekleyebiliriz. Gerçekte, bu alan daha çok ön ayak, çünkü altbilginin kendisi kullanım politikası, yasal uyarı ve telif hakkı ile biraz daha aşağıya inecektir.

Sayfamızın temel yapısını veya iskeletini tanımladıktan sonra, bir sonraki seviyeye geçmemiz gerekecek. Bu, web sitemizin her bir alanının uygun tasarımından oluşacaktır. Diğer bir deyişle, bu alanların her birini nihayet web sitemize eklenecek içerikle "doldurmaya" başlayacağız. Tel kafes üzerinde çalışmadan önce bu unsurları tasarlamamamız tavsiye edilir çünkü bu sırayla yaparsak oranlarını daha sonra değiştirmemiz çok muhtemeldir. Görüntülerimizi bozma riskini taşıyoruz ve her bir öğenin tasarımını yeniden yapmak zorunda kalmak, bu ya zaman kaybı ya da daha düşük kaliteli bir sonuç olacaktır.

Bu durumda web sitemizin tasarımı son derece basit olacaktır. Kullanacağız malzeme tasarım ilkeleri, çünkü bu uygulamayı örneklemek için Google logosunu kullanacağız. Bu eğitimin amacının teknik bilgiyi göstermek olduğunu açıklığa kavuşturmalıyım, bu nedenle bu durumda estetik sonuç alakasızdır. Gördüğünüz gibi, azar azar, planımızda daha önce belirlediğimiz tüm alanlarla dolduruyoruz. Ancak son dakikada ufak bir değişiklik yaptık. Fark etmiş olabileceğiniz gibi, logomuzun boyutunu önemli ölçüde azalttık ve alt başlık alanına üst menüye mükemmel şekilde bağlanan bir bölme çizgisi ekledik. Bu durumda, bir kaynak bankasından düğmeler ve malzemeler kullandık. Tasarımcılar olarak bunları kendimiz tasarlayabiliriz (özellikle bu seçenek, marka imajı veya logosunda sunulanla çok benzer bir tonik sunmasını istiyorsak önerilir).

Bu örneği ortaya koymak için iki farklı düzeyde çalışacağımızı akılda tutmamız önemlidir. Bir yandan nesneler ve diğer yandan web sitesinin görünümü üzerinde çalışacağız. Yani bir yandan web sitemizin iskeletinde, diğer yandan tüm bu iskeletin destekleyeceği yüzen öğeler. Kenar çubuğumuzun kaplayacağı alan, ön ayak veya başlığı vücuttan ayıran bölme çubuğu gibi hiç yüzmeyecek alanlar olduğunu fark edeceksiniz.

1, 2, 3 ve 4 numaralı yapılar, arka fon web sayfamızın, bu nedenle gerçekte Adobe Photoshop'tan dışa aktarmamız gerekmeyecek, ancak bunu yapabilsek de gerekli değildir. Söz konusu olduğunda Düz renkler (düz tasarımın ve malzeme tasarımının temel özelliklerinden biri, bir CSS stil sayfası kullanılarak kod aracılığıyla mükemmel bir şekilde uygulanabilir). Ancak, öğelerin geri kalanı daha sonra HTML kodumuza eklenmek üzere kaydedilmelidir. Bu küçük diyagramda, sitemizin son görünümünün ne olacağı konusunda net bir fikre sahip olmak için sayfanın arka planına ait alanları da yeniden oluşturduk.

Fark edeceğiniz üzere Adobe Photoshop'ta bu şemayı oluşturmanın amacı, her bir öğenin gerçek boyutunu elde etmek ve her bir öğenin düzenini ve yapısını netleştirmektir. Elbette, metinsel içeriğin sürecin bu aşamasında yeri yoktur, çünkü kod editörümüzden temin edildi. Ayrıca, bu uygulamada düğmeler ve statik öğelerle çalışacağımızı da belirtmeliyiz, ancak bunlar genellikle Bootstrap gibi çerçevelerden veya doğrudan Jquery'den uygulanır.

Web sayfamızı oluşturacak öğelerin her birini oluşturduktan sonra, bunları dışa aktarmaya ve HTML proje klasörünün içinde bulunan resimler klasörüne kaydetmeye başlamanın zamanı gelmiştir. Tel çerçevenizden dışa aktarmaya alışmanız önemlidir, çünkü büyük olasılıkla bazı orijinal öğeleri iskelet yapılandırmasına göre değiştirmeniz gerekecektir. (Örneğin, bu durumda, orijinal düğmelerin boyutunu, logoyu ve alt alandaki resimler dahil kompozisyonun parçası olan öğelerin çoğunu değiştirdik).

Herhangi bir öğeyi, sahip oldukları boyutlarla ve kesin bir şekilde kaydetmek için bağımsız olarak kaydetmeyi öğrenmemiz önemlidir. Herhangi bir hata, ne kadar küçük olursa olsun, web sitenizin parçası olan tüm unsurları etkileyebilir. Son web'de HTML'den girilebilmeleri için birbirleriyle ilişkili olacaklarını ve mükemmel boyutlara sahip olmaları gerektiğini unutmayın. Bu durumda, aşağıdaki unsurları bağımsız olarak kesip kaydetmemiz gerekecek:

• Logomuz.
• Tüm düğmeler (ana menünün parçası olanlar ve diğerleri).
• Tüm görüntüler.

Bunu birçok şekilde yapabiliriz ve belki de sizin için daha etkili bir alternatif bulacaksınız. Ancak ilk kez bu tür bir düzen yapacaksanız, aşağıdaki ipuçlarını izlemenizi tavsiye ederim.

• Öncelikle, tel çerçevemizi içeren PSD dosyasının bulunduğu klasöre gitmeli ve bunu dışa aktaracağınız öğeler kadar çoğaltmalısınız. Bu durumda, orijinalden 12 kopya oluşturduk ve bunları aynı klasöre kaydettik. Ardından, her bir kopyayı yeniden adlandıracak ve her birine içerdiği öğenin adını atayacaksınız. 12 kopyamız yeniden adlandırılacak: Logo, menü düğmesi 1, menü düğmesi 2, arama çubuğu, üst düğme 1, üst düğme 2, üst düğme 3 ve üst düğme 4. Kalan dört kopya şu şekilde yeniden adlandırılacaktır: Görüntü 1, Görüntü 2, Resim 3 ve Resim 4.
• Bu yapıldıktan sonra dosyayı logo adıyla açacağız.
• Katman paletimize gidip logomuzu içeren katmanı bulacağız. Sonra basacağız Ctrl / Cmd söz konusu katmanın küçük resmine tıklarken. Bu şekilde logo otomatik olarak seçilmiş olacaktır.
• Bir sonraki adım, Photoshop'a bu logoyu kesin bir şekilde kesmesini istediğimizi söylemek olacaktır. Bunun için kırpma aracına yalnızca anahtardan veya komuttan bir çağrı yapmamız gerekecek C.
• Bunu yaptıktan sonra, kesimi onaylamak için Enter butonuna tıklayacağız.
• Şimdi nasıl kaydet seçeneğine tıklamak için en üstteki Dosya menüsüne gideceğiz. Bu durumda «Logo» olacak adı seçeceğiz ve bir format atayacağız PNGWeb'de en yüksek kaliteyi sunan dosya olduğu için.
• Süreci tüm kopyalar ve unsurlarla tekrarlayacağız. Kırptığınızda, paletimizdeki katmanların geri kalanının görünmez veya elendi. Bu şekilde her bir öğeyi şeffaf bir arka planla kaydedebiliriz.

Bu durumda, katman paletinden menü butonumuzu 2 seçiyoruz. Ekran görüntüsünde düğmemizin sınırlarının nasıl otomatik olarak seçildiğini görebilirsiniz.

Kırpma aracını C tuşundan seçtikten sonra, kanvasımız yalnızca düğmemizin boyutlarına indirgenir.

Şimdi web sitemizin parçası olan tüm öğeleri tek tek kaydetme ve daha sonra kullanacağımız resimler klasörüne eklemenin zamanı geldi. Kodumuzdan aramalar yapacağız ve düzenimize devam edeceğiz ama bundan sonra kod editörümüzden.

Bir web sayfasını düzenlemek için birçok araç ve alternatif olmasına ve bu süreci tamamen sezgisel hale getirmesine rağmen, bunu bir web sitesinde yapmayı öğrenmemiz çok önemlidir. Manuel. Bu şekilde, bir web sayfası tasarımının arkasındaki temellerin ne olduğunu öğreneceğiz.

Resumen:

1. Tasarım yapı Web sitesinin iletmek istediğiniz içeriğe ve web sitenizde oluşturmanız gereken bölümlere özel dikkat göstermesi.
2. İskeletiniz üzerinde çalışın veya wireframe Adobe Photoshop'tan içeriğin hangi alanlarda görüneceğini ve formatlarını belirtir.
3. Önceden geliştirdiğiniz ölçülere ve markalara güvenerek, diseñar ağın yüzeyi. Tüm öğeleri içerir (hem yüzen hem de sabit). İlgili düğmeleri, logoyu ve resimleri eklemeyi unutmayın.
4. Projenin parçası olan tüm unsurları tek tek kesin. Doğru önlemleri aldıklarından ve daha sonra size sorun çıkarmayacaklarından emin olun.
5. Tüm öğeleri formatta kaydedin PNG proje klasörünün içindeki resimler klasöründe HTML.
6. Bu projenin web penceresine bir çıktısı olacağını unutmayın, bu nedenle renk modunu dikkate almanız ve uygulamanız çok önemlidir. RGB.
7. İşe başlamadan önce beğendiğiniz diğer web sayfalarından ilham alın ve bunu ekip üyelerinizle tartışmayı unutmayın. Bir müşteri için bir proje olması durumunda, brifing olabildiğince uzağa.