Designing en enkel Instagram sammensatt portefølje i Photoshop
Hva du skal lage
I denne opplæringen vil jeg lede deg gjennom prosessen med å lage en enkel og ren Instagram-basert portefølje. Vi vil bruke noen slående bilder, en ren fargepalett og glatte skrifttyper. Vi vil starte med å lage en web-versjon og så skal jeg vise deg hvordan du raskt tilpasse det for mobil visning.
Instruksjons Eiendeler
For å følge langs du trenger følgende (fritt tilgjengelig) eiendeler:
Mountains bilder fra Unsplash
Kaushan Script font fra Font Squirrel
Lato font fra Font Squirrel
Sosiale medier ikoner fra Iconfinder
lager bilder fra Unsplash
lager bilder fra Refe
Få Document Ready
Trinn 1
Begynn med å lage en ny Photoshop-dokument (Fil > New ...) med de innstillingene som er vist nedenfor. Du er fri til å bruke et lerret av hva dimensjonene du foretrekker - Internett er ikke fast bredde, tross alt
Kontroller at oppløsningen er satt til 72 piksler /tomme
Trinn 2
La oss. satt noen guider så vår layout har nok plass og ser balansert. Jeg har ikke alltid bruke et rutenett, men å sette noen retningslinjer vil sikre ryddighet og vil bidra til å definere vår hjemmeside bredde. Gå til View > New Guide ... og sette noen retningslinjer. Jeg pleier å velge 1000px som et nettsted bredde og legge noen retningslinjer fra hjørnene slik at den har plass til å puste.
Merk:
Retningslinjer brukes for denne opplæringen. vertikal på 100px, 600px og 1100px
Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere .
Trinn 3
Stikker til Photoshop etikette vi vil holde ting organisert og enkle å navigere og redigere. La oss lage tre lag grupper navngitte Header, bilder og kontakt. Å opprette grupper gå til Layer > New > Group ... og gi hver enkelt en tittel som nevnt. For rask etablering av en gruppe bare klikk på ikonet.
Designing Header området
header eller "over fold" (uansett hvor det er i disse dager) området spiller en svært viktig rolle i å engasjere med brukere og sikre at besøkende opphold på nettstedet. For denne porteføljen vil jeg bruke et bilde av noen vakre fjell og enkle meldingstjenester å skildre eventyr og utfordring.
Trinn 1
La oss først opprette bakgrunn av bloggen. Inne i Header gruppen trekke noen farge rektangel form ved hjelp av rektangel Tool (U).
I mitt tilfelle jeg trakk 1200x600px størrelse rektangel og plassert den på toppen av dokumentet.
Nå laste ned Mountains bilde, drar du den til Photoshop dokumentet og plassere den over rektangelet laget. Endre navn på bildelaget til noe du kan kjenne igjen senere, i mitt tilfelle har jeg brukt IMG. Etter det holder nede Alt
tasten og musen over bildet lag til du ser en liten pil som peker ned, og slipp den. Du har nettopp opprettet en Beskjærings Mask
.
Nå treffer CMD + T Hotell og endre størrelsen på bildet slik at det passer dine behov.
Tips .:
hold nede Skift
nøkkelen til å forvandle proporsjonalt
Trinn 2
La oss gjøre noen justeringer i vårt bilde slik at det ser mer levende og minneverdig. Lag et nytt layer, kall det skygge og skape en Clipping Mask
som vi gjorde for fjellene bildet. Deretter plukke Gradient Tool (G) Hotell og satt gradient farger å gå fra svart # 000000 til gjennomsiktig, holde nede Skift-tasten drag fra bunnen av det plasserte bildet til rundt midten av den. Endelig redusere gradient lagets Opacity
til 60%
.
Jeg pleier å bruke denne teknikken til å mørkne lyse bilder og plassere hvit tekst på toppen.
Trinn 3
La oss legge til noen flere farger i vår header for å gjøre det enda mer fantastisk. Lag et nytt lag, name it Gradient og nok en gang velge Gradient Tool (G)
. Etter det sette graderingsfarger å gå fra lilla # 37056b til rosa # ff01fc (eller andre farger du ønsker) og dra fra øvre venstre hjørne av bildet til høyre nedre hjørne. Endelig redusere gradient lagets Opacity
til 20%
.
Trinn 4
Tid for å plassere en logo for vår portefølje. Plukk Horizontal Type Tool (T) Hotell og skriv inn navnet på din portefølje, enten det er ditt navn eller kallenavn. For denne opplæringen har jeg brukt en veldig stilig Kaushan Script 21px
skriftstørrelsen. Plasser den nye logoen øverst i venstre hjørne av nettstedet ditt ved siden av den første vertikale retningslinje. Trykk den ned 50 piksler for å gi det nok negativ plass slik at det ser rent og profesjonelt.
Trinn 5
Vi vil legge til noen sosiale medier ikoner slik at folk kan følge deg og ditt arbeid. Dra Facebook, Twitter og Instagram ikoner fra Iconfinder til Photoshop-dokumentet, endre navn på lagene slik at de er raskt gjenkjennelig og plassere dem på høyre side ved siden av den siste loddsnor. Etter det, klikk på høyre museknapp på en av de ikon lag, velger du Blending Options ... Hotell og bruke Color
Overlegg
alternativet med fargen hvit # ffffff. Gjør det samme med resten av ikonene.
Pass på at du lar nok plass til sidene og justere dine ikoner horisontalt med din logo.
Trinn 6
La oss ferdig av vår Header området. Vi har et vakkert bilde og masse plass. La oss sette en enkel innføring melding slik at besøkende kan forstå hva denne nettsiden handler om.
Velg Horizontal Type Tool (T) Hotell og ved hjelp av 36px
størrelse Lato (svart)
font skriv et par ord. I mitt tilfelle bruker jeg "HALLO! I'M JONATHAN". Rett etter at på en ny linje abd med en mindre skriftstørrelse angi noen flere ting om deg selv eller din arbeid som besøkende kan finne interessant. For denne opplæringen har jeg brukt 16px
størrelse Lato
(Regular)
Jeg elsker å reise rundt i verden og design vakre ting.
Kontroller at linjehøyden er stor nok til at teksten har plass til å puste. Endelig, plassere tekst i midten av Header området.
Designing Bilder området
I dette området vil vi plassere bildene fra Instagram for å vise frem noen eksempler på arbeid, viser hvor dyktig og relevant kunstneren eller designeren er.
Trinn 1
La oss først endre bakgrunnen for dette området. Minimer Header gruppen ved å klikke på en liten pil ved siden av gruppenavnet og åpne opp Photos gruppen. Etter det, plukke den rektangel Tool (U) Hotell og tegne en litt grå firkant. I mitt tilfelle har jeg brukt #eeeeee
for farge og trukket en
1200x880px rektangel.
Trinn 2
Nå la oss legge til en linje som beskriver arbeidet. Dette kan være bare "Siste Work" eller i mitt tilfelle "SISTE BILDER". Teksten bør lesbar, for at grunnen til at jeg har brukt grå # 9b9b9b og skriften er Lato (Fet) 12px
størrelse. Vær oppmerksom på at bokstavavstand er ganske betydelig ( 270
) som brukes bare for å stilisere tittelen på området og vil ikke fungere for vanlig tekst. Nok en gang gi tittelen nok plass og flytte det ned fra bildet for 80px
.
Trinn 3
Great! Vi er endelig klar til å legge til noen kule bilder til vår portefølje. Opprett en ny gruppe kalt Photo. Etter det må du bestemme hvor mange bilder du vil vise på rad. Jeg har bestemt meg for å gå med fire, så jeg trenger å gjøre noen matte før bestemme piksler.
Vår hjemmeside bredden er 1000px, så jeg vil dele det med 4 gir meg 250px for hvert bilde, men vi trenger også å la noen mellomrom på sidene, la oss si 20px gutter mellom bildene. Så det endelige bildebredde vil være (1000px-60px) /4 = 235px.
Velg rektangel Tool (U) Hotell og holde nede Shift-tasten, tegne et 235x235px størrelse rektangel. Etter at plukke et bilde fra Instagram feed eller hente en fra unsplash.com eller getrefe.tumblr.com, drar den til Photoshop dokumentet og plassere den over rektangelet. Deretter holder nede Alt-tasten, opprette en Beskjærings Mask Hotell og ved hjelp av CMD + T
endre størrelsen på bildet og plassere den slik du ønsker.
Trinn 4 Anmeldelser
Nå må vi legge til antall "liker" (å opptre som noen sosiale bevis) og en kort beskrivelse. Lag et nytt lag og gi den navnet Shadow, legg den over bildet og sørge for å skape en Beskjærings Mask
for det også. Etter det, ved hjelp av Gradient
Tool
(G)
bruke en gradient som går fra svart til gjennomsiktig som brukes tidligere i denne opplæringen. Endelig redusere sin Opacity
til 60%
.
Velg Horizontal Type Tool (T) Hotell og angi et antall slike. Jeg har brukt 13px
størrelse Montserrat
font og venstre 15px
plass på venstre og nederst for å gi nok plass til å puste, men ikke å overvelde bildet.
Nå plukke rektangel Tool (U) Hotell og tegne et hvitt rektangel form under bildet. Så ta tak i Horizontal Type Tool (T) Hotell og skrive et kort bilde beskrivelse du vil bruke på Instagram, inkludert hashtags og også en dato innlegg på en ny linje. Fonten jeg har brukt for denne opplæringen er Montserrat
12px
størrelse i grå # 808080
Merk:.
Kontroller at du er konsekvent med avstand, hvis du har brukt 15px på sidene for slike nummer gjøre det samme med beskrivelsen.
Trinn 5
Vi er ferdig med bildet elementet og nå er det på tide å legge til noen flere bilder til vår portefølje. Minimer Photo gruppen og kopiere den ved å trykke CMD + J
eller klikke på høyre museknapp på gruppenavnet og velge Duplicate Group ...
etter at duplisere så mange bilder du vil å ha og organisere dem i et rutenett. I mitt eksempel har jeg 20px
for avstands og forskjellige bilder fra unsplash.com og getrefe.tumblr.com.
Prosjektering Kontakt området
I dette området vil vi sette et enkelt budskap og kontakt "call to action" samt generell informasjon om opphavsrett.
Trinn 1
Minimer Bilder gruppe ved å klikke en liten pil ved siden av gruppenavnet og åpne opp Kontaktgruppe. Etter at plukke Horizontal Type Tool (T) Hotell og bruker ganske stor skrift angi en overskrift for den delen, i mitt tilfelle er det "komme i kontakt". Gi det god plass på toppen og legge til en kort beskrivelse for å oppfordre handling fra brukeren. Jeg har brukt # 565d64 for farge og 36px
størrelse Lato (svart)
font for overskriften og 16px
Lato
(Regular)
for beskrivelsen.
Trinn 2
Nå må vi en oppfordring til handling knapp som brukerne vil klikke på for å utføre den ønskede handlingen. For denne opplæringen la oss bruke en enkel kontakt knappen. Jeg har brukt den rektangel Tool (U), etter tegnet en enkel form og plassert tekst på toppen av det. Sørg for å bruke rikelig med plass over knappen så det ser balansert og ren.
Trinn 3
Til slutt la oss sette en generisk opphavsrett linje nederst i vår portefølje. Før du gjør det, plukke den Linje Tool (U) Hotell og tegne en subtil grå # e0e0e0 horisontal 1px
linje over dette dokumentet forlater rundt 90px
plass i det bunn. Rett etter at plasserer opphavsrett linje. I dette tilfellet har jeg brukt 12px
størrelse Lato (Fet)
skrift med bokstavavstand fra 270 Hotell og mørk grå # 9b9b9b.
Du er ferdig ... Med Web versjon
Og her du er, alt gjort med webversjonen av porteføljen! Nå skal jeg vise deg hvordan du raskt kan forvandle web-versjonen for mobile, slik at du kan visualisere responsive nettside.
designe en mobil versjon
Trinn 1
La oss opprette et nytt dokument og angi dimensjonene må være 320x2100px
. Lag tre vertikale føringer på 20px
, 150px Hotell og 300px
å veilede oss, og etterlater noen plass på sidene. Etter det velger alle grupper i vår web-versjon dokumentet, dra dem alle til en ny fane dokumentet før det nye dokumentet dukker opp og slipper de gruppene der.
Trinn 2
Nå åpner opp Header gruppe , finne vår logo og bruke Flytt
Tool
(V)
flytte den til høyre til den er synlig i vår nye smale layout. La den stå ved siden av den første vertikale retningslinje. Etter det finner de sosiale ikoner og flytte dem til venstre.
Trinn 3
Nå er det på tide å tilpasse seg hovedbudskapet. Plukk Horizontal Type Tool (T)
, bryte beskrivelsen linjen og redusere hovedbudskapet font å passe det mellom første og tredje vertikale retningslinjer. Juster linje høyde alternativer, og du er flink til å gå.
Trinn 4
Åpne opp Bilder gruppen og flytte opp "SISTE BILDER" tittelen som vi ikke trenger så mye plass på mobil visning. Etter det finner Photo gruppen og flytte den mellom de vertikale retningslinjer. Deretter åpner opp gruppen, klikker du på beskrivelsen bakgrunn rektangel form, trykk på CMD + T Hotell og endre størrelse på det å være 280px
i bredden. Gjør det samme med bildet rektangel. Til slutt, ordne bilder i én kolonne og endre størrelse på dem til å passe mellom retningslinjene.
Trinn 5
Våre bilder seksjonen har blitt lengre enn på web-versjonen, så bakgrunns justeringer er nødvendig. Finn Bilder bakgrunnslaget, og trykk på CMD + T
å endre størrelse på det, gjør det høyere og la noen plass i bunnen av seksjonen.
Trinn 6
Til slutt vi trenger å omorganisere vår kontakt seksjon så budskapet passer mellom våre faste retningslinjer og er pent justert. Åpne opp Kontaktgruppe og bruke Horizontal Type Tool (T)
bryte kontakten beskjed linjer for å få dem til å passe mellom våre retningslinjer. Sørg for å redusere plassen over og under de elementene som vi ikke trenger så mye tomrom for mobilvisning. Også redusere linjehøyden for meldingen så det ser rent og profesjonelt.
Den aller siste ting er å bryte opphavsretten linje i to linjer, så det faller også mellom retningslinjene.
Til mobil visning.
Gratulerer!
Det var det. Vi er ferdig med web og mobile versjoner av vår ferske Instagram basert portefølje. Jeg håper du har lært noe nytt, og at de ferdighetene du har vunnet vil hjelpe deg å bygge noen fantastiske ting i fremtiden.
Jeg vil gjerne høre din tilbakemelding og se resultatene av denne opplæringen!