Photoshop design: hoe omzetten naar HTML*

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Ik heb nu voor het eerst een website gemaakt dmv Photshop. De tekst ook in Photoshop gedaan, de hele layout gesliced en geëxporteerd naar web. Nu heb ik een mooie HTML-file met mijn website, maar, de tekst is niet selecteerbaar (en dus niet doorzoekbaar voor Google). Nu vind ik dat eerste niet zo'n ramp, maar dat tweede wel. Wat is de oplossing hiervoor? Ik heb wel wat zitten zoeken op google, en het schijnt dat je de slieces een naam kan geven (heb ik zojuist gedaan) en dan met CSS tekst kan toevoegen... MAar dit wil niet echt lukken.

De slice waar nu tekst staat in Photoshop heb ik content genoemd. Deze heeft als type afbeelding, als ik deze verander in Geen afbeelding dan is de hele layout stuq... Volgens mij moet ik dat laatste selecteren om tekst te kunnen plaatsen, of niet?

Heeft iemand tips of steekwoorden waarmee ik kan zoeken om verder te komen?

edit: De layout blijft heel, maar nu is het gewoon een lege ruimte, en photoshop heeft daar spacer.gif van gemaakt....

[ Voor 6% gewijzigd door maarud op 15-06-2009 21:55 ]


Acties:
  • 0 Henk 'm!

  • j_v_malsen
  • Registratie: November 2002
  • Laatst online: 19-09 22:09
Je zult dan de HTML code aan moeten passen. Ik ga ervanuit dat photoshop alles in een tabel geplaatst heeft. Dan kun je de cel waar de content in staat leeg maken en de verhoudingen van de cel even groot maken als de originele afbeelding. Dan zou je er in principe nog een iframe in kunnen plaatsen zodat je evt. meer tekst in kwijt kan dan het originele plaatje.

For rent


Acties:
  • 0 Henk 'm!

  • mithras
  • Registratie: Maart 2003
  • Niet online
Geen auto slice feature gebruiken maar het zelf doen?

Acties:
  • 0 Henk 'm!

  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

Als designer moet je ook geen websites gaan bouwen, maar ze alleen designen. Ik weet niet wat voor designer je bent (visual/interaction/etc) maar laat het eigenlijke bouwen van de html alsjeblieft over aan de front-end developer. Die kan het tenminste. Photoshop kan er geen ruk van, want die maakt overal een plaatje van.

日本!🎌


Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
_Thanatos_ schreef op maandag 15 juni 2009 @ 21:59:
Als designer moet je ook geen websites gaan bouwen, maar ze alleen designen. Ik weet niet wat voor designer je bent (visual/interaction/etc) maar laat het eigenlijke bouwen van de html alsjeblieft over aan de front-end developer. Die kan het tenminste. Photoshop kan er geen ruk van, want die maakt overal een plaatje van.
true, normaal maak ik websites in Dreamweaver maar van deze klant kreeg ik een set .psd files toegespeeld waar ik mij mee maar moest redden... Afijn, ik heb alle slices verwijderd en handmatig gedaan, iig een stuk minder plaatjes. Eens kijken of ik nu het tekstgedeelte voor elkaar krijg :)

Acties:
  • 0 Henk 'm!

  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

Kwestie van selecteren van de tekst in de tekst-layer en plakken in je html editor. Of anders gewoon lorem-ipsum-tekst erin gooien. Tekst hoort immers niet bij het ontwerp, maar bij de content. Dus dat kan later ook nog wel ;)

日本!🎌


Acties:
  • 0 Henk 'm!

  • mithras
  • Registratie: Maart 2003
  • Niet online
En als je te duur bent om zelf te slicen: op rent-a-coder en soortgelijke sites zijn er zat russen en ander volk wat tegen een heel goedkoop uurloon zoiets perfect kunnen. Zeker aan te raden wanneer je krap in tijd en budget zit :)

Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Ik heb nu nog maar 4 slices, en je raad het al, als ik deze 4 plaatjes in Dreamweaver bekijk, en de content verander, zakt de hele layout inelkaar.... Dit is moeilijker dan ik dacht :P

