Van Photoshop naar Golive. HOE?

Pro web-ontwikkeling
1

Ik hoef niet een antwoord op mijn topic-titel maar had graag wat informatie over het volgende. Ik ben me steeds meer aan het verdiepen in webdesign. Ik kan qua ontwerp wel vooruit, alleen het daadwerkelijke bouwen, daar blijft het bij mij steken.

Mijn collega raadt me aan om met Golive eens een site te maken. Nu is mijn vraag of er een boek bestaat om van een photoshop (CS2) document een website te maken. Ik weet dat dit met segmenten gebeurt. Maar het fijne weet ik er niet van…

Wie weet een goede titel?

2

wat ik zelf doe: ik maak eerst het design in photoshop, dan duid ik aan in welke delen tekst gaat komen te staan (gewoon voor mezelf). Dat worden dan al aparte afbeeldingen. De rest splits ik ook op zodat het meeste zo gemakkelijk mogelijk te maken is. (bijvoorbeeld gele achtergrond is veel sneller via css dan met een prentje). Alleen de elementen die bijna niet met css mogelijk zijn hoe ik als image. Ik maak dan elke keer een div aan en die afbeelding is dan de achtergrond van die div.

3

Gewoon je file openen in Adobe ImageReady, slicen naar behoefte. En vandaar uit "save as optimized" met de optie "html and images" Dat heb je meteen je html pagina met alle beelden appart erbij. ImageReady staat in de Photoshop folder.

4

Als ik het goed (in een notendop) begrijp moet ik dus het volgende doen:

  • van elk aparte afbeelding een segment-selectie maken?

Ik heb een .PSD bestand met een 20-tal lagen. Moet ik bv. van elke knop een apart bestand opslaan?

5

Neem hier eens een kijkje [url]http://www.xs4all.nl/~blanken5/webedit/phsp_imrd/im_read_html.html[/url]

6

[quote:e47581e71b="Macflippo"]Neem hier eens een kijkje [url]http://www.xs4all.nl/~blanken5/webedit/phsp_imrd/im_read_html.html[/url][/quote:e47581e71b]

Bedankt! Zeer nuttige link! Ik ga me ff wat verder verdiepen…

7

Nadeel van de html te laten maken door imageready is dat hij nog steeds gebruikt maakt van tabellen voor de opmaak in plaats van css.

Als je hem zelf van scratch opbouwt (je htmlpagina), denk dan zelf eerst even na welke images je als background wil plaatsen in css, en welke je effectief als image zult embedden in je html.

Het verschil ligt hem niet in de output, maar wanneer de mensen proberen de pagina te printen. Background images worden standaard niet afgeprint.

8

[quote:b794284e48="klaus"]Nadeel van de html te laten maken door imageready is dat hij nog steeds gebruikt maakt van tabellen voor de opmaak in plaats van css.[/quote:b794284e48] Da's niet helemaal waar. Je kunt ook CSS opties aangeven in ImageReady (File --> Output settings --> Slices --> Generate CSS).

9

ff back to basic. Ik ben er nog steeds niet helemaal uit. Ik heb de volgende afbeelding, waarvan de 'enter' knop op een aparte laag staat in segmenten gesneden. Dit wordt overigens mijn startscherm. [img:ba66f44f22]http://forum.macosx.nl/album_pic.php?pic_id=16031[/img:ba66f44f22] Ik heb de segmenten dus gemaakt. Dat was stap 1. Wat nu de beste stap is weet ik dus niet goed, maar vermoed het volgende:

Vervolgens sla ik hem op en wil de (losse) bestanden importeren in Golive.
Moet ik dit als een Smartobject invoegen? Of als afbeelding? Of anders?
Hoe ik vervolgens met rollovers moet gaan werken zal mijn volgende vraag worden denk ik…

Graag krijg ik zoveel mogelijk informatie. Vind het een beetje lastig :wink:

groeten Frank

[b:ba66f44f22]EDIT[/b:ba66f44f22]

Ik heb het eindelijk een beetje onder de knie nu. Ik heb eigenlijk mijn hele basis klaar.
Ik heb mijn links werkend met rollovers en mijn plaatjes toegevoegd.
Alleen als ik hem preview met Firefox of safari, zou ik graag willen dat dit venster EXACT opent op het door mij gemaakte formaat. 1024 x 768. Waar kan ik dit instellen?