Create a 960 x 620px lerret i Photoshop. Dette er en god løsning for nettsteder som de fleste skjermer kan romme det.

Trykk Cmd + R for å legge linjalen og trekke noen guider for å markere grensene for hovedinnholdet området. Disse vil være nyttig å sentrere design

Trinn 2

Nå som det viktigste innholdsområdet er skikkelig avgrenset, la oss endre størrelsen på lerretet til 1224px ved 620px. (Bilde > Canvas Size) til å opprette en større bakgrunn. Denne spill-over området vil være nyttig for besøkende med store skjermer og lage en "uten kanter" utseende.

Trinn 3

Det siste trinnet i å forberede vår dokumentet er å legge en guide i sentrum . Denne guiden vil være nyttig når du har å sentrere designelementer. En rask måte å finne senteret er å skape et nytt lag og trykker Cmd + T hurtigtaster for å aktivere " Free Transform ".

Trinn 4

La oss gjøre skyen plattformen som hoved design vil sitte. Lag en grå gradient bakgrunn. Lag > Lagstilen > Gradient Overlay. Gradient # 434344 til #EAECEC. La alle de andre innstillingene som standard.

Trinn 5

Lag et nytt lag "Clouds". Laste Skyer pensler og maling i hvit noen skyer i ulike former, størrelser og opacity til du har oppnådd et lignende resultat som vist nedenfor.

Trinn 6

Lag en andre lag "skyer 2 ", legge til et par skyer i sentrum.

Trinn 7

Opprett et tredje lag "skyer 3". Denne gangen bruker Abstract gløden børster, den andre børsten, størrelse 420px. Vend den, trykker Cmd + T > Vend vannrett. Dette vil bidra til å gi skyene et mer pistrete og eterisk utseende.

Trinn 8

Nå skal vi lage en stor 3D "M" for "Multimedia". Du kan erstatte selskapets initialer her.

Åpne opp Illustrator og lime skyen bakgrunnen som du nettopp opprettet inn et nytt lag. Bruk den som guide å designe 3D "M". Skriv inn bokstaven "M": font Handel Gothic Ex, 181pt, hvit; du kan erstatte noen annen bredt tykk skrift. For å gi teksten en 3D-effekt, gå til: Effect > 3D > Extrude & Bevel. Se bildet nedenfor for innstillingene.

Trinn 9

Kopier 3D "M" og gå tilbake til Photoshop for å lime det inn i dokumentet. Endre navnet på laget til "m". Vi vil nå bruke noen effekter og teksturer for å gjøre det mer realistisk og interessant. Først gjelder følgende Layer stil til lag "m".

Trinn 10

Opprett en ny mappe "m teksturer". Velg bokstaven "M" med Magic Wand Tool og med dette valget, legge til en lagmaske til mappen. Vi vil nå ha alle våre teksturer for 3D "M" i denne mappen.

Bruk "tekstur 4.jpg" fra Rust Textures pack. Kopiere, lime inn og ringe lag "tekstur". Kopiere det og skalere duplisert lag "texture2" ned til 12,5%.

Step 11

Juster lag Opacity til 40% og endre Blending Mode til Color Burn for begge lag.

Trinn 12

Legg til en annen tekstur lag "texture3" hjelp "metal_plaque_bump_seam.jpg" Armored Metal Textures. Juster Layer Opacity til 26% og endre Blending Mode til Hard Light. Skifte lag rundt til du er fornøyd med teksturen posisjon.

Trinn 13

Bruk en myk rund pensel med Opacity på ca 30% for å bruke en skygge under "M". Bruk Smudge Tool til å justere og lage en skråstilt skygge som nedenfor.

Trinn 14

Legg inn firmanavn, i dette tilfellet "Multimedia". Bruk Heritage Extra Bold, 32px, svart. Neste legge en svak skygge under den.

Dupliser lag, endre navnet " multimedia skygge ". Cmd + T for å få tilgang til Transform Tool, høyreklikk og velg Vend vertikalt. Legg Motion Blur. Endre Layer Opacity til 50%. Legg en lagmaske og til slutt, bruke en gradient å fade ut bunnen.

Trinn 15

Nå vil vi lage bybildet for vår Multimedia verden. Du kan bruke Cityscape Børster for bygningene. Last ned noen abstrakt render packs: Render Pack Tekstur 1 og Render Pack Tekstur 2 for teksturer. Først bruker børster for å trekke noen bygninger. Tegn hver bygning på et eget lag, mellom lag "skyer" og "clouds2".

Trinn 16

Resize, posisjon og kutte ut en del av bygningene som du ikke trenger.

Trinn 17

For hver bygning, opprette en ny mappe som inneholder deres respektive teksturer. Ved å bruke samme metode for å søke tekstur for bokstaven "M", velger hver bygning, en om gangen, med Magic Wand Tool og legger utvalget som en lagmaske til mappen. Sett mappen lagets Blending Mode til Lysere.

Trinn 18

Nå gjelder det abstrakte teksturer til bybildet som nedenfor. Flytte, rotere, endre størrelse teksturer til du er fornøyd med effekten.

Trinn 19