Wat ik nu heb gedaan, is het slicetype veranderd van Afbeelding naar GEen afbeelding - Content.... Nu wordt er wel tekst weergegeven, maar als deze te lang is, dan gaat is hele layout weer in de war... Ik denk dat ik dit maar even laat doen, best nog wel moeilijk...

[ Voor 42% gewijzigd door maarud op 15-06-2009 22:14 ]


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

maarud schreef op maandag 15 juni 2009 @ 22:00:
[...]


true, normaal maak ik websites in Dreamweaver maar van deze klant kreeg ik een set .psd files toegespeeld waar ik mij mee maar moest redden... Afijn, ik heb alle slices verwijderd en handmatig gedaan, iig een stuk minder plaatjes. Eens kijken of ik nu het tekstgedeelte voor elkaar krijg :)
Je maakt het normaal in Dreamweaver maar kreeg nu PSD files en weet het niet meer :?

Je ontwerpt je websites toch altijd in Photoshop neem ik aan? Dreamweaver is slechts een html-editor, het ontwerp komt nog steeds uit de PSD.

Acties:
  • 0 Henk 'm!

  • Gersomvg
  • Registratie: December 2005
  • Laatst online: 09:10
Op zich is er niet direct iets mis met autoslicing. Deed het vroeger ook altijd. Werkt goed voor onmouseoverknoppen (zit automatisch javascriptpreloading van onmouseoverplaatjes bij enzo) :)
Bosmonster schreef op maandag 15 juni 2009 @ 22:25:
[...]


Je maakt het normaal in Dreamweaver maar kreeg nu PSD files en weet het niet meer :?

Je ontwerpt je websites toch altijd in Photoshop neem ik aan? Dreamweaver is slechts een html-editor, het ontwerp komt nog steeds uit de PSD.
Photoshop is echt een ramp voor websites aangezien hij bij de pixels met decimale getallen werkt. Dan crop je je header bijv. naar 900px breed en dan valt er een halve pixel weg :| Voordat ik weet hoe je dat kan uitzetten blijf ik bij Fireworks :)

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Gersompie schreef op dinsdag 16 juni 2009 @ 07:04:
Op zich is er niet direct iets mis met autoslicing. Deed het vroeger ook altijd. Werkt goed voor onmouseoverknoppen (zit automatisch javascriptpreloading van onmouseoverplaatjes bij enzo) :)


[...]

Photoshop is echt een ramp voor websites aangezien hij bij de pixels met decimale getallen werkt. Dan crop je je header bijv. naar 900px breed en dan valt er een halve pixel weg :| Voordat ik weet hoe je dat kan uitzetten blijf ik bij Fireworks :)
:? Dan zet je alles op hele pixels. Wat jij zegt is echt onzin namelijk :P Photoshop is de de facto standaard in webdesign. Dat jij er niet mee kan werken maakt dat niet anders natuurlijk ;)

Als je in de toekomst meer met webdesign wilt doen zou ik dus maar wennen aan die rare PSD's :P

edit: ow de reactie kwam niet van de TS

[ Voor 10% gewijzigd door Bosmonster op 16-06-2009 10:16 ]


Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Tot op heden maakte ik nooit websites met Photoshop, maar dankzij dit projectje ben ik er achter gekomen dat het inderdaad ideaal is... Maar dan moet ik wel weten hoe ik er normale tekst in krijg ipv tekst die ik in Photoshop heb toegevoegd (niet SEO)...Vandaar dit topic :)

Acties:
  • 0 Henk 'm!

  • Saeverix
  • Registratie: Maart 2002
  • Laatst online: 13:02
