Archief - HTML: Frame in photoshop

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

warhead

Legacy Member
Ik heb deze site gemaakt met photoshop
ier is em

Maar nu zouk graag een reepje ervan ebben zodak da kan instellen als background zodanig dat da zichzelf altijd maar herhaalt, weet er iemand hoe ik da moet doen?

En om daar nu tekst, informatie in te krijgen hoe zouden jullie da doen? ik kan er alleen maar een Iframe in plaatsen ma dan ist zo lelijk mee 2 scrollbars, moeilijk om te scrollen, lelijk dus, iemand een idee hoe ik et et best zou doen?

greetz

DarkBone

Legacy Member
Selectietool gebruiken om het stukske aan te duiden da ge wilt laten herhalen en dan 'Edit -> Crop'.

Ge hoeft nie per se met een iframe te werken hé, ge kunt het ook gewoon als ééngrote pagina laten, maar dan moet ge wel op iedere pagina uw navigatie overnemen. Tenzij ge met PHP en includes werkt. Server Side Includes is ook nog een oplossing, maar dat moet door uw host ondersteund worden (net als PHP).

warhead

Legacy Member
DarkBone zei:
Selectietool gebruiken om het stukske aan te duiden da ge wilt laten herhalen en dan 'Edit -> Crop'.

Ge hoeft nie per se met een iframe te werken hé, ge kunt het ook gewoon als ééngrote pagina laten, maar dan moet ge wel op iedere pagina uw navigatie overnemen. Tenzij ge met PHP en includes werkt. Server Side Includes is ook nog een oplossing, maar dat moet door uw host ondersteund worden (net als PHP).

crop? da zie ik nie staan oor

awel da probeer ik nu te doen, niet met een Iframe werken en de pagina gewoon altijd herhalen maar dan heb ik een klein stukje (in de breedte) achtergrond nodig zodanig da da dan den elen tijd kan herhalen (in het html document eh nie in photoshop)

dus da ge dan zegt background="stukjephotoshop" en da lukt nie

greetz

edit: dit gebeurt er dus als ik er meer tekst in schrijf hoe kan ik dat nu verhelpen? hier klikken

[Scratch]

Legacy Member
DarkBone zei:
Selectietool gebruiken om het stukske aan te duiden da ge wilt laten herhalen en dan 'Edit -> Crop'.
Dat kan af en toe wel zeer vervelende effecten of gevolgen hebben als je met layer style werkt. Ik heb mezelf aangeleerd altijd de selectie te copieren met CTRL+SHIFT+C en dan CTRL+N en CTRL+V

Op die manier neem je een soort screenshot van je selectie en paste je deze in een nieuw bestand. Zo hoef je ook niet te croppen in je origineel bestand :)

LunchBox

Legacy Member
kbegrijp wat ge bedoelt ivm layerstyles scratch, maar bij uw methode duikt ook een mogelijk probleem op nl. ge kopieert enkel de inhoud van de huidige layer -- je zou kunnen flattenen alvorens je kopieert maar er bestaat een betere methode die beide oplost en nog eens resulteert in een duidelijke aflijning van alle site-afbeeldingen.

die methode is uiteraard de slice-tool gebruiken (en ik raad ten stelligste aan dit in imageready te doen en niet photoshop), die slaat een afbeelding op (safe for web; selected slice only) binnen de boundaries aangeduidt door de slice en met alles wat op die moment visueel zichtbaar is. kortom zo bekom je een ontwerp vol regionen die verschillende afbeeldingen gaan worden. (denk er wel aan, het worden gifs dus een header-image met foto sla je best apart op naar jpg)

de benaming van de afbeeldingen wordt bepaald door de naam van je slices vandaar doe je er ook best aan volgende methode te hanteren: plaats eerst guides op je ontwerp; maak een selectie -- zet deze om naar een slice via "make slice from selection"; benoem je slice en hupla je kan gaan outputten naar (een) gif-afbeelding(en).

nu kan je dus op een vrij snelle manier eenzelfde reeks buttons bekomen met verschillende tekst; of je gaat een template-button layerset kopiëren en de tekst aanpassen waarna je verschillende slices in één keer opslaat, of je past de tekst van eenzelfde slice aan waarna je de slice-naam aanpast en gewoon de 'selected slice' opslaat naar gif; verder moet je nergens rekening mee houden het opslaan naar die correcte benaming gebeurt automatisch.

[Scratch]

Legacy Member
LunchBox zei:
kbegrijp wat ge bedoelt ivm layerstyles scratch, maar bij uw methode duikt ook een mogelijk probleem op nl. ge kopieert enkel de inhoud van de huidige layer
Nope, CTRL+SHIFT+C copiert alle layers net alsof je je layers geflattend hebt, dat is nu net de power van CTRL+SHIFT+C :)

