How to use the rectangular marquee tool?

[techmanaustin7]

i am trying to use the rectangular marquee tool to make spaces in my text. im making a side nav bar for a website for a family member.

so i need to add in dviders to go between each text link. i need to make selections 210 by 1 pixel using the rectangular marguee tool between each line and fill with the colour #1e1e1e.

How do i do that? im not sure where to find those settings. im following a turtial so thats why its like this.

here is a pic of what im trying to do.

any help would be great thanks!

[gener7]

You could go up to the Marquee tool Options bar and at Style, change it from Normal to Fixed Size and enter the pixel width and height.  210 w x 1 h  Set Feather to 0 px or the line looks blurry.

Then from Photoshop's color picker, enter the hex value to set the foreground color.

Use the Alt + Delete keyboard shortcut to fill that rectangle with the foreground color wherever you position the rectangle.

Gene

[John Waller]

i am trying to use the rectangular marquee tool to make spaces in my text. im making a side nav bar for a website for a family member.

so i need to add in dviders to go between each text link.

Just a thought: Since the end goal of this exercise is making components for a webpage, you'd be better off creating your dividers and whitespace using Cascading Stylesheets (CSS) using whichever web editor you use.

One feature of navbars on webpages is that they're prone to change over time and it's far easier tweaking text rules in a stylesheet than re-visiting Photoshop to create new graphics every time you want a small change in the nav bar.

[techmanaustin7]

Ok I can see your point. I have used CSS before. How would I do this? Good thought too! I hadn't thought of that!

[John Waller · Accepted solution]

How would I do this?

Hard to explain in a single forum post.

Best if you upload your site to the web and post a link.

Then it's a matter of creating a CSS-based navbar (there are plenty of tutorials - and tools/utilities to make the process easier - online) and tweaking the CSS rules to taste

One example: http://css3menu.com

All this is strictly off-topic for a Photoshop forum, of course. Which web editing software do you use? Perhaps take the discussion there.

[techmanaustin7]

i have some text i want be a hyperlink when i click on the text. is there someway to do this?

these links are for a website for a cliet.

[John Waller]

Same as the answer to your earlier post http://forums.adobe.com/thread/1295865

Photoshop does not do hyperlinks (or hotspots on images). It's an image editor. Hotspots (clickable links on images) are a feature of web pages which work in browsers.

You create the image/artwork in Photoshop as you have done.

Then you use a web editor such as Dreamweaver to import the image into a web page then add hotspots in DW. Then upload to the web.

[maronesty]

Is there a specific platform you are using online... Like Wordpress or Joomla?  If not, are you using HTML5?

As John stated above, you won't be able to make links directly from photoshop... But if you are making some sort of app or widget for wordpress then its REALLY easy to add your links to exactly what you created in photoshop.

For Wordpress & Joomla I use something called Revolution Slider.  Simply make a new slider, set the size etc and import your psd or png image.  Next you edit the layers, select the text you want to link and add the links... Done.  I use this for my personal blog because its the easiest way... If you are using WP/Joomla you can see an example on my blog ... The header up top uses the slider I mentioned & multiple other elements on page, such as the sidebars use it as well.  Simply using a text widget to display a rev slider.

If you are not using either of these two platforms, and negative on the html5 , then please let me what sort of code you are using and i'll let ya know what to do as I have clients that use all sorts of platforms & custom coding.  There's always a way, just not from photoshop.

~mike

[Silkrooster]

Use slices. Select the properties for that slice and you can type in a url. Just keep in mind that the slices are for images rather than text. In other words, your text would be converted to an image.

In a web page you are better off typing the text in the html document and overlaying it on the image. Then you can have a true text link.

[joelc23474640]

This is not entirely accurate. When you save a photoshop file as a pdf, it will produce hyperlinks out of what it determines to be email addresses. The question is how do you get it to do that for web pages as well. And the answer is nobody knows!

[tonyal88646527]

Then how is this done in the web app Canva? In Canva, I can add a hyperlink to an element and still save as JPG and then the link works on sites like Instagram. I can't believe there is not a way to do this in Photoshop? I pay hundreds for this software but have to go to Canva, a free solution, to make it work?

[Silkrooster]

No, links are not saved with the jpg. Odds are an html file is saved along with the jpg. The html is a text file that uses tags to create hyperlinks and points to the location of the jpg. Some programs don't always make it clear that they are saving more than one file.

[LindaCinMaine]

I also find it very disappointing that I can't copy and paste a link into one of my images so that people can purchase it.

Adobe should find a way to make this happen for its users!

[jane-e]

Adobe should find a way to make this happen for its users!

Hi @LindaCinMaine 

Links to images are written with HTML code. If you want to do this with Adobe applications, you can use Adobe Dreamweaver.

Adobe follows the W3C standards. Here is how links work, as set by the consortium:

https://www.w3schools.com/html/html_links.asp

~ Jane

[maureenmleem]

Hey Linda,

It's pretty easy to import an image into Adobe Acrobat, add a herplink, and export as a pdf. I don't know why they haven't added this capability to Photoshop- you can export pdfs ¯\_(ツ)_/¯

[John Waller]

>>>I don't know why they haven't added this capability to Photoshop

Photoshop works with image file formats such as PSD, TIF and JPG which do not support hyperlinked text. Acrobat works with the PDF file format which is a "container" file format which supports hyperlinks.

You can create hyperlinked text if you create Slices in Photoshop then export to web. Slices are separate to the actual image. Photoshop will create a separate html page for the Slices complete with the hyperlinks. There will be no hyperlinks in the exported images which accompany the html page.