Solved

CS5 Mac Phtoshop - Creating Hotspots and Uploading to Site

Posted on 2014-03-27
17
357 Views
Last Modified: 2014-04-09
How do you create a hotspot in photoshop CS5 Mac that the image and the code can then be uploaded to the web?

Thanks,

Randal
0
Comment
Question by:sharingsunshine
  • 10
  • 7
17 Comments
 
LVL 26

Expert Comment

by:David Brugge
ID: 39959446
Here's a fairly straight forward tutorial that takes  you through the steps.

I should mention that Photoshop, which is terrific for illustrating and manipulating photo images. is terrible at creating code for the web.

Its code is bloated, overly complicated, and very difficult to modify, but it's fast, and easy, and get's the job done in a hurry.

Basically you want to create art on several layers, then by using Photoshop slices, you can get Photoshop to output a separate piece of art from each layer and gives you the code to make it work together on a web page.

Check out the tutorial and let us know if you get any questions.
0
 

Author Comment

by:sharingsunshine
ID: 39959539
When I click on that link this is the title of what I get

Create Animated Rollovers In InDesign CS5

I need it for Photoshop.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39959606
opps
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39959609
0
 

Author Comment

by:sharingsunshine
ID: 39959682
this article is for a rollover.  I need a hotspot and the image map that is needed.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39960365
I am so sorry. I'm answering two questions at once and got my instructions crossed. The process is essentially the same, except you design the whole graphic and put a rectangle slice around the area you want to be "hot". If you have an irregular area, make several slices that all link to the same link.

Let me find you some CORRECT tutorials.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39960382
Try this tutorial. Yes, it is written for a windows machine, but the process is exactly the same except you use Control+click instead of right click.

https://www.youtube.com/watch?v=XGhUjBKC_ac
0
 

Author Comment

by:sharingsunshine
ID: 39960585
That is great on how to create the hotspot and assign the url but how do you upload it to a site?  So that's half of what I need.  Thanks!
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 26

Expert Comment

by:David Brugge
ID: 39963035
You need a program that will link up to your site using File Transfer Protocol.

Photoshop used to come bundled with a program that would do that, but then they came out with Fireworks and transferred all of that function over to that program.

You will need an FTP program that will let you log into your web site and transfer the html and the folder with your images there.

One that many people like alot is Filezilla
It has a lot of very nice features, but best of all, it's FREE.

This assumes that you know the username and password to get access to your site.
0
 

Author Comment

by:sharingsunshine
ID: 39963072
I have all of that, I can use Fetch.  But I don't know where to set it up?  If you can tell me an example I can probably take it from there.

Thanks,
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39964481
Well, this is the Photoshop/Graphics area. We are not to ones to give advice on how to upload your files and set up websites. I assume that you are using a shared server with one of the many service providers.

They should be the first place to ask because in my life, I have worked on websites hosted by four different service providers and all four had a different procedure and a different folder to put your files in. And, they shouldn't charge you anything for helping you.

BTW, did you get your hotspot to work?
0
 

Author Comment

by:sharingsunshine
ID: 39966957
I am not asking how do you upload files.  I am merely wanting an answer to my question where do you upload the hotspot code.  Which was part of my original question as you can see ...

*****
How do you create a hotspot in photoshop CS5 Mac that the image and the code can then be uploaded to the web?
*****

I found all the references you gave me before I posted the question.  My biggest problem is how do you get the code and hotspot on the web to work effectively.

Yes, I got the hotspot to work.  I had mentioned that above when I said ...

*******
That is great on how to create the hotspot and assign the url but how do you upload it to a site?  So that's half of what I need.
*******  

Thanks!
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39968030
I'll come up with a solution for you some way.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39968289
Ah ha! Amazing how this information is so darn hard to find.

Have you assigned your url address to the slice? If not, use your slice-selection tool and double click on the slice. This brings up the dialogue box where you enter your URL, target, alt tag, etc. You can also rename the slice something that you will be able to identify when you look in the html code.

With that done, go the Save for Web and Devices and save it along with the html.

When you click save, a dialogue box comes up with a place to change the file name, the format - html only, images only, or both together. Then you have a pull down box of settings. At the bottom of this list is one that says other... .

If you set it to "other", a new dialogue box comes up giving you an assortment of ways that you can customize your html file.

With that done, Photoshop should spit out an html file along with a folder called "images" unless you changed the setting to name it something else. You should be able to double click on the html file and open it in your browser and test the code.

If everything works right, you're ready to upload.

As a side note, I apologize for misunderstanding your question. We get requests from people with all sorts of skill levels and from their question, we can't always what kind of answer the person needs. I'm afraid that I'm guilty of "dumbing down" the question, when there clearly wasn't any need to.

Let me know how this works out.
0
 

Author Comment

by:sharingsunshine
ID: 39976281
Sorry it took some time to respond.  I wanted to start over and make sure I had everything the way you suggested.

I now have a .html file and the /images subfolder but that brings me to your statement

"If everything works right, you're ready to upload." - how do I upload/publish it.

It's not an image so I can't use <img tags and it isn't fireworks because it say it isn't.  I have the files FTP'd and on the server.  If I want it in a certain spot on my site how do I put it there?  You can look at http://www.thefrugallife.com and you will see the image that  I want to put a hotspot on in the header position.
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 500 total points
ID: 39976483
A hot spot is not built into an image, it is built into a page.

The control mechanism for detecting the mouse action is universal, ( but you can give your slices ID or class names.) Your CSS will target your hot spot, but you must make it work with your other CSS (if any) without any conflicts.

What Photoshop does for you is build an entire page, made up of slices and CSS, that will have your hot spot built into it. It intends for you to upload the entire page as an html file, and accompanying css file and images folder. The html and css that it creates is stand alone, and does not take any other web pages or features into consideration.

This is one of the reasons that I discourage people from using Photoshop to build web pages.
0
 

Author Closing Comment

by:sharingsunshine
ID: 39989785
Wish there was a better answer but no sense trying to make something work, that won't.  Thanks for letting me know.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

The /etc/authorization file in Mac OS X 10.x can be used to control access to the various panes of the System Preferences amongst other things. It’s used by some of us Mac Sys Admin’s to give Standard Users access to System Prefs panes that only adm…
The error "There was an error performing the update" occurred on a Mac OS X client workstation running  Symantec AntiVirus for Mac (http://www.symantec.com/business/products/purchasing.jsp?pcid=pcat_security&pvid=825_1) - the Enterprise product vers…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now