maarud schreef op dinsdag 16 juni 2009 @ 14:18:
Tot op heden maakte ik nooit websites met Photoshop, maar dankzij dit projectje ben ik er achter gekomen dat het inderdaad ideaal is... Maar dan moet ik wel weten hoe ik er normale tekst in krijg ipv tekst die ik in Photoshop heb toegevoegd (niet SEO)...Vandaar dit topic :)
Waar maakte je het ontwerp van je websites voorheen dan in? Als ik je reacties zo lees heb je niet helemaal in de gaten wat de bedoeling is van het webdesignen, slicen en programmeren...Niets mis mee, maar probeer daar eerst eens wat meer informatie over op te zoeken. Zijn genoeg tutorials en boeken over te vinden.

Want een website die gesliced is door Photoshop met bijhorende HTML file die om te huilen is zal op het gebied van SEO helemaal niets presteren...

De bedoeling is het zelf handmatig slicen van de PSD. Waarbij je rekening houdt met verschillende hoogstes van de verschillende pagina's.
Vervolgens moet je met behulp van die slices (losse plaatjes) de pagina weer exact nabouwen zoals hij er in Photoshop uitziet. Maak hierbij voornamelijk gebruik van CSS en vermijd design elementen in je HTML.

Daarbij moet je even logisch nadenken. En kom je daar op dit moment niet uit dan moet je dat logisch nadenken nog leren. Een paar keer proberen en testen en genoeg tutorials lezen kom je al een heel eind mee.

Of inderdaad zoals ze hier aangeven: Iemand zoeken die wel weet wat hij/zij doet en die voor een leuk uurloon inhuren om je PSD om te zetten naar HTML.

[ Voor 7% gewijzigd door Saeverix op 16-06-2009 14:31 ]

People who live in glass houses shouldn't throw stones.


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

maarud schreef op dinsdag 16 juni 2009 @ 14:18:
Tot op heden maakte ik nooit websites met Photoshop, maar dankzij dit projectje ben ik er achter gekomen dat het inderdaad ideaal is... Maar dan moet ik wel weten hoe ik er normale tekst in krijg ipv tekst die ik in Photoshop heb toegevoegd (niet SEO)...Vandaar dit topic :)
Het grafisch ontwerpen doe je in Photoshop.

Het bouwen (html'en) doe je in een editor. (Dreamweaver als je WYSIWYG wilt, anders gewoon een goede tekst-editor).

Slicen is geen bouwen :)

Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Ik begin het een beetje door te krijgen;
- met photoshop maak je de layout, en die hak je in stukjes dmv slicen?
- met een editor zet je dus die plaatjes op de goeie plek, en voeg je de rest (tekst e.d.) toe?
dan ga ik eens zoeken op tutorials e.d., dit is voor mij namelijk een hele nieuwe manier :)

Ik krijg namelijk vaak template's toegespeeld die ik moet veranderen, dus meestal pas ik de afbeeldingen en hun positie's aan, een beetje simpel dus :P Maar from scratch heb ik nog nooit een grafisch gelikte layout gemaakt, dus vandaar deze vragen :)

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Het slicen is vaak niet nodig, meestal ben je beter af onderdelen handmatig uit te knippen.

Daarnaast is html'en natuurlijk wel iets meer dan plaatjes op de goede plek zetten en tekst toevoegen :P Een gedegen kennis van html, css, javascript en hoe alle verschillende browsers hiermee omgaan is belangrijk.

Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Moeilijker dan ik dacht (als je het mooi wilt hebben dan)... Het is niet onverstandig om even wat tutorials op te zoeken... Bedankt voor je info :)

Acties:
  • 0 Henk 'm!

  • danslo
  • Registratie: Januari 2003
  • Laatst online: 11:37
Bosmonster schreef op dinsdag 16 juni 2009 @ 17:56:
Het slicen is vaak niet nodig, meestal ben je beter af onderdelen handmatig uit te knippen.
Ondanks dat je 'meestal' gebruikt ben ik het hier toch niet mee eens. Volgens mij geldt in alle professionele omgevingen wel dat gemaakte layouts gewoon netjes gesliced worden zodat als er later een subtiel iets veranderd moet worden (vb: knopje krijgt een andere kleur) dat je dan alleen het knopje aanpast en gewoon weer de images laat uitpoepen (je hoeft dus niet precies meer dat knopje uit te gaan snijden).

