Web Tasarım Oyununuzu Geliştirmenize Yardımcı Olacak 13 Photoshop Eğitimi

Geçmişte photoshop, web tasarımının yalnızca bir parçası değil, belki de bunun için birincil araçtı. Siteler Photoshop'ta tasarımcılar tarafından tasarlandı ve ardından web için geliştiriciler tarafından "dilimlendi" ve kodlandı. Bu yöntemin kalıntıları kalırken, tasarım ve geliştirme topluluğu web tasarımı için birçok yeni aracı benimsemiş ve Photoshop'un bir dizi farklı görev için yalnızca bir seçenek olduğu daha büyük bir "araç kutusu" yaratmıştır. Hata yapmayan bir seçenek, hala inanılmaz derecede faydalı.

Bugün eskisi gibi tamamen görsellerden oluşan bir web sitesi görmek nadirdir. Bununla birlikte, görüntüler modern web tasarımında hala büyük bir rol oynamaktadır. WordPress söz konusu olduğunda, oynadıkları en büyük rol sayfa ve gönderi içeriğidir. Veya Divi veya Extra kullanan bir Elegant Themes üyesiyseniz, bölüm veya satır arka planı olarak kullanmak için sürekli olarak doğru görüntüleri aradığınızı göreceksiniz.

Tüm bu durumlarda, markanıza ve/veya içeriğinize özel olarak uyarlanmış çarpıcı görüntüler çok önemlidir. Ama sizin için çalışan bir fotoğrafçınız yoksa, bu oldukça zor olabilir. Bugünkü gönderide derlediğim photoshop ve görüntü işleme eğitimleri işte burada devreye giriyor! Web'de bulabileceğiniz bu eğitimleri ve ücretsiz yüksek kaliteli görüntüleri kullanarak, yine de size özel içerik veya tasarım öğeleri oluşturabilirsiniz.

Web Tasarım Oyununuzu Geliştirmenize Yardımcı Olacak 13 Photoshop Eğitimi

Aşağıda derlediğim dersler hiçbir şekilde web tasarımcıları için kapsamlı bir photoshop dersleri listesi denemesi değildir. Bununla birlikte, faydalı bulduğum ve başkalarına tavsiye ettiğim öğreticilerdir.

Yüze Duyarlı Sıvılaştırma

20 Haziran 2016'da Adobe, Photoshop CC 2015.5 güncellemesini yayınladı. Geçiş yaptıysanız, onunla birlikte gelen en yeni iki özelliğin zaten farkındasınız: Yüze Duyarlı Sıvılaştırma ve İçeriğe Duyarlı Kırpma.

Yüze Duyarlı Sıvılaştırma özelliği, Photoshop'un Sıvılaştırma filtresine yapılan bir yükseltmedir. Yüz tanıma yazılımını kullanarak sıvılaştırma işlevi yalnızca yüzle ilgilidir. Tasarımcıların fotoğraf konusunun yüz özelliklerini geliştirmesine veya abartılı veya soyut bir sanatsal etki için onları manipüle etmesine olanak tanır.

Photoshop Eğitimini İzleyin (Çalışma Süresi: 12:18)

İçeriğe Duyarlı Kırpma

Minimalist tasarımın bu günlerde tüm öfkesi ile, görüntülerde denge oluşturmak önemlidir. Ayrıca sadece doğru miktarda beyaz alan kullanmalısınız. Ancak, fotoğraflarda her zaman mükemmel boşluk veya denge bulunmaz. Bir görüntünün amaçlarınız için çalışmasını sağlamak için standart kırpma özelliğini kullanabilirsiniz, ancak bunu her zaman düzgün bir şekilde yapmayacaktır.

İnsanların uzuvlarını kesmekten bıktınız mı? Bir görüntüye sığdırmak için sıkıcı beyaz boşluk eklemekten bıktınız mı? O zaman bu yeni Photoshop özelliği denemeye değer. Çevredeki öğelerden eşleşen ayrıntılarla fotoğrafları doldurmayı öğrenmenize yardımcı olacaktır. Ayrıca kırpmada size daha fazla esneklik sağlar.

Photoshop Eğitimini okuyun

Bokeh Etkisi

Daha önce stok fotoğrafçılığına güvenmek zorunda kaldıysanız, bunun ne kadar sinir bozucu olabileceğini bilirsiniz. Ne kadar zaman yoğun olduğundan bahsetmiyorum bile. Web tasarımınız için bu mükemmel görüntüyü aramak için fotoğraftan sonra fotoğrafa bakmak yorucu olabilir. Konu harika görünüyor, ancak genel fotoğraf web sitenizde vermek istediğiniz etkiyi vermiyor. Bu da kesinlikle bir stok fotoğraf sorunu değil.

