Oppgave: Website Lifemate – Design

Lag et design for nye websider lifemate. Du kan presentere ide i form av skisse eller mockup som du sette sammen i f. eks Photshop eller Illustrator.
Ide og tema som vi har diskutert i klassen.
Forside header/main/footer samt 6 undersider.
Logo finner du her idelager/mdesign/prosjekter/lifemate

Eksempel  e-shop http://www.mophie.com/
noen produkter http://www.mymili.com/

Eksempler på sider
Norrøna:! ! www.norrona.com
Fjellreven:! ! http://www.fjallraven.com/
Dale of Norway:! http://dale.no
Bergans:! ! http://www.bergans.no!
Ullvang:! ! http://www.ulvang.no
Devold:! ! https://www.devold.com/outdoor/
Janus:! ! http://janus.no/index.php?lang=no
Columbia:! ! http://www.columbiasportswear.se
Kjus:! ! ! http://www.kjus.com

leveres mandag 19. november kl 09:00

Lykke til
Hilsen Wictor & Marius

 

 

Oppgave uke 45 InDesign – magasin

Lag en presentasjon/magasin over minst 6 sider i et oppslag i InDesign.
Tema og innhold er valgfritt. Bruk gjerne bilder fra egne arbeider og skriv noen ord.
Format bestemmer du også selv. Sett startside til side 2. (i Pages panel velg – Numbering and Sections Options.) Bruk flest mulig av de metodene/teknikkene/verktøyene vi har vært igjennom. Text-wrap, Styles (paragraph, Character, Object), rammer/border, tekst. Bilder, grafikk og maskeringer.
Lag et grid og bygg opp designet ditt over det. Legg også vekt på profil/stil og formspråk.
Vær også bevisst typografien med hensyn til Leading, tracking og kerning. Baseline.

Noen ord om typografi og linker til div. websider om typografi og grafisk design.

Eksporter en SWF-fil av presentasjonen din og legg den ut på bloggen din eller web.

Leveringsfrist: innen tirsdag 12. nov. 2012. kl 13:00.

Lykke til
Wictor & Marius

Oppgave Uke 44 Dreamweaver Phonegap

APP for mobil med Android SDK, PhoneGap og DreamWeaver

I går lærte vi å installere Android SDK og Eclipse på en Mac. Vi lagde også en CamTake-app opp fikk denne opp i en emulator og deretter debugget vi appen til en mobiltelefon.
I dag har vi sett noe på hvordan en app kan bygges og endres over en ferdig mal i Dreamweaver.

Oppgave_Dreamweaver_PhoneGap. Lag en APP i Dreamweaver. Bruk en template i Dreamweaver fra grunnen av eller bearbeid/tweak en ferdig APP. Du står fritt til å velge tema og innhold, men den bør inneholde noen sider og noe funksjonalitet som kart, ringe til osv.
Vær grundig med design, farger, bilder og grafikk. Lag de i riktig størrelse i f.eks Photoshop.
Du kan lage enten til Android eller en annen platform.

Du kan ta screenshots fra emulator og/eller bilder fra mobilskjerm med Appen aktiv. Disse bildene legger du ut på bloggen din innen tirsdag 6. nov kl 13:00

Lykke til
Hilsen
Wictor & Marius

Oppgave Uke 43 – TypeTool _ Font

TYPETOOL FONT

Design en font for en festival. Fonten skal bl. a. brukes til festivalens logo/navntrekk.
Skisser deg frem til en ide om skriftens/bokstavens særpreg. La dette komme til uttrykk i alle bokstavene. Du kan formgi bokstavene i enten illustrator eller TypeTool. Du trenger ikke å lage et helt skriftsnitt, men f. eks kun versaler. Lag i så fall også noen eksempler på hvordan du kunne tenke deg minusklene i tillegg.
Fonten lager du ferdig i Typetool. Husk spacing og kerning.

Du står fritt til å velge type festival. Musikk-, film-, mat-, tatoo-….., hva som helst.

Lever logo/navntrekk og en oversikt over fonten din her: som f. eks. slik:

 

 

 

 

innen tirsdag 30. okt. kl. 10:30
Lykke til
Wictor & Marius

 

 

 

 

 

Oppgave Uke 41 – DREAMWEAVER HTML CSS

Lag en website i Dreamweaver. Benytt fremgangsmåten som gitt på skolen med divtags i et CSS-dokument. Lag knapper (linker) til minst 4 sider.
Fint om du også i tillegg lager noen interne undersider.
Planlegg. Tegn flytskjema og lag mappestruktur innunder din “site” på nettkringkasting.no.
Lag en mock-up/skisse i Photoshop eller Illustrator i 100% størrelse.
Størrelse og form velger du selv.
Du står fritt til å velge type innhold. Ta gjerne med video, bilder/galleri(er), lyd etc.
Tenk gjerne bilder, tekst og design, men i denne omgang dreier det seg om å få et grep om CSS og html.
Du står helt fritt i valg av tema og innhold. (obs opphavsrett).
OBS: Vær bevisst på fil-struktur.
Leveres innen torsdag 18.oktober. kl 10:30.
Lykke til
Wictor og Marius
Her er link til noen utvalgte eksempler fra tidligere studenter
Og noe hjelp

