Grunnleggende om nettdesign: Legge til knappelementer i en wireframe

Ved hjelp av Photoshop CS2, vil jeg demonstrere å lage knappelementer for wireframe-designet, og deretter til slutt legge dem til den endelige webdesignen også. Vi vil lage to png-bildefiler og lagre dem, og deretter konvertere dem til gif-filtyper når du er ferdig. Merk: Jeg har zoomet inn i det aktive vinduet for de fleste skjermbildene for bedre visning. Denne opplæringen er en fortsettelse av innlegget "Det grunnleggende: Design et nettsted wireframe i Photoshop."

Lag et blankt lerret på 75px (bredde) x 25px (høyde) for å starte knappen design. Lag et nytt lag og kaller det B ackground_01 . Velg det avrundede rektangulære verktøyet, hold inne SKIFT-tasten og tegne et firkantet firkant i midten. Alle farger er fine på det nåværende stadiet, jeg velger en grå nyanse.

Dobbeltklikk på Background_01 fra lagpallen for å åpne Blending Options, og juster deretter følgende stiler: Drop Shadow
  • Opacitet: 40%
  • Avstand: 0px
  • Spredning: 0%
  • Størrelse: 6px
Gradient Overlay
  • Fargestopp: 0%, #cccccc
  • Fargestopp: 100%, # 333333
Ved å bruke den rektangulære markisen, lukk området som vist i figur A ; klikk deretter Velg, fra menylinjen Color Range, og klikk OK . Klikk deretter Velg, Endre, Kontrakt, og 1 piksel som vist i figur B. Klikk deretter OK .

Figur A

Figur B

Lag et nytt lag og navngi det bakgrunn_02. Fyll ut det uthevede området med hvilken som helst farge. For dette eksempelet, som du kan se i figur C, bruker jeg # 000000 svart.

Figur C

Dobbeltklikk på Background_02 for å starte blandingsalternativene og finpusse følgende stil. Velg disse fargene og stilene for denne veiledningen:

Gradient overlay
  • Fargestopp: 0%, # cccc99
  • Fargestopp: 100%, # 666633
Figur D viser den ferdige knappen på 10% visning. Lagre dette som Button_02.psd. Lagre deretter knappen som en gif (Button_02.gif). Resultatet er knappebildet vist i figur E.

Figur D

Figur E

Nå vil vi lage en invers av denne knappen, og den vil bli vår museknapp.

Når filen Button_02.psd er åpen, dobbeltklikker du på Background_02-laget for å åpne blandingsalternativene, og velg deretter Gradient Overlay. Endre vinkelen til -90 ° som vist i figur G.

Figur F

Klikk nå OK. Knappen vil nå se ut som et omvendt bilde av originalen, som du kan se i figur G.

Figur G

Lagre denne nye knappen som en gif ved å navngi den Button_Over_02.gif.

Vi kan bruke denne knappen som den er, legge til et tekstlag for hver navngitte knapp, eller vi kan bruke CSS-kode (cascading style sheet) for å legge til teksten under implementeringen av siden.

Legger til tekst

Når knappen_02.psd-bildet er åpent, er det første trinnet å legge til et horisontalt tekstlag ved å velge T-tekstverktøyet og deretter dra en horisontal boks innenfor dimensjonene til bildet som vist i figur H.

Figur H

Deretter kan vi legge til tekst, for eksempel ordet Hjem i dette tilfellet som sett i figur I. Siden lengden på teksten kan variere, kan du justere bredden på knappen slik at den passer til lengre titler. Vi lagrer denne filen som Button_02_home.psd, og lagrer den deretter på nettet som et gif-bilde. Lag en ny Hjem-knapp ved å bruke knappen Button_Over_02.psd og lagre på samme måte som beskrevet ovenfor.

Figur I

Av hensyn til wireframe kan vi plassere disse manuelle tekstknappene i modellene våre. Fortsetter vi med Juniper Wood Company wireframe vi diskuterte i første del av denne serien, vil vi lage de resterende knappene for mock-up. For alle knapper brukes både Button_02.psd og Button_Over_02.psd og lagres med tittelen for hver navngitte knapp. Alle knappene holder samme bredde for alle navngitte titler.

Fortsett med fremgangsmåten ovenfor for de ekstra tekstknappene Blogg, katalog, Featured, Gallery og Videos . Siden hver tittel krever to bilder, knappen og over-knappen, vil du ende opp med tolv separate gif-bildefiler.

Endre bredden slik at den passer til lengre titler

Å utvide bredden på knappen er ganske enkelt. Åpne en original fil, for eksempel Button_02.psd, og endre bildestørrelsen. I dette tilfellet utvider du bredden til 125px. Åpne dialogboksen Bildestørrelse ved å klikke på Bilde og Bildestørrelse fra menylinjen, som vist i figur J. Endre breddeinnstillingen til 125, vær sikker på at Constrain Proportions ikke er merket av, og klikk deretter OK. Den endrede breddeknappen vises i figur K.

Figur J

Figur K

Plassering av knappene på wireframe

Til knappebildene kan du bare legge dem til det eksisterende navigasjonsområdet i wireframe-bildefilen, og deretter plassere hvert knappbilde i det laget som sett i skjermbildet i figur L. Åpne hver knappebildefil, og velg deretter Alle fra menylinjen. Kopier bildet, gjør wireframe-malen til det aktive vinduet, velg deretter lime inn og bruk flytteverktøyet til å plassere hvert knappbilde i ønsket område av wireframe-malen.

Figur L

Ville det ikke være fint å bare lage noen få bakgrunnsbilder og være ferdig med det? Dette er grunnen til at jeg liker å lage skiver for bakgrunnsknapper og utnytte kraften til CSS for å vise teksten. Jeg vil demonstrere skiver for bakgrunn og CSS-plassering i et fremtidig innlegg.

© Copyright 2021 | pepebotifarra.com