warhead

Legacy Member
et slicen da lukt allemaal oor en het is mij nu ook gelukt om zo'n slice te nemen van de achtergrond, dank daarvoor, maar nu krijgek da nog altijd nie als achtergrond in mijn html file (kijk naar de screenshot van ierboven)

greetz

LunchBox

Legacy Member
zo leer ik ook nog'ns een shortcut bij se, quite handy - hopelijk was de rest van m'n uitleg niet voor nix ;)

@lcedo

Legacy Member
As ge in imageready save optimized as... gedaan hebt en als html opgeslaan dan zet photoshop da normaal gezien als html-file + mapke images, nie?

Elke afbeelding staat dan in nen <td> dus ipv <td><img sr="bron afbeelding"></td> neemt ge gewoon <td background="bron afbeelding">En dan hier inhoud zetten</td>

Het gaat ook wel mee css geloof ik wss iets als <td style="background-image: URL("bron")"></td> ma da wetek nie zeker

LunchBox

Legacy Member
het eerste dat ge doet nadat ge "save optimized as" hebt gedaan in imageready is die .html file dat'm heeft gegenereert deleten, laat het een goeie tip wezen - dat bestand is nix waard en je bent beter af zonder.

verder werk je uiteraard beter met css oplossingen dan <td background=""> te gebruiken wat ook alleen maar voor problemen kan zorgen in verschillende browsers. leer zeker het concept validatie & "volgens de regels werken" wanneer je verder wil gaan in webdesign. geldt dus ook voor @lcedo.

@lcedo

Legacy Member
Kweet dat het beste is om w3c valid te werken met css enz... :ironic:
Maar denkt toch dat het html-doc van imageready toch een goede basis is voor aan een site te beginnen, mits wat aanpassingen moet het wel lukken om da valid te krijgen.
Bovendien kan je in photoshop ook al de rollover states instellen van al die afbeeldingen en wordt alles zo schoon in een javascriptje gegoten.

[Scratch]

Legacy Member
LunchBox zei:
zo leer ik ook nog'ns een shortcut bij se, quite handy - hopelijk was de rest van m'n uitleg niet voor nix ;)
Lol, see, you are never to old or skilled to learn eh :)

Ik doe bijna niets anders als CTRL+SHIFT+C en dan CRTL+ALT+SHIFT+S (save for web :)) als ik aan't photosoeppen ben ...

LunchBox

