green fairy
Jul 14 2005, 08:34 PM
In this tutorial I will show you how to create links in your image. I'm shore there's a lot of different ways you can do this, but I'll just show you how to do it real easy. 1) After creating the image you want to add links to in photoshop, make shore the mode is set to RGB Color. Just go to Image -> Mode -> RGB Color. 2) Go to File -> Jump To -> Adobe ImageReady. Your image will now load into ImageReady. For this tutorial I will be using this image that I found:  I will make the buttons of this navigation bar into links. 3) Press K to select the slice tool in ImageReady. 4) Use the slice tool to create a square shaped slice where you want the link in your image. I created a slice around the first button in my image like this:  5) Double click your slice to make this box appear. Use your own settings to create the link you want.  Now you have made a link in your image! 6) Repeat step 4 and 5 everywhere you want a link to appear in your image. 7) When you've finished creating links, you simply go to File -> Save Optimized As... Save your image as HTML and Images. That's all! The whole thing is saved as a html document, so all you need to do is include that html wherever you want your linking image to appear on your site. Hope someone can make use of this. It's not at all hard once you know how to do it 
Reply
snlildude87
Jul 14 2005, 11:44 PM
Thanks for the tutorial, green fairy! I've been wanting to know how to embed links in imageready, and now I know.
Reply
Kubi
Jul 15 2005, 12:07 AM
Wow that's pretty cool, I didn't know you could make images links in photoshop. What I did to make images link was just use php code. But that was a pain when I just had the image and didn't feel like getting the code. Thanks!
Reply
SarCasM
Jul 15 2005, 01:16 AM
Heh, nicely done. I rarely use PS layouts(mainly because I suck at them) but I never knew you could make the links IN IR o.O, I always had to seperate the pics and do it in the index file, heh, much easier.
Reply
eXtreme
Jul 15 2005, 01:35 PM
Indeed, very nice tutorial.  Specially for the new people who are still learning how to slice their designs, and gifing links to, for exemple, buttons. Good work.
Reply
Saint_Michael
Jul 16 2005, 04:36 AM
not a bad idea to do it in image ready it saves you the time of doign the old fashion way of the image map, might use this when i deside to do another layout in ps.
Reply
gregak
Jun 29 2006, 06:28 AM
Ok, great tutorial. but after i've done that, how do i go about uploading it to the internet to make a web page?
Reply
Albus Dumbledore
Jun 29 2006, 06:33 AM
you would go to Save Optimized As -> then just hit save, and wherever you saved it to go there, and there should be a folder called images, and then an html document, then just go into the HTML Document, add it to your layout... but be sure to upload the images as well....
Reply
AlanDS
Jun 29 2006, 06:44 AM
Thanks for this great tutorial. I have done the same and its working...
Reply
AnGeL KiSS
Jun 30 2006, 03:37 AM
I had no idea how to use ImageReady before but now I have a image on how to use it. :]
Reply
Latest Entries
iGuest
Jul 14 2008, 07:18 PM
Putting the image into a bbcode profile signature
Creating Links In Images
I play this game which has profile signatures that use bbcode. How do I get my image with the link onto my profile signature. I uploaded with photobucket and it deleted the link. Heres my image from photobucket: [IMG]http://i290.Photobucket.Com/albums/ll252/nate_sigs/agenthalo.Gif[/IMG] How do I get the link to work on it. Do I upload the the saved document too? Or do I upload html then how do I add it into bbcode address? -reply by natte
Reply
shadowcat16
Jun 16 2008, 09:23 PM
thank you so much for this wonderful tut, i've always kinda wanted to know how to put links into my images!  thanks again!
Reply
iGuest
May 5 2008, 06:42 AM
Image Ready Links
Creating Links In Images
Does anyone know how to and multiple links in the same place? So that when the animation is scrolling through the place that says "click here" can go to different links? I am trying to recreate the Featured Physician animation on this page http://www.Mooreclinic.Com/ Thanks in advance! ~Mindy -question by Mindy
Reply
iGuest
May 1 2008, 11:14 AM
Thank you for the great tutorial -reply by archimedes
Reply
GaiaZone
Jan 9 2008, 12:10 AM
I didn't know Image Ready was that handy! That is way faster than the way I used to make the links in a image (Image maps of course).
Reply
Recent Queries:--
using image ready with gimp - 3.38 hr back. (1)
-
link image ready - 3.65 hr back. (1)
-
linking images with imageready - 18.89 hr back. (1)
-
link rollover imageready - 27.23 hr back. (2)
-
how to make links in imageready - 35.06 hr back. (2)
-
link imageready - 38.92 hr back. (2)
-
imageready slice buttons - 45.47 hr back. (1)
-
creating links for a website in imageready - 47.46 hr back. (1)
-
cs image ready putting slice link - 50.14 hr back. (1)
-
imageready link in flash - 61.53 hr back. (1)
-
how to create links in imageready - 63.67 hr back. (1)
-
add link imageready - 77.23 hr back. (1)
-
psp tutorials multiple images gaussian blur - 77.77 hr back. (1)
-
making things link out image ready - 77.92 hr back. (1)
Similar Topics
Keywords : creating, links, images, imageready
- Adding Shine To Text
images say "Tiger Ads", but, the board is clsed, so, i'm r (1)
Gimp Download And Setup
Links to obtain The GIMP Package (7) At the request of a member, here are some links for instructions for downloading and installing the
GIMP Graphics package. This discusses a Windows application. Other versions are available. Follow
these links to find the version suitable for your particular installation. GIMP download page here
: http://www.gimp.org/downloads/ Select the Windows Binary link : http://www.gimp.org/windows/
Select Automated Installer : http://gimp-win.sourceforge.net/ Select Download Stable version :
http://gimp-win.sourceforge.net/stable.html Select Download : http://sourcef....
Make A Scan Bar In Imageready
For users familiar with ImageReady (8) Ok here's how to make an animated scan line on any image /wink.gif"
style="vertical-align:middle" emoid=";)" border="0" alt="wink.gif" /> using ImageReady: 1. First
take out your image, make a new layer, and use the rectangle selection tool to make a recangle at
the top, and then fill the rectangular selection with white. 2. Change the "rectangle layer"
blending options to whatever effect you want (for this tutorial I will be using Difference). If you
want to do soft light or overlay, you may want to change the layer color. 3. Next bring your image
into ImageRe....
Scrolling Highlight Bar Effect
[Photoshop CS2 and Imageready] (11) This tutorial will show you how to make a scrolling highlight bar over text in Photoshop CS2 and
Imageready like the one shown below. First start with your desired background, if this is made
up of multiple layers, merge them all into 1 layer. Make a duplicate copy of your background layer
by right clicking on the layer in the navigator panel and choosing "Duplicate Layer..." Here's
the background I used. Now add the text you want, in the position you want it. Here's what I
used. On the text layer, use the polygon lasso tool to make the shape for the ....
[psp] How To Create Your Own Userbar
creating a user bar in paint shop pro (14) How To Create A Userbar In Jasc Paint Shop Pro What Are Userbars? Userbars are
rectangular images that are found in most people's signatures. Generally, they depict a
product's logo on the left hand side and some text on the right. Here are some examples:
Many of these can be downloaded for free at sites like userbars.com but in this tut, I'll show
you how to make a simple Paint Shop Pro Addict userbar. This tutorial assumes you know very
little about Paint Shop Pro 9. Once you've opened PSP, you can begin... --------------....
Creating Sig Background Using Render
Defalts Only - Tutorial (2) Post your results and comments /wink.gif' border='0' style='vertical-align:middle' alt='wink.gif'
/> Topic title and description are VERY IMPORTANT. Edited. ....
Creating A Graphical Signature
In Fireworks... (9) Fireworks Tutorial 2 Creating a graphical signature. The Way Things Work: 1. All steps are
highlighted in blue. 2. When point of reference for an object location within a document it is shown
as (x,y). The (x) stands for the distance from the left edge and the (y) represents the distance
from the top edge. For example, if (0,10) is displayed, then the object will be on the left edge of
the document, 10 pixels down from the top edge. 3. Screenshots of the current progress will be given
when needed. Note that not all of the steps will include a screenshot and some may ha....
Creating Rollovers
Using ImageReady (0) Beware: This tutorial is NOT fully explained, you need some experience in Photoshop and ImageReady
to FULLY understand this tutorial. Although, you may be able to understand and figure it out on your
own. I know there are about 2 tutorials already in this forums on rollovers but this one is
different, you will use imageready instead of coding it yourself using Javascript or HTML. First,
open up a new document any size you wish. Then, create your link the way you want it to look before
you put your mouse over it. Example Then duplicate your layer(s), (it is best t....
Fireworks Tutorial 1
Creating a fire explosion (12) Fireworks Tutorial 1 Creating a fire explosion. Step 1: Firstly, you must create a new
document. I prefer to use 150x285 when creating this image. There is no real reason; apart from the
computer I use to web design is pretty old and slow when dealing with heavy graphics manipulation. I
also use a resolution of 99 pixels per inch. This may not be everyone’s taste, but I find it perfect
for clear images when working with JPG. If you are using GIF slices, then you may want to make it a
bit higher. I always use a white background. This helps with your eyes and judg....
How To Double Stroke Images
Using Photoshop (22) (I am aware that there is an existing tutorial on double stroking text, but this is very different.)
How to double stroke images using Photoshop by Strawberrie 1. Open up/copy&paste the
image you want to double stroke onto a new layer (Shift+Ctrl+N) in Photoshop. 2. Go to Edit >
Stroke. Set the width to 3 px and color to whatever you wish your furtherest inside border to be (in
this case, black). You should get something like this: 3. Go to Edit > Stroke again. Set the
width to 2 px and color to whatever you wish your middle border to be (in thi....
Cool Blue And Greyscale Effects On Images
Simple Tutorial In Photoshop (4) In this extremely simple tutorial I will show you how to add a cool blueish effect to your images:
Here's the photo I will use: 1) In the layer window, click the half blue, half white circle
button at the bottom. 2) Pick the channel mixer from the menu. 3) In the popup window, mark the
box for Monochrome. A new layer will appear. 4) Change the blend mode to lighten in the new layer:
That's all. You're done! Here's my final result: ....
Create Text With Images
In Photoshop (13) I'll just show you all how to do this. It's actually pretty easy. 1) Open a new transparent
document and use the type tool to create some text (use a big font with space between the letters).
I will be using Uzusi: 2) Now hold in Ctrl while you click on the text layer. This should
select your text: 3) Now with your text selected, all you need to do is copy an image you want to
use to the clipboard. I am using this image, but you can of course use whatever you want. 4)
After copying, go Edit -> Paste Into. My result now looks like this: 5) Click ri....
Blending Images In Photoshop
In case you didn't know. (1) I just learned how to blend images in photoshop myself, so now I want to show you how to do it: 1)
Open some pictures you like in photoshop. For this tutorial I will use these: Get the the pictures
here: Tree1 , tree2 , tree3 , tree4 . 2) Now that you've got all the tree pictures opened
in photoshop, simply use the move tool and drag all the images into one of the photos. This will
create one image with several layers. 3) You will now have something like this: With the top
layer selected, click the "add layer mask" button. 4) Now make shore your foregroun....
Focusing In Photoshop Cs
creating that professional effect (1) Author:Molotov Level: Medium Copyright: Molotov 2005 Ok, well I know you guys have seen this
done were they take a black and white photo and make one object or section of it in color to really
give it that professional look and appeal. Ok lets start off with a nice picture, since i like
motorbikes we will use the picture i used for my signature. After you do that lets duplicate the
layer, then we need to desaturate the duplicated layer by pressing CTRL+SHIFT+U, sorry make you
users i dont know the hot key, so you will have to do it the old fashioned way. Yo....
Another Question About The Possibilities Of Imageready Cs
image resize? (2) First i was trying to get animation+rollover buttons and it worked, so im hopefully getting a
positive reaction on this. What i have is an animated header: What i want is the last image to
resize, as you can see it ends with a small logo and i want to centralize that WITHOUT resizing the
particular logo to fit better in this image size. So right now i have a 280*200 image and i want
the end to be 175-200*100 IS this possible? if so how?:S....
Turning An Image Into A Cartoon Style - Photoshop
Tutorial on cartooning images. (30) This tut will show you how to make a photo look cartoonish in three easy steps... 1)Open your
image in photoshop, doesnt really mater what size or shape anything really a landscape, city, or a
person. I am using a picture of a football player in this example 2)Go up to
Filter>Blur>Gaussian Blur and set the radius at 3.0 or higher depending on the effect your looking
for. 3)Last go Edit>Fade Gaussian Blur. A window will pop up... set the mode to darken for tha
cartoonish effect or to any other mode for plenty of other effects. Lower the opacity if you
don't....
Exporting Transparent Images In Photoshop To Flash
Needed: Photoshop 7 or CS, Flash MX (4) First of all, it is important that you make sure the image you wish to export is on a transparent
layer. The transparent layer is a checkered background in photoshop. You can see this checkered
background in the image to the left. In this example, I created a quick glass icon which has
different levels of transparency. This is the image I will be exporting, whilst preserving
it's transparency. Once your image is on a transparent background, head to file > save for
web. You can only export complex transparency using the .png filetype. So from the drop down....
Looking for creating, links, images, imageready
|
|
Searching Video's for creating, links, images, imageready
|
advertisement
|
|
