PSD naar XHTML/CSS-conversie

Als ik een psd heb en probeer uit te vinden wat de beste dimensies zijn om te gebruiken voor de HTML-conversie, wat zou het beste zijn. Doe gewoon de psd-afbeeldingsgrootte?

Ik heb mijn site en de pagina waarop mijn afbeelding er hieronder zou moeten uitzien.

Website: http://kansasoutlawwrestling.com

Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

Ik ging naar psd2htmlconverter.com betaalde 3 dollar en kreeg iets, maar de html en CSS worden correct weergegeven, maar het is niet gescheiden zoals het zou moeten zijn.

http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

Maar ik probeer echt van de hoofdwebsite CSS af te komen.

2
Nou, het was een ontwerp dat ik iemand betaalde om te maken. Ik probeerde alleen meer ervaring op te doen met het converteren.
toegevoegd de auteur Jeff Davidson, de bron
Het is geen goedkoop ontwerp. Ik had een goed bedrijf dat me iets heel leuks heeft ontworpen, denk ik. Alleen al met het ontwerp is het niet zeker of dit de BESTE manier is om de xhtml/css te coderen.
toegevoegd de auteur Jeff Davidson, de bron
Als je PSD 1x1 pixels is, kan je aanpak een probleem blijken te zijn ....
toegevoegd de auteur RedFilter, de bron
Hoe moeten we weten wat het beste is voor je doelgroep?
toegevoegd de auteur Sparky, de bron
Ik weet niet of ik je goed heb begrepen, maar meestal is PSD gemaakt met een specifiek raster in gedachten. U moet dus al een aantal vooraf gedefinieerde dimensies hebben. Als u een volledig willekeurige grootte in PSD hebt, is het lastig om alle dimensies correct te berekenen.
toegevoegd de auteur Ivan Ivanić, de bron
Dit is een te brede vraag. Wat is jouw doel? Welk type gebruiker wilt u ondersteunen? Is 1024x768 waarschijnlijk de laagste resolutie die u moet ondersteunen? Mobiele gebruikers? Hoe groot is deze psd? Ik heb geen idee wat je moet bouwen, echt waar. Vraag je dit omdat je een goedkope psd-naar-xhtml-service inhuurt? Als dat het geval is, vraag het ons dan niet - Vraag de mensen die u inhuurt.
toegevoegd de auteur Steve Adams, de bron

1 antwoord

Niet helemaal zeker wat je vraagt, maar als je het hebt over hoe je de PSD snijdt, zou ik niet alles op vooraf ingestelde dimensies snijden. Laat de lay-out dicteren waar te snijden, en probeer het logisch te segmenteren op sectie, op een zodanige manier dat het opnieuw assembleren met HTML/CSS gemakkelijk is.

Begin door de lay-out mentaal te duiken in secties, bijvoorbeeld bovenste banner, linkerkolom, rechterkolom, inhoudsgebied, voettekst, enzovoort. Nadat u de lay-out hebt doorgesneden, begint u deze logisch in kleine of middelgrote afbeeldingen te snijden.

Het kan helpen om een ​​skelet in HTML/CSS te maken, zodat u een idee hebt van hoe u de sjabloon moet segmenteren. Dit heeft de neiging om goed uit te werken, omdat je het niet zomaar willekeurig snijdt, maar in plaats daarvan snijdt het in het skelet dat je hebt gemaakt. Het is duidelijk dat je een grote afbeelding als een bovenste banner in een paar delen moet snijden, maar dat verandert niets - je past de secties van de sjabloon nog steeds aan op de secties van je skelet.

Hier is iets dat ik snel echt samenstel, alleen om te laten zien hoe je de afbeelding kunt insnijden. Ik zou mijn exacte voorbeeld niet gebruiken, maar het zou u in de juiste richting moeten wijzen:

Dat is waarschijnlijk het beste advies dat ik kan geven met de verstrekte informatie. Ik zal mijn antwoord uitbreiden als je meer details geeft.

Bewerken

Als u naar de bron op uw pagina kijkt, ziet het ernaar uit dat u div # middle moet zweven, zodat de rechterzijbalk er niet onder daalt.

