Design en profesjonell Bloggutforming i Photoshop
Dette innlegget er en del av en serie som heter Bygg en Responsive layout med Skeleton.Building en Responsive layout med Skeleton: Starting Out
I dag skal vi gå gjennom å utforme en profesjonell blogg magasin tema i Photoshop. Dette er en øvelse i estetikk og du vil lære en haug med teknikker som vil forbedre dine ferdigheter i Photoshop. Ta en kaffe, sitte stramt og la oss komme i gang!
Resources
Før vi dykke i, la meg først introdusere deg til noen ressurser som vil hjelpe deg ut.
The Grid
Ved hjelp av et rutenett gjør det så mye lettere å justere elementer og bestemme sine proporsjoner. I denne designen, vil vi være å bruke en registerlinjer skapt av den utrolige gutta på Teehan + Lax. Det er en 6PX baseline grid kombinert med 960 bæresystem.
Typografi
Ta det på alvor når du velger skriftsnitt. Ved å velge de riktige fonter vil du oppnå vellykket design før du går til neste trinn og koding malen. Her er et par artikler for å hjelpe deg å forstå som er de riktige fonter for prosjektet.
Hvordan velge en skrifttype
Hva Font skal jeg bruke? ": Fem prinsipper for å velge og bruke Skrift
Velg riktig Font: En praktisk guide til typografi på web
Velg web fonter klokt
< li> på Velge type
Anti-Aliasing
Her er en veldig god artikkel, må du lese dette! Jeg vil ikke si et eneste ord, bortsett fra at for kroppen kopiere (små punktstørrelser) vil vi bruke Sharp, og for overskrifter (større punktstørrelser) vil vi bruke Crisp.
mønster
Og en rask nedlasting for din .pat samling.
mønster
Trinn 1: Sette opp Document
Åpne opp Adobe Photoshop (jeg bruker CS5.1, men det er ikke nødvendig å følge med). Som nevnt ovenfor, må du ta en kopi av den TeehanLax Baseline Grid. Pakk ut innholdet i teehanlax_baseline_grid.zip, åpne mappen Teehanlax Baseline Grid og dra grid2.psd i Photoshop.
Det første vi skal gjøre er å velge alle de eksisterende lagene i dokumentet og slette dem . Alle, er at, med unntak av "Marks" -mappen. Når dette er gjort, låse Marks mappen i lag-panelet.
Vi kommer til å bygge en ganske lang layout, så gå videre og endre høyden på dokumentet. For å gjøre det gjelde følgende innstilling ved å gå til Image> Canvas Size, endre høyde og sette anker til toppen Center.
Klikk på Vis> Tillegg (for å se våre guider), linjaler (for å vise linjaler) .
Trinn 2: Opprette bakgrunn
Lag et nytt lag, kaller det "BG", velg Paint Bucket Tool (G), fylle bakgrunnen med dette (hvit) farge verdi: # FFFFFF. Deretter går du til Filter> Støy> Legg til støy og bruke følgende innstillinger for å gi bakgrunns en myk støy effekt
. Antall: 3.
Distribusjon:. Uniform
< li> Monokromatiske: Sjekk
Trinn 3:. opprette navigasjons Bar &
for å skape navigasjonslinjen, velg rektangel Tool (U), opprette et rektangel av 1260x49px men , sørg for at du allerede har satt fargens Box til denne fargen verdi. # 000000
. Tips: "Hvis du går inn i form opprettelse alternativer er det en avkryssingsboks for" snap til piksler "nå når du oppretter en forme det vil alltid være skarpe som de punktene aldri lande 'mellom' piksler. " - Jeff
Fra lag-panelet velger vår navigasjonslinjen lag og dra den inn i en ny mappe (alternativt, du kan bare gjøre det ved å holde nede CTRL + G-tasten) og deretter mappen navnet Header, husk at vi jobber med topptekstområdet.
La oss jobbe på lag farge ved hjelp av Gradient Overlay. Velg laget form som vi har kalt "navigasjonsfelt" og gå til Layer> Layer Stil> Gradient Overlay. Påfør følgende innstillinger.
Flott jobb så langt! La oss gå videre ved å bruke resten av laget stilinnstillingene
Gradient Overlay
Blend Mode:... Normal
Opacity. 100%
Gradient Reverse. Sjekk
Styler. Lineær
Angle: 90 °
Scale:.. 150%
Indre Shadow
Blend Mode:.. Normal
Opacity:
10% Angle.
-90 Bruk global lys. kryssene.
Avstand:. 5px
Choke: 0%
Størrelse:... 8 piksler
Drop Shadow
< li> Blend Mode: Normal
Opacity:.. 42%
Angle: 90.
Bruk global lys: kryssene
Avstand. 2 piksler.
Spread:. 0%
Størrelse:. 3px
Utdrag: Smarte gjenstander ble introdusert til Photoshop med utgivelsen av CS2. Smart filtrene ble lagt i CS3. Så du trenger en oppdatert versjon av Photoshop for å dra nytte av disse typer destruktiv teknikker. Smarte objekter og smarte filtre gi rom for en fleksibel arbeidsflyt. Smart gjenstander peker på en original vektor objekt, raster image, eller RAW-fil.
Ved hjelp av smarte gjenstander betyr at du jobber med referansebilder. Så når du arbeider med smarte objekter, gjør endringene påført dem ikke påvirker originalbildet. Du kan også lagre disse effektene og swap bilder. Smart filtre er heller ikke permanent effekt, men kan redigeres eller fjernes. Normale filtre er irreversible, i hvert fall etter å lagre dokumentet. PSDTUTS +
For å kunne bruke smartfiltre følger bildet nedenfor
Legg til en støyeffekten til vår Smart filtre lag
Antall:.. 1.
Distribusjon:. Uniform
monokromatisk.. Sjekk
Dette er hvordan det ser ut når du konverterer et lag til smartfiltre
jeg har mottatt en haug med spørsmål om å gjøre sømmen effekt i Photoshop. Det er ikke så vanskelig; bare velg Horizontal Type Tool (T), så hold negativ (-) tasten til du har resultatet under
Gi laget denne fargeverdi. # 1C1C1C, deretter bruker den innstillingen Drop Shadow som du ser i bildet nedenfor har vi en ganske overbevisende sting effekt . Vår navigasjon er litt mørkere. Jeg tenkte kanskje jeg skulle bruke litt lys, hva tror du ?. Lag en kopi av navigasjonsfeltet, så klart lag stil og sette Fyll lag til 0%. Bruk innstillingene lag stil som du ser i bildet nedenfor. Gradient Overlay. < .no> Indre skygge Her er et før og etter henvisning Velg Horisontal Type Tool (T), skriver du.. navigasjon tekst, og deretter bruke følgende tegn innstillinger som du ser i bildet nedenfor Jepp, det er på tide å lage rullegardinmenyen. Grab Avrundet rektangel Tool (U), opprette en Avrundet av 147x120px og husk å opprettholde kvaliteten på kantene så mye som mulig - pixel perfeksjon Gjør et valg med Rectangular Marquee Tool (M), invers utvalget. Nå kan du legge en ny maske til vårt lag ved å følge innstillinger Layer> Layer Mask> Reveal Selection. Vi har nå effektivt trimmet den øvre delen av. Inverse. lagmaske. Dette er hvordan lagmaske vises. Nå, la oss gi vår lille runde formen en gradient overlay effekt gradient overlay Drop Shadow < .no> Flytt til neste trinn og gjelder støyeffekten Velg Rectangular Marquee Tool (M), opprette et utvalg av 147x49px, fyll den med denne fargen verdi:.. #FFFFFF Kall det "Transparent", sett fyll lag til 0% Etter å ha fullført det gjelder graderingen gjennomsiktig effekt som du ser i bildet nedenfor. Og dette er hvordan det ser ut etter å ha søkt graderingen gjennomsiktig effekt. nå hva vi skal gjøre er å kopiere en kopi av avrundet rektangel lag og satt Fill Layer til 0%. Vi vil deretter bruke gradient gjennomsiktig effekt Gradient Overlay Indre skygge < .no> Bruk Rectangular Marquee Tool (M) for å lage de horisontale skillelinjer med # b4b4b4 som du ser i bildet nedenfor. Grab Horisontal Type Tool (T), start å skrive elementene i undermenyen, ved hjelp av følgende karakter . innstillinger Husk at teksten skal bli sittende på baseline Grid Grab Horisontal Type Tool (T), skriv inn navnet på nettstedet ditt ved hjelp av følgende tegn innstillinger: Bruk Rectangular Marquee Tool (M) for å lage et utvalg av 468x60px, fyll den med denne fargen verdi: # 474747, deretter bruke en Stroke effekt Stroke Og dette er. hvordan det skal se ut når du har fullført alle disse trinnene Ok, la oss komme i gang med lysbildefremvisningen. Grab rektangel Tool (U), opprette et rektangel av 700x254px, deretter bruke følgende innstillinger Drop Shadow Dra et bilde inn i dokumentet og opprette en klipping maske ved å holde ALT + CTRL + G, kan du gjøre det ved å følge innstillingen Layer> Opprett klipping Mask. beskjærings~~POS=TRUNC Mask. igjen, ta tak i rektangelverktøyet (U), opprette et rektangel av 128x211px og bruke klipping maske til det. nå er det på tide å gjøre vår lysbilde pop litt ved å legge noen skygger bak glidebryteren. Velg rektangel Marquee Tool (M), gjør et utvalg av våre lag forme som du ser i bildet nedenfor. Velg Gradient Tool (G), sørg for at det er en gjennomsiktig gradient skygge. Her er en rask spiss for å gjøre det riktige skyggen; når du velger gradient verktøyet klikk og dra og sørge for at fingeren er på Skift-tasten. Gjenta den samme prosessen med riktig lag. Hmm ... Jeg tror våre Bildeserie behov å bli sydd, hva tror du? Grab rektangel Tool (U), lage en horisontal rektangel av 2 piksler høyde, deretter bruke følgende mønsterinnstillingene Lag en kopi av vår sting og dra det litt. ned som du ser i bildet nedenfor. Dette hvordan det ser ut når du har bruke maske effekt på resten av bildene. det er ett skritt skal være ferdig for vår slideshow , navigasjonsknappene. Grab Avrundet rektangel Tool (U), opprette en avrundet form av 119x19px, deretter bruke innstillingene lag stil til det Stroke Drop Shadow igjen, velg avrundet rektangel Tool (U), opprette en avrundet form, gi laget denne fargeverdi: #DFDFDF, deretter bruker de lag stilinnstillingene under Gradient Editor Gradient Overlay Indre skygge Bruk det samme verktøyet for å lage resten av knappene. Vi er ikke ferdig ennå! Vi må gjøre en ting til, vi kommer til å lage en liten ikonet under vår lysbildefremvisning. Velg Custom Shape Tool (U), og velg deretter formen som på bildet under Red.anm. Jeg har ingen anelse om hva dette UI element er for! Vi skal sette det ned til designer skjønn :) Gi laget form denne fargen verdi: #FFFFFF Ta det mangekantede lassoverktøyet (L), dele halvparten av formen ved å gjøre et utvalg som du ser i bildet nedenfor. Husk hvordan vi anvendt klipping masker tidligere? Alright da, gi vår form en lagmaske Og der vi er, har vi gjort å skape vår lysbilde La oss starte først med kjærlighet Button. Velg rektangel Marquee Tool (M), opprette et rektangel av 60px, bruker gradient verktøyet for å lage en gjennomsiktig skygge. Endre tettheten av våre lag til 10%. Velg rektangel Tool (U), opprette et rektangel av 1x173px, deretter bruke følgende innstillinger. Husk at vi alltid satt fyllet av laget til 0% Pattern Overlay Lag en kopi av vertikale lag, drar det litt til høyre som du ser i bildet. nedenfor. La oss legge til tekst til vår kjærlighet knappen. Velg Horizontal Type Tool (T), skriv inn et nummer, og deretter bruke følgende tegn innstillinger Loves Vi vil avslutte kjærlighet knappen ved å lage et hjerte form. Velg Custom Shape Tool (U), plukke hjerte form, gi laget form denne fargen verdi. # D25455 Etter å ha fullført kjærlighet knappen la oss gå videre til neste trinn, plassere tekst og miniatyrbilder. Velg Horizontal Type Tool (T), skriv inn navnet på vår kategori som i dette tilfellet er "Forretnings> gamification", og deretter bruke følgende tegn innstillinger. Tittel Skrevet av, Dato Kommentarer Beskrivelse tagger det er på tide å lage miniatyrbilde. Grab rektangel Tool (U), opprette et rektangel av 160x157px, gjelder følgende lag stilinnstillingene Stroke Drop Shadow Legg til nytt bilde i vår lag form og flette bildet med laget formen ved å påføre Mask Technique; Layer> Opprett Klipping Mask. Vi er nær slutt den første kategorien. Grab rektangel Tool (U), kan du bruke den til å lage et rektangel av 1px høyde som du ser på bildet nedenfor, og deretter bruke følgende innstillinger til det. Dette er. hvordan det skal se ut når du har lage resten av kategoriene. Husk at mellom hver kategori er 29px høyde tomrom For å skape de gamle innleggene, først ta tak i rektangelverktøyet (U) og lage et rektangel av 280x11px. Opprett en tom plass ved å gjøre et utvalg av 100px, husk å kutte den delen av laget av, og pass på at du har brukt maske teknikk. Dette er tom . plass der vi kommer til å legge til vår "gamle innlegg" tekst Bruk innstillingene Layer stil Pattern Overlay Skriv inn "gamle innlegg", da en søknad. følgende tegn innstillinger Lag en liten vertikal linje ved hjelp av rektangelverktøyet (U) med 1px, deretter bruker sting effekten til det. Husk å sette fill opacity til 0% Pattern Overlay Grab rektangelverktøyet (U), opprette et rektangel av 60x61px, bruke de samme innstillingene som vi gjorde med kategorien thumbnail image Stroke Drop Shadow Legg til et bilde på det, og du vil ha dette resultatet . Velg Horizontal Type Tool (T), skriv inn navnet på vår kategori og dato, deretter bruke følgende tegn innstillinger Dette hvordan er ser ut når du lager resten av kategoriene, mellom hver kategori er det 18px av tomrom for å lage neste side, ta rektangel Tool (U), opprette et rektangel av 35x37px, gi laget form denne fargen verdi. # 333333 igjen, ta tak i rektangelet Tool (U), skape resten av figurene, gi laget denne fargeverdi: #CCCCCC Grab Pencil Tool (B) og (nøye!) skaper den lille pixel ikonet som vises her Grab rektangelverktøyet (U), opprette et rektangel av 300x100px som vi gjorde med den gamle innlegg seksjon, lage en tom plass på 100px, deretter bruker de samme innstillingene. . Vi vil ha dette resultatet under Skriv inn abonnere teksten, og deretter bruke følgende tegn innstillinger til det Det er på tide å legge sosiale medier ikoner. Vi vil bruke Abonner og Twitter ikoner, så grip noen passende ikoner (prøv disse fra Design Kindle) og drar et par i dokumentet. Da gjelder følgende tegn innstillinger Antall abonnenter Abonnenter Bruk samme innstillinger til twitter-delen som du ser i bildet nedenfor Og dette er hvordan det ser ut når du ' re ferdig for å skape søkeboksen delen, ta tak i avrundet rektangel Tool (U), opprette en avrundet form av 220x31, da gjelder følgende lag stilinnstillingene fargeovergangsbehandlaren Gradient Overlay Stroke Det skal se omtrent slik ut:. igjen, ta tak i Avrundet rektangel Tool (U), gi knappen form, gi laget form denne fargen verdi: # 2D2D2D, konvertere formen til en Smart Filter ved å gå til Filter> Konverter for smartfiltre, deretter bruke følgende innstillinger Gradient Overlay Legg Noise Velg Horizontal Type Tool (T), type "søk Sjekk. her "i form og" Søk "i knappen form, deretter bruke følgende tegn innstillinger Last ned eller lage en reklame banner 125x125px som du ser i bildet nedenfor Grab avrundet rektangel Tool (U), opprette en avrundet form av 368x301px, sette fyllet laget til 0%, og deretter bruke følgende innstillinger lag stil til det. Drop Shadow. Dette er hvordan det ser ut nå . Sørg for at du allerede har satt fylleslag til 0%, slik at vi kan jobbe med et tomt skjema. Igjen, ta tak i Avrundet rektangel Tool (U) og la oss jobbe på over delen som er "TAB" . Lag en avrundet form av 230x36px, gi laget form denne fargen verdi:.. # F4F3F3, deretter bruke følgende innstillinger Gradient Overlay Legg til støy Grab rektangelverktøyet (U), gjør tre vertikale linjer, gi laget form denne fargeverdi. #DEDEDE som du ser i bildet nedenfor Grab Horisontal Type Tool (T) skriv navnene på de mest populære delen ved hjelp av følgende tegn innstillinger i dette trinnet skal vi skape en lite miniatyrbilde, ta tak i rektangelverktøyet (U), opprette et rektangel av 40x43px, deretter bruke følgende lag stilinnstillingene Drop Shadow Legg til et bilde på det, og du vil ha dette resultatet Grab Horisontal Type Tool (T), skriv inn navnet på våre innlegg, deretter bruker den. . følgende tegn innstillinger Dato Lag en maske linje med 368x1px Dette er hvordan det ser ut når du har fullført alle trinnene ovenfor.. Lag seks kopier av det Lag en kopi av søkeboksen mappe og endre navnet på "Søk her" til "Skriv inn din e" og "Søk" til "Abonner". Enkelt For å lage kategorier og sider delen, ta tak i Horisontal Type Tool (T), skriver du inn navnet ditt kategorier da gjelder følgende tegn innstillinger som du ser i bildet nedenfor Høyre Dette er det endelige resultatet av våre kategorier og sider seksjon Grab rektangelverktøyet (U), opprette et rektangel av 300x181px, legge til et bilde av den da gjelder følgende lag stilinnstillingene Stroke Drop Shadow Dette er det endelige resultatet av våre "video i uken" område Grab rektangelverktøyet (U), opprette et rektangel av 1260x721, gi laget form denne fargeverdi . # 2D2D2D, deretter bruke følgende innstilling til det Legg til støy igjen, ta tak i rektangelverktøyet (U), opprette ovenfor en del av 19px høyde, gi laget form denne fargen verdi. # 2D2D2D Husk sting teknikk? ok da, gjelder det til ovennevnte delen Grab Horisontal Type Tool (T), skriv inn navnet på ditt nettsted logo ved hjelp av følgende tegn innstillinger Lag et rektangel form av 60x10px, sette fyllet laget til 0%, og deretter bruke følgende mønsterinnstillingene Pattern Overlay Twitter Tittel Dato Opprett en horisontal separator linje med 221px som du ser i bildet nedenfor. Dette hvordan det ser ut når du har gjort alle trinnene ovenfor, må fem eksemplarer av den. Bruk den samme innstillingen til siste innlegg seksjon Legg til en Flickr-delen som du ser i bildet nedenfor. Grab rektangelverktøyet (U), opprette et rektangel av 73px høyde for rettighets bar, deretter bruke maske teknikk. Grab Horisontal Type Tool ( T), skriv inn navnet på opphavsretten, og deretter bruke følgende tegn innstillinger copyright av designer Dette har vært en lang spasertur gjennom, og jeg håper at du har lært noe nytt og nyttig. Du skal nå kunne bruke noen av disse teknikkene til din egen design, og gjør dine egne avgjørelser underveis. Hvis du har noen spørsmål du gjerne spørre i kommentarfeltet nedenfor, og jeg skal gjøre mitt beste for å hjelpe. Takk for å følge med!
Blend Mode: Normal
Opacity:.. 10%
Angle. -90
Bruk global lys. kryssene
< li> Avstand:. 1px
Choke:. 0%
Størrelse:. 0px
Blend Mode: Normal
Opacity. 8%
Gradient Omvendt:.. Sjekk
Styler: Lineær
Scale:.. 100%
Farge:.. #FFFFFF
Blend Mode:. Normal
Opacity. 10%
Angle: 90.
Bruk global lys: kryssene
Avstand:. 1px
.
Choke: 100.
Størrelse: 0px
Font. Helvetica Neue LT Std
Vekt:.. 55 Roman
størrelse:. 12px
Utligning: Metrics
Farge:.. #ebebeb
Anti-Aliasing: Sharp
Trinn 4:. Opprette Drop-down menu
Blend Mode:... Normal
Opacity.
100% gradient Omvendt:. kryssene
Styler:
Linear Angle:.. 90 °
Scale:.. 100%
Blend Mode: Normal
Opacity:.. 76%
Angle. -90
Bruk global lys. kryssene
Avstand:. 2 piksler
Spread:. 0%
Størrelse:.. 0px
Antall: 2.
Distribusjon:. Uniform
monokromatisk. Sjekk
Blend Mode:... Normal
Opacity. 8%
gradient Omvendt:. kryssene
Styler. Lineær
Angle: 90 °
Scale:... 100%
Farge.
Blend Mode: Normal
Opacity:.. 10%
Angle: 90.
Bruk global lys: kryssene
Avstand:.. 1px
Choke: 100.
Størrelse:. 0px
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 12px
utligning:. Metrics
Ledende. 18px
Farge.
Anti-Aliasing. Sharp
Trinn 5:. Opprett Logo
Font. Arial
Vekt: Svart.
Størrelse:. 48px
Utligning: Metrics
Farge. # 202020-D55355
Anti-Aliasing. Crisp
Trinn 6: Opprett Header Banner
Størrelse:... 3px
Posisjons.
Inside Blend Mode: Normal
Opacity:.. 100%
Fyll Type:. Farge
Farge: #FFFFFF
trinn 6:. Lag lysbilde
Farge:... # 000000
Blend Mode:. Normal
Opacity. 50%
Angle: 90.
Bruk global lys: kryssene
Avstand:. 0px
.
Spread:. 0%
Størrelse:. 5px
Pattern Overlay Blend Mode:... Normal
< li> Opacity: 31%
Scale. 100%
Link med lag: Sjekk
Størrelse:... 1px
< li> Posisjons. Utenfor
Blend Mode: Normal
Opacity. 22%
Fyll Type:. mønster
Scale. 100%
Link med lag: Sjekk
Farge:...
Blend Mode:. Normal
Opacity: 20%
Angle. 90.
Bruk global lys. kryssene
Avstand:. 0px
Spread: 0 %
Størrelse:.. 3px
Blend Mode:.... Normal
Opacity. 100%
Gradient Reverse.
Styler. Lineær
Angle:. 90 °
Scale. 100%
Farge. # 000000
Blend Mode: Normal
Opacity:.. 12%
Angle: 120 ° .
Bruk global lys. Sjekk
Avstand:. 2 piksler
Choke: 0%
Størrelse:.. 2 piksler
Trinn 7:.. Opprett kategorier
Blend Mode:.. Normal
Opacity:.. 25%
Skala: 100%
Link med lag: Sjekk
Font:.. Arial
Vekt: Fet
Størrelse.: 28px
utligning:.. Metrics
Farge. # E0E0E0
Anti-Aliasing:.. Sharp
Font. Georgia
Vekt: Fet Kursiv
Størrelse:.. 21px
utligning: Metrics
Farge. # E0E0E0 .
Anti-Aliasing. Sharp
Font. Georgia
Vekt: Fet Kursiv
Størrelse:.. 13 piksler
utligning:. Metrics
Farge. # 5E5E5E
< li> Anti-Aliasing:.. Crips
Font: Helvetica Neue LT Std
Vekt:.. 55 Roman
< li> Størrelse:. 18px
utligning:. Metrics
Ledende. 18px
Farge.
Anti-Aliasing. Crips < .no>
Font.
Vekt:.. Regelmessig
Størrelse:. 13 piksler
Utligning: Metrics
Farge:.. # 5E5E5E- # AAAAAA
Anti-Aliasing: crips
Font. Arial
Vekt: Regular
Størrelse:.. 13 piksler
utligning:. Metrics
Ledende. 18px
Anti-Aliasing # 5E5E5E::
Skrift Crips. Georgia
Color... > Vekt:. Regelmessig
Størrelse:. 11px
utligning:. Metrics
Farge. # 5E5E5E
Anti-Aliasing: Crips
Font. Georgia
Vekt:. Regelmessig
Størrelse:. 13 piksler
Utligning. Metrics
farge:. #AAAAAA
Anti-Aliasing. Crips
Størrelse:... 3px
plassering: . inne
Blend Mode: Normal
Opacity. 100%
Fyll Type:. Farge
Farge:.. #FFFFFF
Farge:.. # 000000
Blend Mode: Normal
Opacity:..
vinkel: 90 °
Bruk global lys. kryssene
Avstand:.. 0px
Spread:. 0%
Størrelse:. 3px
Blend Mode:. Normal
Opacity. 10%
Skala: 100%
Link med lag: Sjekk
Trinn 8:. Opprett Gamle innlegg
Blend Mode:... Normal
Opacity: 10%
Scale. 100%
Link med lag: Sjekk
Font:.. Helvetica Neue (TT)
Vekt:. Fet
Størrelse:. 14 piksler
Utligning: . metrics
color: # 999999
Anti-Aliasing:.. Crisp
Blend Mode:... Normal
Opacity.
Link med lag. Sjekk
Størrelse:... 3px
Posisjons.
Inside Blend Mode:. Normal
opacity. 100%
Fyll Type:. Farge
Farge:.. #FFFFFF
Farge: . # 000000
Blend Mode: Normal
Opacity:.. 20%
Angle: 90 °
Bruk global lys.. Fjern merket
Avstand:. 0px
Spread:. 0%
Størrelse:. 3px
Font:.. Georgia
< li> Vekt:. Regelmessig
Størrelse:. 12px
utligning: Metrics
Farge:.. # 5E5E5E-AAAAAA
Anti-aliasing: Crisp
Font Tittel:
Vekt Georgia. Regelmessig
Størrelse:.. 18px
Ledende:.. 18px
Farge.
Anti-Aliasing. Crips
Trinn 9:. Opprett Neste side
Font. Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:. 13 piksler
Utligning:
Farge. # 5E5E5E.
Anti-Aliasing. Crisp
Trinn 10.: Lag "Social Media" seksjon
Font:.. Helvetica Neue (TT)
Vekt:. Fet
Størrelse:. 14 piksler
Utligning. Metrics
color: # 888888
Anti-Aliasing:.. Crisp
Font:... Georgia
Vekt:. Regelmessig
Størrelse: 20px.
Utligning. Metrics
color: # 444444
Anti-Aliasing:... Crisp
Font. Georgia
Vekt:. Regaluar
Størrelse:. 13 piksler
utligning: Metrics
Farge:.. # 999999
Anti-Aliasing:.. Crisp
Trinn 10:. Lag "Search Box" §
Blend Mode:... Normal
Opacity. 100% .
Gradient Reverse. Sjekk
Styler. Lineær
Angle: 90 °
Scale:.. 100%
Størrelse:.. 1px
Posisjons. Inside
Blend Mode:. Normal
Opacity: 22%.
Fyll Type: mønster
Scale. 100%
Link med lag: Sjekk
Blend Mode:... Soft Light
Opacity. 60%
Gradient Omvendt: Sjekk
Styler:.. Lineær
Angle: 90 °
Scale. 100%
<.. br>
Antall: 2.
Distribusjon:
monokromatisk.
Font:.. Helvetica Neue (TT)
Vekt:. Fet
Størrelse:
utligning:. Metrics
Farge:..
Anti-Aliasing. Crisp
Trinn 11: Lag "Sponsorene" Seksjon
Trinn 11:. opprette "mest populære" Seksjon
Farge. # 000000
Blend Mode:. Normal
Opacity. 28%
Angle: 90 °
Bruk global.
Avstand kryssene::
0px Spread:. lys.. 0%
Størrelse:. 3px
Blend Mode: Overlay
.
Opacity: 50%
Gradient Omvendt:.. Sjekk
Styler. Lineær
Angle: 90 °
Scale. 130% .
. Antall: 1.
Distribusjon:. Uniform
monokromatisk. Sjekk
Font. Helvetica
Vekt:. Fet
Størrelse:.. 12px
Utligning:. Metrics
Farge. # 555555
Anti-Aliasing. Crisp
Stroke Størrelse:.. 2 piksler
.
Posisjons. Inside
Blend Mode: Normal
Opacity. 100%
Fyll Type:.. Farge
Farge: #FFFFFF ..
Farge. # 000000
Blend Mode:. Normal
Opacity. 47%
Angle. 90 °
Bruk global lys. kryssene
Avstand: 0px
Spread:.. 0%
Størrelse .: 2 piksler
font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.
14 piksler utligning:. Metrics .
Ledende. 18px
color: # 444444
Anti-Aliasing:... Crisp
Font. Georgia
Vekt:. Kursiv
Størrelse:. 12px
Utligning. Metrics
Farge. # C0C0C0
Anti-Aliasing. Crisp
Trinn 12:. Lag "Nyheter Abonner" Seksjon
Steg 13: Opprett de "kategorier og sider" Seksjon
Font:.. Helvetica Neue (TT)
Vekt: Fet
Størrelse.: 12px
utligning:.. Metrics
Ledende. 36px
Farge.
# 5E5E5E Anti-Aliasing. Crisp
Font:.. Helvetica Neue (TT)
Vekt:. Fet
Størrelse:. 12px
Utligning .: Metrics
Ledende. 36px
Farge: # 5E5E5E
Anti-Aliasing:.. Crisp
Trinn 14:. Lag "Video of the week" §
Størrelse:... 3px
Posisjons.
Inside Blend Mode: Normal .
Opacity. 100%
Fyll Type: Color
Farge. #FFFFFF
<.. br>
Farge. # 000000
Blend Mode: Normal
Opacity. 12%
Angle:.. 90 °
bruk
Avstand kryssene:.: 0px
Spread: global lys.. 0%
Størrelse:. 3px
Trinn 15:. opprette bunntekstområdet
. Antall: 1.
Distribusjon:. Uniform
monokromatisk. Sjekk
Font:.. Arial .
Vekt:
Size Svart. 13 piksler
utligning: Metrics
Farge:.. # 202020-D55355
. anti-Aliasing. Crisp
<.. br>
Blend Mode: Normal
Opacity:.. 34%
Skala: 100%
Link med lag: Sjekk
<. p> Grab Horisontal Type Tool (T), skriv beskrivelse av nettstedet ditt ved hjelp av følgende tegn innstillinger
Font. Arial
Vekt:.. Regelmessig
< li> Størrelse:. 13 piksler
utligning: Metrics
Ledende:.. 18px
Farge: # E0E0E0
Anti-Aliasing:.. Crisp < . .no>
Font:
Vekt:.. Fet
Størrelse:. 14 piksler
utligning:. Metrics
Farge.
#FFFFFF Anti-Aliasing:.. Crisp
Font. Arial
Vekt: Regular
Størrelse:.. 13 piksler
utligning:. Metrics
Ledende. 18px
farge:. # E0E0E0
Anti-Aliasing: Crisp
Font:...
Georgia Vekt: Kursiv .
Størrelse:. 12px
Utligning: Metrics
Farge. # 8F8F8F
Anti-Aliasing:.. Crisp
Font. Arial
Vekt:. Regelmessig
Størrelse:.. 13 piksler
Utligning .: Metrics
Ledende. 18px
Farge. # E0E0E0
Anti-Aliasing. Crisp
Font:.. Arial
Vekt: Regular
Størrelse:.. 13 piksler
utligning: Metrics
Ledende:.. 18px
color: # E0E0E0
Anti-Aliasing:.. Crisp
Font:.. Arial
Vekt:. Regelmessig
Størrelse:. 13 piksler
Utligning: Metrics.
Ledende. 18px
Farge: # E0E0E0
Anti-Aliasing:.. Crisp
Konklusjon