Legacy Member
@lcedo zei:
Maar denkt toch dat het html-doc van imageready toch een goede basis is voor aan een site te beginnen, mits wat aanpassingen moet het wel lukken om da valid te krijgen.
Bovendien kan je in photoshop ook al de rollover states instellen van al die afbeeldingen en wordt alles zo schoon in een javascriptje gegoten.
het eerste klopt al niet, imageready voegt een reeks onnodige col-rowspans toe waar een gebruiker niet aan uit zal kunnen (en dit omdat het programma geen logische opbouw kent); in een editor (wat diezelfde beginner het allemaal eens in zal willen bekijken) vertaalt zich dat in die extra cells aan boven-en zijkant van de website. wanneer je tdwidth/tdheight niet standaard meegeeft (kortom wanneer je imageready's safe-for-web niet goed afstelt) ga je helemaal nergens komen want wanneer je een afbeelding verwijdert verspringt alles.

je tweede punt gaat over imageready-rollovers, heb je die code al eens onder de loep genomen.. dah's zowah hetzelfde als een heel boek lezen terwijl je maar de naam van een hoofdpersonage moest weten. lees gerust eerst de achterkant en ge zijt er misschien al. rollovers zijn iets van niets eens je de allerkleinste basis van javascript hebt bekeken dus die dingen maak je evengoed even zelf.

conclusie: weg met die html file van imageready.

@[Scratch]: i agree, iedere keer mijn photoshop opengaat leer ik wel ergens iets bij of kom ik wel tot een 'nog veelzijdigere' manier om ergens toe te geraken. (al weiger ik om te slicen in photoshop maar dah's een ander verhaal)

warhead

Legacy Member
oke keb et dus gevonden

nie lachen eh, kwas vergeten images/ dervoor te schrijven lol
zo idioot eh, da da van zoiets kan afhangen

toch merci eh mensen

@lcedo

Legacy Member
LunchBox zei:
het eerste klopt al niet, imageready voegt een reeks onnodige col-rowspans toe waar een gebruiker niet aan uit zal kunnen (en dit omdat het programma geen logische opbouw kent); in een editor (wat diezelfde beginner het allemaal eens in zal willen bekijken) vertaalt zich dat in die extra cells aan boven-en zijkant van de website. wanneer je tdwidth/tdheight niet standaard meegeeft (kortom wanneer je imageready's safe-for-web niet goed afstelt) ga je helemaal nergens komen want wanneer je een afbeelding verwijdert verspringt alles.

je tweede punt gaat over imageready-rollovers, heb je die code al eens onder de loep genomen.. dah's zowah hetzelfde als een heel boek lezen terwijl je maar de naam van een hoofdpersonage moest weten. lees gerust eerst de achterkant en ge zijt er misschien al. rollovers zijn iets van niets eens je de allerkleinste basis van javascript hebt bekeken dus die dingen maak je evengoed even zelf.

conclusie: weg met die html file van imageready.

Ik denk dat het voor een beginnend designer niet super belangrijk is of de code wel correct is, photoshop is misschien wel wat omslachtig enzo, maar ik denk dat je toch een hoop werk meer hebt als je alles vanaf nul zelf in html wilt beginnen. De code is dan wel proper normaal gezien daarin heb je gelijk en rollovers kunnen idd gemakkelijker dan bij photoshop.
Maar het belangrijkst is toch dat het er in de browser goed uitziet, zeker voor een beginnend photoshopper.

LunchBox

Legacy Member
neen, een beginnend photoshopper moet leren waarvoor photoshop dient en dat is fotobewerking. wanneer je over websites spreekt moet het er goed uitzien in de browser en eveneens correct zijn, en ga je dus je layout maken in photoshop moet die code goedzitten of je website stelt niets weinig voor bij mensen die weldegelijk om die zaken geven. (uiteraard kan een bezoeker nogal snel content zijn als het er ok uitziet, maar een andere bezoeker die met bv. firefox surft zal evensnel geënerveert zijn als alles verspringt ze)

zie de rechtlijnigheid eens in: slechte code = browser problemen je leert niets met lijm-oplossingen zoals de code die photoshop/imageready genereren, want dat is werkelijk wat die code is -- pure lijm in de vorm van tables waarin elke cell zaken naar mekaar toe forceert. kom je dus NERGENS mee, ook al wil je zo graag je photoshop layout online.

ik ben de laatste die zal zeggen: maak dat je xhtml kent voor photoshop want beide hebben niets met mekaar te maken en photoshop is net iets intensiever dan code begrijpen, maar wanneer je dus website wil gaan maken weet je best wel waar je mee bezig bent. net hetzelfde als dat je zou zeggen: wat maakt het iemand nu uit of een hele interface met simpele kleurtjes naar jpg wordt opgeslagen, zolang het maar zichtbaar is -- ook fout dus want daar is nu net de 256color-schaal van het gif-formaat uiterst geschikt voor.

en dah's maar een voorbeeld, of jij daar nu iets om geeft is uw zaak // van mij mag iemand ook perfect z'n websites van imageready code laten voorzien, maar dan blijft ie mooi stilstaan ipv eens vooruit proberen te gaan. kben ook niet degene die zegt dah je alles in één keer moet kennen want dah's uiteraard vrij onmogelijk, maar eens je WEL een juiste methode gebruikt zie je de voordelen in en ga je uiteraard graag andere gebruikers inlichten waar het nu precies om draait -- zo kunnen ook zij vlugger die voordelen inzien en de JUISTE methode toepassen en uiteindelijk is iedereen verder geholpen.

@lcedo

Legacy Member
Als photoshop voor fotobewerking dient, waarom zitten er dan zoveel tools in die je voor webdesign kan gebruiken?
95% of zoiets van de mensen gebruikt IE dus waarom zou u website als beginnende designer perfect moeten zijn in firefox of opera of...?

Photoshop slaat alle geslicete images toch op als GIF? Dus geschikt formaat!

En as ge imageready gebruikt voor u html-page, gaat ge idd nie vooruit in u code, maar da betekent nie da ge nie vooruit gaat in u design.
Als ge gewoon ies iet wilt proberen om te kijken of da goe is in uwen browser mee bvb background vinnek die html-file wel goed.
Schoon da ge iedereen wilt helpen jong, maar iedereen heeft zijn mening e en ge moet mij daarvoor nie in pm zeggen da ge mij int oog zult houden.
Btw dees topic is :offtopic:

[Scratch]

Legacy Member
:offtopic:

Ne schone mercedes op het chassis van ne rammelbak is nog steeds ne rammelbak, hoe ge het ook bekijkt, hij rijdt dan misschiens goed in de bebouwde kom maar eens op de autostrade of secundaire wegen begint ie uiteen te vallen. Hetzelfde met schoon websites met rommelcode.

Je hebt een punt dat een beginnend webdesigner zich niet zo strict aan al die regels en standaarden moet houden maar ik zeg altijd "jong geleerd is oud gedaan". Zelfs een beginner heeft er baat bij om zich aan de w3c standaarden te houden en crossbrowser te ontwerpen, zeker als je ergens wil geraken met je ontwerpen en goeie sitechecks wil krijgen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan