WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   hur implementera design (https://www.wn.se/forum/showthread.php?t=25900)

jacobjs 2007-12-29 11:49

Hej!

en fråga. Om man får en färdig design, typ i psd-format, hur implementerar man den då på en webbsida? Måste man sitta och pula i css tills allt blir rätt eller finns det något enklare sätt?

Magnus_A 2007-12-29 12:03

Det enklaste sättet är att konvertera .psd -filen till lämpligt grafikformat, till exempel .jpeg och lägga upp den på din sida iu en img-tagg. Sedan kan besökarna i lugn och ro beskåda din design.
Någon funktionalitet finns då inte så dom tröttnar väl rätt snart.
Vill du ha klickbarhet så kan du lägga in en imagemap.
Vill du ha funktionalitet så är det bara att hacka på. Css är väl det som gäller, annars går det med ramar, iframes, tabeller eller i stort sett vad som helst som gör att grejerna hamnar ungefär där du vill ha dom.

knullis 2007-12-29 13:17

jag har med sutti och leta efter lite guider för sånt!
alla kan rita en någorlunda sjysst design i photoshop men att sen göra om det till en färdigsida verkar bökigt.
sutti med det ett par gånger och njah jag lyckas inte få till det riktigt..kört med tabeller och ramar i dreamweaver.

nu e inet jag nån designer eller kodare men en steg för steg guide vore skoj nån som vet?

ChSu 2007-12-29 14:28

Det där händer mig ofta. Vanligast är att jag inte får bilder på varje
typsida, så jag börjar med att leta efter återkommande stilelement. Typ
"alla rubriker har en gradient och är i fetstil", "tabeller är alternerande
gråa", "länkar är chockrosa"...

Detta för att kunna ifrågasätta desigens val när det inte finns regelbundenhet
i designen. Bra att kunna göra det först, och ju mindre varians i designen desto
lättare blir det med css:andet senare. Med vana så lär du dig också att hitta
vad du inte fått i en psd än, typiskt hur formulär ska se ut, samt felrapportering
i dem.

När jag väl börjar med CSS så fokuserar jag först på att kunna göra
layouten som krävs. Då är det guld att ha en massa lustiga bakgrundsfärger
typ: .menu { background-color: red; } så jobbar man med dessa boxar
tills de ligger som man vill.

Det är lite av en top-down design. För man fortsätter sedan med att sätta rätt
typsnitt och färger och bakgrunder på blockens innehåll.

jacobjs 2007-12-29 14:51

tack för bra svar. förstår emellertid inte varför det inte finns någon funktion för denna typ av implementering. Skulle väl inte vara så svårt att ordna i DW eller annat program?

ztream 2007-12-29 15:53

Näe, man borde även kunna skriva ut en bil man ritat i Photoshop på en skrivare som gör allting verkligt. Sedan kan man åka till affären och handla i den.

Eller om man inte har körtkort kan man rita en snygg tjej i Photoshop som kör en.

Jawn 2007-12-29 16:04

Kan alltid betala någon, finns dem som gör det för 20$ med full w3 standard och så vidare.

Andreeas 2007-12-29 16:52

Var kan man hitta en sådan person Jawn? :)

mazada 2007-12-29 17:43

ztream har en riktigt fin poäng där.

Ska man få något gjort som man vill så föreslår jag att man lär sig html, öppnar anteckningar och börjar knacka =) Vill man ha det på ett visst sätt så krävs kunskapen om hur man skapar det, program som dw ser jag som ett redskap när man redan vet vad det gör då har man lite bättre koll.

Eller... notepad ++ är nog det ultimata.

För att svara på frågan hur man går från ps till färdig html så, se till att du endast har det som inte kan skapas med css.. typ text... alltså endast grafiken... ta sedan segemteringsverktyget och dela upp interface i passande enheter, spara för webb och länka in bilderna i htmlsidan. Ps gör faktiskt detta automatiskt... men om man inte vet något om html så blir det svårt att vidareutveckla det som har skapats.

Samben 2007-12-29 18:10

Vet ej om vi är inne på samma spår, men du använder slice tool i photoshop sedan sparar du .psdn som websida (du får en html fil och en mapp med alla bilder du slicat).
Sen leker du ihop det med css och annan kod.

jlg 2007-12-29 18:14

Antingen läser man på och lär sig grunderna eller så anlitar man någon som redan kan.

Magnus_A 2007-12-30 10:58

