Vi kommer til å bruke 960 grid 12 kolonne layout med fra 960.gs som rammeverk for vår design. Last ned malen filen i zip-format og deretter åpne 12 kolonner Grid. Klikk øyeikonet på forsiden av lag 12 Col Grid å skjule det.

Trinn 2

Klikk svart og hvit sirkel ikonet for å legge til nytt justeringslag. Velg Solid Farge og velger hvitt på den neste dialogboksen.

Trinn 3

Gjør nytt lag. Klikk Rediger > Fyll og velg Bruk: Mønster. Bruk diagonal linje mønster fra PSDfreemium. Fordi dette er CS6, la oss prøve å bruke sin nyeste funksjonen. Aktiver manus Mønstre og velg Symetry Fyll.

Trinn 4

Tone ned laget Opacity til 4%.

Trinn 5

Vi ønsker å forsikre deg om at alle lagene området organisert nøye. Så, la oss starte ved å gruppere dem i en logisk rekkefølge. Velg begge lag - bakgrunn og mønster - og deretter traff Kommando /Ctrl + G for å sette dem i gruppe lag

Trinn 6

Vi trenger ikke bakgrunnslaget, så sletter du det ved å dra. det på sletteikonet.

Trinn 7

Velg gruppe lag. Hit F2 og deretter skifte navn. Hit Tab for å automatisk redigere neste lag. Endre navn og deretter gjenta dette til neste lag

Trinn 8:. Logo

Aktiver Avrundet rektangel verktøyet. Tegn et avrundet rektangel form med radius 10 px og bredde 2 kolonner. Plasser den på øverst til høyre på lerretet. I Option bar, satt Fyll farge til # f16424 og Stroke til Ingen.

Trinn 9

Dobbelklikk lag form i Layers panelet for å åpne dialogboksen Lagstil . Aktiver Pattern Overlay. Velg pixel mønster fra PSDfreemium. Redusere sin skala og tetthet for å gi den et naturlig stoff tekstur utseende.

Trinn 10

Gjør nytt lag over formen. Aktiver myk pensel og maling skygge på oversiden

Trinn 11

Alt -. Klikk mellom logoen base og dens skygge. Dette vil konvertere laget til en Clipping Mask og legg skyggen inne i logoen.

Trinn 12

Gjenta prosessen et par ganger. Du kan legge til flere lag om nødvendig. Maling høydepunkt på sin underside.

Step 13

Gjør nytt lag under logoen. Kommando /Ctrl - klikk form til å gjøre nye valg basert på formen. Fyll utvalg med svart.

Trinn 14

Bruk Gaussian Blur filteret. Klikk Filter > Blur > Gaussian Blur.

Trinn 15

Hit Kommando /Ctrl + T for å utføre transformasjon. Høyreklikk og velg Warp. Den transformeringsramme er delt inn i 3 x 3 bokser. Dra den nederste boksen ned. Tast Enter for å godta transformasjon resultatet.

Trinn 16

Tegn mindre avrundet rektangel form. Fra Option Bar, setter sin Fyll stykke og Stroke til hvit med størrelse 1 pt.

Trinn 17

Åpne Strek Valg og velg deretter knust forhåndsinnstilling. Klikk Flere alternativer for å redigere de stiplede innstillinger linjer.

Step 18

I lagpanelet, dobbel klikker lag for å åpne dialogboksen Lagstil. Aktiver Drop Shadow, setter sin Angle til 90-graders;, aktivere Bruk globalt lys, setter sin størrelse til 0 px og avstand 1 px.

Trinn 19

Aktiver rektangelverktøyet, og klikk en gang på lerretet . I dialogboksen, angi størrelsen til 6 x 30 px. Klikk OK for å begynne å lage formen.

Trinn 20

Klikk på sitt Fyll boksen i Option Bar. Velg Gradient og sette sin farge fra #dfdfdf til #ffffff.

Trinn 21

Tegn en firkant Banen inne i logoen. Dobbelklikk sitt lag i Lag-panelet og deretter aktivere Drop Shadow.

Trinn 22

Nedenfor er resultatet på større forstørrelse Legg Drop Shadow til laget form.. Som du kan se at så langt vår vektor form er alltid klar. Det er ingen halvparten pixel! Dette er takket være vektoren snapping funksjonen i Photoshop CS6. Du kan deaktivere denne funksjonen hvis du vil fra dialogboksen Innstillinger -. Fremdeles jeg aner ikke hvorfor noen ville gjøre det

Step 23

Legg til tekst i logoen. Vi kan legge til kontrast på teksten ved å bare endre noen av tegnet til fet