Oppgave Uke 41 Photoshop/Dreamweaver – Rollovers

Bruk designet du lagde i Illustrator “Masse som Struktur” til å lage en interaktiv applikasjon i Dreamweaver hvor du slicer opp ordene (Photoshop eller Fireworks) og lager “rollover”-effekter med linker til nye sider fra enkelte ord.
Du trenger ikke lage linker til alle ordene.

Lever oppgaven på bloggen din med link (Bilde med link) til nettkringkasting.no/~brukernavn.
Leveres innen torsdag 11. okt. kl 10:00

Lykke til
Wictor & Marius

Oppgave Uke 39 – Photoshop – Fantasy Art “Wonderland”

I denne oppgaven skal du lage en illustrasjon i Photoshop med temaet Wonderland. Du bør bruke flest mulig av de teknikkene vi har vært igjennom som selections, layers, brushes, styles, text, blends, effects osv. Finn et tema/scene fra en film/story eller en tenkt scene fra et eget “Wonderland”-scenario. Ta gjerne med elementer som bakgrunn, himmel. skyer, måne etc. landskap, ting og tang, gjerne også en eller flere karakterer m.m. Du står med andre ord fritt til å til illustrere nær sagt hva som helst innnenfor sjangeren. Gjør research på temaet f. eks Fantasy artWonderland m.m. Lag skisser og gjerne en tegning som du scanner inn som et grunnlag for illustrasjonen.
Den ferdige illustrasjoen legger du ut på bloggen din innen mandag 8. oktober kl 9:00

Lykke til
Wictor & Marius

Har jeg tegnet et eiketre i Photoshop, inspirert av stilen til Eyvind Earle. Kan vel også betegnes som Fantasy Art.  Har brukt mange forskjellige typer brush ofte med spacing på over 100%. En god del knoting. Spesielt utformingen av kvistene. Måtte la 2 av dem krysse hverandre. Forøvrig ganske morsomt å holde på med.

Skrift & Skilte

Idefagskolens første lærebok “Skrift & Skilte – Spesielt for Dekoratøren”. Utgitt på eget forlag i 1969. Et spennende innblikk i hvordan dekoratøren arbeidet på 60-tallet og om datidens trender, design og arbeidsteknikker. Boken gir en bred innføring i hvordan en lager og designer skilt og bokstaver med pensel og farve. Du finner også flere nyttige kapitler om Lay-out, Grafisk Design, Gyldne Snitt i praksis og en omfattende innføring og arbeidsteknikker om konstruksjon av skrift. Mange forskjellige skrift-typer er presentert og hvordan de konstrueres. Har skannet og retusjert alle sidene som enkeltstånde bilder.

Lag din egen håndskrevne Font.

Mye rart som skjer når Apple oppgraderer og endrer på fundamentale ting i sitt OS X system. I Lion og Mountain Lion er det ikke lenger mulig å kjøre programmer som var laget for PowerPc. Her må vi installere en Window- fake og kjøre programmene gjennom en halvveis window-løsning på Mac. Har gjort endringer i denne tutorialen slik at du som har fått Scanfont til å funke ved hjelp av Fontlabs workaround solution the “Lion Compatibility Pack” kan følge denne.

Lag din egen håndskrevne Font.
Her vil jeg vise deg hvordan du lager en font fra din egen håndskrift ved hjelp av ScanFont og TypeTool. Nøkkelen til å lage dine egen håndskrevne stil er enkelhet og originalitet. Vi har alle vår egen skrift-stil reflejtert i vår håndskrift. Defor har vi alle et unikt og originalt utgangspunkt. 

Her viser jeg deg steg for steg hvordan du gjør om din håndskrift til en funksjonell Font.
Tegne, scanne, Photoshop for spacing etc. Scanfont for klargjøring til import i TypeTool. TypeTool for font-eksport til Fonts.
Det er alltid greit å begynne enkelt. Deretter mer sofistikert og spesielt designede fonter.

1. Først tegner du noen rette linjer på papir med blyant. Bruk en myk blyant på et A4-ark slik at du kan viske bort strekene igjen før du scanner inn bokstavene dine.

2. Deretter tegner du bokstaver med din egen håndskrift og går over med et marker-penn av et egnet slag. Hvis du finner at noen bokstaver ikke passer inn justerer du disse før du går over med marker. Deretter tegner du tall og helt til slutt legger du til tegn som parenteser, punktum, komma, kolon osv. Du kan også tegne noen symboler som stjerner, sirkler eller andre former som du også scanner inn. Du kan faktisk tegne akkurat hva du vil inn i ditt fontsett.

3 Scann inn tegning til Photoshop i 300 dpi. Nå har du grunnelementene. I mitt eksempel ser du skrift som er tegnet skikkelig rablete inn uten linjer eller justeringer. Tenkte det kunne funke også.
Du kan om du vil scanne rett inn i ScanFont, men jeg har her tatt de inn i Photoshop for å rentenge, viske bort uønskede detaljer og justere avstander etc.

