PDA

View Full Version : Floating images in Photoshop


Interstellar Icon
06-10-2008, 06:39 PM
Hi All,

Is there an easy way to float images within text in Photoshop? For example, let's say I want an image in the upper right corner of the text box, and another image in the lower left corner. Is there a way to position these images within the text box so that the text flows around them?

Thanks in advance for any help... :-D

Sam

Corrosive
06-10-2008, 09:24 PM
Hi All,

Is there an easy way to float images within text in Photoshop? For example, let's say I want an image in the upper right corner of the text box, and another image in the lower left corner. Is there a way to position these images within the text box so that the text flows around them?

Thanks in advance for any help... :-D

Sam

Hi Sam. You can do this with CSS rather than in Photoshop. Try to do no (or as little as you can) text in photoshop. It just becomes a jpeg image to search engines and they won't be able to read it. Your client will NOT be happy :(

Search some tutorials on floating images using CSS.

Interstellar Icon
06-10-2008, 09:35 PM
Hi Sam. You can do this with CSS rather than in Photoshop. Try to do no (or as little as you can) text in photoshop. It just becomes a jpeg image to search engines and they won't be able to read it. Your client will NOT be happy :(

Search some tutorials on floating images using CSS.

Hi Corrosive,

I would normally do this in Dreamweaver, but I'm creating "mock ups" of all of the pages for the LCC site, per domedia's input. I assumed he meant to do these in Photoshop, since the next step is "Build out website". (See http://www.dreamweaverclub.com/forum/showpost.php?p=139714&postcount=15.)

Do you think I'm supposed to be doing these in Dreamweaver instead? Lemme know what you think... :)

Thanks,
Sam

Corrosive
06-10-2008, 09:53 PM
Hi Corrosive,

I would normally do this in Dreamweaver, but I'm creating "mock ups" of all of the pages for the LCC site, per domedia's input. I assumed he meant to do these in Photoshop, since the next step is "Build out website". (See http://www.dreamweaverclub.com/forum/showpost.php?p=139714&postcount=15.)

Do you think I'm supposed to be doing these in Dreamweaver instead? Lemme know what you think... :)

Thanks,
Sam

Sorry Sam, misunderstood what you were doing. :oops:

Yes, mock it up in Photoshop as Dom said. Not sure PS will get text to 'float' like you need but I'm sure someone will know.

Interstellar Icon
06-10-2008, 09:59 PM
Sorry Sam, misunderstood what you were doing. :oops:

Yes, mock it up in Photoshop as Dom said. Not sure PS will get text to 'float' like you need but I'm sure someone will know.

Roger that. I hope someone may happen along with a tidbit or two, because I'm presently using the "resize text and reformat" method. Tedious, to say the least. :(

Thanks again for all of your help - I truly appreciate it. 8-)

Sam

Corrosive
06-11-2008, 08:28 AM
Roger that. I hope someone may happen along with a tidbit or two, because I'm presently using the "resize text and reformat" method. Tedious, to say the least. :(

Thanks again for all of your help - I truly appreciate it. 8-)

Sam

I'll just drop a mail to my bro because he uses PS a lot more than I do.

Corrosive
06-11-2008, 11:01 AM
Message from bro...

Morning dude!

Umm.. PS is hopeless for text. There's no wrap AFAIK, as it's not really designed with that in mind. You'll have to create layers of text and do it the hard way.

Interstellar Icon
06-11-2008, 02:26 PM
Message from bro...

Morning dude!

Umm.. PS is hopeless for text. There's no wrap AFAIK, as it's not really designed with that in mind. You'll have to create layers of text and do it the hard way.


Hey Corrosive,

Thanks for trying. :) I did a search online and didn't come up with anything, either. I'm almost done with the mock ups for the pages on the LCC site, but hopefully I'll get it figured out before I start the next one. ;-)

Thanks again,
Sam

domedia
06-11-2008, 05:43 PM
Corrosives 'bro' is right :) PS is not a text editing tool, so you'll have to divide into separate layers for text blocks.

Corrosive
06-11-2008, 05:55 PM
Corrosives 'bro' is right :) PS is not a text editing tool, so you'll have to divide into separate layers for text blocks.

What's really amusing is when people get it the other way round. I find enough people in our office using Microsoft Word to arrange pictures, posters, presentations...Word is (barely) a typewriter!

Interstellar Icon
06-12-2008, 12:35 AM
Thanks for your follow up, guys. If nothing else, at least I know my formatting efforts weren't in vain. :wink:

