Tekst in foto in webpagina

[Verwijderd]

Hoi,

Ik zit al 3 dagen te emmeren met photoshop CS2 en dreamweaver.
Het is de bedoeling dat er een slideshow in mijn website komt van foto's.
Deze foto hebben allemaal een stukje tekst nodig en die wil ik op de foto zelf plaatsen. Dus als onderdeel van de foto. Nou kan je in fotobewerkingsprogramma's met tekst werken. Echter op de site valt de helft weg (van de tekst) het is heeel erg lelijk, kortom het ziet er niet uit.
Hier kan ik niet veel vinden. Behalve dan Anti-aliasing en opslaan als gif. Dit helpt allemaal niet. En het moet natuurlijk wel een beetje leuk ogen. . Ik heb het idee dat mijn uitgangspositie niet goed is.

Wie kan en wil mij helpen,
Kompas

WinXP
PS CS2
Dreamweaver 8

[Copyman]

Tekst op je foto's plaatsen waarna de helft van de tekst wegvalt?

Ik snap eigenlijk niet wat je precies wil. Kom even met concrete voorbeelden, misschien dat we je dan kunnen helpen.

[Mr.Qips]

Is het niet makkelijker om de foto als achtergrond van een div ofzo te zetten, en dan de tekst er gewoon overheen te typen? Dus niet de tekst in het plaatje zelf stoppen, maar er over heen.

[Verwijderd]

Hoi,

Probleem is dat als ik je de foto stuur je ziet dat deze goed is. Het zit hem in het volgende: op het moment dat ik de foto in de slide show zet wordt de foto okay weer gegeven. Maar de tekst (wat dus een onderdeel van de foto is geworden) waardeloos. Tekst wordt heel schraal. Randen vervagen helemaal.

[Verwijderd]

Mr.Qips schreef op zaterdag 28 januari 2006 @ 12:49:
Is het niet makkelijker om de foto als achtergrond van een div ofzo te zetten, en dan de tekst er gewoon overheen te typen? Dus niet de tekst in het plaatje zelf stoppen, maar er over heen.

Zoiets dacht ik ook aan. Wat is precies div?

[Voutloos]

Als tekst er niet lekker uit komt na een resize actie, is het misschien niet zo'n gek idee om éérst je foto's de goede afmetingen voor die slideshow te geven en daarna pas de tekst erin te zetten.

Verwijderd schreef op zaterdag 28 januari 2006 @ 13:05:
[...]
Zoiets dacht ik ook aan. Wat is precies div?

Een bouwblokje van HTML.

De optie waarbij je je tekst niet ín het plaatje stopt zou bij mij de voorkeur genieten, omdat het gewoon flexibeler is. Als je een font wil aanpassen kan het dan met 1 regel, ipv dat je alle plaatjes opnieuw moet bewerken.

[ Voor 27% gewijzigd door Voutloos op 28-01-2006 13:09 ]

[Verwijderd]

Dat doe ik. Alle fotos hebben de goede grote. Slideshow ziet er leuk uit.
Dan open ik een foto in CS2. Daar type ik een tekst in de foto en sla deze op als Gif of JPEG. Dan zijn de randen mega wazig. Het is geen lettertype meer maar een onderdeel van een foto.
Ik wil dus een strakke tekst krijgen in de foto.

[BasieP]

Verwijderd schreef op zaterdag 28 januari 2006 @ 13:13:
Dat doe ik. Alle fotos hebben de goede grote. Slideshow ziet er leuk uit.
Dan open ik een foto in CS2. Daar type ik een tekst in de foto en sla deze op als Gif of JPEG. Dan zijn de randen mega wazig. Het is geen lettertype meer maar een onderdeel van een foto.
Ik wil dus een strakke tekst krijgen in de foto.

nogmaals:

<div style="background-image: url(foto.jpg);">hier je text</div>

je moet er dan wel even op letten dat je de div een grote moet geven (even groot als de foto)
en dat je (mbv bijv. padding) je text moet 'plaatsen' in je divje.

dus
<div style="width: 400; height: 200; background-image: url(foto.jpg); padding: 20px;">text</div>

je foto is dan 400 + 20 + 20 pixels lang, en 200 + 20 + 20 pixels hoog

[Verwijderd]

BasieP schreef op zaterdag 28 januari 2006 @ 13:30:
[...]


nogmaals:

<div style="background-image: url(foto.jpg);">hier je text</div>

je moet er dan wel even op letten dat je de div een grote moet geven (even groot als de foto)
en dat je (mbv bijv. padding) je text moet 'plaatsen' in je divje.

dus
<div style="width: 400; height: 200; background-image: url(foto.jpg); padding: 20px;">text</div>

je foto is dan 400 + 20 + 20 pixels lang, en 200 + 20 + 20 pixels hoog

THNX maar dit gaat iets te ver voor me. De website zelf is trouwens geen slideshow. Het zijn foto's en als je daar op klikt komt er een slide show.