Zo gaat dat bij ons op werk in ieder geval :P

offtopic:
@bosmonster: ik zat voor de grap eens even in de bron van je 'site' te kijken.. niet dat ik denk dat het je wat uitmaakt, maar er staan wat sluit-tags die er niet horen te staan :>

[ Voor 13% gewijzigd door danslo op 16-06-2009 18:33 ]


Acties:
  • 0 Henk 'm!

  • Cartman!
  • Registratie: April 2000
  • Niet online
Nou, bij ons niet.. Meestal moet je het merendeel gaan loshalen vanwege gradients en afgeronde hoekjes ed. Dat krijg je met wat slices niet zomaar voor elkaar dan. Misschien dat jullie designs zo simpel zijn dat het wel kan natuurlijk maar over t algemeen denk ik dat handmatig doen veel sneller is omdat alles wat je doet in 1 keer klopt qua zowel formaat, code en html.

Acties:
  • 0 Henk 'm!

  • danslo
  • Registratie: Januari 2003
  • Laatst online: 11:37
Cartman! schreef op dinsdag 16 juni 2009 @ 18:36:
Nou, bij ons niet.. Meestal moet je het merendeel gaan loshalen vanwege gradients en afgeronde hoekjes ed. Dat krijg je met wat slices niet zomaar voor elkaar dan. Misschien dat jullie designs zo simpel zijn dat het wel kan natuurlijk maar over t algemeen denk ik dat handmatig doen veel sneller is omdat alles wat je doet in 1 keer klopt qua zowel formaat, code en html.
Gradients zijn gewoon te slicen. Voor ronde hoekjes heb je gewoon een designer nodig die weet wat ie doet. Oftewel de layer structuur op zodanige manier indelen dat je met 1 druk op je muisknop zorgt dat die ronde hoekjes op een transparante achtergrond gesliced worden.

Wat betreft je opmerking over formaten, juist met layers krijg je precies dat wat de webdesigner bedoelde. Uiteraard klop je dan wel de (x)html gewoon handmatig.

Helaas kan ik hier geen designs en/of bestaande afgeronde websites posten, maar ik kan je verzekeren dat we professioneel te werk gaan en onze designs zeker niet (altijd) simpel zijn ;)

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

cls schreef op dinsdag 16 juni 2009 @ 18:31:
[...]

offtopic:
@bosmonster: ik zat voor de grap eens even in de bron van je 'site' te kijken.. niet dat ik denk dat het je wat uitmaakt, maar er staan wat sluit-tags die er niet horen te staan :>
Heb ik een site dan? :P Of bedoel je dat plaatje op de homepage dat er al 10 jaar staat :P Heb hem weer eens een updateje gegeven, nu ook met fatsoenlijke doctype!

Anyway.. het probleem met slices imho is dat het een photoshop-klus is. Probleem is dat de webdesigner geen verstand heeft van hoe ik de site op zou willen knippen, dus zou ik zelf al die guides toe moeten gaan zitten voegen. Dat is mijnsinziens zonde van de tijd.

Wijzigingen vind ik niet zo belangrijk. De designs horen gewoon af te zijn voordat je eraan gaat bouwen. En dat dingetje dat een keer wijzigt knip ik wel opnieuw uit. Iets kan ook qua afmetingen veranderen en dan zou je je guides toch weer opnieuw in moeten stellen.

Al met al kost het me veel meer tijd om alle guides in te stellen en te slicen dan het handmatig uit te knippen.

Een duidelijke layerstructuur, naamgeving en layer comps (voor pagina varianten en dingen als hover-states) zijn imho wel een vereiste.

[ Voor 18% gewijzigd door Bosmonster op 16-06-2009 20:10 ]


Acties:
  • 0 Henk 'm!

  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