Har du fått en design i Photoshop-format enbart är det att anse som en skiss.
En design innehåller mycket mer i form av ett komplett grafiskt program med följande delar:
Bilder, bakgrundsbilder, logotyper, vinjetter, slashar och flashar i separata filer.
Stilar, stilfamiljer, grader och utföranden för olika textelement.
Formatering som listor, menyer, färger för olika delar av sidan.
Om du inte fått det av din designer så är det nog dags att lyfta telefonen.

PHREDATOR 2007-12-30 11:41

Citat:

Ursprungligen postat av elprisguiden
Har du fått en design i Photoshop-format enbart är det att anse som en skiss.
En design innehåller mycket mer i form av ett komplett grafiskt program med följande delar:
Bilder, bakgrundsbilder, logotyper, vinjetter, slashar och flashar i separata filer.
Stilar, stilfamiljer, grader och utföranden för olika textelement.
Formatering som listor, menyer, färger för olika delar av sidan.
Om du inte fått det av din designer så är det nog dags att lyfta telefonen.


Jag vet inte om jag missuppfattar dig nu, men vad menar du med att det bara skulle vara en skiss om han endast fått en *.psd ?
När jag får en design/site i psd-format så är den exakt, med marginaler, listor, bakgrunder, bilder, menyer osv. Sjukt lätt att göra till html/css (om man nu kan det dvs) jag kan inte se någon fördel med att få massa delar i separata filer. Som sagt jag kan ha missförstått dig.

EDIT*
Självklart får man filer på sidan om, men det är endast de självklara som t ex. Flashfilmer.

Och för att säga något om sakfrågan:
Citat:

Ursprungligen postat av jacobjs
Hej
en fråga. Om man får en färdig design, typ i psd-format, hur implementerar man den då på en webbsida? Måste man sitta och pula i css tills allt blir rätt eller finns det något enklare sätt?

Jag kan endast beskriva hur jag själv gör det, jag går som i psd-filen, lager för lager och skapar css och html i den ordningen. w3schools.com är en bra sida om du kör fast.

lycka tll.

Magnus_A 2007-12-30 18:10

Citat:

Originally posted by PHREDATOR@Dec 30 2007, 12:41


Jag vet inte om jag missuppfattar dig nu, men vad menar du med att det bara skulle vara en skiss om han endast fått en *.psd ?
När jag får en design/site i psd-format så är den exakt, med marginaler, listor, bakgrunder, bilder, menyer osv. Sjukt lätt att göra till html/css (om man nu kan det dvs) jag kan inte se någon fördel med att få massa delar i separata filer. Som sagt jag kan ha missförstått dig.

Det kan du ha gjort. Men den design jag lagt ut och köpt in har jag fått levererad på det sätt jag vill.
Har inte förstått poängen med att sitta och göra om designerns jobb när man kan få de uppgifter man behöver som man vill ha dom.

studiox 2008-01-01 14:21

Citat:

Ursprungligen postat av elprisguiden
Citat:

Ursprungligen postat av PHREDATOR
Jag vet inte om jag missuppfattar dig nu, men vad menar du med att det bara skulle vara en skiss om han endast fått en *.psd ?
När jag får en design/site i psd-format så är den exakt, med marginaler, listor, bakgrunder, bilder, menyer osv. Sjukt lätt att göra till html/css (om man nu kan det dvs) jag kan inte se någon fördel med att få massa delar i separata filer. Som sagt jag kan ha missförstått dig.

Det kan du ha gjort. Men den design jag lagt ut och köpt in har jag fått levererad på det sätt jag vill.
Har inte förstått poängen med att sitta och göra om designerns jobb när man kan få de uppgifter man behöver som man vill ha dom.

Det kan ju bero på att designers inte kan HTML/CSS (Om du har en vanlig webbyrå). Jag har fått massa designförslag i psd och så har man själv suttit och gjort om dom till HTML/CSS (kanske för man kan det?). Om man inte kan det så är det ju det lämpligaste att man köper in den kunskapen också, helst av samma firma såklart, ävem om det inte alltid går.

Cosma 2008-01-01 23:50

Jag e inne lite på mazada spår. Det är bra att ha vissa kunskaper. Jag gör design i photoshop - klipper upp den till dem elementen dem ska vara i - sparar för webb (du kan använda Fireworks för klippa och optimera din design). Sen kodar jag min struktur med HTML/CSS och lägger in grafiken i CSS. Personligen tycker jag att du ska dumpa DW och koda för hand med Notepad++. På det sättet lär du dig och förstår kodens uppbyggnad bättre.


Alla tider är GMT +2. Klockan är nu 06:23.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson