Share
I denne opplæringen lager vi et kreativt bloggoppsett ved hjelp av for det meste enkle former, noen børste teknikker, noen bilder og en dose Photoshop-oppfinnsomhet. Å lage webdesignoppsett er enklere enn du kanskje tror. Du kan lære å bygge attraktive design raskt. Å lage denne designen vil ta mindre enn to timer, og du vil lære noen profesjonelle tips underveis. La oss komme i gang!
Ta en titt på bildet vi skal skape. Det endelige bildet er under, eller du kan se et fullstørrelsesbilde her.
For å fullføre denne opplæringen må du laste ned 960 Grid-systemet. La oss begynne.
Åpne "960_grid_12_col.psd" -malen i Photoshop. Det vil se ut som bildet vist nedenfor. Grid-systemet er nyttig fordi det lar deg justere oppsettet raskt.
Velg bakgrunnslaget og trykk på Command + J. Dette er snarveien for å duplisere et lag. Ved å bruke snarveier øker hastigheten på designprosessen. For dette nye laget legger vi til en fin gradientfarge. Gå nå til Lag> Lagstil> Gradientoverlegg og bruk følgende innstillinger.
Skjul nå rutenettet fordi du ser designen bedre. Hold rutenettet synlig fordi du kan justere formen bedre. Velg det avrundede rektangelverktøyet, og opprett en form øverst på oppsettet.
For denne navigasjonslinjen legger du til følgende lagstiler.
Bruk det samme verktøyet (avrundet rektangulært verktøy) opprett en annen form og fyll den med fargen: # 001424.
Legg til følgende lagestil for denne formen.
Opprett en annen form med det avrundede rektangelverktøyet ved hjelp av hvitt for fargen.
Også for denne formen legger du til noen enkle lagstiler og endrer fyll-verdien til 10%.
Nedenfor er resultatet hittil.
Over denne siste formen plasserer et bilde. Jeg har brukt noen bilder fra noen opplæringsprogrammer jeg har laget for Grafpedia, som fungerer som gode bildeeksempler for dette designet. Du bør selv bruke dine egne bilder selvfølgelig.
Nå må du laste inn valget for dette bildet. For å laste inn valget, velg laget i lagpaletten din og gå til Velg> Last inn valg. Du vil se et utvalg rundt bildet som i det følgende bildet.
Opprett et nytt lag på toppen av alle lag ved hjelp av denne snarveien: Kommando + Skift + Alt + N. Velg penselverktøyet, og velg en glatt rund pensel. Over det nye laget tegner en horisontal linje. Hold nede Shift-tasten når du tegner tegningen. På denne måten tegningen vil være perfekt horisontalt.
Trykk på Kommando + D for å fjerne markeringen. Bruk nå det runde rektangelverktøyet til å lage en annen form med fargen # 4b6e82.
For begge former legger du til følgende lagstiler.
Ta tak i Ellipseverktøyet og lag en form rett under sidebjelken.
Gå til Filter> Blur> Gaussian Blur og bruk følgende innstillinger. Photoshop vil spørre deg om du vil Rasterize formen, fortsett og trykk OK.
Som du kan se fra forrige trinn, har vi opprettet en skygge der. La oss nå fremheve denne skyggen ved å legge til noen lys. Velg linjeverktøyet, og sett vekten til linjen til 1 piksel, og opprett deretter en vertikal linje som vist.
Høyreklikk på laget og velg Rasterize lag.
Velg Eraser Tool, og velg en jevn, rund pensel på rundt 100px. Bruk den til å slette toppdelen og den nederste delen av linjen.
Med samme teknikk oppretter du en annen linje på sidelinjen.
Rett under denne hvite linjen opprett en annen som er svart.
I midten av oppsettet lag en annen form med det avrundede rektangelverktøyet.
Opprett noen former med rektangulærverktøyet. Over disse figurene legger vi til noen bilder senere.
Legg til de samme lagstilene for alle disse tre figurene.
Nå er det på tide å legge bildene over disse hvite figurene. Legg også til litt tekst med Horizontal Type Tool på høyre side.
Lag en strekk linje mellom innleggene med Horizontal Type Tool.
Opprett ytterligere tre former og plasser dem under Post-metadata-teksten.
Over sidepanelet oppretter en søkeboks ved hjelp av det avrundede rektangelverktøyet. På samme tid kan du se at jeg har lagt litt tekst over navigasjonslinjen også.
Legg til følgende lagstiler for denne søkeboksen.
Bruk nå det runde rektangelverktøyet til å skape en annen form. Legg denne formen over forrige form. Legg også til et ikon på høyre side.
Rett over lysbildefremvisningen skaper en annen hvit form.
Legg til følgende lagstiler for denne formen.
Hold nede Kommandoknappen, og trykk på kanten av formen to ganger med pennverktøyet. Ankerpunktet blir aktivt og vi vil kunne endre utseendet på formen.
Med kommandotasten fortsatt trykket, velg følgende ankerpunkt.
Hold nede Skift-tasten og trykk en gang på pil ned-tasten fra tastaturet. Ankerpunktet beveger seg ned og du får følgende resultat.
Bruk Ellipseverktøyet til å lage en sirkel.
Høyreklikk på laget og velg Rasterize Layer. Med Rectangular Marquee Tool gjør du et utvalg som vist nedenfor.
Pass på at du har laget med denne lille sirkelen valgt, og trykk deretter på Slett-tasten. Dra dette laget over bakgrunnslaget i lagpaletten din. Dette er mitt resultat så langt.
Nå legger vi til to knapper for at brukerne skal kunne endre bildeseriebildet. Du må bruke det runde rektangelverktøyet for å lage formen, og deretter kan du bruke Custom Shape Tool til å legge til pilene.
Over sidepanelet oppretter noen hvite former som vist nedenfor.
For alle disse hvite fargene legges du til de samme lagformatene.
Legg til noen bannere i sidefeltet. Legg også til noen sosiale bokmerkingsikoner på toppen av webdesign. Det finnes mange gratis ikoner tilgjengelig på Internett for å velge mellom.
Legg nå litt tekst med Horizontal Type Tool nederst på sidefeltet. Legg også til minus tegn mellom teksten ved hjelp av Horizontal Type Tool for å lage stiplede horisontale regler.
La oss legge til andre detaljer på navigasjonslinjen. Bruk Linjeverktøyet til å lage to små linjer. Zoom inn i dette bildet slik at du kan se bedre hva du gjør.
Velg begge lagene i lagpaletten din. For å velge begge lagene må du holde nede Kommandotasten når du velger begge lagene. Når du har valgt linjene, trykk Kommando + E for å slå sammen lagene i en enkelt. Velg Eraser Tool og bruk den til å slette toppdelen og den nederste delen av linjene. Vær oppmerksom på at du trenger en myk rund pensel med en størrelse på 20 piksler.
Endre blandemodus for dette laget til Soft Light. Dupliser det et par ganger og plasser linjen mellom de andre tekstknappene.
Lag nå teksten for dette Wordpress-layoutets logo i en størrelse som ser bra ut til deg.
Legg til følgende lagstiler for denne tekstlogoen.
Rett over "bakgrunn" -laget lager et nytt lag (Command + Shift + Alt + N). Med børsteverktøyet gjør du et høydepunkt med en myk, rund pensel som vist.
Endre blandemodus for dette laget til Soft Light.
Designet er ferdig! Jeg håper du likte å skape! Det endelige bildet er under, eller du kan se et fullstørrelsesbilde her.
Accentsconagua