Idag har vi en liten samling av helt slumpmässiga men väldigt användbara designtrådar som du borde hålla bakom dig själv nästa gång du behöver en ny idé.
Jag ska visa dig ett snabbt sätt att göra en skärmdump av programvara mer intressant, hur man skapar fantastiska vektorgrafikstrukturer och ett super snabbt sätt att bygga en vektor starburst.
Breakout Skärmdump
När du utformar en webbplats för en webb- eller skrivbordsapp, kommer du oundvikligen att sluta med några skärmdumpar i din design, vilket är bra för att de gör attraktiv grafik som är super lätt att skapa. Hämta bara appen på ditt attraktiva men minsta skrivbord, klicka på en snabbtangent, lägg till lite text och du är klar!
Det här är definitivt ett vackert enkelt sätt att skapa konstverk för en webbplats, men det är värt den extra insatsen att tänka på hur du kan gå vidare och göra grafiken ännu mer intressant.
Ett super enkelt sätt att göra detta är att få skärmdumpet överstiga gränserna för bakgrundsbilden. Detta snabba och lätta trick gör att din design verkar mer levande och lagrad.
Nu skulle det långa och svåra sättet att utföra detta trick vara att maskera ut en del av bakgrunden på din skärmdump, men det är en verklig smärta. Det är mycket lättare att helt enkelt skapa en transparent PNG i ditt appfönster som inte innehåller någon bakgrund, som du sedan kan placera över allt du vill ha i Photoshop.
För att göra detta på en Mac, tryck på Kommandot + Skift + 4 för att ta fram korshåren som låter dig ta en skärmdump av ett valt område. Placera sedan markören över appfönstret och tryck på mellanslagstangenten. Korshåren ska omvandlas till en kameraikon och fönstret du svävar över bör markeras. Klicka bara för att skapa en fil på skrivbordet som innehåller det här fönstret och dess skugga på en transparent bakgrund. Windows-användare kan följa dessa steg för att snappa en skärmdump.
När du har tagit skärmdumpen i fönstret, ta sedan en bakgrund för att placera den och öppna dem båda i Photoshop.
Härifrån är det enkelt att beskära bakgrunden så att skärmdumpen tittar ut ur den. Lägg märke till att jag tog den motsatta vägen längst ner på skärmdumpen, som ligger i bakgrundsbilden.
I det vilda
Det här tricket är mycket vanligt i webbdesign just nu och kan ses på valfritt antal skrivbordsprogram och webbapps-sidor. Ett skenbart exempel är den nuvarande Sparrow for Mac-webbplatsen.
Easy Illustrator Starburst
Jag tvekar att lära dig det här tricket helt enkelt för att jag vanligtvis hatar starbursts i design. Jag kommer dock att acceptera att det faktiskt finns några lagligt coola användningsområden för dem. Ännu viktigare, jag vet ett ganska coolt trick för att göra dem som jag älskar att visa upp.
För att starta öppnar du Illustrator och ritar en cirkel. Ställ sedan cirkelens slag i en streckad linje. Parametrarna spelar ingen roll för mycket just nu, se till att du har något som ser ungefär så här ut:
Här kommer den roliga delen. Ta strokevikt på din cirkel och vrid det långt bortom någonting logiskt (i hundratals). Slutligen sätta dina första streck och gapvärden att vara identiska. Resultatet är en fin perfekt starburst.
Den fantastiska delen är att det här tricket ger dig full kontroll över linjens och luckans bredd. Här är ett lite tweaked exempel som är lite mer spritt ut.
Ta det ännu längre och lägg till några slumpmässiga värden till några av de andra punkterna och mellanrummen. Detta kommer att börja ge dig några riktigt kreativa resultat, här är ett litet litet mönster som påminner mig om en pepparmynta.
Expandera det
Nu kommer det att bli rörigt att arbeta med ett skrynkligt föremål som det här på lång sikt, så när du bestämmer dig för din allmänna form och patter rekommenderar jag att du går till Objekt> Flatt genomskinlighet. Detta kommer att ge dig en fin, utökad vektor starburst som ser ut som om du byggt det på den svåra vägen (översiktsstreck ger några konstiga resultat). Var noga med att ta bort den ursprungliga cirkelens slag för att hålla sakerna rena.
Grungy Vector Textures
Fotografiska grunge texturer är lätta att komma med, vektorgrunge texturer, inte så mycket. Lyckligtvis är det ganska lätt att skapa den senare genom användandet av det förra.
Låt oss börja med att slå upp Flickr Creative Commons för att hitta en anständig grungestruktur. Här är en bra från D. Sharon Pruitt.
Nu har jag avsiktligt valt den här eftersom den innehåller ljust repor på en mörk bakgrund, vilket verkar som om det skulle vara mycket svårare att arbeta med men verkligen inte alls.
Öppna upp texturen i Photoshop, klicka på Command + I för att inversa färgerna och plötsligt får du en fin vit bakgrund med svarta repor. Använd sedan en grundläggande nivåjustering för att få upp vita och svarta svarta. Resultatet ska se ut så här:
Spara nu bilden som en JPG och öppna den i illustratorn. Härifrån har vi några riktigt grundläggande former som kan spåras automatiskt med relativ noggrannhet. Kör Auto Trace-kommandot och ställ in parametrarna till något som visas nedan. Ett kritiskt steg här är att se till att du klickar på? Ignorera vit? kommandot så att Illustrator spårar bara de svarta delarna.
Härifrån hit du helt enkelt? Expand? knappen i menyraden. Detta ger dig 100% skalbara och lätt applicerbara grunge repor.
Vi kan kombinera detta trick med den sista och vi har en fantastisk retro bit av vektor konstverk. Ganska cool!
Slutsats
Dessa snabba tips är avsedda att expandera din väska med tricks så att du får en större idébänk att dra på på ditt nästa designprojekt. Jag hoppas att du har lärt dig en eller två och har blivit inspirerad att komma med dina egna unika idéer utifrån informationen ovan.
Lämna en kommentar nedan och låt oss veta om alla tekniker du har sett på webben men är inte riktigt säkra på hur du ska kopiera.Vi tar en titt och ser om vi kan hjälpa till i nästa design-tricks-inlägg.