Gradients zijn gewoon te slicen. Voor ronde hoekjes heb je gewoon een designer nodig die weet wat ie doet. Oftewel de layer structuur op zodanige manier indelen dat je met 1 druk op je muisknop zorgt dat die ronde hoekjes op een transparante achtergrond gesliced worden.
Maar Photoshop weet helemaal niets van sliding doors, dus je kunt je knopjes/tabjes/panels wel sliden, maar ze zullen altijd vaste afmetingen hebben. Daardoor moet je voor veel dingen alsnog handmatig te werk gaan, want een website hoort zich aan de instellingen van de gebruiker (zoals vensterbreedte, fontgrootte, etc) aan te passen, en niet andersom.

Ik zeg dus, handmatig. Als de designer 1 knopje ofzo wil aanpassen, mag hij/zij het ook voor me slicen en er opnieuw plaatjes van maken die kloppen met sliding doors.

日本!🎌


Acties:
  • 0 Henk 'm!

  • Saeverix
  • Registratie: Maart 2002
  • Laatst online: 13:02
_Thanatos_ schreef op dinsdag 16 juni 2009 @ 21:09:
[...]

Maar Photoshop weet helemaal niets van sliding doors, dus je kunt je knopjes/tabjes/panels wel sliden, maar ze zullen altijd vaste afmetingen hebben. Daardoor moet je voor veel dingen alsnog handmatig te werk gaan, want een website hoort zich aan de instellingen van de gebruiker (zoals vensterbreedte, fontgrootte, etc) aan te passen, en niet andersom.

Ik zeg dus, handmatig. Als de designer 1 knopje ofzo wil aanpassen, mag hij/zij het ook voor me slicen en er opnieuw plaatjes van maken die kloppen met sliding doors.
Met slicen bedoelen we ook handmatig knippen en opslaan van alle onderdelen.
Dat er nu toevallig een slice functie in photoshop zit maakt niet uit. De enige die deze manier van slicen bedoelde is de topicstarter...

En sliding doors is toch 1 van de dingen waar de meeste designers niks van weten, of het gewoon niet willen weten.
Maar ik bedoel wat voor moeite is het om 2 sliding doors afbeeldingen op te slaan?

En wat betreft de andere reactie hierboven: Als je met een designer werkt die een beetje weet wat hij/zij doet dan heb je geen last van vervelende gradients en ronde hoeken en dergelijke. Een designer die een beetje weet hoe een website in elkaar zit scheelt al een hoop ellende.

Daarom wil ik ook alle designers aanraden zich een beetje te verdiepen in websites en de technische opbouw daarvan.

Maar we dwalen inmiddels erg af van het topic :D

People who live in glass houses shouldn't throw stones.


Acties:
  • 0 Henk 'm!

  • PainkillA
  • Registratie: Augustus 2004
  • Laatst online: 26-08 19:26
je moet gaan kijken welke onderdelen dynamisch en welke static zijn. De static onderdelen kan je bijv als achtergrond gebruiken. De dynamischie zaken maak je apparte afbeeldingen van.

Dit is een beetje hoe ik het doe als ik een psd aangeleverd krijg. je hoeft ook niet elke pixel in een apparte afbeelding te zetten zeg maar maar zoveel mogelijk groeperen wat te groeperen valt.

Een puntje wat veel front end developers vergeten is he zo efficient mogelijk opslaan van deze afbeeldingen (png,jpg,gif) en een aantal optimizers eroverheen te halen. Dit kan zo 50% efficienter worden qwa grootte zonder dat er zichtbaar kwailiteits verlies is. Vergeet ook niet dat veel achtergronden met css ipv afbeeldingen kunnen dus ook dan geld niet zomaar alles naar afbeeldingen slicen. Zeker in de toekomst met css3

Acties:
  • 0 Henk 'm!

  • MadEgg
  • Registratie: Februari 2002
  • Laatst online: 11:44

MadEgg

Tux is lievvv

Ben ik dan de enige die een idee voor een layout sneller omzet naar een HTML/CSS bestand dan naar een Photoshop plaatje? Dat geneuzel om alles in Photoshop te krijgen zoals je wilt is toch alleen maar verspilde tijd en een niet noodzakelijke stap? En de klant kan aan een layout in HTML net zo goed beoordelen of de layout naar wens is als bij een Photoshop bestand.

