Å lage attraktive og funksjonelle weboppsett er en integrert del av en webdesigners liv. I denne opplæringen vil vi lage et profesjonelt nettstedoppsett fra bunnen av. I løpet av leksjonen vil du lære noe nyttige triks når du lager et design.
Leksjonsressurser:
- Ikonsett (wefunction.com)
Alternativt ikonsett - Twitter-ikon (iconeden.com)
- Font Bebas (dafont.com)
Trinn 1. Mockup
Før vi begynner å lage et nettstedoppsett, må vi lage en skisseplan for den fremtidige layouten, som viser funksjonaliteten og omtrentlig utseende.
Trinn 2. Opprett et dokument.
Vi vil lage et nettstedoppsett som er 960 piksler bredt. For å gjøre dette, opprette nytt dokument størrelse 1200x1500 piksler. Oppløsning 72 piksler.
Siden sideoppsettet vil være 960 piksler bredt, må vi definere dette området ved å legge til guider. Velg hele dokumentet ( Ctrl+A).
Gå til meny Utvalg - Transformer utvalg(Velg > Transformer utvalg). I egenskapslinjen øverst på skjermen setter du bredden til 960 piksler. Dette vil være arbeidsområdet til oppsettet.
Sett hjelpelinjene nøyaktig langs utvalgets grenser.
Vi må lage en margin mellom kantene på layoutarbeidsområdet og innholdsområdet som vi legger til senere. Med dokumentet aktivt valgt, gå til menyen igjen Utvalg - Transformer utvalg(Velg > Transformer utvalg). Reduser bredden på utvalget til 920 piksler. Dette betyr at det vil være 20 piksler med polstring på hver side av layouten, for totalt 40 piksler.
Sett retningslinjer langs det nye utvalget:
Trinn 3. Opprett sideoverskriften.
La oss gå videre til å lage sideoverskriften. Lag et 465px høyt utvalg øverst i oppsettet.
Fyll utvalget grå, og bruk deretter lagstiler til å bruke farger og gradienter.
Legg til et gradientfyll i overskriften ved hjelp av en lagstil Gradientoverlegg(Gradient Overlay). Lag en gradient av to farger.
Nå vil overskriften se slik ut:
Nå må du legge til belysning i overskriften. Skape nytt lag (Ctrl + Alt + Shift + N) og velg en myk børste med en størrelse på 600 piksler. Velg fargen #19535a og bruk børsten til å klikke én gang øverst i midten av overskriften.
Lag et 110px-utvalg på overskriften.
Trykk på tasten Slett for å slette den valgte delen.
Krymp uthevingslaget vertikalt (Ctrl+T) .
Du må sørge for at lysflekken på hetten er nøyaktig i midten. For å gjøre dette, gjør lagene med overskriften og markeringen aktive og velg verktøyet Flytte(Flyttverktøy) (V). På egenskapslinjen øverst på skjermen klikker du på Juster horisontale sentre-knappen.
Lag et nytt lag (Shift + Ctrl + N) og tegne med verktøyet Blyant(Blyantverktøy) et punkt, 1 piksel i størrelse. For tegning bruk farge #01bfd2.
La oss jevne ut kantene på dette laget med en gradientmaske. Velg et verktøy Gradient(Gradientverktøy) og lag en gradient som vist nedenfor:
Påfør et nytt lag med en maske og fyll den med gradienten du nettopp opprettet.
Trinn 4. Lag et mønster
La oss nå lage et enkelt mønster som vi legger til overskriften. Verktøy Blyant(Blyantverktøy) med en størrelse på 2 piksler, tegn to punkter, som vist på figuren. Slå av synligheten til bakgrunnslaget for en stund (klikk på øyeikonet ved siden av bakgrunnslaget) og lag et mønster (Redigering - Definer mønster)(Rediger > Definer mønster):
Lag et nytt lag (Shift +Ctrl +N) og plasser den under uthevingslaget. Velg området du vil bruke mønsteret på, og åpne vinduet Fylle(Fyll) (Shift + F5). Klikk OK.
Etter å ha lagt til teksturen, ser overskriften slik ut:
Gjør en jevn overgang fra mønsteret til overskriften: legg til en maske til mønsterlaget og bruk en myk børste hvit(#ffffff) med opasitet 60 % går over masken.
Resultat:
Trinn 5. Legg til en logo
La oss gå videre til å legge til en logo. Velg en myk pensel med fargen #19535a og mal en flekk.
Skriv teksten:
Legg til en lagstil til logolaget skygge(Drop Shadow).
Trinn 6: Navigering
Legg til navigasjonstekst.
Tegn en navigasjonsknapp ved hjelp av rektangulært verktøy Marquee Tool). Fyll utvalget med en hvilken som helst farge og reduser Fill-parameteren til null.
Legg til en stil i knappelaget Gradientoverlegg(Gradient Overlay).
Trinn 7: Innholdsglidebryter
Lag et utvalg på 580 x 295 piksler.
Fyll utvalget med en hvilken som helst gråtone.
Plasser et bilde. Klipp den med laget du opprettet tidligere.
La oss nå legge til en effekt på glidebryteren. Lag et nytt lag (Shift + Ctrl + N), plukke ut Børste(Brush Tool) med en diameter på 400 piksler. Åpne børstepaletten (F5) og still inn parameterne som vises på skjermbildet:
Velg svart farge (#000000) og tegn et punkt:
Påfør et filter for å myke opp kantene Gaussisk uskarphet(Gaussisk uskarphet).
Velg den nederste halvdelen av skyggen og slett (Slett).
Plasser skyggelaget over glidebryteren:
Klem sammen skyggelaget ved det midterste håndtaket (Ctrl + T), og sentrer deretter skyggelaget igjen: velg begge lagene og klikk på knappen i egenskapspanelet Justere sentre horisontalt(Juster inn horisontale sentre).
Dupliser skyggelaget (Ctrl +J) og plasser duplikatet på den nedre kanten av glidebryteren.
Tegn knapper på glidebryteren ved hjelp av verktøyet Rektangulært område utflod(Rektangulært Marqee-verktøy ) . Fyll knappene med svart (#000000).
Reduser opasiteten til knappelaget til 50 %.
Legg til en pilform til skyveknappene dine:
Tegn en stripe nederst på glidebryteren og fyll den med svart (#000000).
Reduser opasiteten til stripelaget til 50 %.
Legg til en beskrivelse av prosjektet ditt i denne linjen:
Trinn 8. Legg til en hilsen
Skriv en hilsen:
Trinn 9. Fullføring av sideoverskriften
Vi er nesten ferdige med å jobbe med sideoverskriften. Legg til en subtil skygge ved hjelp av verktøyet Børste(Børsteverktøy).
La det være et gap på 1 piksel mellom skyggen og tittelen.
Lag et nytt lag under overskriftslaget (Shift +Ctrl +N) og bruk en gradient på den.
Trinn 10. Legg til knapper for glidebryteren
Tegn lysbildebytteknapper.
Legg til en lagstil på én knapp Indre skygge(Inner Shadow), og duplisere deretter knappelaget det nødvendige antallet ganger (Ctrl + J).
Trinn 12. Lag en innholdsseparator
Bruk blyantverktøyet og tegn en lysegrå (#aaaaaa) linje 1 piksel bred.
Legg til en maske til linjelaget og bruk en gradient for å lage en jevn overgang ved kantene.
Hvis du vil lage en nettside selv, kan du finne ut hvordan du lager en nettside i Photoshop. - Dette grafikk editor. Du kan tegne oppsett og deres individuelle elementer i den. Den er lang nok og vanskelig prosess. Webdesignere har lært å designe maler og layoute Internett-sider basert på dem i årevis. Men en enkel layout kan settes sammen av hvem som helst. Vi trenger bare grunnleggende kunnskap Photoshop og fantasy.
Selv en nybegynner kan tegne et enkelt nettsteddesign i Photoshop
Den første gangen er det usannsynlig at du kan designe en side som designmesterne. Men du vil kunne tegne en attraktiv og upretensiøs tjeneste.
Forklaring av noen begreper.
- CSS (Cascading Style Sheets) og HTML (HyperText Markup Language) - dataspråk, som brukes til å lage nettressurser. Hvis du åpner kilde enhver side på Internett vil ha HTML-koder.
- Layout - arrangement og installasjon av materialer fra oppsettet, gjør det til en html-mal. Det avhenger av hvordan objekter er ordnet, om de ser vakre ut i den generelle komposisjonen, om det er praktisk å lese teksten og lignende.
- Lag er deler av en layout. Sammen utgjør de det store bildet. Men de kan redigeres og flyttes separat fra hverandre.
- Kroppen er der innholdet befinner seg. Det kan være en bakgrunn rundt det.
- Ramme – et sideelement. En blokk med litt informasjon, et bilde, et skjema.
Bare en profesjonell kan lage et fantastisk nettsted fra bunnen av. For å gjøre dette må du forstå webdesign og kunne HTML. Fordi ferdig layout Det må fortsatt gjøres riktig.
Men det er mer enkle måter. Det finnes nettjenester og programmer som automatisk konverterer .psd (format Photoshop-filer) i HTML og CSS. Alt du trenger å gjøre er å sette sammen malen riktig.
Til ved hjelp av Photoshop Du trenger ikke å være artist og forstå alle programalternativene. Men hvis du lanserte det for første gang og ikke vet hvordan du skal sette inn tekst, tegne en geometrisk form, duplisere et lag, endre fargen eller velge et vilkårlig område, bør du begynne med noe enklere. For å lage en layout i Photoshop trenger du i det minste grunnleggende ferdigheter i å jobbe med verktøyet og forståelse grunnleggende funksjoner(hvordan tegne en linje, sette en veiledning, velge en font osv.).
Generell informasjon om nettverkstjenester vil også være nyttig. Nettstedet kan karakteriseres av følgende kriterier:
- En side. Alle elementer, innhold, alt innhold i ressursen er på ett sted. På én side. For å se innholdet i tjenesten trenger du ikke følge lenker eller åpne nye faner. Dessuten kan selve siden være så stor som ønskelig. Den har plass til både en liten reklamebrosjyre og en enorm 600-arks roman.
- Flere sider. Følgelig inkluderer den mange sider. Disse kan for eksempel være «Hjem», «Forum», «Gjestebok», «Svar på ofte stilte spørsmål», «Kontakter». For hver av dem må du lage et oppsett. Du trenger også navigasjon og et nettstedskart: en egen seksjon med lenker til alle deler av tjenesten. Slik at brukeren raskt kan finne bokmerket han trenger.
- "Gummi". Endrer størrelse avhengig av skjermoppløsning. Strekkes med nettleservinduet. Du må beregne på forhånd hvordan siden vil se ut. Hvis alt i en bredde på 1300 vises normalt, kan en del av artikkelen ved 900 piksler "gå" utenfor rammens grenser, bildene vil ikke vises som de skal, og flash-animasjonen vil lukke inndataskjemaet.
- Fikset. Kroppen på nettstedet endrer ikke størrelse. Det enkleste og mest praktiske alternativet. For å få siden til å se solid ut, og når vinduet utvides, er det ingen "tom" plass i kantene, kan du lage bakgrunnsgummi.
Oppsett
Bestem først hvilket design du vil ha. Det er ikke nok å bare "forestille seg" det og deretter designe det i Photoshop. Det må være en klar idé. Tegn en mal på vanlig papir. Det er ikke nødvendig å tegne hvert bilde på nytt. Et diagram er nok: flere rektangler og sirkler som konvensjonelt indikerer elementer på en nettside. Finn ut hvordan rammene skal plasseres, hvor det er best å plassere logoen, hvor du skal plassere informasjon for besøkende.
Se eksempler på sider på Internett. Tenk på hvilke du liker og hvorfor. Er det et praktisk arrangement av rammer, fine farger eller en interessant tilnærming til design. Du bør ikke kopiere andres design. Det er nok å hente "inspirasjon" fra det. Etter det kan du finne ut hvordan du tegner et nettsted i Photoshop.
- Opprett et nytt dokument (Fil - Ny). Dimensjoner velges for små skjermer eller lav oppløsning: 1024x720 piksler. Dette er bredden på "informasjons"-delen, ikke hele tegningen. Hvis du vil ha en side på 1100 piksler, må du lage et dokument med en bredde på 1300 piksler. Lengden er faktisk ikke fast - det avhenger av hvor mye innhold du vil plassere på ressursen. Dette er anbefalinger, ikke regler. Du kan bygge en stor layout hvis du vil.
- Slå på linjalene. Trykk Ctrl+R eller gå til Vis - Linjaler. Dette er en måleskala. Hun dukker opp utenfor tegningen. Uten det må du estimere størrelsene og avstandene "etter øye", noe som ikke vil ha en veldig god effekt på det endelige resultatet. Du kan konfigurere denne funksjonen i menyen Redigering - Innstillinger - Enheter og linjaler. Der er det bedre å endre centimeter til piksler for å jobbe med én parameter, og ikke beregne hvor mange piksler som er i en tomme.
- Rutenettet bør også være aktivert. Vis - Vis - Rutenett eller Ctrl+E (du kan også deaktivere det). Dette er en slags analog av en rutete notatbok. Photoshop vil vise vertikal og horisontale linjer. De vil ikke vises i selve tegningen. De kan bare sees ved redigering. Denne funksjonen er nødvendig for å ordne malelementene jevnt. Noen synes det er mer praktisk å jobbe med et rutenett, andre uten det. Det er best å aktivere det hvis du lager et nettsted for første gang.
- For å konfigurere den, gå til Redigering - Innstillinger - Hjelpelinjer, Rutenett og Fragmenter. Der kan du velge størrelsen på cellene, samt farge og type linjer (heltrukne, prikkete, prikkete).
- Installer guidene. Mellom dem vil det være hovedinnholdsressursen - den faste delen av nettstedet. Og bak dem er en gummibakgrunn. For å gjøre dette, klikk Vis - Ny veiledning. I "Orientering"-blokken merker du av for "Vertikal". I "Posisjon"-feltet skriver du i hvilken avstand objektet vil være fra venstre kant. Bruk linjalskalaen som veiledning.
- Du trenger to hjelpelinjer - til høyre og til venstre for sideteksten. Avstanden mellom dem bør være maksimalt 1003 piksler for skjermer med 1024x720 oppløsning. Du kan angi en annen bredde. Men store ressurser er upraktiske å se på små skjermer.
- Hvorfor 1003 og ikke 1024? Hvis nettstedet må rulles ("rulles") ned, vil nettleseren ha en vertikal rullefelt. Størrelsen på denne glidebryteren er omtrent 21 piksler. Hvis det ikke tas med i betraktningen, vises det horisontal rulling. Og ressursbesøkeren må flytte siden til venstre og høyre for å se all informasjonen.
- Kroppen skal være i midten av lerretet.
Dette er de forberedende stadiene av arbeidet. Hvordan designe en layout i Photoshop avhenger av fantasien og smaken din. Derfor vil det følgende kun være generelle anbefalinger av teknisk art.
- For å starte trenger oppsettet ditt en bakgrunn. Du kan lage den selv eller laste den ned fra Internett. Det er mange ressurser med gratis teksturer. Ikke plasser opphavsrettsbeskyttede bilder på nettstedet ditt. Du bør ikke bruke en lys eller kontrasterende bakgrunn. Det er bedre å ikke bruke teksturer med mange små, fremtredende detaljer. De vil distrahere den besøkende fra kroppen på siden.
- Hvis du bare åpner en tegning i Photoshop, vil den vises i en ny fane og vil ikke bli lagt til i oppsettet. Velg hele bakgrunnen. For å gjøre dette trenger du hurtigtasten Ctrl+A eller markeringsverktøyet (plassert i panelet til venstre). Kopier den og lim den inn i malen.
- Dette alternativet er også tilgjengelig hvis du klikker Rediger - Sett inn.
- Et nytt lag vil dukke opp i listen nederst til høyre. Høyreklikk på den for å se mulige handlinger. Du kan endre lagnavnet i Lagalternativ-menyen. "Blendingsalternativer" inneholder grunnleggende bildeinnstillinger. Du kan gi den en glød, preging, glans, strek, gradient. Hvis du velger et alternativ, vil endringene umiddelbart vises i Photoshop. Det er et sett med ferdige stiler. Slik skapes originale designløsninger fra standard teksturer. Og du trenger ikke tegne noe ekstra.
- Det er en Filter-knapp i menylinjen. Der finner du en rekke imitasjoner (pastell, akvareller, blyanter), stiliseringer, teksturer, skisser, høylys, uskarphet.
- Kan velge vanlig bakgrunn. Fargen avhenger av dine personlige preferanser. Men det er bedre å ikke gjøre det svart eller giftig. Seng og myke toner eller gjennomsiktige kalde farger (for eksempel lysegrå, lyseblå) er egnet.
- Etter teksturene kan du sette sammen stedet selv. Det er her du gis frihet til kreativitet.
- For å legge til en form (segment, firkant, oval), klikk på den tilsvarende knappen til høyre. Den vil ha utseendet og navnet på objektet som er i dette øyeblikket valgt for tegning. For eksempel "Ellipseverktøy", "Polygonverktøy". I Photoshop er antallet former begrenset. Men de kan finnes på Internett, lastes ned og installeres via menyen Redigering - Administrer sett. I «Type»-feltet angir du hvilken samling av objekter du laster inn.
- I forskjellige versjoner Programmer kaller disse tallene på forskjellige måter. Enten en knapp i form av en liten svart trekant (den er til høyre), eller et ikon i form av et tannhjul, eller elementet "Shape of raster dot" (det er under menylinjen). Objekter kan kombineres, grupperes og lages til komposisjoner.
- For å lage en tekstramme, klikk på knappen i skjemaet stor bokstav"T". Velg deretter stedet der tegnene skal være plassert, klikk der og skriv inn det du trenger.
- Det er bedre å plassere hvert element på et eget lag. Dette vil gjøre det mer praktisk å flytte og redigere uten å påvirke hele nettstedet. For å legge til dette objektet, gå til Lag - Ny.
- For å projisere et bilde inn i et forhåndsvalgt område, velg det først, og åpne deretter Rediger - Spesialinnsats. Det vil være alternativer "Sett inn på plass" og "Sett inn utenfor".
- Du kan overføre deler av en tegning til et nytt lag. For å gjøre dette, velg den, høyreklikk på den og velg "Klipp til nytt lag."
- De samme alternativene er tilgjengelige med former, etiketter og bilder som med bakgrunner: effekter, filtre og så videre.
- Det er mange flere tegneverktøy i Photoshop: pensler, penner, blyanter.
Du kan lage en ressurs av høy kvalitet selv fra enkle geometriske objekter.
Det er ressurser med gratis oppsett. Last dem inn i Photoshop og rediger om nødvendig. Det er enklere og raskere enn å tegne fra bunnen av.
Hvordan gjøre om et layout til en html-fil?
Du har funnet ut hvordan du lager et nettsted i Photoshop og designet ditt første oppsett. Hva skal jeg gjøre med det neste? Tross alt kan du ikke bare laste den opp til hostingen din.
Du kan gi den til en layoutdesigner som vil lage en html-mal av høy kvalitet. Men det er et annet alternativ. Bruk tjenester til å konvertere en PSD-fil til HTML og CSS.
- Psd2Html-konverterer. Betalt online tjeneste. Konverterer raskt Photoshop-format inn i en nettsidemal. Med denne ressursen, selv fra et lavkvalitetsoppsett, kan du lage et anstendig nettsted.
- PSDCenter
- 40 dollar påslag.
Konstruktører
Oppsett kan også samles på spesielle nettsider. Vanligvis er det et klart og visuelt grensesnitt. Du setter ganske enkelt sammen en mal fra ulike deler. Noen elementer er bedre tegnet i Photoshop. Så du kan gjøre det original design. Til tross for at det ble opprettet ved hjelp av en konstruktør.
I denne opplæringen lærer vi hvordan du lager et bloggoppsett i minimalistisk stil ved å bruke nytt Photoshop-teknologier. Nye alternativer for å lage og lagre stiler vil hjelpe oss med dette. Tegnstiler og avsnittsstiler.
La oss se hva vi skal lage i denne opplæringen.
For å fullføre denne leksjonen trenger du følgende ressurser:
- Gratis font Gratis Font Sansation.
- Tekstur 26 repeterbart pikselmønster
- Sosiale ikoner Sett gratis sosiale medier-ikoner
- Hånd markør ikon
- Arkivbilde Arkivfoto: Harvest 1
- Arkivbilde Arkivbilde: New York Streets 3
- Arkivbilde Arkivfoto: Daisy Age
- Arkivbilde Arkivfoto: Et tre i horisonten
- Arkivbilde Arkivfoto: Salgstall
- Arkivbilde Arkivfoto: Tid er penger!
Klargjøring av lerretet
Trinn 1
I denne opplæringen skal vi bruke rammeverket 960GS . Trengs med last ned malen fra hovedsiden og finn filen inne i arkivet"12-kolonne rutenett".
Klikk på øyeikonet ved siden av 12 Col Grid-laget for å skjule dets synlighet – til vi trenger det.
Steg 2
Foreløpig er størrelsen på lerretet vårt ganske lite. Klikk Bilde>Lerretsstørrelse(eller Ctrl + Alt + C) for å gjøre størrelsen litt større og sett ankerpunktet i midten.
Trinn 3
Klikk Ctrl + Rå vise linjalen. KlikkVis> Ny Veiledning (Vis - Ny veiledning) for å lage en ny guide.Plukke ut Vertikal og posisjon: 185 piksler for å lage en vertikal guide som vil være forskjøvet 185 px fra venstre kant.
Trinn 4
Lag flere vertikale hjelpelinjer på en avstand fra150 , 1095 Og 1130 piksler .
Forbereder fargetema
Trinn 5
I vårt design skal vi bruke følgende fargekombinasjon - Colorlouver . Klikk på bildet for å åpne fargekombinasjonen og lagre som en JPEG.
Plasser fargeskjemaet i Photoshop-filen.Ved å plassere bilder direkte i malen vår, vil det være mye raskere og enklere å få tilgang til den.
Forbereder bakgrunnen
Trinn 6
Velg bakgrunnslaget og klikk på låseikonet for å låse opp dette laget. Dobbeltklikk på bildet for å endre bakgrunnsfargen.
Bruk pipetten til å velge den andre fargen vår fargevalg (# 948371) .
Trinn 7
Tegn en rektangulær form på toppen av lerretet.Dette vil være den andre bakgrunnen.
Trinn 8
Velg det opprettede skjemaet og gå til alternativlinjen. åpen Fylle Farge og klikk på fargevelgerikonet. Når dialogboksen Fargevelger vises, velger du den første fargen. I felt Slag plukke ut Ingen
Trinn 9
Lag et nytt lag og bruk det rektangulære markeringsverktøyet for å velge det øverste rektangelet. Aktiver verktøyet gradientfylling og fyll det valgte området radiell gradient fra hvit til svart.
Endre det modus Blanding modus på Skjerm og redusere opasiteten Opasitet før 37% .
Trinn 10
Lag et nytt lag og gi det navnet "skygge".
Tegn et rektangulært utvalg nederst på den andre bakgrunnen som vist på bildet nedenfor. Klikk Edit: Fyll . Installere Bruk - Svart . Klikk OKfor å fylle utvalget med svart.
Trinn 11
Gjør det uskarpt med Gaussian Blur. KlikkFilter> Blur> Gaussian Blur .
Trinn 12
Hold nede Alt, plasser markøren mellom skygge Og lag med en andre bakgrunn. Mens du holder Al, klikk for å konvertere laget til en klippemaske. Når du konverterer den til en klippemaske, er skyggene nå plassert inne i den øverste bakgrunnen.
Trinn 13
Endre gjennomsiktigheten til skyggenOpasitet før 50% . Nedenfor kan du se resultatet ved 100 % forstørrelse.
Trinn 14
Det er på tide å plassere alle lagene i én gruppe. For å gjøre dette, velg alle lag og trykk Ctrl + G.
Overskrift
Trinn 15
Tegn et rektangel øverst på lerretet som vist på bildet.
Trinn 16
I panelet Alternativlinje, sett farge Slag- #af9f8e .
Trinn 17
For fylling velg følgende lineære gradientfarger - fra#d0c4b9 Til #a89c91.
Navn på nettstedet
Trinn 18
På venstre side av malen legger vi til navnet på nettstedet vårt. Vær oppmerksom på at plasseringen samsvarer med bildet nedenfor. Dobbeltklikk på teksten og legg tilDrop Shadow. Skrifttypen som ble brukt i leksjonen Sansasjon.
Meny
Trinn 19
Ved å bruke Sansation 14 pt-fonten lager vi menyen. Igjen, vær oppmerksom på plasseringen.
Trinn 20
For den aktive menyknappen, sett skrifttypen til fet skrift.
Trinn 21
Aktiver polygonverktøyet og sett antall sider til 3 . Tegn en trekant med fyllfargeFyll: #3d3123og slagverdiSlag: Ingen. Legg til en skygge til laget -Lag stil>Drop Shadow .
Trinn 22
Vi understreker aktiv knapp Meny. Aktiver Linjeverktøy og angi størrelsesvekten -5 piksler. Velg farge#f76b6a og linjen skal være uten et slag.
Sett en strek under aktiv meny og legg til 1 px avstand mellom linjen og den rektangulære formen.
Bruke tegnstiler
Trinn 23
La oss lagre stilinnstillingene for teksten. Dette er noe sånt som en forenklet versjon av tegnstilene i InDesign. For å lagre dem må du aktivere teksten og deretter klikke på "Ny tegnstil"-ikonet.
Dobbeltklikk på en ny stil og velg følgende innstillinger.
Trinn 24
Velg neste menyelement og klikk deretter på Tegnstil-knappen for å bruke stilinnstillingene.Hvis du finner et plusstegn ved siden av stilene, betyr det at de har forskjellige innstillinger.
Trinn 25
Gjenta forrige steg for å bruke den opprettede stilen på den aktive menyen.
Trinn 26
Så hva er fordelen med å bruke karakterstiler? De vil hjelpe oss å sentralisere tekstinnstillinger. Vi kan ganske enkelt endre tegnstilen for å redigere hvilken som helst tekst. For eksempel hvis du endrer stilen Toppmeny – Normal på Corbel, alle menyelementer vil automatisk endres til Corbel.
Trinn 27
Lag et nytt lag og plasser det under menyelementene. KlikkCtrl og klikk påmenyen for å gjøre neste valg. Fyll den opp svart.
Trinn 28
Fjern valget ved å klikkeCtrl + D.Gjør det svarte området uskarpt ved å bruke et filterFilter> Blur> Gaussian Blur .
Skyveknapp
Trinn 29
Tegn en søylevid rektangulær form (se nedenfor).
For fyllfarge, velg #dfd1c2. Farge Slag #c8baac, størrelse 10 pt. Klikk på den lille pilen ved siden av linjen for å sikre at alternativet er valgt Juster innsiden.
Trinn 30
Sett inn bildet som vist i figuren nedenfor. Konverter det til Clipping Mask ved å klikke Ctrl + Alt + G . Bildet vil automatisk bli plassert inne i skyveblokken. Om nødvendig kan du endre størrelsen og flytte den uten å påvirke rammen på noen måte.
Trinn 31
Tegn en annen rektangulær form nær glidebryteren med samme farge.Pass på at formen festes til endeføringen. Legge til stilerLagstil > Mønsteroverlegg, ved hjelp av tekstur
Innhold Lage nettstedoppsett: underholdning for eliten Utvikle et nettstedoppsett: stadier Metode nr. 1. Klippe et oppsett fra en nettsidemal Metode nr. 2. Opprette et nettstedoppsett i nesten Photoshop Metode nr. 3. Online mockup-verktøy
Til å begynne med, tenk deg om hvorfor bestemte du deg for å lage et nettstedoppsett selv. Denne jobben krever allsidig kunnskap fra en person innen IT og design, analytisk og kreativ tenkning på samme tid. Og også en del av tiden din. Ok, det er 4 grunner til at du kanskje trenger dette. Hvis du har en annen, skriv i kommentarfeltet, så legger jeg den til.
Lage nettstedoppsett: moro for eliten
Grunn #1. Interesse for å utvikle nettsidelayout
Er dine interesser veldig spesifikke? Vi er her vi dømmer ingen. En gang i tiden ble det interessant for oss, og vi begynte å gjøre det! I tillegg er kunnskapstørsten vårt særpreg. Jeg setter pris på din nysgjerrighet.
Grunn #2. Utvikling av nettstedlayout som en måte å tjene penger på
Hvis du ønsker å bli webdesigner i fremtiden, du må begynne et sted, nemlig fra det elementære oppsettet til sidesiden. Det raske resultatet av arbeidet ditt motiverer som ingenting annet. Heldigvis, i denne artikkelen foreslår jeg bare blitz måter å lage en layout.
Forresten, arbeidet til en webdesigner er ingen spøk. Her under vil jeg ganske enkelt legge igjen en lønnsplan avhengig av tjenestetid (i henhold til DOU-data for mai-juni 2016). Jeg antyder ikke noe. Bare skjult jakt.
Grunn #3. Utarbeide tekniske spesifikasjoner for utvikling av et nettstedoppsett for en designer
Ofte står ikke-designere overfor behovet for å vise utformingen av en nettside – noen ganger bare for å illustrere ideen din, men noen ganger for å forsterke tekniske spesifikasjoner. Selvfølgelig er dette ikke nødvendig, og en kompetent designer vil forstå ideen din og til og med gjøre det bedre enn du forventer. Men hvis du vet nøyaktig hva du vil, er det bedre å vise det i stedet for å fortelle det.
Appen er også praktisk å bruke Kogle, som du kan koble til TilGoogleKjøre.
Jeg liker Coggle fordi det er et tankekart. alltid for hånden, det er praktisk å dele med kolleger, og fargene på grensesnittelementene er godt valgt. Pluss at det fungerer høyre knapp mus, som lar deg tilpasse kartet godt. Jeg endte opp med denne strukturen for hovedsiden til nettstedet.
På den første fasen av utformingen av layouten opprettes et tankekart over nettstedet
Trinn 2: Lage en nettsideprototype
Deretter kan du umiddelbart begynne å tegne et nettstedsoppsett i Photoshop, men selv om du lager et oppsett av inaktiv nysgjerrighet, må du først du bør tegne en nettsideprototype. På trinn for trinn utvikling, er prototyping en integrert fase som styrker den mentale helsen til en webdesigner. Når man lager en prototype er det planlagt nøkkelblokker for det fremtidige nettstedet(overskrift, skyveknapp, knapper, kontakter, materialstruktur osv.). Dette lar deg spare tid betydelig på scenen for å tegne oppsettet fordi du kan se det omtrentlige resultatet og gjøre endringer smertefritt.
Trett? Gjør livet enklere og bestill utvikling av nettsider fra KOLORO. Vi tar hensyn til dine ønsker og du får akkurat det du ønsket.
Lage en nettsideprototype online
Jeg bruker vanligvis de to mest populære nettverktøyene for prototyping av nettsider: Moqups og Mockflow. I begge tilfeller er det mulighet til å lage prototyper gratis, men med begrenset funksjonalitet. Tariffer for det første nettstedet starter på $13/måned. (10 prosjekter, 1 GB), og for det andre - fra $14/måned. (ubegrenset antall prosjekter + 25 GB i skyen). Alle anbefaler også Mockingbird. Og jeg vil anbefale det, men bare av respekt for Eminem, for her vil 3 prosjekter koste $12/måned, og det er færre gratisverktøy.
Nå om mine personlige inntrykk. Moqups mer praktisk og intuitiv til og med fra første besøk. Det er mange ferdiglagde blokker og ikoner her - akkurat det du trenger for raskt å komme deg gjennom prototypingstadiet. I tillegg er elementene praktiske senter i forhold til midten av siden eller andre elementer. Litt urovekkende begrensning 300 objekter per side frimodus- for en nettsideoppsett på én side er det kanskje ikke nok. Det er mulig å sette inn elementer fra Bootstrap arbeidsrammen. Mockflow lar deg gjøre litt mindre, og du trenger bare å finne ut av det på et par minutter og bli vant til til ham imidlertid stor kvantitet diskplass kan tiltrekke seg noen.
Nettsideprototyper i Moqups og Mockflow
Hvordan prototyper en fremtidig nettside?
La oss se på eksemplet med Moqups hvordan lage en sideprototype med tekst til bloggen.
Trinn 1. Legg til hatt(tekst kan endres).
Trinn 2. Legg til blokkere for bildet og inskripsjonen (artikkeltittel). Ved å bruke stiler kan du enkelt endre størrelse, skrift og annen tekstformatering.
Trinn 3. Legg til tekst og spør bredde kolonner. Alle blokker er beleilig sentrert i forhold til midten av siden.
Trinn 4. Teksten skal brytes opp bilde. Og kolonnebredden er for stor, 500 px ville vært bedre. Heldigvis kan du raskt endre det. Et stort pluss: de valgte elementene er redusert i forhold til hverandre og blokken min med bildet har også blitt mindre.
Trinn 5. Legg til sidefelt(sidespalte), vil det være enkelt her. La oss plassere et felt for Søk og en blokk for abonnementer til nyhetsbrevet (med et attraktivt bilde og en lys knapp).
Trinn 6. La oss si at artikkelen vår viste seg å være så liten. Du kan også legge til undersøkelse Og vurdering artikler. Resultatet ble en pen prototype av en bloggside. Legg til andre elementer etter din smak.
Prototyping tillater se skalaen på siden og ta avgjørelser angående visse blokker. Forresten, ved å bruke disse verktøyene kan du lage prototyper for forskjellige enheter. For eksempel, hvis du prøver, vil du få noe slikt. Imidlertid er prototypen vanligvis begrenset til et sort-hvitt design.
Prototype for smarttelefonapplikasjoner
Trinn 3: Lage et vakkert nettstedoppsett: velge en farge
Avhenger av vellykket valg av farger nettstedets oppfatning Og merke av brukere. Jeg anbefaler ikke å stole på din egen styrke - å velge riktig nyanse kan ta timer. Derfor anbefaler jeg å bruke ferdige fargepaletter for nettet. Google ga nylig ut en detaljert veiledning om gode farger for materialdesign(webdesign trend). Disse fargene blander seg harmonisk og du kan være sikker på deres attraktivitet. Ved å bruke Materialpalette kan du med hell velge to farger - den viktigste og aksenten, og også se hvordan de vil se ut i grensesnittet. Litt mer farge på Material Design Colors.
Har du presentert siden? Har du laget en prototype? Har du valgt dine farger? Nå kan du gå videre til å lage selve oppsettet. Jeg tilbyr deg flere måter.
Merk følgende! Det vil ikke være noen råd her om hvordan du lager et nettstedoppsett i Photoshop - dette er et emne for en egen artikkel, her er enklere metoder.
Metode nr. 1. Klipp ut et oppsett fra en nettsidemal
eller eksisterende nettsteder
Denne metoden passer for deg hvis du ønsker:
- finne det ut grunnleggende verktøy Photoshop;
- finne annerledes referanser for ditt fremtidige nettsted og sett dem sammen;
- føle designer for et par timer;
- demonstrere for en webdesigner eller et byrå (for eksempel oss:) mest detaljert visjon av nettstedet;
- forsterke TK for nettstedutvikling ikke bare "her er ringeknappene, og her er separatoren og blymagneten."
Fordelene med denne tilnærmingen til layoututvikling:
- du kan unngå vanlige feil, etter å ha sett nok av kvalitetssider;
- du vil forstå hva du ikke skal gjøreå gjøre det bra;
- webdesign utøvere vil klart forestill deg hva du forventer;
- Dette veldig fort- i løpet av noen timer vil du lage layouter for alle sidene på nettstedet.
Minuser:
- du vil aldri helt forstå hva webdesign er;
- Noen av referansene du finner kan ikke implementeres av layoutdesigneren uten å endre andre deler av nettstedet.
Hvordan det gjøres
Den enkleste og rask måte lag et nettstedoppsett – velg mal for en bestemtCMS og lag den på nytt for deg selv. Derfor må du først bestemme deg for et CMS, som i stor grad vil forenkle utviklingen av nettstedet. Vær imidlertid oppmerksom på at nettstedets design vil være være begrenset de elementene som er i malen. Selvfølgelig kan du endre fargene, men individuelle grensesnittelementer er allerede ferdige, og du kan ikke endre dem.
Hvis du gjør "lapskaus" fra forskjellige steder, ikke glem å skrive et sted i notatboken din med en blyant kilder. Dette vil forenkle videre designutvikling og layout.
Nettsideoppsett for Wordpress
Mest populært CMS- dette er Wordpress. For eksempel finner du mange moderne maler for dette CMS. For hva? Nettsted på en mal fremskynder lanseringen av prosjektet betydelig, men det vil ikke være unikt. Selv om du bruker originale illustrasjoner, bilder og en kreativ tilnærming - til og med et maloppsett kan gjøres om til det ugjenkjennelige. Hovedfordelen er at nettsiden din garantert er tilpasningsdyktig og generelt vakker mht vises på forskjellige enheter.
Utsikt forskjellige maler og velg den du liker best. Jeg søkte litt mer på Envato Market og fant Dalton-malen som jeg likte best. Ved å gå til demoversjon mal, vil du umiddelbart se konseptet med et firmanettsted. Ved å klikke på menyen kan du se mer i detalj hvilke funksjoner malen har hvordan de vil se ut forskjellige sider. Det er best å bruke en halvtime på dette og virkelig forstå hva som står i malen.
Hva blir det neste? Velge størrelse på nettsidens layout, skjæring og liming
Når du allerede er komfortabel med malen, kan du begynne å redigere den. skjæring. Flott hvis skjermoppløsningen din 1920 piksler eller mer - dette lar deg ganske enkelt ta skjermbilder av deler av nettstedet og kombinere dem i redigeringsprogrammet. Arbeid med oppsettet begynner med overskriften, deretter - forskjellige blokker (kropp), og på slutten - bunnteksten.
Du vil trenge:
- komfortabel verktøy for å ta et øyeblikksbilde av et valgt område(skjermfangstverktøy), jeg bruker Lightshot - det tilbyr å lagre bildet som egen fil eller kopierer det til utklippstavlen;
- Photoshop- for liming av kuttede deler av bilder.
Stadier for å lage et oppsett for et nettsted basert på en mal
Trinn 1. Velg bredden på sideoppsettet
Bestem hvilken side du vil gjøre først. Ikke begynn med den viktigste - det er bedre å la den stå til sist, fordi... dette er mest viktig side nettside og litt bedre først fyll hånden din. I eksemplet vil jeg lage en "Om oss"-side - her vil den være interessant informasjon om selskapet og dets ansatte. Jeg har allerede nettside prototype, så jeg vet hva jeg gjør. Forresten, hvordan går det med prototypen din?
Åpne Photoshop og angi bredden på nettstedets layout 1920 piksler. Dette vil være nok å se hvordan siden vil se ut i nettleseren. Hvis oppløsningen din er lavere, sett den til bredden som skjermen tillater. Ikke bekymre deg for høyden ennå - det er vanskelig å gjette, og du må fortsatt strekke/trekke sammen området.
Steg 2. Vi fortsetter å lage et nettstedoppsett i Photoshop
Velg en fra malen hatt, som du liker. Skjære ut med hennes hjelp praktisk verktøy, åpne dokumentet i Photoshop og sett inn der (Ctrl+V). Bruk flytteverktøyet (V) for å plassere overskriften øverst. Jeg liker overskriften med topplinjen der den er Kontaktinformasjon Om selskapet.
Trinn 2.A. Lag riktig nettstedoppsett med en gang
Nå har du to måter - endre teksten i bildet eller skriv medfølgende tekst V tekstfil. Hva er mer praktisk? Alt avhenger av målene dine. Av personlig erfaring kan jeg si at det er bedre å gjøre dette i oppsettet, med en gang velge skrifttype og størrelser. Dette vil være tryggere og vil være WYSIWYG i aksjon (What You See Is What You Get, "what you see is what you get").
Trinn 3. La oss gå til suksess
Fylle min oppsett forskjellige blokker og redigere dem i henhold til dine behov. På sånn som det er nå Du trenger ikke leke med farger hvis du ikke har Photoshop-ferdigheter. For å øke høyden på oppsettet, bruk verktøyet "Ramme"(MED).
Hva skjedde
Etter et par minutter med å tenke, kutte og lime de bitene jeg likte best, fikk jeg det til strukturert sideoppsett"Om oss"
Hva du ikke bør glemme
- Anrop hver lag med blokk tilstrekkelig, etter hva som står der. Ellers vil du gå helt tapt.
- Når du velger en skrifttype må du velge forskjellig størrelse for overskrifter og brødtekst tekst. I dette tilfellet er det bedre å bli veiledet av Google Fonts nettskriftbibliotek. Ikke glem å filtrere ut kyrilliske fonter.
Metode nr. 2. Å lage et nettstedoppsett i Photoshop er nesten
Til deg en passende metode nr. 2 hvis:
- du NeiPhotoshop(samvittigheten tillater ikke eller det er ingen diskplass) eller du har ennå ikke lært hvordan du bruker den;
- Du vil bli kjent medHTML-kode ogCSS-stiler uten forstyrrelse av markeringer;
- du trenger et interaktivt nettstedoppsett.
Jeg anbefaler det fantastiske gratis layoutverktøyet Macaw. For å jobbe med programmet trenger du det Last ned og installer– Det er snakk om et par minutter. I programmet kan du visuell modus praktisk layout layout, fordi du umiddelbart kan publisere den og se HTML-koden og CSS. Litt mer detaljert om hvordan programmet fungerer. Macaw har en betydelig ulempe - den skaper ikke-responsiv nettside. Hvordan håndtere dette? Her vil det være behov for ferdigheter layoutdesigner for å koble til rammeverket (for eksempel hvis du lager et nettstedoppsett for Bootstrap). Men hvis du bare trenger å vise fungerende layout for kolleger - Macaw er perfekt.
Slik ser en ikke-responsiv mal ut på forskjellige enheter. jeg ønsker å gråte
Start programmet på datamaskinen for å komme i gang. Vi presenterer for din oppmerksomhet blankt dokument med en sidebredde på 1200 px med et rutenettsideoppsett. Som standard er det mellom kolonner innrykk(polstring), slik at det blir plass mellom de opprettede elementene. Alt du trenger å gjøre er å tegne i kolonner, fordi hvis du går utover dem, vil blokkene vises under hverandre. Så hold øye med dem.
Du kan uavhengig stille inn bredden på kolonnene, antallet og avstanden mellom dem. Hvis du vil elementer festet til hverandre, sett kolonnebredden til 100 % og fjern polstringen mellom dem. Hvorfor trenger du dette nettet? På HTML-layout nettstedets layout vil være Det er lettere å lage en responsiv mal, fordi moderne rammeverk bruker et 12-kolonne rutenett.
Du kan endre bredden på arbeidsområdet ved å dra det til høyre, eller ved å angi størrelsen selv
Hva blir det neste? Oppsett
Sett opp arbeidsplass på en måte som er praktisk for deg, og la oss komme på jobb. Jeg skal lage den samme siden som jeg klippet fra Dalton-malen.
Trinn 1.
Først må du lage hatt. Det blir det container med en høyde på 100 px og en bunnkant på 1 px tykkelse.
Inne i en annen container det vil være en logo og inne i den neste vil det være en meny. Til individuelle elementer ikke nødvendig å lage meny separate blokker, er det nok å sette en akseptabel avstand mellom ord (ordavstand).
Steg 2
MED ferdiglaget lue du kan fortsette til de resterende blokkene. I neste blokk skal jeg ha bakgrunn som er nødvendig last ned separat.
Trinn 3. Lag et interaktivt nettstedoppsett
Jeg fortsetter å dra blokker og sette inn tekst i dem. Jeg lager en knapp ved hjelp av spesialverktøy « Knapp"(logikk!). Macaw lar deg lage en interaktiv layout med forskjellige stater knapper og muligheten til å bytte mellom sider.
Vær oppmerksom på følgende uthevede elementer. De hjelper deg å bytte mellom ulike blokker og organisere dem. For eksempel, teksten må være i en bestemt beholder, og ikke bare henge rundt.
Hvis du trykker Fil ->publisere, vil du motta en ferdig side hvor du kan se HTML-koden og CSS i forskjellige faner. Dette er veldig praktisk hvis du vil se hvordan markeringen ser ut.
Hva skjedde
Det ble noe sånt som dette. Her for sammenligning, venstre limte biter av den redigerte malen, til høyre- layout laget i Macaw. Et stort pluss med programmet er at du kan sette inn knapper, legge til lenker til dem, lage forskjellige sider og navigere mellom dem. Bare ikke glem det containerhierarki og ikke gå deg vill i dem.
Funksjoner ved denne metoden for å lage et nettstedoppsett:
- å forstå finesser av arbeidet programmer, må du bruke ekstra tid;
- selv når du allerede har fordypet deg i programmet, er det fortsatt noen ganger ikke klart hvorfor det oppfører seg på denne måten og ikke på annen måte;
- du kan glemme tilpasningsevne hvis du ikke fullfører det selv;
- egentlig praktisk å lage et oppsett og til og med forstå oppsettet litt - du kan se hvordan elementene samhandler og hvordan strukturen generelt er;
- ting som "bredde: 16,6666666666%" kan vises i stiler, som vil måtte fikses; du trenger bare å forstå at dette er WYSIWG, og ikke noe mer.
Metode nr. 3. Online mockup-verktøy
Hvis du leter etter et alternativ for hvordan du oppretter nettstedets layout i søknaden med det mest enkle og intuitive grensesnittet, Jeg har forberedt denne metoden spesielt for deg.
Praktisk verktøy for å lage infografikk, som jeg har brukt lenge - Creately-tjenesten. Det er dusinvis og hundrevis av komponenter å lage UI design under forskjellige enheter(mer for mobiltelefoner). Du vil definitivt like det, jeg skal vise deg noen av dem.
Fortsatt her praktisk å redigere elementer, legg til tekst (og lag til og med knapper med lenker!). Generelt, på bare et par minutter fikk jeg bare det samme som i Macaw mer forsiktig. En slik layout kan imidlertid ikke gjøres svært interaktiv. Det vil ikke være noen trinn til denne metoden fordi... Tjenesten er godt intuitiv. På skjermen prøvde jeg å vise så mye som mulig tjenesteegenskaper.
Funksjoner i Creately-tjenesten
Det er alt. Dette var metodene jeg kom til på et eller annet stadium av kreativ utvikling. Hvis du finner dette materialet nyttig, er vi glade.
P.S. Denne artikkelen er kun til informasjonsformål og vil ikke tillate deg å bli webdesigner. For å få seriøs kunnskap, må du grave mye mer på Internett.
