a GIF images, rollover images (which we will do now), up to full complement of graphic-based web sites! In this tutorial you learn how you animate a prepared infographic by ImageReady and show on mouse-over on certain areas of your image more information you can.
If your previous parts of the tutorial not edit your Photoshop file, or have not saved, you'll find a Photoshop file, you can use the Your: Tutorial 4 Get Started!
opens First you normally prepared your graphics in Photoshop and then press the bottom button on the Tool menu bar, "jumping to ImageReady.
your PSD file will automatically open in ImageReady - and the program looks confused Photoshop at first glance similar to: Links You have a tools menu, the right level selection, etc. It is really exciting but at the bottom of the screen, because there you will find a menu with the selection of points: "Animation", "Roll Over", "image map" and "slice".
How it works: With the
Animation 
function can create your animated GIF images by your simple animated sequence, each frame for each image determines how long it will be shown.
"Roll Over" for photos or graphics you can specify areas of an image and link to external links. 
is the function that we use for the current Tutorial: This allows you to create buttons for a website that change when you mouse over it goes, it clicks, or the like.
With "image map"
designated areas or sections of a picture. To assign graphics functions: ie, as you will see, we need this in the current tutorial "slices" , you have to cut the image into regions ("slices").
And that's what we do now! So slice tool at hand (the scalpel icon), and as with the Marquee tool, select your areas.
At the end of your file looks like, cut with surgical precision in more than two dozen areas: 
What have we done?
We have divided the graph into areas to which we later show in a mouse-over additional information. 
Next, we need to assign each of these areas, what will happen if we move the mouse over it. You have to adjust the "Slice Tool" in the "Slice Selection Tool" switch.
Hold this, hold the left mouse button on the Slice tool until the menu appears, select the scalpel icon with the black arrowhead.
clicks with this tool you on the first range. I used the "marquee" started, which is in my division Slice No.3.
Once you've selected an image area, you must create in the bottom of "Roll Over" menu a new page (by clicking on the "new page" icon). You now have for the image area (slice) with the number 3, two sides, "normal" and "over" - and the latter means nothing as, "What happened to the graphic when the mouse is
on
the image area number 3 is ".
Yes. What will happen if the user moves the mouse on this screen? 
is where they can easily come up with one billion things ... In the example we make 's times but quite trivial: The menu button is "enabled", the additional information will be displayed.
First, the "Enable".
In the Layers panel, we have prepared a layer set called "activated". Simulating the "click" of a tool box.
The second step: We want to display the information.
After the second part of this tutorial, our planes have labeled clean, this is child's play. It simply looks out the plane, which belongs to the area of the image you just edited and displays them by clicking on the left empty box that level. In this case, the layer "selection".
And now? 
Well. To be perfectly honest, the rest is pure hard work! The previous steps repeated for each of your screen ...
... You have to appear at the end to all the slices to visit. 
(For the last fields, by the way, we have prepared no "activation." Hide here, then, is only the additional information).
And this is the so:
Yes, you are actually ready! And why? Because ImageReady is an incredibly smart program that will do the rest alone.
In the menu top right ("optimize"), you can still make some quality settings, whether you save your images as GIF or JPEG and what quality you want to do that. Since our tools menu infographic just black and white These pictures, I choose GIF (and leave the settings just as they are currently).
Click on File> Save Optimized As ...
... and makes sure when you save that is selected as the file type "HTML and Images.
This is important:
The behavior of your infographic is not stored as an image, but as HTML. In fact, your video is that is no longer a 
image (even if the user looks). In fact, your image now consists of 60 individual images - and the HTML File managed to speak, when is that these images appear.
As you can see, ImageReady sets for you an HTML file werkzeugleiste.html "and a folder" images "on. 
And if you ever want to appreciate how much time programming the software has saved you straight, then you the HTML file looks for fun times in the editor.
Okay. Guess what? - You're done!
finished your rollover infographics You can watch now by your HTML file in your browser will open and share with others by sending your high loads the HTML file on your server. 
Something chic is, of course, if you can embed the "infographics" is actually like a picture element in a page. And there's a neat trick.
The normal HTML code for image files is
\u0026lt;img src="http://www.irgendeineseite.de/bild.jpg" />
instead of IMG tags do you use simple IFRAME tag ... and there you can download the HTML file of your infographic use as though it were a single image.
In my blog ("Tutorial 2") provides all this: install
order your rollover images, so just fit the IFRAME code to reflect at. Most important, width and height of the IFRAME to the width and height of your image match. And all the files (HTML file plus a folder called "images") must be linked somewhere and uploaded correctly.
Here's the code:
\u0026lt;div> \u0026lt;iframe scrolling="no" style="width:100px;height:100px;">
\u0026lt;frameborder = "0" src = "http:/ / www.deinserver.de / xyz.html>
\u0026lt;marginheight="0" marginwidth="0"> \u0026lt;/ iframe> \u0026lt;/ div> 
Have fun!
could 3
with Photoshop and ImageReady to create his powerful friend you quickly and without programming (interactive) graphics, rollover buttons, image maps and much more activated, even with the writing tool.
screenshot with "Move" is enabled screenshot with "text" enabled
Controls please first is that the graphics are identical to each other. With the "exemption tool (C) then the tool does your menu bar from:
The result?
you now have a Photoshop document with a blank white background layer, the graphics on level 1 is activated with the Text tool, the graphics on level 2 with the Move tool activated.
The next step: the "marquee" marks and clears your in level 2 now, the areas above and below the text tool, a magnifying glass.
to delete a selected area in Photoshop by pressing the "DELETE" - (Remove) or Backspace key (Delete). 
linked layers are super-convenient - if you want to move, for example, text layers, without reducing it to a. Of course you can combine several levels, and reduce to a more well! In order to merge
Why did I do that?
Because I was in my graphics one after "activate" all the tools and wants to explain and could not be bothered to two dozen screenshots, which I then cut all superimpose, and must stick together ...
is the easiest way, faking the "activation" of a tool. It works like this: 
Drawing on this level, we now have the entire field of the "move tool" white out. I use the "marquee" (M), select the box and press "CTRL + DEL". The selection is filled with the background color (white).
function as Layers I choose for this layer "Overlay" and on ...
... see my "move tool" from when I had enabled it! 
Haha.
But that was certainly not all. For the "key" colors by the turn just do not know, but "deepening" also. And this well before now I am mistaken, when I paint a small shadow on the button.
Does that sound totally complex?
Hm, but is really not so bad ... Creating 
First, a new level - and you can even now. 
Next, your paints with the "pencil" tool (B), this little gray edges on the button to the left and above. The color value for this edge you can watch either the "Eyedropper tool to grab the other edge. Or do it is to you directly as the foreground color. The color value is: # B1B1B3.
To help us improve our level tumult find your way, I organize my next-level view. 
level 2, I rename it to "menu bar" to, as can be seen at this level to only these. This makes you just right-click on the layer and click Layer Properties "...
... and changes in the next dialog box, type the name.
Level 3 and 4 are our white box that we can activate our menu and buttons (on the 4) the "shadow". These two levels, I would like to be treated as one and later move from key to key, but I can not be reduced to a level, because the shadow copy 
normal, but the white box with
Overlay is superimposed.
I get into so what?
Right: A "layer set"!
order to level 3 and 4 to move into the set, click the left mouse button on the plains and 
pulls them into the sentence. It is important that 4 and 3 in the rate over each other!
Even the set, I can certainly call on your mood (by right-click and "Layer Set Properties).
In the example I choose more appropriate as the name of "activated".
All that to clear?
Wonderful. For now it goes to the label! this I find my menu bar still have room for lettering, I need to enlarge the work surface. Click on Image> Canvas Size ...
... and this time increases to a generous 275 to 450
With the "move tool" you can now move your menu bar handle on the white surface. I put my, with a little edge on the left. 
meantime, our project looks like this:
Which tool do I make the label, should you ever find out pretty yourself. In any case, you click with this tool, simply on the white area and type in your text.
The "character" menu, which is usually appear about the middle right, you can edit your text in some parameters typography: font size and type, line spacing, character spacing, and of course color.
For my infographic I want to use a different font and reduce some of the text. For this purpose I select the Text tool, the newly typed text again ...
... select the font you want (in this case, "Rockwell") ...
... and then scale it down or the bottom lines of text size "18" "14".
order in the info graphic yet to make clear to which function and menu button I am referring now, I still mark a line between the keys and the text.
I use the Line tool (U), create a new layer, click the Line tool on the appropriate menu button and drag the line to the text.
that's not entirely my Layer menu is in chaos, I lower connection line and text to a plane. As you have previously learned, I can even create a layer set for each label - that takes me here but just too long.
The downside to my approach is this: If I have a graphics plane (the line) and a text layer merge with each other, Photoshop erases the vector information of the font. In German means: If I merge a typeface plane with a graphic level, I can not edit the font, change or correct anything. So: Please ensure that you have made any typos!
What we do at two levels to be reduced to one? 
Gold:
ticking. Ctrl + E key. Be happy!
The resulting plane I call the "move tool" and you guessed it: That these steps will make your for all other tools again. If you designate each level, which has the advantage later that, despite two dozen planes still remains clear.
Tip: You'll save time when you copy a formatted text layer, and these changes, instead of creating each time with the Text tool, a new one. It can indeed make sense until all text layers (labels) to create, then draw all the connecting lines and only at the end of the lines to reduce the associated text layers on a plane.
Once in fast forward, as you rename a layer: Right-click on the layer, layer properties ...
... new name (eg "move tool").
Finish.
The good news was the 's! - Your now dominates all the individual steps to complete the tutorial.
The not so good news:
Overall, there are still about two dozen tools to label it and connect them with lines. So ... quick!
your final Photoshop file from this tutorial, your stresses on your good: The third and final part of this tutorial I will show you that is how you make the infographic by ImageReady alive. 
Here we continue with Part 3
0 comments:
Post a Comment