Heb het hele idee van dat slicen nooit zo begrepen...

Tja


Acties:
  • 0 Henk 'm!

  • PeterSelie
  • Registratie: December 2002
  • Laatst online: 18-09 14:19
Designers kunnen over het algemeen niet HTMLen / CSSen, zeker niet als het binnen elke browser perfect moet ogen. Slicen en designen blijft in veel gevallen toch vaak een vak appart en zeker binnen grote bedrijven zal de een een design in elkaar zetten en zal het na goedkeuring overgegeven worden aan het volgende team.

Acties:
  • 0 Henk 'm!

  • disjfa
  • Registratie: April 2001
  • Laatst online: 03-07 14:47

disjfa

be

Saeverix schreef op woensdag 17 juni 2009 @ 09:02:
[...]
Met slicen bedoelen we ook handmatig knippen en opslaan van alle onderdelen.
Dat er nu toevallig een slice functie in photoshop zit maakt niet uit. De enige die deze manier van slicen bedoelde is de topicstarter...
Uhm nee, slicen doe je met de slice tool. Handmatig knippen en plakken heeft daar absoluut niets mee te maken. Dat zou nogal ingewikkeld worden als we alle benamingen dubbel gaan gebruiken :P

@TS: Plezier met het leren van html. Begin dan ook te denken vanuit html, dan kom je erachter dat je 90% niet uit je ontworpen document hoeft te halen meestal :)

disjfa - disj·fa (meneer)
disjfa.nl


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Saeverix schreef op woensdag 17 juni 2009 @ 09:02:
[...]

En wat betreft de andere reactie hierboven: Als je met een designer werkt die een beetje weet wat hij/zij doet dan heb je geen last van vervelende gradients en ronde hoeken en dergelijke. Een designer die een beetje weet hoe een website in elkaar zit scheelt al een hoop ellende.

Daarom wil ik ook alle designers aanraden zich een beetje te verdiepen in websites en de technische opbouw daarvan.
Wat is dat nou weer voor onzin :P Mogen designers geen 'lastige' dingen ontwerpen? Kennis van web, mogelijkheden en opbouw is prettig en zelfs noodzakelijk, maar dit mag hun creativiteit natuurlijk niet in de weg staan. Als ronde hoekjes in een huisstijl passen/horen, dan horen ze ook op de site. Dat is een van de redenen waarom het een goed idee is om webdesign en frontend development los te trekken in 2 losse functies, anders ga je al snel dingen ontwerpen waarvan je weet dat ze eenvoudig zijn te ontwikkelen en in je mogelijkheden-pakket zitten. Dag creativiteit betekent dat over het algemeen.

Ik vind het juist een uitdaging als frontend developer om de verzinsels van de designers efficient uitgevoerd te krijgen. Uiteraard wel met enige grenzen, maar daar hebben we iets voor dat heet 'overleg' :P
PainkillA schreef op woensdag 17 juni 2009 @ 09:11:

Een puntje wat veel front end developers vergeten is he zo efficient mogelijk opslaan van deze afbeeldingen (png,jpg,gif) en een aantal optimizers eroverheen te halen. Dit kan zo 50% efficienter worden qwa grootte zonder dat er zichtbaar kwailiteits verlies is. Vergeet ook niet dat veel achtergronden met css ipv afbeeldingen kunnen dus ook dan geld niet zomaar alles naar afbeeldingen slicen. Zeker in de toekomst met css3
Als die dat vergeet is het gewoon een waardeloze frontend developer, want dat is een van zijn taken :P
MadEgg schreef op woensdag 17 juni 2009 @ 09:16:
Ben ik dan de enige die een idee voor een layout sneller omzet naar een HTML/CSS bestand dan naar een Photoshop plaatje? Dat geneuzel om alles in Photoshop te krijgen zoals je wilt is toch alleen maar verspilde tijd en een niet noodzakelijke stap? En de klant kan aan een layout in HTML net zo goed beoordelen of de layout naar wens is als bij een Photoshop bestand.