CSS-tabellay-outs zijn echt goed voor dit soort dingen. Geef zoiets als dit een foto:

  

<div id="container">   
    <div id="layout">   
        <div id="left-sidebar">   
            <!-- left sidebar-->
        </div>   
        <div id="content">
            <!-- content -->
        </div>
        <div id="right-sidebar">   
            <!-- right sidebar -->   
        </div>   
    </div>  
</div>

Hier zijn enkele artikelen over tabelgebaseerde lay-outs in CSS2:

2
toegevoegd
Bijvoorbeeld, de rechter zijbalk is pushdown die het niet zou moeten zijn. Misschien kijken we naar twee verschillende schermformaten.
toegevoegd de auteur Jeff Davidson, de bron
hmm ok, nu het deel dat me gaat storen. mijn div's op de juiste manier uitlijnen.
toegevoegd de auteur Jeff Davidson, de bron
Minus de CSS ziet mijn HTML er tot nu toe goed uit?
toegevoegd de auteur Jeff Davidson, de bron
Ik ben hier allemaal verward over.
toegevoegd de auteur Jeff Davidson, de bron
Niet groot op wat voor tabel dan ook gerelateerd, tenzij het voor het feitelijk weergeven van gegevens.
toegevoegd de auteur Jeff Davidson, de bron
Er klopt hier iets niet. Ik zie er niet goed uit.
toegevoegd de auteur Jeff Davidson, de bron
toegevoegd de auteur Jeff Davidson, de bron
Ik deed een float links en het leek het probleem niet op te lossen.
toegevoegd de auteur Jeff Davidson, de bron
Ik worstel met hoe het er zo ver uitziet. Vanaf mijn scherm ziet het er niet goed uit.
toegevoegd de auteur Jeff Davidson, de bron
Ik heb de afbeelding al gesneden en probeer de xhtml/css-code te vinden zoals beschreven in mijn bericht. Ik heb het gestart maar weet niet zeker of ik mijn breedte moet uitbreiden of wat. kansasoutlawwrestling.com
toegevoegd de auteur Jeff Davidson, de bron
Ik zit hier vast. Ideeën na het bekijken van mijn afbeelding die ik hierboven heb gepost.
toegevoegd de auteur Jeff Davidson, de bron
toegevoegd de auteur Jeff Davidson, de bron
Ik heb de psd. Ik ben geen goede snijmachine. Om eerlijk te zijn met de lay-out vind ik het geweldig, maar het is een beetje moeilijk om erachter te komen wat het beste is om te doen.
toegevoegd de auteur Jeff Davidson, de bron
Ik denk echt dat je mijn suggestie hierboven moet gebruiken. Het werkt heel goed.
toegevoegd de auteur James Johnson, de bron
Ja, het lijkt erop dat je goed begint. Blijf gewoon goede voorbeelden gebruiken en houd de stylesheets up-to-date voor consistentie tussen pagina's.
toegevoegd de auteur James Johnson, de bron
Waarover moet je het hebben? Je hoeft het niet te gebruiken ... het is gewoon een goed alternatief voor drijvende en een opkomende lay-outtechniek. Aan het einde van de dag is het nog steeds 100% css, dus je bent in goede vorm. Het grootste nadeel van traditionele tabellen is dat ze traag worden weergegeven, maar dat is hier niet mogelijk.
toegevoegd de auteur James Johnson, de bron
Tables! = CSS-tabellen. Je zou er goed aan doen dat te onthouden.
toegevoegd de auteur James Johnson, de bron
Het gebruikt geen tabellen. Het gebruikt de CSS2-displayeigenschap en het is bedoeld om de behoefte aan zwevende div's te vervangen.
toegevoegd de auteur James Johnson, de bron
Ik heb een voorbeeld geplaatst om je op weg te helpen. Hoop dat het helpt.
toegevoegd de auteur James Johnson, de bron
Sorry, vergeten te vermelden dat de rechterzijbalk ook naar links moet worden gedreven.
toegevoegd de auteur James Johnson, de bron
Wat is er mis met wat je tot nu toe hebt?
toegevoegd de auteur James Johnson, de bron