Utforme en ren og moderne pristabellen i Photoshop

Design en ren og moderne pristabellen i Photoshop

Photoshop blir ofte brukt til å lage grafikk og layout for web design. I denne opplæringen, vil vi forklare hvordan du oppretter en pristabellen for en hosting selskap som bruker en kombinasjon av vektor former og lagstiler. La oss komme i gang!



Instruksjons Eiendeler

Følgende eiendeler ble brukt under produksjonen av denne opplæringen.

  • Pixel Patterns



    Trinn 1: Forberedelse

    La oss starte med å lage en ny fil (Kommando /Ctrl + N) med størrelse 800 piksler og tider; 600 piksler.



    Trinn 2

    Legg Adjustment Layer Solid Color som skal brukes som bakgrunn. Velg # f7f8eb for sin farge.



    Trinn 3

    Grab gratis pixel mønster fra PSDfreemium. Dobbelklikk justeringslag for å legge Pattern Overlay bruker dette mønsteret.



    Trinn 4

    Legg til ny layer og fyll den med svart. Klikk Filter > Støy > Legg Noise



    Trinn 5

    Fra Lag-panelet satt sin blanding modus til skjerm



    Trinn 6:.. Base

    Vi starter med å tegne basen. Tegn et avrundet rektangel form med radius på 10 px. Sett sin fyllet til meget lys blå med ingen Stroke.



    Trinn 7

    Dobbeltklikk på lag for å legge Layer Style. Påfør Stroke og Indre skygge ved hjelp av følgende innstillinger



    Trinn 8: Tittel. Bar &

    Duplicate form og endre fargen. Legg rektangel form på sin nedre del og sette modus for å trekke. Nå har vi en tittellinje.



    Trinn 9

    Legg Stroke, indre glød, og Gradient Overlay bruker følgende innstillinger.

    Under kan du se resultatet av Lagstil på tittellinjen.



    Step 10

    Legg tabellen tittelen. Legg letter effekt på teksten ved å bruke Drop Shadow



    Trinn 11:. Price Info

    Legg større tekst for sin pris. Bruk middels grå som sin farge. Påfør Indre skygge og Skygge for å legge Preg effekt.

    Under kan du se forskjellen før og etter tilsetting Layer Styles.



    Trinn 12

    Legg til en annen detalj inne prisen info, for eksempel valuta tegn og sin fakturering informasjon



    Trinn 13:. Element Lister

    Duplicate bordfot og sette farge til # f0f0f0. Legg sirkel og rektangel på toppen. Sett deres modus for å trekke fra.



    Trinn 14

    Legg Layer Styles Stroke, indre glød, og Gradient Overlay.



    Trinn 15
    < p> Legg til ny lag på toppen av formen. Maling hvitt på toppen side. Hit Kommando /Ctrl + Alt + G for å konvertere laget til klipping maske. Lag nytt lag under form og deretter male svart for sin skygge.

    Her er resultatet i 100% visning.



    Trinn 16

    Legg funksjoner listeelementer ved hjelp tekstverktøyet.



    Step 17

    Legg til en px linje form mellom hvert listepunkt. Bruk svart for sin farge.



    Step 18

    Pass på at linjene er fortsatt valgt. Klikk Flere alternativer, og deretter endre Stroke alternativ til linja.



    Step 19

    Legg til lagmaske på linjene lag og maling dets venstre og høyre kant med svart.



    Trinn 20:. Button

    Tegn avrundet rektangel form med farge # a7bed5



    Trinn 21

    Legg Layer Styles Stroke, indre glød, og Gradient Overlay.



    Step 22

    Dupliser knappen og legg den bak den opprinnelige. Flytt det noen få piksler ned.



    Step 23

    Bruk samme Layer Styles, men denne gangen øke Gradient Overlay Opacity å gjøre det mørkere.

    Vi legger også til Drop Shadow å legge myk skygge rundt knappen.

    Dette er knappen utseende.



    Trinn 24

    Legg til tekst. Påfør hvit Skygge for å legge letter effekt på teksten



    Trinn 25:. Duplisering

    Velg alle pristabellen lag og traff Kommando /Ctrl + G for å sette dem i en gruppe lag . Alt-dra gruppen laget for å kopiere den. Gjør tre tabeller.



    Step 26

    Selvsagt, vi ønsker ikke at det skal være identiske. Så, endre tekst



    Trinn 27:. Utvalgt Plan

    Vi vil funksjonen en av prisingen plan ved å skille det. Trekk andre pristabellen opp. Sørg for å holde tittellinjen justert.



    Step 28

    Vi ønsker også å sørge for at listeelementene er alle justert. Merk teksten og sin linje under den, omorganisere sin posisjon. Sørg for å la noen mer plass fordi vi ønsker å legge til flere listeelementer.



    Step 29

    Ordne knappen posisjon til å matche bordet størrelse.



    Trinn 30

    Endre basen form til å gjøre det høyere.



    Step 31

    Legg til flere listeelementer.



    Trinn 32

    Plasser andre pristabellen og trekk høyre side av den første pristabellen.



    Step 33

    Nedenfor kan du se resultatet før og etter redigering av form.



    Trinn 34

    Vi ønsker å løfte omtalt plan og gjøre det synes høyere ved å legge skygge. Først Kommando /Ctrl-klikk kjennetegnet base for å gjøre et valg basert på formen.



    Step 35

    Gjør nytt lag og fylle markeringen med svart. Bløt det ved å legge Gaussian Blur.



    Step 36

    Reduser sitt lag Opacity.



    Step 37

    Gjør nytt lag og tegne en svart myk linje ved hjelp av pensel verktøyet.



    Step 38

    Hit Kommando /Ctrl + T og klikk deretter Warp knappen. Velg Arch for sin modus.



    Trinn 39

    Roter skjev linje og plassere den bak kjennetegnet plan.



    Trinn 40
    < p> Reduser Opacity.


    Step 41

    Legg til en skygge på den andre siden.



    Trinn 42

    Kommando /Ctrl-klikk både vanlige bord. Plasser skygger lag i en gruppe lag. Klikk Legg til lagmaske for å legge til lagmaske på gruppen laget.



    Step 43

    Hvis du vil legge modus kontrast mot omtalt plan, ønsker vi også å redigere sin farge. Endre tittel base farge til oransje. For å matche sin farge, trenger vi også å endre sin Layer Styles alternativ.



    Step 44

    Rediger tittellinjen tekstfarge til hvit og dens Drop Shadow til svart.
    < hr>
    Final Bilde




    Next Page: