Hoe maak je een Photoshop Prototype converteren naar Web HTML
Photoshop is een goed hulpmiddel voor het ontwerpen van de beeldelementen van uw website , met inbegrip van rollover knoppen , drop-down menu's en graphics die verwijzen naar andere webpagina's . Echter , Photoshop zelf is niet een web - pagina creatie tool . Gelukkig is het relatief eenvoudig om uw prototype exporteren naar een web - vriendelijke grafische indeling , en het opbouwen van een HTML- webpagina die deze elementen gebruikt . Houd in gedachten dat interactieve componenten zoals hyperlinks , rollover knoppen en drop- down menu's vereisen extra werk . Die verder gaat dan de basis is sterk afhankelijk van uw aanvraag , en kunnen specialistische kennis van programmeren vereist . Wat je nodig hebt Photoshop HTML -editor webbrowser Toon Meer Aanwijzingen Basic webpagina 1
Open uw prototype in Photoshop en exporteren naar een web - ondersteunde beeldformaat . Kies " Opslaan voor web en apparaten " in het menu Bestand . In het dialoogvenster selecteert u JPEG- , GIF-of PNG . Selecteer een beeldkwaliteit , in gedachten houden dat een hogere kwaliteit neemt de bestandsgrootte toe . Kopen van 2
" Save" het bestand op de harde schijf , waardoor het een naam zoals " myPrototype.jpg . "
3
Open je HTML-editor en maak een nieuwe webpagina. De meeste HTML editors zal een skelet webpagina te maken voor u . 4
Voeg een beeld element direct onder de opening
. Het beeld element hebben de vorm : . . 5
Sla uw webpagina en lading in elke browser < br > Beyond Basics 6
Verbeter uw lay-out met behulp van tabellen of Cascading Style Sheets ( CSS ) om uw layout te positioneren . De beste methode is om de afzonderlijke lagen , of plakjes , gemaakt in Photoshop te nemen en te positioneren met behulp van CSS . Goed uitgevoerd, creëert dit een ' vloeibare ' lay-out die herpositioneert wordt de lay-out als de browser aangepast . 7
Verbeter de snelheid met behulp van herhalende achtergrond elementen . In Photoshop , maak een 5 -pixel - brede deel van uw achtergrond en sla het op naar bestand. In HTML , kunt u het element met de achtergrond attribuut van uw
,
of CSS-stijl te herhalen . Syntax voor elk geval verschilt , dus controleer uw HTML- gids. Zorg ervoor dat de achtergrond attributen op " herhalen . " 8
Gebruik image maps om eenvoudige links te maken van een afbeelding naar een andere webpagina . Volgens webontwikkelaar Gregory Hodges , maak een