Heb het hele idee van dat slicen nooit zo begrepen...
Hier kan ik een lang verhaal over schrijven, maar het komt erop neer dat deze werkwijze in een professionele omgeving (dus niet jij alleen op je zolderkamer) niet werkt. Het designen is een proces, waar mogelijk meerdere designers aan werken over langere periode. Deze designs dienen ook goedgekeurd te worden bijvoorbeeld door de klant. Als alles klopt ga je pas ontwikkelen.

[ Voor 13% gewijzigd door Bosmonster op 17-06-2009 09:46 ]


Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 04-09 08:16

OkkE

CSS influencer :+

Ik ben het helemaal eens met Bosmonster.

Een designer moet in eerste instantie alleen beperkt worden door zijn eigen creativiteit. Wanneer hij een ontwerp heeft gemaakt dat niet te realiseren is (binnen het budget/wens van de klant), dient er in overleg een tussenweg bedacht te worden.

Verder is inderdaad het optimaal opslaan van afbeeldingen, het optimaal benutten van CSS, etc. allemaal een essentieel onderdeel van front-end developer.

Om het over 't "direct in HTML/CSS omzetten" maar niet te hebben. Dat werkt echt niet (niet sneller iig) wanneer je met wat grotere klanten werkt en/of wat enigzins boven een basic ontwerp wilt komen. Dan zal je toch echt eerst in Photoshop aan de slag moeten.

[ Voor 4% gewijzigd door OkkE op 17-06-2009 10:13 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

  • Saeverix
  • Registratie: Maart 2002
  • Laatst online: 13:02
disjfa schreef op woensdag 17 juni 2009 @ 09:23:
[...]

Uhm nee, slicen doe je met de slice tool. Handmatig knippen en plakken heeft daar absoluut niets mee te maken. Dat zou nogal ingewikkeld worden als we alle benamingen dubbel gaan gebruiken :P

@TS: Plezier met het leren van html. Begin dan ook te denken vanuit html, dan kom je erachter dat je 90% niet uit je ontworpen document hoeft te halen meestal :)
Niets van waar... Slicen betekent niets meer dan "snijden". Het in stukjes snijden van een ontwerp in bijvoorbeeld Photoshop.

Ik heb in verschillende professionele omgevingen gewerkt, en daar werd overal de term slicen gebruikt voor het handmatig in stukken snijden van een ontwerp. (En dus niet met de slice tool in Photoshop)

En wat betreft: "De designer niet beperken in zijn creativiteit". Dat klopt, maar het moet niet zo zijn dat je elke keer bij een nieuw ontwerp terug moet gaan om te zeggen: Niet haalbaar. En steeds moet uitleggen waarom het niet haalbaar is en wat er anders moet. Dat moet een klein stukje kennis van de designer zijn. Op die manier bespaar je ontzettend veel tijd.

People who live in glass houses shouldn't throw stones.


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Saeverix schreef op woensdag 17 juni 2009 @ 13:55:
[...]

Niets van waar... Slicen betekent niets meer dan "snijden". Het in stukjes snijden van een ontwerp in bijvoorbeeld Photoshop.

Ik heb in verschillende professionele omgevingen gewerkt, en daar werd overal de term slicen gebruikt voor het handmatig in stukken snijden van een ontwerp. (En dus niet met de slice tool in Photoshop)
Lijkt me nogal een non-issue. Het is puur naamgeving. Ik heb het ook nooit over slicen, want dan denk ik gelijk aan de slice tool als iemand het daar over heeft. Zal wel gewoon verschillen per omgeving en mensen en is dus niet per definitie zo zwart/wit als wel of niet waar.
En wat betreft: "De designer niet beperken in zijn creativiteit". Dat klopt, maar het moet niet zo zijn dat je elke keer bij een nieuw ontwerp terug moet gaan om te zeggen: Niet haalbaar. En steeds moet uitleggen waarom het niet haalbaar is en wat er anders moet. Dat moet een klein stukje kennis van de designer zijn. Op die manier bespaar je ontzettend veel tijd.
Dat lijkt me de definitie van een webdesigner :) Bovendien kun je natuurlijk wel vaker overleggen dan alleen wanneer de designer klaar is B)

