Maak een website met alleen Photoshop

Adobe Photoshop is zo'n beetje het beste programma wat er op de markt is voor webdesign. Het maakt de prachtigste grafische ontwerpen, en daarvoor is maar een klein beetje kennis nodig. Maar men kan ook een complete website maken met slechts Photoshop...

Hier volgt nu een exacte beschrijving hoe U dan een website maakt met Photoshop:

Ok, U opent een nieuwe psd en geeft hieraan de afmeting 900 pixel breedte en 1200 lengte mee.Hierop ontwerpt U Uw website precies zoals U hem hebben wilt, met prachtig effecten, schaduwen, etc. U tekent vast knoppen en dergelijke, of U gebruikt gewoon tekst als knoppen.

Voor nieuwe details gebruikt U steeds een nieuwe layer (laag), zodat U later snel de stijl kunt aapassen.Dit voor het move-over effekt op de knoppen bijvoorbeeld

Als U klaar bent,zoekt U aan de linkerkant in de toolbar van Photoshop de actie "slice", in CS4 versie is dit het 5de knopje van boven gerekend. Klik dit met rechts aan en kies voor slice tool.Uw cursor is nu een mesje geworden. U maakt om de knop een rechthoek op Uw website door met links te klikken en dan tot de andere hoek te slepen .

Ga zo door totdat U alles wat U wilt dat later op Uw website verandert of effecten vertoont op die manier omlijnt is, let er op dat eventuele schaduwen en zo binnen het kader vallen, het is belangrijk netjes te werken.Vervolgens klikt U de stukjes die U uitgesneden heeft met rechts aan en geeft er namen aan die U later makkelijk terug vindt, bijvoorbeeld: knop1, knop2, foto1,foto_huis,etc.

Ok, als U klaar bent en de hele website ziet er als een puzzel uit, klikt U op het eerste knopje linksboven op file en dan kiest U voor "save for web and devices", of een nederlandse vertaling hiervan, ik werk namelijk met een engels versie... dus ik weet niet precies hoe alles heet in de nederlandse versie, maar daar moet vrij makkelijk uit te komen zijn...

In het volgende venster kunt U de kwaliteit van de beeldjes instellen, dit is belangrijker dan het lijkt, dit bepaalt namelijk hoe snel Uw site straks opengaat als iemand naar Uw website komt, maar ook hoe getekend alles er uitziet ( de kwaliteit ).

Hierin moet U een evenwicht zien te vinden wat perfekt is. Als U veel tijd heeft doet U dit heel precies voor elk beeldje apart, met in het achterhoofd hoe belangrijk deze zijn, en test steeds door op de knop "test in browser" onderaan te klikken. Heeft U minder tijd dan stelt U rechts boven voor de hele site JPG en 80% in.Voor een website voor nederlandse doeleinden is dit ok, met internetverbingen van 2 mega of meer is het ook mogelijk op 100% in te stellen.

Het is echter de moeite waard om grote vlakken die niet op hoeven vallen de kwaliteit naar 50% jpg te zetten, ook als U minder tijd heeft, Uw site zal sneller opengaan, wat een professionelere indruk wekt.

Ok, de kwaliteit is ingesteld, klik op de knop "save" onderaan, klik op desktop ( bureaublad ) om de bestanden op te slaan.U heeft van tevoren al een map gemaakt die "mijn website" heet, anders doet u dit nu nog even snel tussendoor.Bij filename geeft U in "index", daaronder staat "save as type", dit moet ingesteld worden op "html en images". Klik ok, en een paar sekonden later vindt U in de map op Uw desktop Uw website, althans een begin hiervan.

U hoeft hier nog niks mee te doen, al kunt U de html file dubbel aanklikken, dan ziet U gelijk dat er al een website is.

Volgende stap. U gaat weer naar Photoshop, hier verandert U de stijl van de knoppen en andere dingen die U wilt stijlen zoals ze eruit moeten zien als iemand op de website met z'n cursor erover gaat.Bijvoorbeeld de kleur van de tekst veranderen, op laten lichten, precies naar Uw smaak.

U snapt wat ik bedoel neem ik aan, als U daarmee klaar bent, verandert U de namen van alle stukjes die U daarstraks benoemd heeft door aan de naam "-over" te plakken, knop1 wordt dus knop1-over.

Volgt U het gehele proces opnieuw wat U daarstraks doorlopen hebt, met uitzondering dat de website deze keer opgeslagen wordt in de andere map op Uw desktop die U noemt: "mijn website over",waar U daarnet het html bestand benoemde als index, is het erg belangrijk dat U dat dit keer weer doet, anders kan straks Uw browser ( ik neem aan Internet Explorer ) de beeldjes niet vinden.

Ok, U heeft nu 2 verschillend uitziende website map 1 en map 2 op Uw desktop, U gaat nu in de map "mijn website over" en wist daar alle beeldjes die index nog wat heten, degene die U daarstraks benoemd heeft laat U staan.

U verplaatst nu alle beeldjes die over zijn in deze map, naar de andere map " mijn website".

Ook al heb ik U gezegd in het begin dat we slechts met Photoshop werken,in dit geval met de move over beeldjes gaan we toch Dreamweaver gebruiken omdat dit makkelijker is.

U kunt de move over effecten ook maken met Photoshop, maar dan heeft U een oudere versie nodig met "Image ready" nog erin. De nieuwere versies hebben dit niet meer omdat met Dreamweaver dit veel makkelijker is.Mocht U geen move-over effect hebben willen dan is Uw website ook sneller en makkelijker klaar, en gemaakt met alleen Photoshop.

Goed, U gaat naar de map "mijn website" en maakt het html bestand "index" open met Dreamweaver , klik op "design" als dit nog niet het geval is. Klik nu een van de knoppen aan op Uw website, klik op backspace, de knop verdwijnt, er is een nu gat te zien in Uw website.

U gaat nu bovenin de balk naar "insert" > " image objects" > "roll over image". In het pop-up venster klik U de bovenste "browse" aan en zoekt via de map op Uw desktop naar het orginele beeldje wat hier daarnet nog stond, en klik dit aan.

Hetzelfde doet U met de tweede "browse" knop maar nu zoekt U het zelfde beeldje, maar met -over erachter als naam, deze moeten makkelijk te vinden zijn omdat U zich natuurlijk herinnert wat voor namen U tevoren aan deze beeldjes heeft gegeven, en ze staan op alfabet.

Voor het geval U aan zoekmachine optimalisatie wilt werken geeft U ook namen en dergelijke, maar dit hoeft niet perse voor de website zelf. Wel geeft U onderaan een link aan, natuurlijk naar dat html bestand waar men heengaat als men in de website op de knop zou drukken, een andere pagina in Uw website.

Deze acties voert U nu uit voor alle andere knoppen en beeldjes met move-over effect.

De laatste acties voor we klaar zijn, 1. klik op "code", linksboven, u ziet nu in plaats van Uw website de code.Ergens bovenin vindt U <body> , hiervoor zet u <center>, vervolgens scrollt U naar beneden, daar zoekt U naar </body> hierachter of onder schrijft U </center>.

De laatste actie: klik bovenin de balk op "modify", dan de eerste optie "page properties", dan klikt U het hokje aan waar background staat en kiest een geschikte achtergrond uit voor Uw website.