ShutterPress: Design &kode A Photo Portfolio Side (Dag 1: Design)
Jeg er en stor fan av foto-sentriske området design ... så i dag har jeg 'm glade for å lansere en ny "komplett site" tutorial som er rettet mot fotografer, illustratører og andre visuelle reklamer. I dag 1, jeg skal utforme malen i Photoshop ved hjelp av noen spesielle triks og teknikker. Dag to vil vi gå gjennom "pre-flight" forberedelse til koding fasen, som vi vil gå over i detalj i dag 3. I dag 4, viser vi deg hvordan du kan lage tre helt forskjellige nettsteder bruker samme rå HTML. Klar for å komme i gang Som med alle web design prosjekt, er det viktig å identifisere målene av alle prosjekt ... så, før vi dykke i, la oss si noen ord om hva våre eventuelle målene er:. Den siste tingen jeg vil nevne er kanskje det viktigste. Det må være 100% tilpasses ved hjelp av minst mulig arbeid mulig ! Hva betyr dette for oss? Ok, med våre mål nå klart definert, la oss begynne! video tutorial er ment å være en følgesvenn til den skriftlige tut nedenfor. Tenk på det som "supplerende" materiale - Jeg vil ikke dekke alt som er i den skriftlige delen, men noen ganger er det bare hyggelig å se noen andre arbeider i Photoshop for å plukke opp andre triks, effektivitet tips, og andre teknikker som du ellers kanskje ikke ville være kjent med. Den fulle skrevet steg-for-steg guide er nedenfor. Vi skal starte med et tomt Photoshop-dokument, men du kan også laste ned demoen PSD for å sjekke arbeidet mot mine Start med å opprette et nytt dokument på 1280 x 800px i størrelse. Hvorfor? Fordi dette vil gi oss en fin stor lerret å leke seg med. Bredden på vår endelige utformingen vil faktisk ikke være 1280px, men vi ønsker å se noen bakgrunnsfarge akkurat som vi ville vanligvis ser i et stort nettleservindu. Den første praktiske dilemma med alle web-prosjektet er å bestemme størrelsen på dokumentet som du skal jobbe med. I vårt tilfelle, vil jeg gjerne at design for å sitte foran og midt på skjermen, fylle opp så mye plass som mulig på en mindre skjerm -. Og ikke ser altfor lite på en stor skjerm Bredde Hensyn: Det viktigste å merke seg her er at dette er alle kommer til å være 100% justerbar fra CSS når vi er ferdige. Så, hvis du tilfeldigvis foretrekker en bredere layout med en mer grunne høyde, vil du være i stand til å få nettopp dette løpet av sekunder for å avgjøre hva du foretrekker. Ideen her er å holde ting væske selv om vi bruker en fast størrelse mal ... så ikke bli for opphengt i de nøyaktige tallene bare nå. Det morsomme er at når vi ' har løst disse problemene, kan vi faktisk lage hjemmeside ganske raskt. Ved å starte her, vil vi tillate oss muligheten til å lage en killer miniatyrbilde galleri uten å prøve å møte eventuelle begrensninger som vi kan komme til å sette på oss selv ved å starte med hjemmesiden. Ok, la oss komme i gang! Jeg skal starte med å etablere en grunnleggende mengde padding som jeg ønsker å alltid holde seg rundt innholdsområdet. I vårt tilfelle har jeg valgt 32px å være det beløpet. Det er litt mindre enn den line-height av navigasjon, men ikke så liten at ting føles stram eller begrenset. Det etterlater meg med et aktivt område på rundt 696px by 586px (igjen høyden er fleksibel, så vi er ikke veldig bekymret for det). Med vår aktive innholdsområdet definert, nå ønsker vi å velge den ideelle miniatyrstørrelse og polstring. Å finne ut dette er ikke rocket science ... jeg egentlig bare spilt rundt med flere arrangementer av grovt trukket rektangler før jeg fant noe som så ut harmonisk Nå, jeg vet ordet harmonisk er ikke helt bestemt ... så hva mener jeg? Å vite at jeg ønsker å passe ca 15-20 bilder per side, jeg prøvde våre ulike miniatyrstørrelse /plass kombinasjoner før jeg fant en som reflekterte en god balanse mellom positive og negative plass samt en raffinert følelse av hierarkiet. Ting som det gylne snitt spille inn i dette, men jeg skal være ærlig og rettferdig innrømme at jeg eyeballed det i dette spesielle tilfellet. Det er ingen magisk som skjer her ... bare masse eksperimentering. Så, hva er den endelige formelen? En 155px bred og 125px høy miniatyrbilde, satt inn i 4 kolonner (og i vårt tilfelle, 4 rader samt, som fyller opp våre høyde) padding:. Det er ca 21px horisontale avstanden mellom hvert miniatyr og om 18px av vertikal separasjon. Hvorfor forskjellen? Fordi vi har å gjøre med et "landskap" layout (som betyr at det er mer bred enn det er smale), føles det riktig å opprettholde den samme formen forhold over hele vårt design. Anmeldelser Legg merke til hvordan den endelige miniatyrstørrelse som jeg plukket også gjenspeiler dette landskapet forholdet. Så, er det fornuftig at vi la litt mindre polstring mellom rader enn vi vil plassere mellom søylene Her er det endelige resultatet. Merk at jeg har igjen om 50 piksler plass på bunnen for å sette en slags paginering (slik at brukerne vil navigere fra én side av miniatyrbilder til neste). Selvsagt, hvis det ikke er nok miniatyrer å utløse paginering, vil vi beskjære oppsettet i nærmere på bunnen. Det visuelle styling av miniatyrbildene er viktig i tillegg. Fordi vi tar for eksempel vare å lage massevis av litt polish Vi vil legge til noen subtile styling til lette dette opp og gi vårt galleri rutenett en følelse av raffinement. Påfør følgende lag stil til hver av miniatyrbilder: En 2px Indre Stroke (i CSS vilkår, vil dette bli padding) #EAEAEA En 1px Drop Shadow (i CSS termer denne vilje bli den grensen) # F2F2F2 Jeg skal zoome inn på 100% her for å vise deg den siste stilen: Nå som vi har etablert vårt rutenett, la oss legge til noen virkelige bilder for å gi dette oppsettet litt liv: Vi er nesten ferdig med denne siden ... nå er alt vi trenger er en måte for brukere å navigere fra én side av miniatyrbilder til den neste. Dette kalles paginering. Det er mange måter å gjøre dette (noe mer komplisert enn andre). I vårt tilfelle ønsker vi en enkel metode for paginering ... så jeg velger å bruke en enkel venstre-pilen | høyrepil tilnærming - det vil si: (). Dette er en av de mer intuitive metoder for paginering, så det er fornuftig for vår situasjon La oss gå videre og lage to 18px diameter sirkler. Legg merke til at jeg har rett og slett kopiere /limes lagstilen fra trekkspillknappene som vi brukte før. Hvorfor? Fordi duplisere visuelle stiler bidrar til å sikre at vår layout føles uniform ... og det er egentlig ingen grunn til å kaste bort krefter på å prøve å designe en helt ny stil. Konsekvent bruk lagstilen faktisk vil hjelpe brukbarheten av nettstedet vårt. Når du har trukket kretsene dine, legge på pilene (dette er allerede vist over). I mitt tilfelle brukte jeg en egendefinert > forme i Photoshop, men du kan like gjerne bruke en tilpasset tekst ">" symbol. Siden dette ikke er en nybegynner tut, vil jeg anta at du kan sortere ut hvordan du får denne formen der liksom;) Fin! Som faktisk fullfører denne innholdssiden. Ved hjelp av de samme grunnleggende stiler og stopp regler som vi har etablert, kan vi lett snu dette til andre grid layouts i tillegg (for eksempel en 2x2 rutenett, eller en 3x3 rutenett) Alright - På den siste etappen i design session! Vi kan sikkert sortere ut hvordan du kan lage forskjellige andre støttesider, men det vi virkelig trenger nå er hjemmesiden design. Å være at dette er en fotograf målrettet mal, bør et fotografi åpenbart står i sentrum. Vi trenger også noen beskrivende tekst om (for en fotograf å forklare hvem han /hun er, hva slags tjenester de tilbyr, etc.) Bredde Betraktninger : Høyde Betraktninger:. Resultatet av disse hensynene er en aktiv plass som er litt større enn det vi brukte i galleriet mal:.. 720px by 604px Dette er fornuftig for oss for et par grunner: 1) det gir oss god plass til å designe rundt og 2) vil det passe inne mest populære nettlesere '"kaste" plass. Så lenge vi ikke plassere noen avgjørende informasjon nær bunnen av dette området, bør vi være greit å bruke denne plassen på noen måte vi kan tenke seg. Tegning Image: Bruk følgende lagstiler, og starter med en 2px Stroke: Den endelige visuelle stilen skal se omtrent slik ut: Opprette Tabs: Fanene vil være den måten at brukerne vil være i stand til å bla gjennom bilder på hjemmesiden. Dette er egentlig bare en grunnleggende jQuery karusell når du tenker på det i form av koding ... men det er ingen grunn til å begrense oss til de visuelle stiler som de fleste pre-bygget glidere vil bruke som standard. Så, la oss få litt mer kreativ med venstre /høyre fanene ved å skape noen visuelt interessante indre sirkler. Start med en 92px diameter sirkel form. Bruk svart for fyllfargen og sett opacity til 57%. Bruk rektangelmarkeringsverktøyet til å gjøre et valg som går langs vår "image container" og bruke den valg for å lage en lagmaske. Anmeldelser Nå kan du legge den " Så du bør ha denne: Gå videre og gruppere disse lagene i en gruppe, deretter kopiere den, snu den kopierte gruppe horisontalt, og skyv den på over til høyre side: Nå er alt du trenger å gjøre er å dra et bilde på avrundet rektangel laget (gjøre bildet en Clipping Mask of som lag) slik at vi kan se hva dette faktisk vil se ut: Opprette Spaces. I realiteten vil disse modulene vises mer spredt enn dette fordi teksten ikke blir rettferdiggjort på høyre side ... så det er god plass . Husk disse modulene er usynlige ... eller rettere sagt, det er ingen bakgrunnsfarge eller noe sånt. Bildet ovenfor er bare for å illustrere hvordan jeg har kommet til min mellomrom Legge titler. Legge beskrivende tekst: Legge Bilde Ikoner: Og det er det! Her er de siste bildene som vi opprettet i dag. Klikk hver enkelt å se det i full størrelse: På dette punktet du burde ha brukt omtrent en time eller to å sette opp dette dokumentet; Hastighet designere kan ha gått raskere, men jeg er slik at for noen "kreativ tid" der du kanskje ønsker å leke seg med forskjellige størrelser og stiler.
La oss gjøre dette
Intro:?! Om Design
Design et nettsted mal som kan brukes av fotografer til å vise frem sine porteføljer
Bruk en enkel, diskret navigasjon grensesnitt.
Vis bilder som miniatyrer (uten tekst) i en paginert rutenettet.
Tillat for enkel layout fleksibilitet.
Kode det! Ved hjelp av standard kompatibel HTML /CSS og gratis, åpen kildekode jQuery plugins
jeg ønsker alle å være i stand til å re-brand og re-skin hele oppsettet uten at du trenger å røre rotet rundt med omskriving noe av kjernen HTML. Som ideelt sett betyr at ved å bytte ut et par bilder (logoen og et eget bakgrunnsbilde) og noen CSS, som et helt annet utfall kan lages ... og det er derfor på den siste dagen av denne serien, skal vi vie og hele økten til å skape tilpasninger!
The Video Tutorial
Det skrevne Tutorial
Trinn 01:. Klar Vår Document
Hvilken størrelse skal containeren? Anmeldelser
jeg velger å bruke 994px som det totale bredde. Dette tallet er litt Anmeldelser vilkårlig - det kunne ha vært noen px bredere eller noen px mindre, men til syvende og sist vil det gjøre jobben. Hvorfor? Fordi det passer inn i 1003px "sikker sone" for de mest populære nettleserne i bruk akkurat nå, med litt polstring på begge sider for å være sikker
Høyde Betraktninger:.
Jeg kommer til å jobbe med høyden av 644px inne Photoshop Høyden er et vilkårlig tall i tilfelle av denne utforming. Hvorfor?
Fordi 1) det kommer til å være justerbar fra CSS, 2) vi kommer til å la denne "flex" å passe innholdet som vi kaster inne og 3) Jeg er mindre bekymret fold høyde enn jeg kan være for et større prosjekt.
Opprette innholds Space
Finne Perfect Thumbnail Størrelse og Padding
.
Legge Noen Visual Styling
detaljer over hele vårt design, ser ren gamle miniatyrbilder med harde kanter føles rå.
paginering
Trinn 03.: Opprette "Splash" Page Mal
Resirkulering Vår Content Space
I de fleste tilfeller vil vi bare kopierer over det aktive innholdet plass som vi brukte i Galleri Mal. Jeg kommer til å bytte ting opp litt ved å endre padding fra 32px til 20px. Hvorfor?
Dette vil gi oss litt ekstra plass til å bruke en "FULL størrelse" image. Det er en veldig subtil forskyvning i den generelle layout, men effekten bør være enorme, fordi vi vil være i stand til å passe en massiv bilde inn mot bakrommet
Som vi har sagt hele tiden, høyden er virkelig variabel og til slutt vil bli overlatt til den enkelte bruker /designere /klienter å finne ut akkurat hvor mye innhold du vil ha på denne siden ... i mitt tilfelle, kommer jeg til å forsøke å holde Dimensjonene på denne siden den samme som vår galleriside om
Opprette bilde Slider
Begynn med å tegne en 716px bred og 438px høy avrundet rektangel (Radius: 10px).
< p> Og også legge til en indre skygge (som vil bidra til å gjøre vårt bilde "pop" mer på siden):
Dette er hva ditt lag organisasjonen skal se ut (mer eller mindre)
Opprette tre tekst Moduler
Bestemme størrelsen på disse områder har så mye å gjøre med hvor mye plass vi ønsker mellom
dem som hvor mye plass vi ønsker at de skal ta opp. Jeg ønsker ikke mindre enn 20px av separasjon mellom hver modul (for å hindre dem fra å se mikset sammen), så hva vi får er en modul layout noe sånt som dette:
Vi skal nå legge til noen titler for hver tekst modul. Plasser hver tittel helt til venstre av de skjulte rektangler som vi opprettet i det siste trinnet. I demoen, kommer jeg til å bruke skriften Museo for titlene ... som skjer for å være den samme som logo skrift. Selvfølgelig vil du ønsker å justere skrifttype som passer til ditt eget prosjekt. Her er hvordan demo tekst gjengis:
beskrivende tekst for hver modul som kommer etterpå. Vi vil bruke grunnleggende Lorem Ipsum script her, men det kan være lurt å bruke noen selve teksten for å teste ut den linjen høyde og skriftstørrelse som vil fungere best for deg. Her er hva demoen er gjengitt som:
slutt, la oss legge til noen 16px av 16px ikoner for å legge til noen visuell interesse til modulene. Husk å dytte over titlene også:
End of Day 1: Review