Ibland har du en perfekt bra layout, men din design behöver lite extra för att avsluta det. Tyvärr är det lätt att fastna och bli helt tom för idéer.
Idag ska vi hjälpa dig att lösa detta problem genom att lyfta fram fem slumpmässiga designidéer som du kan införliva i din baksida med designtrådar. Låt oss börja!
Streckade linjer
Streckade eller prickade linjer är ett bra sätt att få lite känsla för dina mönster. De är super lätta att genomföra och tenderar att föra några gamla skolklasser till en design. I Illustrator är det enkelt att skapa en streckad stroke som att öppna "Stroke"? palett.
Försök att ändra användningen av streckad linje. Placera en vertikalt mellan objekt i en horisontell lista, prova bara en text understruken eller skapa en komplett rektangel.
Du kan också uppnå en streckad eller prickad linje med ren CSS via gräns fast egendom.
Traceflow, webbplatsen som visas nedan, är ett utmärkt exempel på att använda tekniken med streckade linjer. Här är ett skott av deras navigeringsområde:
sydd
Samma webbplats visar en något förändrad version av tekniken. Om du tar de streckade linjerna lite så att de är förskjutna från kanten, är resultatet ett syigt utseende.
Easy Text Lockups
Textlåsningar som ovanstående är extremt populära just nu. De kommer sannolikt att vara en dålig clich? inom en snar framtid men för närvarande verkar alla älska dem. De ser ut som en riktigt snygg design men är faktiskt ganska lätta att bygga. Ta bara några teckensnitt som ser bra ut och gör linjebredden lika. Var noga med att ändra antalet ord per rad så att vissa ord är större än andra och betoningen placeras rätt där du vill ha den.
Prova att blanda i enkel men attraktiv grafik med typen för ökat intresse. Lägg märke till hur jag faktiskt använde dubbellinjeformen av en av typsnitt som inspiration för en vertikal uppdelningslinje. Detta är ett läroboksexempel på revisorens rektor. Du bör leta efter liknande möjligheter i ditt eget arbete.
Det som gör dessa så dangla lätt är att de människor som skapade teckensnitt har gjort allt arbete. Den estetiska överklagandet ligger i brevformarnas attraktivitet. Detta är en av de främsta orsakerna till att designers älskar typografi så mycket. Någon annan gör allt arbete, vi kasta det på en duk och få krediter!
Självklart har alla de riktigt bra textlåsningarna lite mer arbete i dem. Kolla in detta bra exempel från Deda.me, som visar en bra variation med text, konstverk och färg. Det finns också en massa coola hovereffekter på jobbet här så var noga med att stanna vid sidan och kolla.
Klistermärke Effekt
Klistermärkeeffekten är så löjligt lätt att det är dumt. Allt du verkligen gör är att ta nästan alla bilder och kasta den på en bakgrund med en tjock vit stroke och kanske lite skugga. Detta är ett bra knep att använda när du ska ha en ljus, rolig och retro känsla. Eftersom denna teknik gör sig till ljusa färger och intressanta illustrationer är det självklart perfekt om du designar något för barn.
I Photoshop är allt du behöver göra för att sänka stroke tills det ser bra ut. För text kan du behöva gå in och manuellt fylla i de negativa områdena i bokstäverna, men det är vanligtvis en super snabb process.
Vi kan se denna teknik i akt på, givetvis, en klistermärke webbplats! Kolla in bilden nedan från Sticker Mule.
Ett billigt alternativ till en bra klättra väg
Detta trick kan också användas för att lösa en gemensam designhinder. Om du är för lat eller oerfaren att bygga en rätt klippning kan det vara svårt att placera ett foto som togs på en vit bakgrund på en mörk duk utan att några artefakter visade sig.
Här är allt du behöver göra, gör ett riktigt snabbt och smutsigt val, använd sedan en tjock vit stroke. Resultatet ser ganska avsiktligt ut, ingen kommer ens veta att du suger på Photoshop!
Rubrikrubriker
Vill du ha ett roligt sätt att leva upp en rubrik? Stick det på en banner. Detta är en annan trend som är ganska populär i webbdesign idag, du kan hitta denna idé över hela webben.
Som du kan se i bilden ovan finns det tre huvudvarianter av din typiska banner, som alla kan användas tillsammans på en sida. Den första är en frittstående banner, vilken sorts vikar sig tillbaka på sig själv i ändarna.
Om du undrar hur du gör 3D-effekten, kan det inte bli enklare. Välj först en färg för huvud- eller främre delen av bannern. Välj sedan en lite mörkare nyans för sidodelarna. Slutligen skapa en liten triangel och gör den ännu en ny skugga mörkare. De tre delarna visas separerade och sedan tillsammans i bilden nedan.
De andra två versionerna av bannern är en variation på detta tema. Den här gången är tanken att bana bannern kring något innehåll. Du kan göra bannern tittar ut från den ena sidan som med det andra exemplet eller slingra runt hela objektet som med det tredje exemplet.
Webbplatsen WPCoder använder faktiskt alla tre variationer av banderollen i dess design. Här är några skärmdumpar av några av elementen.
Dessa har skapats med bilder men det blir ganska vanligt att uppnå en liknande effekt med bara HTML5 och CSS3. Kolla in denna handledning från WebDesignTuts för ett genomgång av denna process.
Lägg ett foto i din text
Ibland känns en enkel, solidfärgad rubrik bara tråkig. Du slänger en skugga på det och kanske försöker skrapa det, men det dödar den klassiska, enkla utseendet du ska gå för. Vad är lösningen? Det är lätt! Använd bara ett foto som bakgrund för din text.
Att bygga en av dessa rubriker i Photoshop är en bris. Allt du behöver är två lager.Först skriver du lite text och får det som du vill ha det. Kasta sedan ett foto över toppen av det och slå Cmd-alternativ-G eller gå till Lag> Skapa klippmask. Det är allt det finns! Nu kan du flytta texten och bildlagren självständigt och klippet kommer att förbli.
Använda CSS
Du kan faktiskt uppnå samma teknik i CSS genom att använda background-klipp: text eller mask-bild. Trent Walton har en kort men praktisk handledning om att utföra denna sak.
Tänk på att om du vill att alla användare ska uppleva effekten måste du använda en bild. Som med de flesta nyare CSS-funktioner är webbläsarsupport spotty för dessa egenskaper.
Slutsats
Jag hoppas att dessa snabba och enkla designtrådar har inspirerat dig att tänka lite hårdare om hur du kan byta saker i din typiska designprocess. Det är troligt att du har sett dessa i åtgärd tusen gånger men att bli medveten om dem hjälper dig att expandera din horisont som designer.
Lämna en kommentar och låt oss veta vad du tycker! Använder du regelbundet någon av dessa? Kommer du börja nu?