En met een beetje mazzel zal de interactie al bepaald zijn door de interaction designer en zijn de ingewikkeldste frontend zaken dus al afgestemd.

[ Voor 5% gewijzigd door Bosmonster op 17-06-2009 14:27 ]


Acties:
  • 0 Henk 'm!

  • Loadichus
  • Registratie: November 2002
  • Laatst online: 01-06-2021
maarud schreef op maandag 15 juni 2009 @ 21:54:
Ik heb nu voor het eerst een website gemaakt dmv Photshop. De tekst ook in Photoshop gedaan, de hele layout gesliced en geëxporteerd naar web. Nu heb ik een mooie HTML-file met mijn website, maar, de tekst is niet selecteerbaar (en dus niet doorzoekbaar voor Google). Nu vind ik dat eerste niet zo'n ramp, maar dat tweede wel. Wat is de oplossing hiervoor? Ik heb wel wat zitten zoeken op google, en het schijnt dat je de slieces een naam kan geven (heb ik zojuist gedaan) en dan met CSS tekst kan toevoegen... MAar dit wil niet echt lukken.
Het is al aangegeven maar om kort en bondig te zijn je maakt van je tekst een plaatje.
Als kernzoekwoorden zou ik proberen : photoshop website building tutorial

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 18-09 16:28

Bosmonster

*zucht*

Loadichus schreef op woensdag 17 juni 2009 @ 16:03:
[...]


Het is al aangegeven maar om kort en bondig te zijn je maakt van je tekst een plaatje.
Als kernzoekwoorden zou ik proberen : photoshop website building tutorial
Even kort door de bocht: spuit 11

Acties:
  • 0 Henk 'm!

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 17:01
Loadichus schreef op woensdag 17 juni 2009 @ 16:03:
[...]


Het is al aangegeven maar om kort en bondig te zijn je maakt van je tekst een plaatje.
Als kernzoekwoorden zou ik proberen : photoshop website building tutorial
dat ik van mijn tekst een plaatje maak weet ik ook wel :) Maar ik bedoelde er dus mee te zeggen dat op de plaats van het plaatje, 'echte' tekst moet komen, en dat is mijn hele punt, dat ik dat niet goed voor elkaar krijg :)

Acties:
  • 0 Henk 'm!

  • Cartman!
  • Registratie: April 2000
  • Niet online
Dat is het hele punt dus, dat je moet leren HTML-en ;)

Acties:
  • 0 Henk 'm!

  • DJ Henk
  • Registratie: Juli 2003
  • Laatst online: 12:40
Of je gebruikt: psd2html. Razendsnel klaar.

Voor je persoonlijke site misschien te duur, maar als je af en toe bijklust kun je het zelf waarschijnlijk niet voor dat geld.

Acties:
  • 0 Henk 'm!

  • curry684
  • Registratie: Juni 2000
  • Laatst online: 06-09 00:37

curry684

left part of the evil twins

maarud schreef op woensdag 17 juni 2009 @ 16:36:
[...]

dat ik van mijn tekst een plaatje maak weet ik ook wel :) Maar ik bedoelde er dus mee te zeggen dat op de plaats van het plaatje, 'echte' tekst moet komen, en dat is mijn hele punt, dat ik dat niet goed voor elkaar krijg :)
Feitelijk heb je dus een auto getekend en ben je verbaasd dat ie niet rijdt. Webdevelopment is een compleet ander vakgebied dan webdesign, en op allebei de vakgebieden zijn professionals te vinden die het langer dan een uurtje hebben gedaan en er wel topkwaliteit in opleveren. Schakel gewoon zo'n pro op webdevelopment in als je het zelf niet kunt, want dit ga je niet in een uurtje, dagje of zelfs week naar behoren leren voor je dingen als 'semantiek', 'indexeerbaarheid', 'cross-browser compatibility' e.d. afdoende beheerst.

Professionele website nodig?

Pagina: 1