Trinn 24

Legg til en Drop Shadow på teksten

Trinn 25:.. Hovedinnhold Bakgrunn

Aktiver rektangelverktøyet og deretter tegne et rektangel som hovedinnholdet bakgrunnen. Sette bredden til 800 px, Fyll: #eeeeee, og Stroke: #cccccc, Mål:.. En pt

Trinn 26

Legg Ytre glød med følgende innstillinger

Trinn 27

Legg til en trekant form og en avrundet rektangel. Satt sin sti modus for å kombinere figurer.

Step 28

Legg til tekst på fanen for å legge til tittelen. Hoved Grafisk Bakgrunn

Tegn en hvit rektangel form som en base for vår viktigste grafen:

Trinn 29 Legg lite statistikk ikon laget av noen små rektangler.. Sette bredden til 8 kolonner. Sørg for å sette sitt Stroke til Ingen. Legg Layer stil Ytre glød.

Trinn 30

Hit Kommando /Ctrl + J for å duplisere form. Legg en stor rektangel form på sin nedre del og sette modus til Subtraher Front. Legg Gradient Overlay.

Step 31

Tegn et avrundet rektangel. Sett Fyll White uten slag. Bruk samme Ytre glød og plassere den bak forrige form.

Step 32

Gjør nytt lag mellom de to formene. Gjør en elliptisk utvalg og deretter fylle den med svart. Oppheve valg (Kommando /Ctrl + D) og deretter bløtgjøre den ved å legge Gaussian Blur.

Trinn 33

Aktiver tekstverktøyet. Legg delen tittel.

Trinn 34

Aktiver linje verktøyet og deretter tegne en 1 px linje. Sette sitt slag farge til # e4e4ee4

Her er forskjellen før og etter tilsetting av linjen

Trinn 35:.. Begynne å tegne linje Graph

Tegn et rektangel. Sette sitt Fill til Ingen og Stroke å #cccccc.

Trinn 36

Velg stiplet strek type fra Option Bar. Klikk Flere alternativer og sette Dash og Gap 4 og 2.

Step 37

Tegn en px horisontal linje med Stroke #cccccc. Velg stiplet strek.

Trinn 38

Aktiver veivalg verktøyet og velg linje veien vi nettopp har gjort tidligere. Hit Kommando /Ctrl + Alt + T for å kopiere og forvandle det. Hit Shift + Pil høyre to ganger for å flytte den 20 px til høyre. Gjenta transformasjon og duplisering prosessen ved å trykke Kommando /Ctrl + Shift + Alt + T.

Trinn 39

Hold gjenta prosessen til rektangelet er fylt med kolonner.

Trinn 40

Reduser lagets Opacity til 30%.

Trinn 41

Gjenta forrige trinn, men denne gangen med horisontale linjer.

Nedenfor er resultatet. Nå har vi subtile rutenett på statistikken bakgrunnen.

Trinn 42

Legg verdier på både aksen, x og y.

Trinn 43

Aktiver linje verktøyet og tegne en 1 px linje på rutenettet. Sette sitt Stroke farge til # f16424

Trinn 44

Shift -. Dra for å legge til mer linje. Holde legge flere linjer før vi har en komplett linje diagram.

Trinn 44

Tegn en liten sirkel form og plassere den rett på linjediagram. Sette sitt fyllet til hvit og samme slag til linjens fyllfarge.

Trinn 45

Dobbeltklikk på sirkelen formlag og aktivere Layer stil Stroke. Satt sin farge til hvit og posisjon for å Utenfor

Trinn 46

Velg sirkelen bane med bane Direction verktøyet og deretter Alt -.. Dra det å duplisere det

Trinn 47

Bruk samme fremgangsmåte for å trekke et linjediagram. Denne gangen bruker forskjellig farge og satt sitt slag alternativer til stiplede.

Som i forrige linjediagram, legge sirkler på hver linje segment.

Trinn 48

På toppen av diagrammet, legge diagramforklaringen. Du bare rett og slett legge en kort linje ved hjelp av samme egenskaper som linjediagram og legge til en kort beskrivelse.

Trinn 49

Tegn et avrundet rektangel. Sette sitt Fill å #eeeeee og Stroke å #cbcbcb.

Legg Layer stil Indre skygge og Gradient Overlay.

Trinn 50

Tegn et rektangel form på midten av avrundet rektangel form. Du kan bruke hvilken som helst farge for sin Fill. Sette sitt Stroke til Ingen. Redusere sin Fill til 0%. Legg Layer stil Gradient Overlay.

Trinn 51

