Så mycket mer….

september 30th, 2010

Design är betydligt mer än vad man kanske tänker på. Tänk er bara all design av möbler som tillverkas. Sedan har vi design av kläder och design av hus, design av bilar och så vidare. Man skulle kunna hålla på i all evighet och räkna upp all design och frågan är nog snarare om det över huvud taget är möjligt att räkna upp allt eftersom allt runtomkring oss är designat av någon.

Bakom varje liten pryl döljer sig en eller flera designers. En eller flera personer som har tänk på olika saker beroende på vad det är de vill tillverka. De har tänk på utseende, funktionalitet, pris och säker en massa mer som jag inte har en aning om.

Vad är design för mig?

september 29th, 2010

Som jag förklarade och klargjorde är frågan om vad design är mycket komplex. Det som jag kommer fram till är att det helt enkelt beror på vem du frågar. Beroende på den som svarar kommer alltså svaren att skilja sig. Jag har många gånger funderat på vad det är för mig och även det är svårt att svara på.

Det absolut första som jag tänker på när jag hör ordet design är design inomhus, alltså design av möbler och så vidare. Design inomhus som inredning är vad jag tänker på i första hand. Men ju mer jag tänker på det så börjar jag tveka på om det är design eller inredning jag pratar om. Men när man tänker efter lite mer kommer man på betydligt fler saker som är design.

Vad är design?

september 28th, 2010

Min första fråga som poppar upp när jag börjar skriva detta är att begreppet design måste definieras. Det är inte säkert att det för oss alla betyder exakt samma sak. Om man slår upp ordet i något lexikon kan olika förklaringar förekomma men gemensamt återkommande är att design kan förklaras som konstnärlig formgivning.

Vad är då konst kan man likaväl fråga sig? Och det är definitivt en svår fråga och frågan är snarare om man kan svara på det. För olika människor betyder det olika saker och precis samma sak är det med design. Beroende på vem man frågar så får man också olika svar och svaren i sig kan skilja sig åt en hel del. Så frågan om vad design är är minst sagt komplex.

Skapa en 3d-skugga i Photoshop

januari 19th, 2010

Det finns massvis med plugins som hjälper dig med flashiga effekter i Photoshop. Jag tänkte dock nu visa med en enkel guide hur du skapar en anpassningsbar 3D-skugga helt på egen hand med de verktyg som finns som standard.

Vårt mål..

3d-text-finished

Okej, here we go…

Börja med att skriva in den text du vill skugga (ganska logiskt). Färg, typsnitt och så vidare har ingen betydelse.

3d-text-1

Sedan skapar du ett nytt lager under text-lagret. Se bilden.

3d-text-2

Med det nya lagret markerat skapar du sedan en markering genom att hålla in CTRL och klicka på textlagrets miniatyrbild.

Fyll markeringen med en godtycklig färg, förslagsvis grått då det funkar i 9 fall av 10 mot alla bakgrunder.

Välj sedan Redigera > Omforma > Perspektiv (Edit > Transform  > Perspective) och dra ut övre delen enligt bilden eller så mycket du själv vill beroende på vilken distans du vill att skuggan ska ligga på.

3d-text-3

När du perspektivförändrat ”skuggan” väljer du Redigera >Omforma > Omforma fritt (Edit > Transform > Free Transform) och tryck ihop hela ”skuggan” nedåt.

3d-text-4

När du omformat ”skuggan” väljer du Filter > Oskärpa > Gaussisk oskärpa (Filter > Blur > Gaussion Blur) och väljer passande oskärpa, i det här fallet 2,0. Graden oskärpa avgör du också beroende på vilket avstånd du vill texten ska ha till bakgrunden.

3d-text-5

Det sista du sedan gör är att sänka opaciteten på lagret ”skuggan” ligger i (Lager 1) till ca 30%. Även detta bestämmer du själv beroende på bakgrund, smak och, ja, textens tänkta avstånd till bakgrunden.

Flytta sedan ner lagret med skuggan några ”snäpp” (2-3 ”shift+pil”-tryck eller efter eget tycke beroende på…)

Så där, spadabif spadaboom, där har vi en tjusig skugga som lyfter fram texten på ett tredimensionellt sätt från bakgrunden.

3d-text-6

Hur skapades logotyperna?

januari 7th, 2010

Designar du logotyper och vill ta det ett snäpp vidare? Då kommer här ett tips på en sida som listar drygt 30 guider till hur kända logotyper skapades. Bland annat hittar du logotyper från Firefox, Apple och Sony Ericsson.

De riktigt sjysta guiderna som lär dig skapa logotyper och effekter av rang hittar du på Naldz Graphics: 30+ Useful Logo Design Tutorials for Photoshop and Illustrator.

Skapa en snygg mediaspelar-design i Photoshop

december 16th, 2009

Under en av mina surfstunder på nätet efter snygga designtips hittade jag den här guiden på Tutorial9.net. Den visar dig steg för steg hur du skapar en snygg och läcker mediaspelare i Photoshop.

mediaspelar-tutorial

Själv vet jag inte riktigt när jag har användning för design av en mediaspelare men teknikerna går även att applicera på andra saker. Varför inte skapa en snygg meny till en webbplats eller varför inte en hel webbdesign?

Hela guiden hittar du här!

Minska filstorleken på Photoshop-filer

december 15th, 2009

Här kommer ett lite märkligt men effektivt knep för att minska filstorleken på dina Photoshop-filer. På detta sätt kan du spara upp till 90 procent av filstorleken på Photoshop-bilder utan att tappa innehåll.

