Güzel bir WordPress web sitesi tasarlamak için bir eskiz kullanmak
2008 yılında, daha az bilinen bir geliştirme şirketi, Bohem Kodlama, Formlar ve Bir Kroki yaptı. Bu uygulama internet genel kargaşasında uzun süre kayboldu, ancak son zamanlarda kalkmıştı ve böyle olmalı. Sketch 3 şimdi sadece Photoshop ve Illustrator için iyi bir alternatif değil, aynı zamanda özellikle odak noktanız bir web tasarımı ise, birçok yönden de aşıyor. Eskizin web sitesi dikkate alınarak yapıldığı açıktır, ancak kullanıcı arayüzüne girilen ayrıntılara ve dikkatin dikkati birçok tasarım çalışması için iyi hale getirir. Hatta Invision dahil birçok farklı hizmetle entegre edilmiştir.
Birçok projem için kullanıyorum ve tavsiye etmek için yeterli değil.
Belki de en yakın uygulama, web geliştirmeye odaklanan Adobe havai fişeklerdir. Ne yazık ki, Adobe bu ürünü durdurdu, ancak yine de kullanabilirsiniz. Bu oldukça sağlam ve ücretsiz hatalar, ancak yakalamanın yeni bir versiyonu olmayacak. Bir Eskiz Kullanma: Eskiz’i ilk kez kullanmaya başladığında yapabileceğiniz ilk eylem öğesini girme yeni bir öğe eklemektir. Başlamak en kolay şekildir, sekiz vardır: çizgiler, oklar, dikdörtgenler, ovaller, yuvarlak dikdörtgenler, yıldızlar, çokgenler ve üçgenler. Sağda, birkaç değiştirilmiş özelliğe sahip bir dikdörtgen görebilirsiniz. Mülk müfettiş panelini kullanarak, boyut, konum, sınır yarıçapı, opaklık, karıştırma, dolum, sınırlar, gölgeler ve diğerleri dahil olmak üzere şeklin birçok yönünü değiştirebilirsiniz. En iyisi, daha karmaşık tasarımlar yapmak için içeriği, sınırları ve gölgeleri ayarlayabilirsiniz.
Şekil ve bazı özellikler. Başlangıçta Müfettiş panelinin kullanımının zahmetli olacağını düşündüm, ama yanıldığım ortaya çıktı. Yeni bir web sitesi oluştururken, geliştiriciye mükemmel bir şekilde planlanan bir tasarım sunabilmek istersiniz. Geliştirici, iki widget arasındaki mesafeyi veya post başlıkları ile meta veriler arasındaki mesafeyi gerçekten ölçebilirse, ayrıntıları ve biraz bilgiyi bulmak için size geri dönmeleri gerekmez. Müfettiş paneli, pikseli mükemmel bir şekilde yerleştirmenizi sağlar. Mükemmel bir otomatik kılavuzla birlikte, başarılı Photoshop’u asla düşünmeyecek ve tekrar otomatik olarak fotoğraf çekmeyeceksiniz! Vektör türüyseniz, istediğiniz herhangi bir şekli yapmak için Photoshop veya Illustrator’da olduğu gibi bir Bezier eğrisi kullanabilirsiniz. Arka planda ne olduğunu merak ederseniz, Bezier eğrisinin nasıl çalıştığı hakkında olağanüstü bir video buldum-bu çok ilginç! Bezier eğrisini kullanarak her şeyi çizin.
Yukarıdaki ekran görüntülerinden de görebileceğiniz gibi, birkaç arka plan, bazı sınırlar, opaklık değiştirebilir, gölgeleri ekleyebilir ve önceki şekil için olabildiğince özel şekillerle diğer tüm harika şeyleri yapabilirsiniz. Metin ve görüntüler ekleyin, elbette oldukça standart. Sadece “T” ye dokunun, tıklayın ve yazmaya başlayın. Görüntüleri yalnızca uygulamaya sürükleyip bırakarak veya panodan kopyalayarak ekleyebilirsiniz. Görüntülerin yerleştirilmesinden sevdiğim şey, görüntüyü yerleştirdikten sonra kesmenin ne kadar kolay olduğu. Çift tıklayın, Seçin ve Kes’i tıklayın. Artboards benim en sevdiğim özelliklerden biri. Çalışma alanınızı farklı segmentler halinde gruplamanıza izin verir. Bu, bir yan masaüstü ve hücresel ekran oluşturmak için idealdir. Kullanılabilecek birkaç hazır artma kabı vardır, ancak bunu kendiniz kolayca yapabilirsiniz.
Semboller eklemek, daha hızlı ve daha tutarlı bir şekilde çalışmanıza olanak tanıyan güçlü bir özelliktir. Semboller, gruplandırılmış özel nesne türleridir. “Satın Al” düğmesi yapabilir ve bir sembol yapabilirsiniz. Bu sembol düğmenin arka planını ve metnini içerecektir. Daha sonra bu sembolü herhangi bir yere ekleyebilir ve bunlardan birini diğerini güncelleyecektir. Bunu aşağıda biraz daha ayrıntılı göreceğiz. Eskizde hassasiyetle yeni bir nesne yapın.
İş organizasyonunuzu ayarlamak, çizimin Photoshop’un dışında çok daha üstün olduğu başka bir alandır. Çok organize ve mantıklı belgeler oluşturmak için kullanabileceğiniz beş özellik vardır: sayfalar, sanat panoları, katmanlar, gruplar ve semboller.
Sayfalar, örneğin bir web sitesinden farklı sayfaları görüntülemek için kullanılabilir. Her sayfanın elbette kendi katman koleksiyonu vardır. Google’ın belgelerinde farklı elektronik tablolara sahip olmak gibi. Artboards, tasarımınızın farklı görünümünü ayarlamak için kullanılabilir. Aynı sitenin tabletleri ve/veya hücresel versiyonları için bir ekran oluşturmak için kullanıyorum. Ayrıca tasarım öğelerini belgelemek için Artboard’u da kullanıyorum. Bir tipografi için, biri genel unsurlar için vb. Düğmeler için sanat tahtası yaptım. Katman, Photoshop veya diğer katman özellikli yazılımlarda olduğu gibi çalışır. Katman yukarıdan aşağıya sıralanır, listedeki katman ne kadar yüksek olursa, “ön” ekrana daha yakın olur. Katman basit bir nesne (metin, şekil, görüntü vb.) Olabilir veya bir grup veya sembol olabilir. Grup basit bir katmanda gruplandırılmıştır. Birkaç katman seçmek için komut veya katman tıklayın ve bir grup oluşturmak için grup düğmesini (veya komut + g tuşuna) tıklayın. Grup yapıldıktan sonra, içerdikleri tüm katmanlar, adlandırabileceğiniz (ve yapmanız gereken) klasöre girecektir. Ana ekrandaki gruptaki herhangi bir unsuru tıklamak, tüm grubu hareket ettirmenize izin verecektir – çok pratik. Katmanlar, sanat tahtaları, gruplar ve semboller, gruba girmek ve içindeki öğelere ulaşmak için ana alanda iki kez tıklayabilir. Sadece bu öğeyi manipüle edin.
Semboller özel gruplardır. Semboller gruplarla aynı şekilde çalışır, ancak belgenin her yerinde sembolleri değiştirme, aynı türdeki diğer tüm sembolleri otomatik olarak günceller. Bu, tasarımınız boyunca görüntülenen düğmeler ve diğer genel öğeler yapmak için çok kullanışlıdır. Metin her zaman bir tasarımın büyük bir parçası olmuştur ve Photoshop’un bunu kolaylaştırmadığı bir şey olmuştur. Eskiz, işinizi çok daha tutarlı hale getirecek metin stilleri eklemenizi sağlar. Microsoft Word veya Apple sayfalarından beklediğiniz gibi çalışırlar. Metin katmanını seçin ve tüm özellikleri anında değiştirmek için stili seçin. En iyisi, her yerde stili değiştirmek, metni her yerde aynı stille güncelleyecektir. Bu, birkaç sanat ve birkaç sayfada tutarlı widget’lar, sayfa başlıkları ve diğer metin tabanlı malzemeler yapmak için iyidir
Eskiz eklentileri çizimleri daha iyi hale getirmek için eklentileri kullanabilirsiniz. Birçok eklenti sayfası var ve GitHub’da daha fazlasını bulacaksınız. Favorilerimden biri metin taban çizgisini hizalamaktır. Metnin seviyelendirilmesi oldukça zordur, çünkü çizgi öğesinin yüksekliği nedeniyle dikey seviyelendirme doğru değildir. Bu eklenti, farklılıkları hesaplar ve metni seçilen öğenin ortasında uyumlu hale getirir. Düğme mükemmel hizalandı, işte burada! Ben de çizimsiz BT çizim eklentisini de seviyorum. Dikdörtgen görüntüler ve her zaman şaşırtıcı olan Flash’tan rastgele fotoğraflar çekin. Maker’dan Bu Demoyu görün: Unplash It Sketch Plugin Demo
Eskiz paleti, belirli bir renk paleti (belki de tüm projeler) ile çalıştığınız projeler için yararlıdır. Renkleri çok kolay saklayabilir ve yükleyebilirsiniz, ardından beklendiği gibi istediğiniz zaman seçebilirsiniz. Test verileri yapmak her zaman tasarımcı ve geliştirici olarak çalışmalarımızın büyük bir parçasıdır. Tasarım çalışmalarında, çoğu birçok kopyadan oluşur ve daha sonra yazın. Bu göreve yardımcı olan birkaç harika eklenti var. Eskiz için Personas, doğrudan belgenizde kullanıcı verilerini üretmenize olanak tanır, işte bu şekilde (proje üreticisine teşekkür ederiz): Eskiz için Personas eklenti demosu eklentilerin özel tasarım ihtiyaçları için nasıl yapıldığını seviyorum. Fetcher Artwork, öğeleri seçmenize, yazarı belirlemenize, ardından albüm kapağının Last.fm’den doğrudan tasarımınıza çekildiğini beklemenize olanak tanır. Bu, eklentinin yazarının sahibi olduğu bir demo. Demo Eklentisi Eskiz Sanat Alıcılar Dışarıda çok yararlı başka birçok eklenti var, ama bence bu gerçekten daha hızlı ve daha iyi çalışmanız için sizi güçlendirmek için üçüncü taraf hizmetleri kullanma yeteneğini gösteriyor. Sketch için favori eklentileriniz varsa, lütfen yorumlarda paylaşın! Peki çizim neden daha iyi? Benim için eskiz bir hediye. Sonunda bir web tasarımı için Photoshop’u attım! Bunun için birkaç nedenim var, böylece nereden geldiğimi görebilmeniz için ayrıntılı olarak tartışacağım: 1. Süper hassas bir taslak alabilirsiniz. Bir örnek, ayarlanabilir bir ızgara ve bloke etmek yerine gerçekten yardımcı olan çok daha iyi bir otomatik kılavuzdur (hatta öğeleri aynı mesafede ayarlamanıza izin verir). Ayrıca piksel değerini yazarak sayılarla tasarlama yeteneğinden de keyif alıyorum. Bu, iletişim süresini en aza indiren ve verimlilik ve netliği en üst düzeye çıkaran mükemmel piksel tasarımına yol açar. 2. Vektör yaklaşımı bazı vektörleri sevmek benim için kolay, ama sevdiğim şey onunla kolayca çalışma yeteneği. Photoshop, bunun birkaç nedenden dolayı karmaşık olması gerekmez. Photoshop CC’nin en son sürümüne sahibim ve tasarıma bir SVG simgesi eklemeye çalışırken bir hata aldım: “Dosyaları açabilen parser veya dosya biçimi olmadığı için ‘1445368362_bubble.svg’ belgesini yerleştiremiyorum.”
Eminim özel vektör editörleri yapan şirket bunu öğrenebilir. Eskizde, SVG simgemi yalnızca uygulamaya sürükleyip bırakıyorum ve beklediğiniz gibi görüntüleniyor. Sevdiğim vektör düzenlemenin bir başka yönü, birleşme, azaltma, kavşak ve fark için dört düğme. Bu, iki form seçmemi ve iyi bir şey yaratmak için bunları birleştirmemi sağlıyor. Aşağıdaki tebrik kabarcıklarını yapmak için bir dikdörtgen, sonra bir üçgen ekledim. Düzgün konumlandırmak için akıllı bir kılavuz kullanıyorum, her ikisini de seçiyorum ve bir form haline getirmek için bir kombinasyon kullanıyorum. Çok kolay. Eskizde kombine form
3. SVG İçe Aktarma Destekleme SVG görüntülerini (sadece simgeleri kullanıyorum) doğrudan uygulamaya nasıl çizebileceğiniz ve yayınlayabileceğiniz hakkında konuştum. Tüm katmanları almak ve simgenin kendisini düzenlemek için görüntü klasörünü genişletebildiğimde çok şaşırdım. SVG simgesi katmanını düzenleme
4. Maskelemede ne kadar harika, eskizin doğru yaptığı başka bir alan – bu kadar pürüzsüz olmasını beklemiyordum! Yapmam gereken yuvarlak bir görüntü yapmak için üzerine bir daire çizmek, her iki katmanı seçmek ve maske düğmesine basın. Voila, yuvarlaklık elde edildi! Ne olduğu katman panelinde de çok açık, benim gibi, gerçekten doğru olan tasarımcı olmayan insanlar için büyük bir katma değer.
Eskizde dairesel bir maske uygulanır
5. Mükemmel piksel mesafesi mesafeleri eşit olarak ayarlamanız gereken birçok durum vardır ve eskizler bunu başarmanıza yardımcı olacak olağanüstü işler yapar. Bir nesne oluşturun, Seçin, Sağ Tıklayın ve Bağlam Menüsünün altında yatay ve dikey olarak dağıtma seçeneğini göreceksiniz. Cazibe gibi çalış. Her. Üniversite mezunu. Zaman. 6. Easy Sketch’in dışa aktarılması da çok güçlü bir dışa aktarma seçeneği sunar. Böyle bir şekilde, tüm öğreticiler size istediğinizi nasıl elde edeceğinizi göstermek için ortaya çıktı. Tüm sayfaları, sanat tabanlarını ve hatta belirli unsurları dışa aktarabilirsiniz. 7. Çabuk, taslaktaki performans sorunu hakkında bir rapor duydum, ancak uygulamayı kullanmaya başladığımda bu düzeltilmiş olmalı çünkü hiç sorun yaşamadım – tam tersi. Siteyi geçen yılın sonunda yeniden tasarladım ve Photoshop dosyası 100MB alanında bir yerdeydi. Oldukça güçlü bir iMac var ve bazen durgunlaştım, bazı hasatlar için uzun süre beklemek ve belgeyi kaydırırken doğranmış bir performans elde etmek zorunda kalıyorum. Birçok unsuru dürtmek istediğimde ne olacağını tartışmak bile istemiyorum (5-6 saniye beklemek). Aynı tasarımı, PSD dosya boyutlarının dörtte biri – 25 MB civarında ölçen dosyalarda ve dosyalarda yeniden yaratıyorum. Hiç yaptığım herhangi bir yavaşlık yaşamadım – her şey Photoshop’tan çok daha hızlıydı. Aslında sayfadaki tüm öğeleri seçtim ve dürttüm, hemen sola 10 piksel bıraktılar. Her şeyi tıklayıp sürükleyebilirim, sorunsuz bir şekilde verilir.
Bundan hemen sonra, sadece iki açının yuvarlandığı bir dikdörtgen yapmak istiyorum. Sanırım iki form yapmam ve birleştirmem gerekiyor, ancak yarıçapın her köşe için ayrı ayrı kontrol edilebileceğini anlıyorum. Her şeyi hatırlayamıyorum, ama gerçekten gözyaşı döktüğüm en az 5-6 an var çünkü belirli bir şekilde bir şeyler yapmak istiyorum ve eskiz orada bir seçeneği var ya da işleri daha iyi yapıyor. Hiçbir şey bundan daha iyi olamaz! Bir eskizle oluşturulan web sitesi, şimdi Bitesize Bio adlı bir moleküler biyoloji web sitesini yeniden tasarlamak ve yaklaşan Ghacks Popüler Teknoloji bloglarını yeniden tasarlamak da dahil olmak üzere, şimdi 3-4 WordPress proje tasarımını ele almak için kişisel olarak kullandım. Eskizle yeniden tasarlanmış ghacks
Fleet Feet Sports Shoe Company de taslakta tamamen tasarlanmıştır: Benim tarafımdan tasarlanmadığını söyleyebilirsin çünkü gerçekten iyi görünüyor
Bu gerçek dünya örneklerinin bazılarına ek olarak, kendi tasarımınız için bir temel olarak kullanabileceğiniz bir eskiz dosyası olarak eksiksiz bir web sitesi konseptini bulabilir veya sadece başkalarının bir şeyler yapma şekli hakkında biraz bilgi edinebilirsiniz.İyi bir örnek, bu portföy kavramıdır: taslaktaki portföy kavramı.
Bir sonraki projeniz için bir taslak kullanarak ilk önce bu yılın başlarında bir taslak kullandım ve gördüğünüz gibi çok fanatik oldum.Başkalarının görüşleriyle ilgileniyorsanız, orada birçok inceleme var.Geçiş yapmayı düşünürseniz ilginç olabilecek bazı kişisel hikayeler: Bir taslak kullanarak bir yıl
Eskiz 3 ile bir ay Eskizleri Bul
Sketch vs Photoshop İOS Sketch 3’ün gelişimini düzenleyin
Sketch 3 hakkında ilk kez ne düşünüyoruz Bu, bir öğrenme eğrisi bile (veya sadece çok sığ) olmadığı bir uygulamadır. Hemen beğendim çünkü istediğimi, tam da istediğim gibi yapmama izin verdim ve Photoshop’ta her zaman arzuladığım özelliklerle. Eskiz geliştiricileri, görünen hataları düzeltmek için çalışmaya devam ediyor, neredeyse her zaman başarılı. En etkili senaryo, birçok hatayı düzeltmeden önce bile, birçok kişinin onu gözden geçirmesidir. Okuduğum neredeyse tüm incelemeler, “Eskizde çok fazla hataya sahip olmasına rağmen, ekibimiz hala UI tasarımı için daha iyi olduğuna karar veriyor.” Aynı şeyi hissediyorum, bu uygulamanın her olumsuz tarafı, içerdiği tüm mucizeler tarafından o kadar kolay yeniliyor, böylece gereksiz görünen diğer şeylere geri dönecekler. Peki Photoshop atmanın zamanı geldi mi? Bir web tasarımcıysanız, mümkündür. Photoshop, Gelişmiş Fotoğrafı ve Eskiz’e ait olmayan birçok ek işlevi düzenleme yeteneğine sahiptir, ancak mesele şu ki gerekli değildir. Hala Photoshop’u kuruyorum, ancak gelecek ay tamamen atacağım ve bunun yerine PixelMator kullanacağım. İhtiyacım olan her şeyi ücretlerin küçük bir bölümünde yapıyor. Eskiz denemediyseniz, bunu yapmanızı şiddetle tavsiye ederim. Bir süre kullandıktan sonra lütfen bize bir yorum yapın ve bize fikrinizi söyleyin. İyi bir eklenti tavsiyeniz varsa, bunu takdir edeceğim ve her zaman iyi bir uzatma arıyorum.
Etiket:
tasarım
eskiz