Sam

Rob_Che
06-12-2008, 02:29 PM
You'll just need to format the text by hand... returning the line breaks.

Once you've done this layout you'll just be cropping out the actual images anyway so don't worry how they interact at this stage.
Just get it 'looking' right... that's all you need right now.

Rob

Interstellar Icon
06-12-2008, 06:36 PM
You'll just need to format the text by hand... returning the line breaks.

Once you've done this layout you'll just be cropping out the actual images anyway so don't worry how they interact at this stage.
Just get it 'looking' right... that's all you need right now.

Rob

Thanks Rob. Just out of curiosity, have you noticed that type looks different in Photoshop than it does in HTML? It almost looks like the fonts are all in bold to my eye. As you said, it doesn't really matter since the published version will be text in HTML, but it would be nice to have the proofs I prepare for my clients look as much like the finished product as possible. Let me know your thoughts when you have a moment... :)

Sam

Corrosive
06-12-2008, 07:18 PM
Hi Sam

You won't be able to get them looking exactly the same. It depends on...

Which browser the page is being viewed it. Browsers render text differently and Macs seem (in my experience) to render text differently to PCs.

It also matters if the font you have specified to be used in the html of the site is actually loaded on the viewers computer. This is why Dreamweaver gives you a range of fonts such as Verdana, Arial, Georgia, Times so that if the user doesn't have the font you want first choice it will resort to the second choice and so on.

You can also make subtle changes to fonts in photoshop crisp, smooth, strong etc.

This all means that you will never get an exact match between the text on your mock up and how it is viewed on every computer.

Frustrating huh :confused:

Rob_Che
06-13-2008, 12:12 PM
InterstellarIcon...

As Corrsive touched on... You need to ensure you are mocking up your text with a browser friendly font... Times / Verdana etc... (I use Verdana)

If you choose, say, 9pt text Verdana and specify 'None' in style you will get a pixel perfect font to mock up with.

It looks bold as it's blurred... if you zoom in to the font style I mentioned above, you will notice there is a sharp (vector-like) edge.

Good luck.. how are you getting on anyway ? :)

Rob

Corrosive
06-13-2008, 01:46 PM
InterstellarIcon...

As Corrsive touched on... You need to ensure you are mocking up your text with a browser friendly font... Times / Verdana etc... (I use Verdana)

If you choose, say, 9pt text Verdana and specify 'None' in style you will get a pixel perfect font to mock up with.

It looks bold as it's blurred... if you zoom in to the font style I mentioned above, you will notice there is a sharp (vector-like) edge.

Good luck.. how are you getting on anyway ? :)

Rob

Yep, you'd get pretty close following Rob's advice.

Interstellar Icon
06-18-2008, 04:43 AM
Hi Sam

You can also make subtle changes to fonts in photoshop crisp, smooth, strong etc.

This is what I was looking for. 8) I was working in the Character palette, and these options aren't included. I must say, however, that no matter how I manipulate the type, it never looks the same as it does in Dreamweaver or on a website. If nothing else, at least I know it's not just me... :lol:

InterstellarIcon...

If you choose, say, 9pt text Verdana and specify 'None' in style you will get a pixel perfect font to mock up with.

It looks bold as it's blurred... if you zoom in to the font style I mentioned above, you will notice there is a sharp (vector-like) edge.Rob

I am using Verdana, and I understand now why it looks like it's bold. I think it's just too bad that it doesn't look right at standard scale, as that's what a client's going to see.

Good luck.. how are you getting on anyway ? :) Rob

I'm doing well - still struggling with tables and trying to figure out CSS, but definitely moving forward! :wink: Thanks again for your help, and I hope all's well with you...

Thanks,
Sam

Rob_Che
06-18-2008, 09:44 PM
In the past - if I needed a perfect representation of a font...
Type the text you need in word / dreamweaver etc & screen grab it as an image paste it in... It's an option if you're worried.

I find explaining to the client why the font looks blurred is enough tho ;)

All well with me Sam :)

Interstellar Icon
06-21-2008, 07:30 AM
In the past - if I needed a perfect representation of a font...
Type the text you need in word / dreamweaver etc & screen grab it as an image paste it in... It's an option if you're worried.

I find explaining to the client why the font looks blurred is enough tho ;)

All well with me Sam :)

That's a great idea...and one I didn't even think of. I'll play around with it next time I have the opportunity. None of my clients have said anything about it, so I may be making something out of nothing.

Glad to hear you're doing well... :)

Sam