Tegn en px linje med farge #cbcbcb på venstre og høyre side.

Trinn 52

Legg tiden utvalget range. Du kan se at teksten med forskjellig bakgrunn er nå i aktiv tilstand

Trinn 53:. Bruke Character Styles

La oss bruke Character Styles å definere vår standard tegn. Denne funksjonen er en simplied versjon av tegnstil i Adobe InDesign. Hvis du ofte bruker InDesign vil du umiddelbart gjenkjent det.

Åpne Tegnmaler-panelet, og klikk deretter nytt ikon. I dialogboksen satt sin skrifttypen som Arial Regular, Size til 12 pt, og farge til # 767676. Vi kommer til å bruke denne tegnstil i det meste av teksten. Det er derfor vi vil også nevne det som standard tegnstil.

Trinn 54

La oss bruke denne tegnmal til teksten. Aktiver tekstverktøyet, velger du teksten og klikker deretter Tegnmal- å bruke den.

Trinn 55

Hva om vi ønsker å lagre egenskapene fra eksisterende tekst som et tegn Styles? La oss gjøre dette til verdier på grafen aksen. Få nye Character Styles. Merk teksten og klikk Omdefiner ikon.

Trinn 56

Dobbelklikk tegnmal til å redigere sine alternativer. Skifte navn. Bruk denne Tegnmal- til alle verdi på både aksen.

Trinn 57

Det fine Character stil (og avsnittsstilen også) er at du kan enkelt redigere den til å redigere hver tekst som bruker det Stil. Her er et eksempel. La oss redigere graf akse -A karakter stil som vi har gjort tidligere for hver verdi på både aksen. Dobbeltklikke på det og endre skrifttype og størrelse

Trinn 58:. Tooltip

Aktiver Avrundet rektangel verktøyet. Tegn et avrundet rektangel og legge til en liten trekant på sin venstre side. Sette sitt Fyll: # f1f2f2 og Stroke: Ingen.

Trinn 59

Dobbeltklikk på lag i Lag-panelet og legge svart strek. Kanskje du spør, hvorfor ikke vi bruker Stroke alternativ rett fra sin eiendom? Svaret er i Layer stil Stroke endre Stroke er Opacity. Det er noe som du fortsatt ikke kan gjøre på Photoshop CS6. Også legge Ytre glød og Gradient Overlay.

Trinn 60

Duplicate form og endre fyllfargen til # f16424. Fjern sin Layer stil. Legg rektangel banen på sin nedre del og sette modus til Subtraher Front Shape.

Trinn 61

Legg lag stil Stroke og Gradient Overlay til formen.

Trinn 62

Tegn en px vertikal linje. Sette sitt Fill farge til svart. Legg Layer Styles Stroke. Reduser lag Opacity til 8%.

Step 63

Legg liten tittel på formen. Lagre karakter eiendom som et tegn Styles. Legg Layer stil Drop Shadow.

Trinn 64

Legg til en annen tittel på den andre siden. Bruk samme Character Styles og samme Drop Shadow.

Step 65

Legg til en prosentdel inni den. Det er alltid en god ide å lagre det som Character Styles. På denne måten kan du enkelt redigere sitt utseende fra Characters Styles panelet.

Trinn 66

Aktiver polygonverktøyet og sette Side 3 i Option Bar. Tegn en liten trekant som peker oppover. Sette sitt Fyll: # c1c1c1 og Stroke: Ingen

Legg Layer stil Indre skygge

Trinn 67

Legg en liten sirkel og en annen trekant form - peker nedover denne gangen.. . Bruk samme farge og Layer stil.

Trinn 68

Legg prosentvis antall. Som vanlig, sørg for å redde sitt tegnstil.

Trinn 67

Dataene er positive. Så, la oss understreke det ved å aktivere pil opp. Endre form fyllfarge til # 4ff25d

Trinn 68

Duplicate antall for en annen data

Trinn 69:.. Smaller Graph

Tegn lignende seksjon for mindre grafen. Du kan bruke samme teknikkene forklart ovenfor. Sørg for å bruke mindre tekststørrelsen på tittelen.

Trinn 70

Tegn en blå 1 px linje inne i rutenettet. Satt sine slag alternativer å stiplede.

Trinn 71

Som i hoved grafen, legge sirkel på hvert punkt.

Trinn 72

Aktiver Pen verktøy . Tegn en ny form som dekker linjen koble den til x-aksen. Bruk samme farge som linjen. Sett formen bak sirklene.

Legg fri pixel mønster fra PSDfreemium.

Trinn 73

Tone ned Opacity til 50%.

Trinn 74