4 Justerer avstander og størrelser i Photoshop. Bruker her noen greie shortcuts som lasso-L, move-V, cut cmd-X og paste-V. Pass på at ingen kommer innenfor samme tenkte firkant. Bruker også guides og transform-tool.

5 Justerer minuskler og legger dem i en egen gruppe i layers. Marker alle lag og velg ny gruppe fra layers. På den måten slipper du å måtte slå sammen lagene og de kan fremdeles editeres hver for seg.

6 Lagre dokumentet/bildet som tiff i en egen mappe for Font-prosjektet ditt hvor du kan samle de ferdige arbeidene etterhvert. Lagre også som psd på samme sted.

7 Åpne ScanFont og open Tiff-bildet ditt. Hos meg ser dette da slik ut.
Velg Velg fra menyen Image/Separate Shapes eller klikk Separate i Workflow-vinduet og ScanFont skiller da alle bokstavene fra hverandre i egne celler. Hvis noen henger sammen velger du view-split. Hvis f. eks sirkel over å er hver for seg, må disse legges i samme celle Image/merge cells. Pass og på å få basis-linjen riktig plassert på alle cellene. Vanligvis helt nederst. Du kan legge basislinjen i bunn på alle fontene samtidig ved å velge Image/Baseline/Set To Cell’s Bottom. Pass på at basislinjen blir liggende riktig på minusklene g,y,j osv. samt for bindestrek m.v.

8 Når alle bokstavene er separert er de klare for eksportering/lagring. Først må du sette ScanFont til å lagre fontsettet som en .vfb fil. Det gjør du ved å velge Tools/options. I dialogvinduet for Options velger du “Outline Font Editor” og huker av for “Export outline font into VFB file”. Du lagrer/eksporterer ved å enten å velge Image/Place Into Font eller du klikker på Export i Workflow-panelet.  I panelet Place Into Font velger du Unicode indexes. Klikk OK. Deretter i vinduet for Tracing Options lar du dette stå som det er og velger OK.
I Save-panelet finner du fram til mappa du har laget for font-prosjektet ditt. Gi fila di et navn og klikk Save.

9 Åpne TypeTool3 og velg File/Open. Finn fram til fila di, velg denne og klikk OK. Alle fontene dine kommer nå opp i TypeTool. Her kan du editere og endre videre.

Lagre og deretter generer TrueType-font i TypeTool. Legg denne inn i fontmappa di og du har din egen font.

Case study Javier Romero Skissetegning 1997

Javier Romero er en illustratør fra New York som i dag leder Javier Romero design Group.
I 1997 hadde han et innlegg magasinet Step_by-Step Electronic Design hvor han viste hvordan han arbeidet fra ide og skisse til ferdig produkt. Han brukte da programvare som i dag fremdeles er relevant for oss. Som f.eks. Illustrator og Photoshop. Det som er interessant er forøvrig selve prosessen.

1. Romero gjør mye logo arbeide, og han ønsket at hans self-promotion-piece skulle reflektere dette. Den symmetriske formen, ovalen og diamanten i bakgrunnen gjør at bildet også kan fungere som en slags logo. Han ønsket også et resultat som ville
integrere elementer av både illustrasjon og design.

 

 

2 Da han bearbeidet skissen i Illustratør, lagde han graderinger (i de to menn) og blends (langs den ytre kanten av ovalen). Ha utarbeidet  også enpalett av farger som var
“Sofistikert, men ikke gammel.”

 

3 Her har han bearbeidet hele illustrasjonen illustrasjon i Strata (3D),
go eksperimentert med eksperimentere med transparency, reflekser og skygger. Det viste seg til slutt at mesteparten av 3D-arbeidet ikke ble med i det endelige arbeidet.
Istedetfor begynte han å lage endringer i Photoshop.

4 Romero brukte Photoshop til å endre på bakgrunnsfargene med Hue / Saturation
dialogboksen. Han erstattet hudfargen med gult og deretter økte han saturation over det hele for å gi en samlet sol-metning.
Brukte derette curves for å øke høylysene for å gi panelene et tranparent utseende.

 

 

 

 

 

5 Han gjorde utvalg i kjeglene ved hjelp av lasso og brukte Hue / Saturation dialogboksen for å justere fargene uten å miste skyggelegging og refleksjoner som Strata hadde generert.

 

 

 

 

 

 

 

6 Romero kopierte skyskraperen fra skissetegningen til ett nytt lag i Illustrator og plassert den Strata-genererte figurer på en annen, så justert tettheten av det øverste laget
slik refleksjoner av  3D laget ville vises igjennom.

 

 

 

 

 

7 Romero brukte Kai Power Tools (Da tidens Photoshop-filter-plugin) for å generere en metallisk tekstur for tallene i Photoshop, Too disturbing. Vekk med dem også.

 

 

 

 

 

 

 

8 Tilbake i Illustrator fylte han nummerne heller med en gradient. Til slutt rene strokes på mannen og tallene.