Det er en god praksis å rydde opp og organisere lag. Men litt kjedelig i begynnelsen, vil denne praksisen faktisk spare dyrebar tid når du søker etter filer, la oss si en måned senere. Plassere alle bygninger lagene i en ny mappe "bygninger". Bringe denne mappen ned mellom lag "skyer" og "clouds 2".

Trinn 20

Bruk dine cloud børster å male noen små skyer på lag "clouds2" for å dekke opp bygningene ' basen

Trinn 21

La oss legge våre multimedia rekvisitter. Classical kamera, regissørstolen, TV-kamera, Laptop, mikrofon, Hotair baloon 1, Hotair baloon to, lite tre. For hver av disse objektene trekke sin bakgrunn ved hjelp av Magic Wand Tool (W), og klikk deretter på knappen Finjuster kant for å justere kantene. For å fjerne eventuelle gjenværende grove kanter, bruker Eraser Tool (E) med en liten rund pensel

Trinn 22

Endre størrelse og deretter bruke Filter >.; Smart Sharpen (Cmd + F) på hvert objekt. Plasser dem som nedenfor.

Trinn 23

Legg skygger til stolen, TV-kamera, laptop, mikrofon, kamera og bil ved å følge de samme teknikkene som brukes for bokstaven "M". For treet, bruke naturlige pensler og justerer figurer bruker Smudge Tool.

Trinn 24

Vårrengjøring tid! Koble opp hvert objekt lag med sine respektive skygge lag slik at det vil være lett å slå hvert objekt på og av etter behov. For å gjøre dette, Trykk Shift + klikk på begge lag. Høyreklikk og velg Link lag. Deretter plasserer alle rekvisitter lag i en ny mappe "Props".

Trinn 25

Når du utformer en hjemmeside, de interaktive elementene spiller en viktig rolle i å bestemme nettstedets suksess. Derfor bør vi gjøre våre hovedknappene fristende og fremtredende for brukere å ønske å klikke på dem. Vi skal lage 3D-bokser som er forbundet med bybildet gjennom fargerike ledninger. De vil representere våre ulike sideseksjoner. Her er en forhåndsvisning av hva du skal designe.

Step 26

Gå tilbake til Illustrator til å tegne 3D-bokser og fargerike ledninger. Bruk rektangel Tool (M) til å trekke 6 hvite esker med forskjellig bredde, avhengig av lengden på teksten boksen vil inneholde. Eksempel "Web" vil ha en mindre boks og "Kontakt" vil ha en bredere boks

Trinn 27

Apply Effect >.; 3D > Extrude & Bevel for hver boks. Se bilde for effektinnstillinger hver boksens, fra venstre til høyre.

Trinn 28

Kopier over kunstverk du opprettet i Photoshop så langt, og lime den inn i en "bakgrunn" lag som guide. Trekke noen linjer med enten Pen Tool (P) eller Pencil Tool (T), det som er enklest for deg.

Trinn 29

Vi skal nå gjøre noen regnbue børster. Bruk rektangel Tool (M) for å tegne et rektangel. Deretter kopiere og lime fire til fem rektangler en ved siden av hverandre vertikalt. Endre deres farger. Velg alle rektangelet og bruke Align Left å justere dem.

Trinn 30

Gjør noen regnbue variasjoner. Her er noen smakebiter.

Trinn 31

For å gjøre børsten, velg en regnbue klynge, dra og slipp den inn i Børster Panel. Velg New Art Brush. Navngi Art Brush "Rainbow1" og beholde standardinnstillingen med en horisontal riktig retning.

Trinn 32

Nå gjelder dine regnbue børster til de forskjellige linjene.

Trinn 33

Kopier og lim hver regnbue ledning (linje) individuelt i Photoshop. Lim lagene foran bygningene, men bak rekvisitter og bokstaven "M". Påfør en lagmaske på wire lag og bruke Cloud børster for å gjøre en del av ledningene gjennomsiktig.

Trinn 34

For å gi lederne et 3D-utseende og gjøre dem blankere, bruke en Bevel & Preging Layer stil med lignende innstillinger som vist nedenfor. Hver ledning krever noen små innstillinger tilpasning for å oppnå ønsket utseende

Trinn 35

Kopier. Og lim 3D-bokser fra Illustrator inn i enkelte lag.

Step 36

Bruk tekstur "metal_plaque_bump_seam.jpg" fra Armored Metal Tekstur, ved hjelp av de samme teknikkene som i trinn 10 og 17. Sett tekstur lagets Blending Mode til Hard Light med Opacity 26 %.

Step 37

Legg til tekst i boksene. Bruk Heritage Extra Bold, 14px, svart. Rotere teksten der det er behov for å følge vinkelen på boksene.

Trinn 38

Rydde opp i lag og organisere knappene i mapper, hvis du ikke allerede har gjort det. Anmeldelser
Trinn 39

Det siste trinnet !! Legg bunnteksten og du er ferdig! Bruk Verdana, 10px, #cccccc for den første linjen og # 999999 for bunnlinjen. Disse er trygge webfarger.

Konklusjon

Jeg håper du fant denne opplæringen nyttig. Må dele dine meninger, ideer, og jeg vil gjerne hjelpe deg hvis du har spørsmål. Vær kreativ og utforske teknikkene du har lært her - jeg kan ikke vente å se hva du kommer opp med!