Bir fotoğrafın konusuna daha keskin bir odak getirmek isteyen tasarımcılar için, bunu yapmanın bir yolu bokeh efektidir. Özünde, özne dışındaki her şeyin odak dışında kalması için arka planın bulanıklaştırılmasıdır. Daha sık görülen bokeh örneklerinden biri, bu Photoshop eğitiminde kullanılandır.

Arka planın birkaç ampulle aydınlatıldığı açık olsa da, her biri bulanık. Bu, rastgele ışık topları gibi göründüklerini yapar. Bu, genel fotoğraf için daha yumuşak bir ruh hali yaratmaya yardımcı olur.

Photoshop Eğitimini İzleyin veya Okuyun (Çalışma Süresi: 7:49)

Dispersiyon Etkisi

Web tasarımı, kahraman görüntülere ve minimalist tasarıma doğru ilerlemeye devam etse de, bu, hareketin hala ilgi çekici olduğu ve sitenizin ziyaretçilerinin ilgisini çekmeye yardımcı olduğu gerçeğini değiştirmez.

Görüntülerine daha fazla hareket verirken düz bir site tasarımını korumak isteyen tasarımcılar için bir dağılım efekti kullanılabilir. Tasarımcılar, bir fotoğrafın konusunu inceleyerek ve küçük parçaları dışarıya doğru dağıtarak, temel görüntülere daha fazla hayat verebilir ve web sitesinin genel havasında daha iyi oynayabilir.

Photoshop Eğitimini İzleyin (Çalışma Süresi: 12:29)

Hareketli Fotoğraf Efekti

Hareketli fotoğraf efekti, bokeh ve dağılımın bir birleşimidir. Bu, bir fotoğrafın konusuna odaklanmayı ve bir bütün olarak fotoğrafa hareketi getirir.

Bu, herhangi bir tasarımcının ustalaşması için önemli bir etkidir. Niye ya? Çünkü hareket, web sitenizin ziyaretçilerinin dikkatini çekmenin ayrılmaz bir parçasıdır. Ayrıca, bir fotoğrafta neler olduğu hakkında çok şey aktarabilir,

Photoshop Eğitimini okuyun

Çizgi Roman Kitaplığı

Kaptan Amerika , İntihar Kadrosu , Deadpool , Batman v Superman , The Walking Dead , The Flash . 2016 kesinlikle çizgi romandan sinemaya/TV uyarlamasının yılı oldu.

Sitenizin tasarımına retro, çizgi roman benzeri bir stil uygulamak yerine markanızı pop kültüründe trend olan şeylerle senkronize etmenin daha iyi bir yolu var mı?

Photoshop Eğitimini İzleyin (Çalışma Süresi: 7:10)

Çift Pozlama

Web siteleri geliştirmek bazen zor bir dengeleme eylemi olabilir. Dikkat çekici görüntüler eklemek istiyorsunuz, ancak içeriğinizden herhangi bir odağı uzaklaştırmak istemiyorsunuz. Bu hikaye olmadan, ziyaretçiler ne yaptığınızı veya neden ilişki kurmaları gerektiğini nasıl bilecek?

Bazı görüntüler doğuştan bir hikaye ile doludur. Sadece bir bakış ve siteye gelen ziyaretçiler, hiçbir şey okumak zorunda kalmadan ne söylemeye çalıştığınızı bilecek. Çift pozlama görüntüleri, iki farklı ancak ilişkili görüntüyü sorunsuz bir şekilde tek bir görüntüde birleştirebilir. Bu, esasen ziyaretçilere belirli bir ruh hali veya konunun daha iyi anlaşılmasını sağlar.

Photoshop Eğitimini okuyun

Gündüzden Geceye

Photoshop'un en güzel yanlarından biri, web tasarımcılarına verilen görüntüler üzerinde daha fazla güç vermesidir. Diyelim ki ekibiniz gündüz bir fotoğraf çekimi yaptı veya gece yağmur yağdığı için ihtiyaç duydukları doğru çekimleri alamadılar.

Photoshop ile yeniden çekimlere gerek kalmamalıdır. Sitenizin tasarımına dahil etmek istediğiniz fotoğraflar bir gece çekimi gerektiriyorsa, bu efekti elde etmek için pozlamayı kolayca ayarlayabilirsiniz.

