Hvordan designe websiden i PS

[Arsenal_RULES]

Noen som kan forklare meg enkelt hvordan du designer en webside i Photoshop, for å så eksportere den til dreamweaver, og fikse på kodene der.

 

Hvis du har en link til en webside som forklarer dette, hadde det også vært kjempe flott!

 

Håper noen tar seg tid til å svare

[Garreth]

Først må du bestemme hvilken oppløsning du vil at siden din skal være i (hvis ikke du skal lage et flytende design) Så lager du deg et dokument som f.eks er 990px for skjermer som er 1024px og større. Så designer du siden slik du vil ha den. Så kommer et punkt det finnes veldig mange måter å gjøre det på. Jeg bruker å crope hele dokumentet til de tingene jeg skal klippe ut en og en, for så å lagre som jpg eller gif. Eller du kan bruke slice tool for å dele opp siden og få ut forskjellige bilder, men denne har du mye mindre kontroll med syns jeg. Så når du har alle bildene du trenger så bruker du css til å sette dem inn i html-en.

Endret 9. august 2006 av Garreth

[Arsenal_RULES]

Jeg får det samme problemet hver gang jeg prøver å lage en websiden med photoshop.

 

Hvis jeg skriver mer enn det som er beregnet for plassen hvor teksten ligger, så skyver hele designet seg nedover, og dermed ødelegger hele siden. Hvorfor skjer dette, og hvordan kan jeg unngå det?

[funkweb]

Hvis du bare skriver og skriver og skriver, uten mellom rom.

Så forskyver den seg, hvis ikke.. skal den breake.

Men dette er bare hvis du har fastsatt bredde.

[Garreth]

Da tror jeg du bruker feil css koder. Selvom du designer i photoshop, så er det veldig mye du kan gjøre med kun css uten bilder. Se litt på forskjellige layouts på http://www.glish.com/css/. Begynn å bruk en slik forhånds kodet side, og bytt ut etterhvert med bilder fra photoshop hvis du vil bruke gradients og andre ting css ikke kan gjøre.

[Arsenal_RULES]

Helt riktig det du sier der, det var dette jeg begynte med. Så har jeg lurt på hvordan folk designer i ps. Siden jeg ikke kunne dette, tok jeg en titt på det i dag. Har planlagt å jobbe litt med det framover, slik at jeg får et innblikk i hvordan alt henger sammen, når du designer i ps, og koder etterpå.

 

Jeg har ikke kommet så langt enda, men du kan ta en titt på noen av websidene jeg har laget hittil, link.

 

Som sagt er dette bare en liten hobby jeg har, som jeg holder på med når jeg har tid til overs i hverdagen.

Endret 9. august 2006 av Arsenal_RULES

[Garreth]

Det du kan gjøre er å ta et skjermskudd av de glish layoutene, for så å "designe" over det i photoshop. De fleste bruker photoshop til å skisse opp siden slik at du kan måle hvor mange pixler bred f.eks venstre diven skal være osv.

 

Det finnes en måte å få ut html ut fra photoshop, men den generer den værste koden og jeg anbefaler sterkt å ikke bruke dette.

[Avean]

Cropper ut hver del av designet (Header,Meny,Footer) og slike ting og bruker Iframes til å sette det sammen i Dreamweaver. De kan jeg posisjonere som jeg selv vil noe du ikke kan med tabeller. Utfordringen blir vel å få iframesa til å oppføre seg riktig men det er nok info å ta fra forumet her.

[Garreth]

Huff! Hvorfor ikke bruke normal html og css istedet for idiotiske frames? Du sier jo selv at det er en utfordring å få det til å stemme?

[Avean]

Huff! Hvorfor ikke bruke normal html og css istedet for idiotiske frames? Du sier jo selv at det er en utfordring å få det til å stemme?

6643729[/snapback]

 

Du så jeg skrev iframes og ikke frames ja ? Er jo iframes (divs) du designer med i CSS.

[Garreth]

Huff! Hvorfor ikke bruke normal html og css istedet for idiotiske frames? Du sier jo selv at det er en utfordring å få det til å stemme?

6643729[/snapback]

 

Du så jeg skrev iframes og ikke frames ja ? Er jo iframes (divs) du designer med i CSS.

6644209[/snapback]

 

Tror du har misforstått noen elementer jeg.

 

The IFRAME element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the OBJECT element: they both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc.

 

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

 

Iframes er i mine øyne galt å bruke i 99% av tilfellene, så hvis du ikke har enormt spesielle behov, hold dere vekke fra Iframes og frames!

[Arsenal_RULES]

Hmm, dette var ganske vanskelig. Er det essensielt ved webutvikling og bruke ps til hele utformingen av websiden.

 

Greier ikke å få tak på det...

[phun-ky]

http://www.sitepoint.com/article/design-website-photoshop

 

Dette burde hjelpe litt.

 

Er det essensielt ved webutvikling og bruke ps til hele utformingen av websiden?

 

Nei, du burde sjekke kildene dine, PS er ikke nødvendig i det hele tatt. Jeg bruker bare teksteditor + prøv og feil. Med bilder, ja, da trengs det et bilderedigeringsprogram/tegneprogram.

[Garreth]

Som phun-ky sier så trenger du ikke et bilde/tegnepgram i det hele tatt. Du kan gjøre hele siden med bare css.

 

Se f.eks http://www.clearleft.com/ og se på skjermskuddet av siden her uten bilder. Du ser det er ikke super stor forskjell uten dem.

Endret 10. august 2006 av Garreth

[Arsenal_RULES]

Takker for mye hjelp, tar en titt på guiden, og forsetter arbeidet mitt!

 

Endret 10. august 2006 av Arsenal_RULES