How å lage en kreativ Bloggutforming
I denne opplæringen, vil vi lage en kreativ blogg layout ved hjelp av stort sett enkle figurer, noen penselteknikker, noen bilder og en dose av Photoshop oppfinnsomhet . Opprette webdesign oppsett er enklere enn du kanskje tror. Du kan lære å bygge attraktive design raskt. Opprette denne designen vil ta mindre enn to timer, og du vil lære noen profesjonelle tips underveis. La oss komme i gang!
Final Bilde Forhåndsvisning
Ta en titt på bildet vi skal opprette. Det siste bildet er nedenfor, eller du kan se et bilde i full størrelse her
Tutorial Detaljer
Program:. Adobe Photoshop CS4
Vanskelighetsgrad: Middels
< li> Beregnet Fullføringstidspunkt: 1,5 timer
Resources
for å fullføre denne opplæringen du trenger å laste ned 960 Grid System. Nå la oss begynne.
Trinn 1
Åpne "960_grid_12_col.psd" mal i Photoshop. Det vil se ut som på bildet nedenfor. The Grid System er nyttig fordi det tillater deg å justere oppsettet raskt.
Trinn 2
Velg bakgrunnslaget og trykker Kommando + J. Dette er snarveien til å duplisere et lag. Bruke snarveier vil få fart på designprosessen. For dette nye laget vil vi legge til en fin gradient farge. Nå gå til Layer > Lagstilen > Gradient Overlay og bruke følgende innstillinger.
Trinn 3
Nå skjule Grid fordi å se utformingen bedre. Hold rutenett synlig fordi du kan justere formen bedre. Velg Avrundet rektangel Tool, og skape en form på toppen av oppsettet.
Trinn 4
For dette navigasjonsfeltet legge følgende lagstiler.
Trinn 5
ved å bruke det samme verktøyet (Avrundet rektangel Tool) opprette en annen form og fylle den med fargen.. # 001424
Trinn 6
Legg følgende lag stil for denne formen
Trinn 7
Opprett en annen form med avrundet rektangel Tool bruker hvit for fargen.
Trinn 8
også for denne formen legge noen enkle lagstiler og endre Fyll verdien til 10%.
Nedenfor er resultatet så langt.
Trinn 9
i løpet av denne siste formen sted et bilde. Jeg har bruke noen bilder fra noen tutorials jeg har laget for Grafpedia, som fungerer som gode bildeeksempler for design. Du bør bruke dine egne bilder men selvfølgelig.
Trinn 10
Nå må du laste valget for dette bildet. Slik legger utvalget, velger du laget i lag paletten og deretter gå til Velg > Last valg. Du vil se et utvalg rundt bildet som i følgende bilde
Trinn 11
Lag et nytt lag på toppen av alle lag ved å bruke denne snarveien. Command + Shift + Alt + N. Velg Brush Tool, og velg en glatt rund pensel. Over det nye laget tegne en horisontal linje. Hold nede Skift-tasten når du gjør tegningen. På denne måten tegningen vil være perfekt horisontalt.
Trinn 12
Trykk Kommando + D for å fjerne markeringen. Nå bruker Avrundet rektangel verktøyet for å skape en annen form med farge # 4b6e82.
Trinn 13
For begge formene legge følgende lagstiler.
Trinn 14
Grab Ellipse Tool og skape en form rett under sidepanelet form
Trinn 15
Gå til Filter >.; Blur > Gaussian Blur og bruke følgende innstillinger. Photoshop vil spørre deg om du vil rastrere form, gå videre og trykk OK.
Trinn 16
Som du kan se fra forrige trinn, har vi laget en skygge der. Nå la oss fremheve denne skyggen ved å legge til noen lys. Velg linjeverktøyet, og stille inn vekten på linjen til en piksel, og deretter opprette en loddrett linje som vist.
Trinn 17
Høyreklikk på laget og velge Rastrer lag.
Step 18
Velg Eraser Tool, og velg en glatt, rund pensel på rundt 100px. Bruk den til å slette den øverste delen og den nederste delen av linjen.
Trinn 19
Med samme teknikk opprette en ny linje på toppen av sidepanelet.
Trinn 20
Rett under denne hvite linjen opprette en ny en som er svart.
Trinn 21
i midten av oppsettet opprette en annen form med avrundet rektangel Tool.
Trinn 22
Lag noen figurer med rektangelverktøyet. Over disse formene vil vi legge til noen bilder senere.
Trinn 23
Legg de samme lagstiler for alle disse tre formene.
Trinn 24
nå er det på tide å legge bildene over disse hvite former. Også legge litt tekst med Horisontal Type Tool på høyre side.
Trinn 25
Opprett en stiplet linje mellom stolpene med Horisontal Type Tool.
Trinn 26
Opprett tre nye figurer og plassere dem under Post Metadata teksten.
Trinn 27
Over sidebar opprette en søkeboks med avrundet rektangel Tool. På samme tid kan du se at jeg har plassert litt tekst over navigasjonslinjen også.
Trinn 28
Vennligst legg følgende lagstiler for denne søkeboksen.
Trinn 29
nå bruker Avrundet rektangel verktøyet for å skape en annen form. Plasser denne formen over den forrige formen. Også legge til et ikon på høyre side.
Trinn 30
Rett ovenfor lysbildefremvisning opprette en hvit form.
Trinn 31
Legg til følgende lagstiler for denne formen.
Trinn 32
Hold nede Kommando-tasten og med pennverktøyet valgt, trykker du på kanten av formen to ganger. Ankerpunktet vil bli aktive, og vi vil være i stand til å endre utseendet på formen.
Trinn 33
Med Kommando-tasten fortsatt trykkes velge følgende ankerpunkt.
< h3> Trinn 34
Hold nede Skift-tasten og trykk én gang på pil ned-tasten på tastaturet. Ankerpunktet vil bevege seg ned og du vil få følgende resultat.
Trinn 35
Bruk Ellipse Tool for å lage en sirkel.
Trinn 36
Høyreklikk på laget og velge Rastrer Layer. Med Rectangular Marquee Tool foreta et valg som det er vist nedenfor.
Step 37
Vær sikker på at du har laget med denne lille kretsen valgt, og trykk deretter på slettetasten. Dra dette laget over bakgrunnslaget i lag paletten. Dette er mitt resultat så langt.
Trinn 38
Nå skal vi legge til to knapper for å tillate nettsteder brukerne å endre lysbildefremvisningen bildet. Du må bruke Avrundet rektangel Tool til å lage figuren, og deretter kan du bruke Custom Shape Tool for å legge pilene.
Trinn 39
Over sidelinjen lage noen hvite figurer som vist nedenfor.
Trinn 40
For alle disse hvite formene kan du legge de samme lagstiler.
Trinn 41
Legg noen bannere i sidepanelet. Også legge til noen sosiale bokmerker ikoner på toppen av nettstedet design. Det finnes mange gratis ikoner tilgjengelig over nettet for å velge mellom.
Trinn 42
Nå kan du legge litt tekst med Horisontal Type Tool på bunnen av sidepanelet. Også legge minustegn mellom teksten ved å bruke Horisontal Type Tool for å lage stiplede horisontale linjer.
Trinn 43
La oss legge andre detaljer på navigasjonsfeltet. Bruk linjeverktøyet til å lage to små linjer. Zoom inn på dette bildet, slik at du kan se bedre hva du gjør.
Trinn 44
Velg begge lag inni lag paletten. For å velge begge lag du trenger for å holde nede Kommando-tasten når du velger begge lag. Etter at du har linjene valgte trykk Kommando + E for å slå sammen lagene til en eneste en. Velg Eraser Tool og bruke den til å slette den øverste delen og den nederste delen av linjene. Vær oppmerksom på at du trenger en myk, rund pensel med en størrelse på 20 piksler.
Trinn 45
Endre overgangsmodusen for dette laget til Soft Light. Kopiere det et par ganger og legg linjen mellom de andre tekstknapper.
Trinn 46
Nå opprette teksten for Wordpress layout logo i en størrelse som ser bra ut for deg.
Step 47
Legg følgende lagstiler for denne teksten logoen.
Trinn 48
Rett ovenfor "bakgrunn" lag opprette et nytt lag (Command + Shift + Alt + N). Med Brush Tool lage et høydepunkt mark der med en myk, rund pensel som vist.
Trinn 49
Endre overgangsmodusen for dette laget til Soft Light.
Konklusjon
designet er ferdig! Jeg håper du likte å lage! Det siste bildet er nedenfor, eller du kan se et bilde i full størrelse her.