Photoshop Eğitimini İzleyin (Çalışma Süresi: 4:45)

Fotogerçekçi Simgeler

"Şeytan ayrıntıdadır", her web tasarımcısının her zaman aklının bir köşesinde tutması gereken sözlerden biridir. Bir sitenin tasarımını oluşturan ayrıntılar söz konusu olduğunda, başlamak için simgelerden daha iyi bir yer yoktur.

Kahraman görseller ve harekete geçirici mesajlar en çok dikkati çekme eğilimindedir, ancak bu her zaman böyle olmak zorunda değildir. Site genelinde ziyaretçilere rehberlik eden favicon, gevşek element simgeleri veya hatta bir maskot simgesi olsun, bu tasarım öğelerinin arka koltukta oturması gerekmez.

Web siteniz tekil bir hikaye anlatmalıdır. Hepsini birbirine bağlayan birleşik bir görünüme sahip olmalıdır. Bu nedenle, simgelerinizin düzleşmesine ve tasarımda kaybolmasına izin vermek yerine, onlara gerçekçi bir efekt uygulayarak onlara ekstra bir pop verin.

Photoshop Eğitimini okuyun

Dramatik Gölgeler

Bir sitenin tasarımı minimalist bir stil gerektirse bile, tipografiye ve temel nesnelere yine de bir parıltı ve ekstra derinlik ekleyebilirsiniz. Bu, özellikle bir sayfadaki tek öğelerse geçerlidir.

Bu çok basit bir Photoshop öğreticisidir. Yine de, metinlerine veya daha küçük tasarım öğelerine daha fazla dikkat çekmek istiyorlarsa, web tasarımcılarının ustalaşması için gerçekten yararlı bir efekt.

Photoshop Eğitimini okuyun

Metin + Fotoğraf Birleştirme

Sosyal medyanın bir markanın pazarlama cephaneliğinde böylesine güçlü bir gücü varken, teminat ve sosyal medya arasındaki çizginin bulanık olması mantıklı. Bu arada, web siteniz de buna dahildir.

Memler buna harika bir örnektir. Bir resim çeker ve ilgili metni üstüne veya çevresine yerleştirirsiniz. Bu, çoğu kahraman resminde yapılandan gerçekten farklı değil. Öyleyse neden onu bir sonraki seviyeye taşımıyorsunuz ve kahraman mesajlaşma ve fotoğrafınızı benzersiz bir şekilde birleştiren bir efekt yaratmıyorsunuz?

Photoshop Eğitimini İzleyin (Çalışma Süresi: 11:06)

Metin + Arka Plan Birleştirme

Photoshop sayesinde, web tasarımcıları web sitelerinin içeriğine ekstra kişilik kazandırmak için gerçekten harika hileler uygulayabilirler. Bu Photoshop eğitiminde, eski ve dokulu bir arka plan ile bir logo birleştirilmiştir. Ancak bu kılavuz, herhangi bir tür metin ve karmaşık arka plan katmanlama efekti için kullanılabilir.

Photoshop Eğitimini okuyun

Logo + Resim Birleştirme

Yukarıdaki iki Photoshop öğreticisi, metnin bir görüntüyle nasıl birleştirileceğine odaklanırken, bu, bir logonun bir görüntüyle nasıl katmanlanacağına odaklanır. Logo web sayfasının en üstünde her zaman mevcut olduğundan, bu web tasarımında yaygın olarak kullanılan bir şey olmayabilir. Ancak, marka kimliklerini ürün görselleriyle birleştirmek isteyen e-ticaret web siteleri için kesinlikle kullanışlı olacaktır.

Photoshop Eğitimini İzleyin (Çalışma Süresi: 11:06)

Toplama

Umarım yukarıdaki listeden gelecekteki bir projede kullanabileceğiniz veya yeni bir şey denemeniz için size ilham veren bir veya iki öğretici bulmuşsunuzdur. Divi veya Extra kullanıcısıysanız, daha da harika ipuçları ve püf noktaları için Divi 100 Maratonu sırasında yayınladığımız Photoshop'ta Divi Image Asset Hazırlama ile Yaratıcı Olmanın 5 Yolu adlı bir gönderiye de göz atmak isteyebilirsiniz.

Şimdi size gelelim: Tasarım oyununuzun seviyesini yükselten bir Photoshop eğitiminden hangi tasarım hilesini öğrendiniz?

Venimo'dan makale küçük resmi / Shutterstock.com