Hvordan konvertere Photoshop mal til Forsiden

Hvordan konvertere Photoshop mal til Forsiden


For en grafisk tiltalende nettside, mange designere synes det er enklere å lage et design ved hjelp av Photoshop og deretter konvertere design til HTML for Frontpage. Photoshop CS3 eller høyere har funksjonalitet som trengs for å lage webside maler fra PSD-filer. Med Photoshop maler, er det mulig å lage design som du ikke kan oppnå med html alene.

Bruksanvisning

1 Åpne et tomt bildefil. Når du er ferdig, vil denne bildefilen bli din Photoshop nettside mal. Gi navn til filen, og angi egenskaper for å angi bilde høyde, bredde og oppløsning.

2 Velg en bakgrunnsfarge og bruke den til psd malen filen.

3 Dra et digitalt bilde til ønsket plassering på malen psd fil. Endre størrelsen på digitale bilder som ønsket.

4 Legg til andre designelementer av valg. Utpeke navigasjonsknapp steder ved hjelp av Rectangular Marquee Tool. Klikk på verktøyet, deretter plassere verktøyet på ønsket sted på bildet. Klikk og dra til du får ønsket størrelse. Legge til topp- og bunntekst, hvis ønskelig, på samme måte.

5 Visual malen som en gruppe av rektangler.

6 Skjær din psd nettside mal i rektangler ved hjelp av Photoshop skive verktøyet. Velg Slice Tool og punkt i hjørnet av det første rektangelet du ønsker å opprette. Klikk og dra til du skissere den ønskede delen. Fortsett på denne måten til alle deler av nettstedet malen er gjort i seksjoner.

7 Klikk på Slice Select Tool og peker på en skive. Høyreklikk på musen slik at boksen eiendommer vil dukke opp. Du vil behandle hver skive som et eget bilde etter at du konvertere psd filen til en mal, så det er viktig at du navngir hver skive på en måte som du lett vil kjenne igjen når du redigerer html. Hvis du har tenkt stykket til å bli en navigasjonsknapp, angi URL-adressen til websiden som du vil koble denne knappen.

8 Eksportere psd filen til Imageready. Optimaliser filer for rask lasting hastighet. Spar solide farger som gif eller png filer for rask lastetid. Lagre digitale bilder som JPEG-filer for skarphet.

9 Lagre optimalisert psd som html. Når du velger "lagre optimalisert som" en boks vil komme opp slik at du kan lagre html mal på datamaskinen. Hvis du foretrekker det, kan du velge "Gå til", og gå direkte til Frontpage for redigering og lagring til ditt nettsted.

Hint

  • Bruk søkeordene i ALT-koder for hver skive for å forbedre Søkemotoroptimalisering (SEO) på ditt nettsted.
  • Bruk forhåndsvisningsverktøyet for å se hvordan malen vil se ut i en nettleser.