shutterpress: design &kode et foto portefølje - webstedet (dag 1: design),,,,,,,, jeg er en stor fan af foto centreret på tegninger.så i dag er jeg glad for at lancere en ny "fuldstændig site" pædagogiske, der er rettet mod fotografer, tegnerne, og andre visuelle kreative.på dag 1, jeg designer skabelon i photoshop ved hjælp af nogle tricks og - teknikker.i dag 2 vi går gennem "før flyvning" forberedelse til kodning fase, som vi gennemgår i detaljer i dag 3.i dag 4, vi vil vise dig, hvordan at skabe tre helt forskellige lokaliteter med samme rå html.klar til at starte?- lad os gøre det.,,,, ": om konstruktion, som med en web - design projekt, er det vigtigt at identificere de mål for ethvert projekt...så før vi dykke i, lad os sige et par ord om, hvad vores endelige mål er:,, udformning af en lokalitet skabelon, som kan anvendes af fotografer at vise deres porteføljer, brug en simpel beskedne navigeringsinterfacen., vise billeder som thumbnails (uden tekst) i en pagineret grid layout. give mulighed for nem layout fleksibilitet. kode!i overensstemmelse med standarder /html /css og fri, åben kilde jquery plugins. det sidste, jeg vil nævne, er måske det vigtigste: det skal være 100% customizable, ved hjælp af den mindste mængde af arbejde muligt!hvad betyder det for os?jeg ville have, at nogen er i stand til at relancere og huden hele layout, uden behov for at røre ved den rode rundt med en omskrivning af den centrale html.det betyder, at det at bytte ud et par billeder (logo og en speciel baggrund billede) og nogle css, et helt andet resultat kan skabes.derfor er den sidste dag i denne serie, vi skal bruge, og hele mødeperiode til at skabe customizations!okay, med vores mål nu klart defineret, lad os begynde!, den video forelæsning, video, resten er beregnet til at blive et supplement til den skriftlige tekst nedenfor.tænk på det som "supplerende" materiale - jeg vil ikke dække alt, hvad der er i den skriftlige del, men nogle gange er det bare rart at se en anden arbejder i photoshop, for at hente andre tricks, effektivitet, drikkepenge, og andre teknikker, som de ellers ikke ville være bekendt med.,,,,, at de skriftlige forelæsning, alle skriftlige trinvis vejledning er nedenfor.vi starter med en blank photoshop dokument, men de kan også downloade demo psd for at kontrollere deres arbejde mod min.,, skridt 01: oprettelse af vort dokument, start ved at skabe et nyt dokument på 1280 x 800px størrelse.hvorfor?fordi det vil give os et stort lærred til at lege med.bredden af vores endelige udformning vil ikke være 1280px, men vi ønsker at se lidt farve, som vi normalt ville se et stort browser vindue. hvad størrelse, bør beholderen?den første praktiske dilemma med web - projektet er at bestemme størrelsen af det dokument, som du kommer til at arbejde med.i vores tilfælde, vil jeg gerne designet til at sidde foran i midten på skærmen, fylde så meget plads som muligt på et mindre følge - og det ikke så lille en stor skærm.,, bredde betragtninger:, jeg vælger at anvende, 994px, som den samlede bredde.det er noget, kommissionen - det kunne have været et par px bredere eller et par px mindre, men i sidste ende vil gøre arbejdet.hvorfor?fordi det passer ind i 1003px "sikkerhedszonen" for de mest populære browsere anvendes lige nu, med en smule polstret på begge sider for at være sikker.,, højde betragtninger:, jeg kommer til at arbejde med en højde på, 644px i photoshop højden er et vilkårligt nummer i tilfælde af konstruktionen.hvorfor?for 1) det skal kunne indstilles fra css, 2) lader vi det "flex" til at passe til det indhold, som vi smider i og 3) jeg er mindre bekymret over gange højden, end jeg kunne være et større projekt, det vigtigste her at bemærke, er, at denne alt vil være 100% indstillelige fra css, når vi er færdige.så hvis du foretrækker en bredere udformning med en mere overfladisk højde, du vil være i stand til at få dette inden for sekunder at afgøre deres præference.tanken er her, for at holde det flydende, selv om vi bruger en fast størrelse skabelon.så lad være med at lave den præcise tal lige nu.,, det sjove er, at når vi har løst disse problemer, vi rent faktisk kan skabe hjemmesiden ret hurtigt.ved at starte her, og vi giver os selv mulighed for at skabe en morder uden at forsøge at opfylde enhver virksomhed beskrevet galleri begrænsninger, som vi måske sætte for os selv ved at starte med hjemmesiden. okay, lad os komme i gang!at skabe indhold rum, jeg vil starte med oprettelse af et grundbeløb på polstring, jeg vil altid forblive på indholdsområdet.i vores tilfælde, har jeg valgt 32px til mængden.det er en smule mindre end linjehøjde sejlads, men ikke så lille, at ting føles stramt eller begrænset.,, det giver mig en aktiv del af groft, 696px af 586px (igen højden er fleksibel, så vi er meget bekymrede over, at).,, at finde den perfekte virksomhed beskrevet størrelse og fyld, med vores aktive område defineret, nu vil vi vælge den ideelle virksomhed beskrevet størrelse og polstring.at finde ud af det er ikke raketvidenskab.jeg spillede bare rundt med flere ordninger for groft trukket kvadratisk eller rektangulær form, ubearbejdet, indtil jeg fandt noget, der så, harmonisk. nu ved jeg ordet harmonisk er ikke meget konkret.så hvad mener jeg?at vide, at jeg vil være omkring 15 - 20 billeder pr. side, jeg prøvede vores forskellige virksomhed beskrevet størrelse /rum kombinationer, indtil jeg fandt en, der afspejler en god balance mellem positive og negative såvel som en raffineret form for hierarki.det gyldne snit spille ind i det her, men jeg vil være ærlig og sige, at jeg øje med det i dette særlige tilfælde.der er ingen magi her.bare en masse at eksperimentere. så, hvad er den endelige formel?en, 155px bred af 125px høj, virksomhed beskrevet image, der i fire kolonner (og i vores tilfælde 4 rækker, som så fylder vores højde).,, polstring: er der om 21px af horisontal adskillelse mellem hver virksomhed beskrevet og om 18px for vertikal adskillelse.hvorfor det?,,, fordi vi har at gøre med en "landskab" layout (hvilket betyder, at det er mere omfattende, end det er for snævert, føles det rigtigt at opretholde samme form forholdet på tværs af hele vores design, meddelelse om, hvordan den endelige størrelse, at jeg valgte virksomhed beskrevet afspejler også denne landskab - forholdet.så giver det mening, at vi går lidt mere mellem rækker, end vi vil sted mellem kolonner. her er det endelige resultat:, at bemærke, at jeg har forladt om 50px plads på bunden at indsætte en slags sideantal (på den måde, at brugerne vil gå fra den ene side af thumbnails til næste).naturligvis, hvis der ikke er nok til at udløse thumbnails sidenummerering, vil vi afgrøde opstilling i mere tæt på bunden., at tilføje nogle visuelle stil, den visuelle stil af thumbnails er vigtigt.fordi vi er så lyst til at skabe en masse små, polske, oplysninger på tværs af hele vores design, se bare gamle billede thumbnails med hårde kanter er rå. vil vi tilføje en lille stil for at lette denne op og give vores galleri - nettet en sans for stil.der gælder følgende lag stil til hver af din virksomhed beskrevet billeder: en 2px indre slagtilfælde (css vilkår, vil det blive, polstring,)&#eaeaea, en 1px drop shadow (css form det vil blive, grænse)&#f2f2f2, vil jeg zoome ind på 100% her for at vise dig, den endelige stil:,, nu hvor vi har fundet vores net, så lad os tilføje nogle billeder til at give det her layout nogle liv:,, sidenummerering, vi er næsten færdige med denne side...- nu mangler vi kun en måde for brugerne at gå fra den ene side af thumbnails til den næste.dette kaldes sideantal.der er mange måder at gøre det (lidt mere kompliceret end andre).i vores tilfælde ønsker vi en enkel metode til at drikke...så jeg vælger at anvende en enkelt forladt pil