webbdesign, frilans, marknadsföring, tips och tricks

FrÄn Photoshop till WordPress

Photoshop till WordPress

Det var bara ett Är sen som WordPress kom in i mitt liv. Allt positivt som jag lÀste pÄ forum och diverse nÀtverk fick mig att bestÀlla boken WordPress Complete och börja lÀra mig att skapa teman till ett av marknadens mest flexibla verktyg. WordPress Àr utmÀrkt för dig som Àr designer eller utvecklare och vill ha möjligheten till flexibilitet vad gÀller din hemsida.

NÀr man skapar ett tema till WordPress sÄ ser stegen ut som följande:

Photoshop –> XHTML/CSS –> WordPress.

Hur ser dÄ varje delmoment ut? Eller Ànnu viktigare, hur ser sjÀlvaste överlappningen frÄn Photoshop till kod till WordPress ut?

Photoshop

Hur hemsidan ska se ut designas fram i Photoshop. HÀr bestÀms hur stor hemsidans sidhuvud ska vara, var menyn ska ligga och var innehÄllet ska finnas. LÀmpliga stödlinjer placeras ut för att marginaler ska stÀmma överallt. Stödlinjer Àr Àven bra nÀr jag i nÀsta steg ska börja skÀra ut mina bilder.

Photoshop

Photoshop till XHTML/CSS

NÀr hemsidans design Àr fÀrdig sÄ Àr det dags att skÀra ut bilderna sÄ att jag kan koda de i xhtml/css. Tack vare mina stödlinjer sÄ kan jag snabbt och enkelt ta mitt beskÀrningsverktyg och börja klippa. Processen gÄr rÀtt sÄ snabbt och jag sparar alla mina bilder med lÀmpliga namn under en genomtÀnkt mappstruktur.

Photoshop till XHTML

XHTML/CSS

Med alla bilder utskurna Àr det dags att börja koda i xhtml/css. Mitt primÀra verktyg Àr xHTML-Kit. Jag kodar allt frÄn grunden med hjÀlp av min preset.css. Kodningen i html och css gÄr hand i hand, alltsÄ att jag hoppar frÄn html till css fram och tillbaka.

XHTML-CSS

Som en förberedande ÄtgÀrd kodar jag precis allt som ska finnas med pÄ min WordPress sida innan jag gÄr till nÀsta steg. Det finns de som enbart kodar grunden i html och css för att sedan gÄ över till WordPress och implementera alla funktioner och dÀrfter ÄtergÄ till CSS för att styla elementen som WordPress skriver ut.

SÄ gör inte jag. IstÀllet sÄ stylar jag Àven all html-kod som WordPress skriver ut innan jag implementerar funktionerna som gör sidan till en faktisk WordPress-sajt. Om jag inte vet exakt hur en viss funktion skriver ut html-koden sÄ tar jag reda pÄ det för att sedan styla det.

Att arbeta pÄ det viset tycker jag Àr mycket smidigare och betydligt mer avlastande för hjÀrnan. Man hoppar inte fram och tillbaka utan sköter ett steg i taget.

XHTML/CSS till WordPress

DÄ har jag fram tills nu designat mitt wordpresstema, klippt ut alla bilder och kodat allt i xhtml/css. Nu Àr det dags att göra sidan till en hemsida gjord pÄ WordPress.

Eftersom jag redan har stylat precis allting precis som det ska se ut, Àven funktionerna som skrivs ut dynamiskt sÄ Àr det bara att dela upp sidan i header.php, footer.php, sidebar.php och index.php. Med detta gjort sÄ börjar jag klistra in alla funktioner.

xhtml-css till wordpress

Exakt vilka funktioner som klistras in beror pÄ hur mitt tema ser ut. De mest primÀra Àr ju loopen för inlÀggen och funktionerna för kategorier, datum och kommentarer. Det Àr vad mina wordpressteman brukar visa.

Inte mycket mer dÀrefter, det Àr bara att ladda upp temat och börja anvÀnda det!

Fler inlÀgg om Design och WordPress

  • http://www.grafixstudio.se/design/designprinciper-linjering/ Designprinciper – Linjering | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/design/5-fragor-en-webbdesigner-ska-stalla/ 5 frĂ„gor en webbdesigner ska stĂ€lla | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/design/ultimata-wordpress-plugins-for-nystartad-blogg/ Ultimata Wordpress-plugins för ny blogg | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/design/framtidsvisioner-vart-ar-webben-pavag/ Framtidsvisioner – vart Ă€r webben pĂ„vĂ€g? | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/design/ie6-du-ar-snart-bortglomd/ IE6 – Du Ă€r snart bortglömd | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/design/10px-ovanfor-10px-undertill-eller/ 10px ovanför, 10px undertill…eller? | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • http://www.grafixstudio.se/wordpress/wordpress-blir-allt-popularare/ Wordpress blir allt populĂ€rare | Grafix Studio – webbdesign och grafik

    [...] FrÄn Photoshop till WordPress [...]

  • marinamilo

    Hej,
    det Àr första gÄngen jag Àr hÀr och kommer bli vÀldigt tacksam om du kunnde svara pÄ min frÄga.
    Om jag skappar min sida i Freamweamveaver (precis lÀrt mig cs4) hur jör jag den till en blogg. Jag bara fatar inte det dÀr med blogg.

  • http://www.grafixstudio.se/ Antonio

    Det krÀver lite kunskaper i nÄgot programmeringssprÄk för att du ska kunna göra om din hemsida frÄn Dreamweaver till en blogg. PHP exempelvis, som WordPress anvÀnder. Egentligen Àr det bara att klistra in funktioner osv pÄ rÀtt stÀllen.

  • marinamilo

    Tack Antonio,
    Nu har jag lÀst pc blogg och fattar lite mer. Kommer att ÄteranvÀnda pÄ din
    fantastiska sida. Du Àr en riktig konstnÀr.
    Tack tack tack

    —–Ursprungligt meddelande—–
    FrÄn: Disqus [mailto:]
    Skickat: den 2 april 2010 19:17
    Till: marina.milo@bredband.net
    Ämne: [grafixstudiowebbdesign] Re: FrĂ„n Photoshop till WordPress

    Antonio wrote, in response to marinamilo:

    Det krÀver lite kunskaper i nÄgot programmeringssprÄk för att du ska kunna
    göra om din hemsida frÄn Dreamweaver till en blogg. PHP exempelvis, som
    WordPress anvÀnder. Egentligen Àr det bara att klistra in funktioner osv pÄ
    rÀtt stÀllen.

    Link to comment:
    http://www.grafixstudio.se/design/fran-photosho...
    86815

    —–
    Options: Respond in the body to post a reply comment.

    To turn off notifications, go to: http://disqus.com/account/notifications/

  • http://www.grafixstudio.se/frilans/fakturera-med-wordpress/ Fakturera med Wordpress | Grafix Studio – webbdesigner och grafiker

    [...] FrÄn Photoshop till WordPress [...]

blog comments powered by Disqus