Photoshop'ta Siteleri Daha Hızlı Tasarlama Yolları
Bir web tasarımcısı olarak organize kalmak zor. Sadece birkaç projeyi aynı anda dengelemekle kalmıyor, aynı zamanda sıkı son teslim tarihleri ve zorlu müşterilerle de karşı karşıyasınız. Markadan markaya sıçramak ve sürekli olarak yeni marka yönergelerini ve stillerini öğrenmek zorunda kalabilirsiniz.
Neyse ki, iş akışınızı daha verimli hale getirmenin birçok yolu vardır. Yardım etmek için, web tasarım kariyerinizde aklı başında kalmak için bu sekiz ipucunu bir araya getirdim
1. Dosyalarınızı düzenli tutun
Zihninizi korumak için yapabileceğiniz en kolay şeylerden biri dosyalarınızı düzenli tutmaktır. Tutarlı bir klasör yapısının oluşturulması ve sürdürülmesi, dosyalarınızı kolayca bulmanızı sağlayacaktır. Bir dosyayı bir diğerinden farklı bir şekilde yapılandırdığınızda, bu Final-Final-logo.ai dosyasının yerini bulmakta zorlandığınızda sorunlar ortaya çıkar.
Dosyalarınızı düzenlerken tutarlı dosya adlandırma kuralları önemlidir. Bu, sürümün içeri geldiği yerdir. Bazı tasarımcılar tarihleri kullanır, diğerleri sürüm numaralarını kullanır ve bazı kullanımları tur kullanır. Bu sizin sektörünüze ve kişisel tercihlerinize bağlı olacaktır, ancak bu iyi bir uygulamadır. Sürüm oluşturma sayesinde, özellikle referans için kaydedilmiş eski sürümleriniz varsa, hangi dosyanın en güncel olduğunu kolayca izleyebilirsiniz.
Müşterinin Round One'dan bu kahraman stratejisine geri dönmek istemesi veya Round Pro'yu mobil uygulamanızı tercih etmesi durumunda genellikle iki ila üç eski versiyonunu saklarım. Paket sıçan zihniyetinden kaçınmak için, sabit sürücünüzün batağa maruz kalmasını önlemek için eski dosyaları arşivlemek veya silmek iyidir.
Clearlink'te kullandığım örnek bir yapı.
Tutarlı bir klasör yapısının ve versiyonlama ile adlandırma kurallarının kombinasyonu da arama yeteneğine yardımcı olacaktır. Örneğin, tüm dosya adlarınızı marka adı veya kısaltmasıyla bir markadan başlatırsanız, bu markanın varlıklarını daha kolay filtreleyebilirsiniz. Bu, “ATT-logo-final.ai” yi potansiyel olarak “logo-final.ai” denilen bir denizden ayırt etmede yardımcı olacaktır.
2. Çerçevenizi anlayın
Tasarım kariyerime birkaç sene kadar öğrenemediğim bir şey, mevcut bir çerçevenin nasıl doğru bir şekilde kullanılacağıdır. Çerçeve dünyasındaki iki ağır atıcı şu anda çizme atkısı ve vakıf ama Google’ın gerçekleşmek kesinlikle yakın gelecekte onlara para için bir çalışma verecektir. Çalıştığım şirket, markalı sitelerinin çoğunu Vakfı kullanıyor.
Vakıf, düğmelerin, alanların, tipografinin, navigasyonun vb. Şekillendirilmesinin yanı sıra hayatınızı kolaylaştırmak için pek çok şeyin yanı sıra yerleşik bir duyarlı kılavuz ile birlikte gelir. Vakfın yerleşik ızgarasını PSD'lerinizde kullanarak, geliştiricinizin tasarımlarınızı kendi yaptığınız şeyden daha pixel-mükemmel bir şekilde gerçekleştirmesini kolaylaştıracaksınız. Photoshop, yalnızca ızgaralar oluşturmakla kalmayıp aynı zamanda dosya yeniden yapılandırma ve hareket etmeyi kolaylaştırmak için bunları sanat panosuna eklemleyen bu şık kılavuz düzen aracına sahiptir.
Ekran görüntüsü Vakıf Hile Sayfası
Çerçeveler, düğme stili, formlar vb. İçin iyi bir başlangıç noktası sağlar ve uygulayabileceğiniz tasarım stratejilerinin olanaklarını ve sınırlamalarını göstermeye yardımcı olur. Bu sadece tasarımınız için harika bir başlangıç noktası oluşturmaz, aynı zamanda geliştiricinizle daha arkadaş canlısı işbirliğini geliştirmenize yardımcı olur.
3. Katmanlarınızı içerik bölümüne göre düzenleyin
Çok sayıda klasör, katman, akıllı nesne vb. İle karmaşık web tasarım PSD'leri ile uğraşırken, işlerinizin dağınık olması kolaydır. 2.455 katmanı geldiğinde, PSD'nizde bir çeşit organizasyona ihtiyaç duyduğunuzu anlamaya başlıyorsunuz. Bu yüzden PSD'nizi bölümler halinde düzenlemenizi tavsiye ediyorum.
Benimki genellikle Nav, Hero, Intro, Paketler, Faydalar, Altbilgi vb. İçeren klasörlerden oluşur. Ayrıca bu klasörleri gökkuşağı renginde de renklendiririm, böylece gezinmeleri kolay olur. Bu, bölümlerin güncellenmesini ve PSD'nizi yeniden işleme koymanızı kolaylaştırır.
Dosyamı, kolay tarama yeteneği için gökkuşağı renk kodlu bölüm klasörleri halinde düzenlerim.
Örneğin, kahraman bölümünü büyütmeniz gerekiyorsa, aşağıdaki tüm klasörleri tek bir birim (tutma komutu) olarak kolayca sürükleyebilir ve ardından güncelleme yapıldıktan sonra bunları geri sürükleyebilirsiniz. Bu strateji ayrıca geliştiricilerin ve diğer tasarımcıların dosyanızı kolayca bulmasına yardımcı olur. “Hero” ve “Nav” gibi anlaşılabilir isimler kullanarak, yeni bir tasarımcı kolayca klasöre atlayabilir ve ihtiyaç duydukları değişiklikleri yapabilir.
Bazı tasarımcılar, bireysel katmanları adlandırabiliyorlar ki bu da inanılmaz derecede faydalı olabilir ancak biraz zaman alıcı olabilir. Katmanlar, "katman" olarak ayarlandığında otomatik seçim aracıyla kolayca bulunabileceğinden, bu günlerde bireysel katmanlara kolayca erişilebildiğinden, bireysel tasarımcısına katmanlarını nasıl düzenlemek istediklerine bağlıdır. Asıl konu şu ki.
4. Normalde kullandığınız tüm klavye kısayollarını ezberleyin
Bu, verimlilik için bir biggie. Düzenli olarak belirli bir tuş komutu kullanarak kendinizi bulursanız, onu ezberleyin. Ana klavye kısayollarınızın tümü aşağıdaysa, verimliliğinizi katlanarak artırırsınız.
Bazı önemli olanları kaydetme, yazı tipi boyutu ve lider, katman düzeni, web için kaydetme ve daha birçok şey arasında opaklık. Photoshop ayrıca size özel kısayollar oluşturma olanağı verir. Kitabımda, ezberlemenin en önemli komutu dosyanızı kaydetmektir. Adobe'nin rastgele çöküşleri nedeniyle, kaydettiğiniz ilerlemeyi kaybetme riskinden ziyade çoğu kez tasarruf etme konusunda hata yapmak iyidir.
Adobe, klavye kısayollarınızı Düzenle> Klavye Kısayolları'nın altında özelleştirmek için size seçenek sunar.
Kısayollar ayrıca katmanlarınızı içerik bölümü klasörlerine göre düzenler (yukarıda belirtildiği gibi). Bir klasörün üst ve alt kısımlarına, klavye kısayolları kullanılarak katmanları düzensiz bir dosyada yeniden sıralamaktan daha kolay hale getirmek daha kolaydır. Bu, tasarladığınız sırada dosyanızı düzenlerken devreye giriyor. Sık kullanılan klavye kısayollarını ezberlemek ve katmanlarınızı düzenli tutmak, verimliliğinizi büyük ölçüde artıracak ve diğer tasarımcıların dosyalarınızla birlikte çalışmasına yardımcı olacaktır.
5. CC Kütüphanelerini Kullanın
Adobe'nin CC'yi oluşturduğundan beri eklediği en iyi şeylerden biri kitaplıklardır. Onlardan haber alamazsan, buna bir göz atmalısın. inanılmaz öğretici bunları nasıl kullanacağına.
Her tasarım ekibinin bu harika özelliği kullanması gerektiğini düşünüyorum. Kütüphaneler, renkler, yazı tipi stilleri, fotoğraflar, simgeler ve semboller (başlıklar ve altbilgiler gibi) gibi varlıklarla bir marka kütüphanesi oluşturmanıza olanak tanır. Kütüphaneler sayesinde, tek bir marka kütüphanesi kullanarak birden fazla kuruluşun reklamlarıyla kolayca işbirliği yapabilirsiniz.
Kütüphaneler, renkleri değiştirmek ve metin stillerini güncellemek için bir düğmeyi tıklatır. Ayrıca, PSD'ler arasında hızlı bir şekilde yansıyan güncellemelerle tek bir yerde kolayca güncellenebilecek marka simgelerini depolamaya da yardımcı oluyorlar. Bu, sitenizdeki üstbilgiler ve altbilgiler için inanılmaz derecede faydalıdır ve proje boyunca küçük güncellemeler yapmanız muhtemeldir.
Tasarımım boyunca yazı stilleri için CC Libraries kullanıyorum. Masaüstü, tablet ve mobil uygulamalar için kahraman kopya, başlıklar, alt başlıklar, gövde kopyası, yasal uyarılar vb. İçin stiller kuracağım. Görünüm geçişi ile ilgili olarak, kolay tarama kabiliyeti nedeniyle liste biçimini kiremit görünümünden daha fazlasını kullanarak buluyorum.
Bir ortak çalışan olarak görüntülenen kitaplık öğeleri
Kütüphaneler ekip işbirliği için de harikadır. Kitaplığı düzenleyip ekleyebilmeleri için diğer reklam öğeleriyle ortak çalışma yapmayı tercih edebilirsiniz ya da kolay erişim için kitaplık bağlantısını paylaşabilirsiniz. Ayrıca “Belge'den Yeni Kütüphane Oluştur” özelliğine de sahipler, ancak kütüphaneyi kendim oluşturmayı tercih ediyorum, bu yüzden organize olmaya devam ediyor ve sadece en alakalı varlıkları var.
Ne yazık ki, kütüphaneler için bir kaç olumsuzluk söz konusudur, bunlardan biri metin için ayrı karakter ve paragraf biçimlerinin olmamasıdır. Karakter stilimi ayrı bir kutuya uygulayarak ve ardından metin kutularını dosya içinde yönetmeyi kolaylaştırmak için farklı stilleri bir kutuya yapıştırarak çalışıyorum. Başka bir dezavantajı, şu anda bir karakter stilini genel olarak güncelleyememenizdir. Şu anda, kütüphane içinde kategoriler içinde alt klasörler (renk, karakter stilleri, vb.) Oluşturmak için hiçbir organizasyon yeteneği yoktur, ancak umarım Adobe bunun üzerinde de çalışmaktadır.
CC Libraries'in şu anki yolu, en son güncellenen / eklenen varlığın yukarı çıkacağıdır. CC Kitaplığı renkleri metin kutularındaki tek tek metinlere uygulanamaz ve yalnızca şekillere ve tüm metin kutularına kolayca uygulanır. Eminim Adobe bu sorunları düzeltmek için çok çalışsa da, bu yüzden de özellikle eksiler eksilerden ağır bastıkları için fazla endişelenmiyorum.
6. Görüntüleri ve vektörleri akıllı nesne formatında saklayın
Dosyanızı daha büyük hale getirmesine rağmen, resimlerinizi ve vektörlerinizi akıllı nesne biçiminde tutmak, gelecekteki tasarımcıların PSD'lerinizi düzenlemesini kolaylaştırır. Resim şunu: istemci, bir kahraman fotoğrafının yeniden kırpılmasını ve bir vektör simgesine küçük ince ayarların yapılmasını içeren düzenlemelerle birlikte gelir. PSD daha küçük, rasterleştirilmiş bir versiyondan ziyade tam çözünürlüklü fotoğraf içeriyorsa, bu daha sorunsuz yapılır. Vektörlerin, rasterleştirilmiş grafikler yerine Illustrator'dan akıllı nesneler olduklarında ince ayarlanması da kolaydır.
Akıllı nesne biçiminde fotoğrafa sahip olmanın bir diğer yararı, bunları PSD'ler olarak kaydettiğinizde ve daha sonra bunları akıllı bir nesne olarak dosyanıza yerleştirdiğinizde gelir. Yerleştirilen bir fotoğraf PSD'sini kullanmak, kaynak dosyanızı dağıtmadan ayrı, içerilen fotoğraf dosyası içinde ayar katmanları ve düzenlemeleri eklemenizi kolaylaştırır. Akıllı nesneleri kütüphane grafikleri olarak kullanmak size daha fazla kazanan bir kombinasyon sunar. Vektör nesnelerini kolayca düzenleyemezsiniz, aynı zamanda kütüphane grafikleri tüm uygulamalarda güncellenir.
“Hero Illustration” grafiği, ana dosyanın karmaşasını minimumda tutmak için ayrı bir PSD'de düzenlenebilir.
7. bir stil kılavuzu oluşturun ve ona sopa
Birçok marka, yazı tipleri, renkler, fotoğraflar, simgeler, çizimler vb. Söz konusu olduğunda takip etmeniz için genel bir stil kılavuzuna sahip olacaktır. Bu, bir kaynak olarak yararlıdır ancak web sitenize özgü stilinizde her zaman tutarlı olmayacaktır. . Çalıştığım her belirli site için web stili kılavuzları oluşturarak verimliliğimi büyük ölçüde geliştirdim.
Bazen markalar farklı stillere sahip birden fazla siteye sahip olur, bu yüzden her site için bir tane olduğundan emin olurum. Bu yüzden tasarım yaparken tutarlı kalabiliyorum. Bu ayrıca düğmelere, simgelere, çizimlere, fotoğraflara vb. İhtiyaç duyduğumda kolay bir sürükle-bırak kaynağını yaratır. Bu sadece bir tasarımcı olarak sizi daha verimli hale getirir, aynı zamanda site genelinde stilinizde tutarlı kalmanıza yardımcı olur.
Bölümler arasında hangi boşlukları kullanırım? Stil rehberine göz atın! Ana düğme rengi ve tekrar doldurma neydi? Stil rehberinden al! Bu aynı zamanda diğer tasarımcıların site tasarımlarına kolaylıkla kolay ve verimli bir şekilde geçmelerine yardımcı olacaktır. CC Kitaplıklarının stil rehberi ile kullanımını birleştirirseniz, oyunun daha da ilerisinde olursunuz.
Üzerinde çalıştığım tüm farklı markalar için bir PSD stili kılavuzu oluşturuyorum, böylece düğmeler ve simgeler gibi öğeleri kolayca yakalayabiliyorum.
Birçok tasarımcı, tasarımda yeni bir sorunla karşılaştıklarında yeni stiller eklemek için cazip geliyor. Tutarlılık açısından, bundan kaçınmak ve her zaman stil rehberinizde oluşturduğunuz standartlara bağlı kalmak en iyisidir. Yeni katmanlar ve stiller eklerseniz, bunların tüm siteye uygulandığından emin olun.
Oluşturulan daha yeni stiller, daha karmaşık gelecekteki tasarımlar olacak ve yeni tasarımcılar için projelere atlamak ve tasarımları tutarlı tutmak için daha zor olacak. Birçok durumda, kullanıcı deneyimi söz konusu olduğunda tutarlılık sürekli yenilikten daha önemlidir. Bir projenin başlangıcında web stili kılavuzunu oluşturmak için size daha fazla zaman ayırabilse de, gelecekteki tüm sayfalarınız için verimliliğinizi artıracaktır.
Brad Frost'tan öğrendiğim en iyi uygulamalardan biri, arayüz envanteri Tasarım sürecinde veya üzerinde çalışacağınız mevcut bir sitede. Bir arayüz envanteri, ekran görüntüleri aracılığıyla tüm farklı metin stillerini, düğme stillerini vb. Toplamaktan ve tutarsızlıkları bulmak için bunları derlemekten oluşur. Güncellemeleri ve geliştirmeleri önermek için bulgularınızı müşteriye sunabilirsiniz.
Web siteleri, varoluşları nedeniyle birden fazla tasarımcıya dokunduğundan, işler tutarlılık bölümünde oldukça tüylü olabilir. Sayfadaki öğeler için birleşik bir tasarım stili bulduğunuzda, stil rehberinizi herkesin güncel olmasını sağlayacak şekilde güncellediğinizden emin olun.
http://bradfrost.com/blog/post/interface-inventory/ adresinden arayüz envanter ekran görüntüsü
8. Bölümler arası işbirliğini teşvik etmek
Pazarlama üretiminde kariyer yapan birçok kişi (tasarımcılar, geliştiriciler, reklam yazarları, vb.) İçe dönük olma eğilimindedir, bu yüzden işbirliği alanına geldiğinizde konfor bölgenizden çıkmak zordur. Uzmanlık balonunuzdan ayrılmanız da zordur, özellikle de alanınızdaki insanlarla ilişki kurmak daha kolay olduğu zaman. Bazen garip ya da rahatsız edici olsa da, balonunuzu bırakarak ve diğer departmanlardan insanlarla düzenli olarak işbirliği yapmak, tasarımlarınızın kalitesini verimliliğinizle birlikte büyük ölçüde artırabilir.
Bunun en iyi örneği, tasarımcıların ve geliştiricilerin yeniden tasarlamada işbirliği yapmasıdır. Kullanmakta olduğunuz çerçeveyi gözden geçirmek, ızgara sistemi üzerinde kendinizi eğitmek ve olasılıkları değerlendirmek için geliştiriciyle önceden görüşmelisiniz. Tasarım çalışması tamamlandığında, Photoshop Kitaplığınızı paylaştığınızdan emin olun, böylece geliştirici renk paletine, yazı tipi stillerine vb. Kolayca erişebilir. Ayrıca, stil rehberini önceden tüm bileşenlerle birlikte paylaşmak da yararlıdır iyi bir başlangıç başlatmak için tasarlanmış.
Ekibinizdeki kütüphaneleri kullanan diğer tasarımcılarla işbirliği yapmak, tutarlı kalmanıza ve daha verimli olmanıza yardımcı olacaktır. Kütüphane ve stil rehberi güncellemeleri hakkında Sanat Yönetmenine veya En Üst Düzey Tasarımcı sorumluluğuna sahip olmak, karışıklığı ortadan kaldıracak ve markalamayı tutarlı tutacaktır. Güncellemeler yapıldığında bir iletişim hattı olduğundan emin olun, böylece herkes aynı sayfada olur.
Aklı başında kal
Web tasarımı bazen ezici ve zorlayıcı olabilir. Her zaman böyle olmak zorunda değil. Photoshop verimliliği ile ilgili bu basit ipuçlarını takip ederek, stresinizin iyi bir kısmını hafifletebilirsiniz. Bu sadece sağlığınızı iyileştirmekle kalmayacak, hem iş hem de yaratıcı taraftaki yöneticiler ve yöneticiler, sıkı çalışmanızı gerçekten takdir edecek ve bunun için size övgü verecektir. Sonuçta, herkes daha tutarlı, verimli, güzel hazırlanmış bir tasarıma sahip.