Hvordan lage en Diagonal Website Bakgrunn
Opprette en diagonal bakgrunnen gjør for en iøynefallende designelement på ditt nettsted. Bare plassere en diagonal linje på en grafisk og bruke det som bakgrunn resulterer i en hakket, ujevn utseende, så du trenger et gap filler. Ellers vises linjen brutt. Disse instruksjonene viser til ved hjelp av Photoshop på en PC, men prinsippene er de samme for andre design software og datasystemer.
Bruksanvisning
1 Åpne en ny side med 200 piksler torget.
2 Fargelegge bakgrunnen med en solid farge, for eksempel svart.
3 Lag et nytt lag.
4 Tegn et rektangel boks (regelen) 10 piksler høyt og bredden av boksen.
5 Fyll med en lysere farge enn bakgrunnen, slik som hvit.
6 Free Transform ( "Ctrl" pluss "T") rektangelet regelen (Layer 1) og rotere 45 grader. Gjør dette ved enten å holde shift-knappen og manuelt rotere rektangel, eller endre rotasjonen grad feltet i toppmenyen fra 0,0 til 45. (Bruk -45 grader for en øvre høyre til nedre venstre diagonal.)
7 Dra senterendepunktene på rektangelet inntil den overlapper hjørnene av bakgrunn, fôr boksen opp sentrert og i flukt med kanten. Forstørre sidevisningen for å stille opp reglene, om nødvendig.
8 Reduser lerret størrelse til 100 piksler torget (under "Image" og deretter "Canvas Size"); sørge for at bykjernen er merket, og innspill 100 i både bredde og høyde felt.
9 Klikk på "OK", og når du blir bedt, klikk på "Fortsett" for å fullføre prosessen.
10 Lag et nytt lag (Layer 2).
11 Tegn en boks 5 piksler torget (hold shift-knappen når tegningen) og fyll med hvit.
12 Duplicate Layer 2 (Kopi av Layer 2).
1. 3 Flytt Layer 2 bilde til boksen er flush i øvre høyre hjørne.
14 Flytt Kopi av Layer 2 bilde til boksen er flush i nedre venstre hjørne.
15 "Save for Web" (Alt + Ctrl + Shift + S) og justere bildestørrelsen til 10 eller 20 piksler torget.
16 Eksport som en GIF-fil.
17 Legg bildet til nettstedet ditt ved hjelp av <body> (<body BAKGRUNN = "image.gif">) eller stilarket, riktig innstilling URL-plasseringen.
<Style type = "text / css"> BODY {background-image: URL (image.gif); } </ Style>
Hint
- Prøv å bruke en stiplet linje i stedet for en hel linje for variasjon.
- For å skape mer plass mellom linjene, lagre filen i en større størrelse, for eksempel 80 piksler eller 100 piksler torget.
- Hjørne rutene er alltid halvparten av høyden på rektangelet (linje) kan skape; hvis linjen er 20 piksler høyt, hjørne boksene er 10 piksler torget.
- Hjørne bokser fylle gapet mellom bilder slik at linjen ser glatt og ubrutt.
- Behold den opprinnelige PSD-fil for å opprette flere diagonale bakgrunn ved å endre farger.
- Hvis bildet ikke vises, må du kontrollere at du har angitt den riktige plasseringen av bildet.