Knepet går ut på att du gör alla lager osynliga precis innan du sparar din bild. Eftersom att lagren sparas ändå förlorar du inte någon information, du får bara utföra ett extra steg innan du sparar och när du ska öppna bilden igen.

ps-krymp-filstorlek

Enligt den svenska tidningen CAP&Design, som har gjort ett snabbt test, minskade filstorleken på en liten bild från 1,3 till 1 MB bara genom att göra lagren osynliga. Enligt bloggen Creativebits som först publicerade tipset har de själva sett besparingar på upp till 90 procent.

Orsaken är att Photoshop inte sparar ner en förhandsvisning för lager som är osynliga.

Källa: Creativebits, CAP&Design.

Nokia apar efter Apple?

november 25th, 2009

Nokia är på gång att släppa två nya mobiler. Den ena av de två telefonerna heter 6700 och den har en tilltalande men enkel design. Den kommer att släppas i ett flertal färger som ska passa alla smaker.

6700 Slide är den mer avancerade av de två nya modellerna. Den har Symbian med S60-gränsnitt, det vill säga samma system som finns i de flesta mobiler i Nokias avancerade N-serie.
5-megapixelkamera med optik från Carl zeiss i kombination med kopplingar till sociala tjänster ska göra det enkelt att dela med sig av vad man upplever i form av bilder och videoklipp. Det går också att koppla upp sig mot omvärlden genom att använda telefonen som modem. 6700 Slide har stöd för turob-3g upp till 10 megabit per sekund när man laddar ned data och 2 megabit per sekund när man skickar data.

(Källa: Mobil.se, www.mobil.se)

Jag tycker att det verkar vara en mycket intressant mobil sett till det stora hela. Det enda som jag saknar är en inbyggd GPS.

Vad gäller design och framförallt färgvalen och ytan känns det dock som att Nokia har hittat inspiration från ett oväntat håll. Vad säger du? Känns det inte lite ”rip off”-varning? Avgör själv.

Nokia 7230

Nokia 6700

ipod-colors-2

Apple iPod Nano

Skapa en spegel-effekt i Photoshop

november 25th, 2009

Den här gången i ”Photoshop-skolan” ska jag visa dig hur du skapar en spegel-effekt av ett objekt (i detta exempel en text) i Photoshop.

Vi börjar med att skapa ett nytt dokument med storleken 500×200 pixlar. (Du kan givetvis välja den storlek som passar dig.)

ps-new-500x200

Sedan lägger du in en text med önskat typsnitt och färg. (I det här fallet Arial Bold i svart)

ps-text-reflect-1

Skapa sedan en kopia av text-lagret, rotera detta 180 grader och flytta ner det tills det ligger ungefär en pixel under originaltexten.
(Det gör inget om en liten bit av texten försvinner i underkant, du kommer förstå varför i kommande steg.)

ps-text-reflect-2

När det nya textlagret ligger där det ska speglar du detta lager horisontellt.
Var noga med att de båda lagren måste  ligga i linje horisontellt.

ps-text-reflect-3

Efter det skapar du en lagermask till detta lager.

ps-text-reflect-5

Lägg sedan en toning (svart/vit) för att åstadkomma effekten du ser i bilden nedanför.
När du skapat lagermasken med toning ändrar du opaciteten på detta lager till ca 40% och voila nu har du skapat en spegel-effekt.

ps-text-reflect-6

Experimentera gärna med olika effekter på texten för att skapa en ännu häftigare design.
Tänk dock på att kopiera lagret med effekterna och rastrera det innan du roterar och spegelvänder.

Här ser du ett par exempel på samma text med ytterligare effekter.

ps-text-reflect-ex1

ps-text-reflect-ex2

Skapa en ”sticky footer” med CSS

november 24th, 2009

Den här stilmallen (css-koden) skapar en s k ”sticky footer”, alltså en sidfot som ligger ”klistrad” mot botten av webbläsarfönstret.

Det finns flera sätt att göra en mot botten klistrad sidfot på en sida med CSS. Men fram till nu har det krävts en hel del onödig  extra HTML-kod, denna metod använder endast 15 rader med CSS-kod och knappt någon HTML-kod. Ännu bättre är att css-koden validerar till 100% och den fungerar i de vanligast förekommande webbläsarna. Internet Explorer 5 och uppåt, Firefox, Safari, Opera och fler.

Hur använder du det på din webbplats?

Lägg till följande rader i CSS till din stilmall (ex. style.css). Det negativa värdet för marginalen för .wrapper är samma värde som höjden av .footer och .push. Den negativa marginalen måste alltid vara lika med den totala höjden av sidfoten (inklusive värden för padding och border du kan tänkas lägga till).

* { margin: 0; }
html, body { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Följ den här HTML-strukturen. Inget innehåll får vara utanför div-taggarna .wrapper eller .footer om det inte är absolut positionerat med CSS.

<html>
<head>
<link rel="stylesheet" href="style.css" ... />
</head>
<body>
    <div class="wrapper">
       <p>Ditt innehåll här.</p>
       <div class="push"></div>
</div>

<div class="footer">
    <p>Copyright (c) 2008</p>
</div>
</body>
</html>

Källan till denna kod är hämtad från Ryan Fait’s blogg om webbutveckling. Läs hela inlägget här. Där hittar du även svar på problem som kan uppstå vid användandet av koden.