Legg prosent på sin side. I denne mindre grafen, vi ønsker også mindre tekst prosentstørrelse

Trinn 75

Legg til en annen graf

Trinn 75:.. Inaktiv Hoved Tab

tiden jobber vi på statistikk Tab. La oss legge til en annen fane og legg dem i inaktiv tilstand. Duplisere Statistisk tab bakgrunn vi har gjort i trinn 25 - 27. Det vil være nyttig hvis du skjule statistikk Tab etterpå. Endre sin strek og fyll farge til # c1c1c1. Slett lite rektangel på sin venstre side. Flytt toppen avrundet rektangel til høyre

Trinn 76

Legg et enkelt ikon laget av en sirkel med ingen Fill og Stroke:.. # 646464 med en jeg inni den

Trinn 77

Ta tilbake kategorien Statistikk. Tegn en inaktiv fane hvis nødvendig

Trinn 78:. Sidebar Meny

Aktiver rektangelverktøyet og tegne et rektangel bak hoved kategorien. Sette sitt Fill å #eeeeee og Stroke å #cbcbcb.

Trinn 79

Tegn et avrundet rektangel. Sette sitt fyllet til en gradient fra # d6d6d6d til # f3f3f3 og Stroke # c1c1c1. Dette kommer til å være bakgrunnen for en inaktiv menyen.

Trinn 80

Dupliser avrundet rektangel. Endre farge for å fylle gradient fra # ef6526 til fa834d og Stroke: # f16424. Denne brukes for å aktivt meny. Sørg for å plassere den under liten trekant av kategorien Statistikk.

Trinn 81

Duplicate første avrundet rektangel for å gjøre mer bakgrunn for inaktive menyer.

Trinn 82

Legg til tekst på knappen. Dobbelklikk sitt lag til å legge Layer stil Drop Shadow. For inaktive menyen bruker mørk tekst og lys skygge

Trinn 83

For aktive menyen, bruke hvit tekst og mørke Skygge

Trinn 84:.. Søk Box

Tegn et avrundet rektangel. Du trenger ikke å bekymre seg for sin Fill eller hjerneslag.

Trinn 85

For sin Fill, la oss bruke samme gradient fra forrige sidebar menyen. Aktiver Sti Utvalg for og markere figuren. Høyreklikk og velg Kopier Fyll.

Trinn 86

Gå tilbake til den nye formen, høyreklikk på den og velg Lim Fill.

Trinn 87

Åpne Fyll alternativ fra Option Bar og klikk ikonet under gradient forhåndsvisning for å snu sin gradient retning.

Trinn 88

Gjenta samme prosess for å kopiere Stroke innstilling.

Trinn 89

Legg til Indre skygge med følgende innstillinger.

Trinn 90

Aktiver tekstverktøyet og hvit knapp etiketten. Legg Layer stil Drop Shadow.

Step 91

Legg en liten trekant som peker nedover. Fyll: #eeeeee og Stroke: Ingen. Legg samme Skygge som knappen etiketten.

Trinn 92

Legg til en 1 px linje som skiller etikett og bue. Satt sin farge til # b04312 og deretter legge en lys Drop Shadow med vinkel 180-graders;.

Trinn 93

La oss legge en mini forstørrelsesikonet på knappen. Start med å tegne en sirkel bane med størrelse 10 x 10 px. Sette sitt Stroke til White, med Størrelse: 2 pt, og Fyll til Ingen

Trinn 94

Legg til en to punkt linje ved siden sirkel med 45-graders. vinkel.

Trinn 95

Igjen, legg samme Drop Shadow til forstørrelsesikonet.

Trinn 96

Tegn et avrundet rektangel ved siden av knappen. Bruk Fill gradient fra #ededed til hvitt og en pt Stroke # c1c1c1.

Trinn 96

Legg til liten tekst i formen. Vi vil at det skal være subtil. Så bruker vi en svært lys grå (# b0b0b0).

Trinn 97

La oss legge til en annen mini-ikonet. Start med å tegne en liten sirkel form og deretter legge til et plusstegn laget av to avrundede rektangler. Satt på plusstegnet modus til Subtraher Front Shape. Velg tegnet form ved hjelp veivalg verktøyet og roter det 45-graders

Final Bilde

Endelig! Vi har trukket en vektor graf helt i Photoshop. Dette var veldig vanskelig å gjøre i tidligere versjoner av Photoshop, men som du kan se, Photoshop CS6 hjelper virkelig effektivisere vår arbeidsflyt. Jeg håper du likte disse nye teknikker og denne opplæringen. Takk for at du leser.