De foto's zijn landscape en boven en onder hebben ze een witte balk. In die onderste balk moet de tekst. Als je kijkt naar www.sandrazeilstra.nl zie wat ik bedoel. Bijvoorbeeld de 3de foto uit de middelste rij. (rechtsboven) Als je daar op klikt begint er een slideshow. Daar wil ik er dus nog 1 van maken alleen met foto's met daarin een tekst die per foto anders is.

tips?

[Voutloos]

Verwijderd schreef op zaterdag 28 januari 2006 @ 13:47:
THNX maar dit gaat iets te ver voor me.

tips?

Jezelf inlezen, zodat het niet meer te ver voor je gaat. Sorry, maar als dit te ver gaat, kan je net zo goed Dreamweaver meteen deïnstalleren en voortaan iemand inhuren die je site verzorgd, of kijken of je ergens een leuk photo cms / slideshow pakketje kan vinden ergens.

[Acid_Burn]

Klinkt alsof je foto's te groot zijn voor het windowtje wat je voor je slideshow gebruikt. Daardoor gaat de browser je foto resizen en dit levert een lelijk resultaat op. Dus kijk ho groot de slideshow de plaatjes wil hebben en stem daar de foto's op af (met tekst).

[Verwijderd]

Maak eerst een een scrreendump voor ons zodat we kunnen zien wat de fout is...(aan de buitenkant)

[Verwijderd]

Voutloos schreef op zaterdag 28 januari 2006 @ 13:54:
[...]
Jezelf inlezen, zodat het niet meer te ver voor je gaat. Sorry, maar als dit te ver gaat, kan je net zo goed Dreamweaver meteen deïnstalleren en voortaan iemand inhuren die je site verzorgd, of kijken of je ergens een leuk photo cms / slideshow pakketje kan vinden ergens.

Okay sorry. Zal ik doen. Die site die ik liet zien had ik had ik ook gemaakt. Nooit zoiets voor hoeven doen. Dat bedoelde ik eigenlijk. Slideshows lukken me wel. Alleen in photoshop een tekst in een foto zetten krijg ik niet (mooi) voor elkaar.

[Verwijderd]

Verwijderd schreef op zaterdag 28 januari 2006 @ 14:02:
Maak eerst een een scrreendump voor ons zodat we kunnen zien wat de fout is...(aan de buitenkant)

Heb een hele mooie (duidelijke) screendump nu. Maar niet de mogelijkheid om te posten. Ben even iets aan het zoeken om het neer te zetten.

[Verwijderd]

Verwijderd schreef op zaterdag 28 januari 2006 @ 14:27:
[...]


Heb een hele mooie (duidelijke) screendump nu. Maar niet de mogelijkheid om te posten. Ben even iets aan het zoeken om het neer te zetten.

Je hoeft ons niet opde hoogte te houden van al je acties en je kan je posts ook editen

[Boelie-Boelie]

Verwijderd schreef op zaterdag 28 januari 2006 @ 14:27:
Ben even iets aan het zoeken om het neer te zetten.

Gratis: www.imageshack.us , http://imagevenue.com

[Verwijderd]

http://img59.imageshack.us/my.php?image=vbtweakers6cc.gif

Zie dat tekst niet helemaal goed is. Maar dat terzijde.
De foto vanwege copyright even onduidelijk gemaakt. Maar let op de tekst.
De canvassize van de foto is vergroot. En in de witte balk onderin type ik dus steeds de tekst.
Echter als ik opsla als gif of jpeg komt die uiteindelijk zo op de site!!!?

[Dazzyon]

Je kunt beter geen GIF gebruiken voor een foto. JPG is hiervoor beter geschikt.

Heeft de foto zelf wel hetzelfde formaat als op de site is ingesteld?
Als je een foto netjes op een ander formaat wilt weergeven kun je deze beter resizen in Photoshop en in Dreamweaver de orginele grootte behouden.

Het ziet er namelijk uit als een foto die met html tags op een andere grootte wordt gezet dan dat de foto eigenlijk is.

[ Voor 53% gewijzigd door Dazzyon op 28-01-2006 16:33 ]

[BasieP]

trouwens zou het ook goed kunnen dat je de kwaliteit van de .jpg file niet zo bijster hoog heb staan, dit is de reden dat de text zo blokkerig word.

kijk eens naar iets van opties/kwaliteit oid in het programma waarmee je de foto opslaat.
dit is vaak een getal tussen de 0 en 100, ik zelf sla .jpg altijd op de hoogste kwaliteit op. Dan zie je bijna geen verlies meer.

Echter, jpg zal je altijd pixeltjes kunnen zien. zeker als je duidelijk verschil hebt tussen zwart en wit (dus hoog contrast)
als je echt een goede kwaliteit plaatje wilt, zal je .png kunnen gebruiken. Dit slaat op zonder pixeltjes, maar is vaak wel wat groter.

[Verwijderd]

Dus eigenlijk gaat dit niet eens meer over je site enz... gewoon hoe je een foto resized en strak laat.... tutorial voor photoshop maybe?

[André]

Handige kick? Het topic is 1,5 maand oud