| Author |
Message |
    
composerjohn
Citizen
Username: Composerjohn
Post Number: 341
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 1:07 pm: |     |
I have a new PSD template for my website. I have several questions. Can anyone spare 20 minutes on the phone and help me out? Please PL if you can help.
Thanks!
PS: I running Photoshop 7 on a PC (Windows XP).
|
Dave
Supporter
Username: Dave
Post Number: 6709
Registered: 4-1997
| | Posted on Thursday, June 23, 2005 - 1:16 pm: | |
ask away here
a few points:
1) psd files are not viewable on the web; you will need to export to either GIF, JPG or PNG format.
2) psd files have multiple layers and they may be hidden. find the layers window, where you can toggle them on/off.
3) to edit layers with live type, you will need to have the font installed on your computer or it will render as Helvetica. |
composerjohn
Citizen
Username: Composerjohn
Post Number: 342
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 2:23 pm: | |
Yup. I understand all the above points.
First question: the template includes links for home, about, music, and contact information. How do I make these active HTML links? |
composerjohn
Citizen
Username: Composerjohn
Post Number: 343
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 2:29 pm: | |
here's the template:
the text will be in the white part of the box. The links at the top also have rollovers (it's quite simple javascript with a change of color)
BTW: here's my current site - www.composerjohn.com |
Dave
Supporter
Username: Dave
Post Number: 6712
Registered: 4-1997
| | Posted on Thursday, June 23, 2005 - 2:43 pm: | |
To create those links in Photoshop, use the slice tool (looks like a knife) to create the cut area for the buttons. Use the "slice select" tool to choose the home button, then look for the "slice options" button (top left of screen perhaps), which will open up options for linking.
|
composerjohn
Citizen
Username: Composerjohn
Post Number: 344
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 2:49 pm: | |
for entering text in the box, should I use the live file or the rendered file? Do I just type the text in like a word processor? I know basic HTML - would that be better for links?
Thanks so much for the advice and help! |
Dave
Supporter
Username: Dave
Post Number: 6713
Registered: 4-1997
| | Posted on Thursday, June 23, 2005 - 3:04 pm: | |
I don't think Photoshop alone can handle live text by itself; I think Adobe's ImageReady is required to do that. Do you have the icons shown here beneath the blue line?
 |
composerjohn
Citizen
Username: Composerjohn
Post Number: 345
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 3:05 pm: | |
yes, I have those icons. |
Dave
Supporter
Username: Dave
Post Number: 6714
Registered: 4-1997
| | Posted on Thursday, June 23, 2005 - 3:23 pm: | |
That means you have ImageReady. You can enter text in text boxes over your template and then use the slice tool to define that area in PS. Then click the imageready button (which opens the separate software) and you should be able to export the HTML page and its images from there. It's possible you may need to go into the HTML and define the image as a background in the cell... I'm not 100% sure, as I don't create web pages this way. |
composerjohn
Citizen
Username: Composerjohn
Post Number: 346
Registered: 8-2004
| | Posted on Thursday, June 23, 2005 - 3:41 pm: | |
Ok. I think I've got it.
How do I create a link within the text. Do I use the slice tool for one word?
And this is a general HTML question: what is the code to center the template both vertically and horizontally? |
Dave
Supporter
Username: Dave
Post Number: 6715
Registered: 4-1997
| | Posted on Thursday, June 23, 2005 - 4:22 pm: | |
I think you'd have to create text links the old-fashioned way.
Centering: best to add this inside the page's HEAD element:
<!--
.centertable {
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
-->
Then put this inside the TABLE tag: class=centertable |
composerjohn
Citizen
Username: Composerjohn
Post Number: 347
Registered: 8-2004
| | Posted on Friday, June 24, 2005 - 8:59 pm: | |
I'm still a little stuck... some questions:
1. I'm a little confused between the difference between regular PS and ImageReady. What exactly is ImageReady used for?
2. How do I program rollovers for the links (home, about. etc..)? I already have the rollover created, I just need to incorporate it into the PS file.
3. When I had the template designed, I thought I would be able to program the site myself. I designed my original site, and although it's far for elegant, at least it's functional. Am I in over my head? I don't really have any experience with PS. I know basic HTML and can pick things up fast.
TO EVERYONE: Is it possible to have someone help me program one page as an example and then I can do the rest? Recommendations?
Thanks (especially Dave).
|
AlleyGater
Citizen
Username: Alleygater
Post Number: 513
Registered: 10-2004
| | Posted on Monday, June 27, 2005 - 10:58 am: | |
Composer,
1) PS and Imageready do MANY of the same things. While I like the extra features that Imageready has, I avoid running it whenever possible even when it takes longer to do something in PS, I often will. Why? Cause I'm stupid. And I'm PS biased. The features that ImageReady has that PS doesn't include animating gifs, and Rollovers, among many other internet-specific features. Since you want to do Rollovers, you must figure out Imageready.
2) The way you program rollovers? Well first off, if as you say you pick things up fast, then I have to tell you, PS and IR both have very thorough HELP sections. Run IR, go to the help menu and type ROLLOVER and you will have a very good explanation on how to do this. I am not running IR right now so I am just going to explain the basic concept of how to do what you want without any real details. Hopefully what I type will be somewhat accurate. In IR there is a palette specifically for ROLLOVERS. In the View menu find it, if it is not visible. Now you need to have your buttons (for example, if that is what you what to have a rollover state), on different layers, in the layers pallete. The layer that will be visible in it's default button state (when your NOT moused over it), will be visible (with the little eye icon on) and the other layer will not be visible (eye off). In the Rollover palette will be a State that says something like NORMAL which will be selected (highlighted). There will be a little icon in the Rollover Palette that looks like a blank page that when you click on it, will add another button state. I believe the next button state is named MOUSE OVER (if it isn't, then keep clicking on the page icon until the Mouseover state is added. Now that you added the Mouseover state, click on it to highlight it. Now go into the Layers palette and turn off the visibility of the icon that is the default state of the button and turn on the visibility of the other layer, the one that should be the mouseover icon. You can preview your mouseover by clickin in the Mouseover Palette between the two states.
Now do this EXACT same process with ALL of your buttons. When you preview mouseover states in the Rollover Palette, you should see ALL of your icons working properly all at the same time. This is normal. Now provided you sliced up your PSD file properly so that every icon is in it's own slice, when you export the Images and HTML, you should be able to preview the HTML file in a web browser and see the mouseover working as you would expect. This probably sounds more complicated than it is, and I might have used the wrong name for a palette or menu, but once you figure this out, you will see that this really isn't complicated at all. Read the Help documentation and you'll be golden.
3) I always laugh when people pick up a big program like PS and think they can make it do what they want. Are you over your head? I don't know. How much patience do you have? How much time do you want to invest in figuring it out? I think a bright person can do what your trying to do. Read the help files and keep banging your head at it. You'll probably get it eventually. PS is big and powerful that is why we love it. It is fairly well designed another reason why we love it, and also why you have a good chance of doing this yourself.
Composer, I could probably help you out on the phone. I suspect that this is something that if I walked you through it might make sense to you immediately. I'll PL you my phone number, and feel free to call me. According to how busy I am, I might need to call you back at night though.
I might be willing to do you a talent swap, if you need ongoing HTML/Design help or if you just want someone to do this project for you. I am a budding musician who might be able to use some help from a composer. |
Dave
Supporter
Username: Dave
Post Number: 6725
Registered: 4-1997
| | Posted on Monday, June 27, 2005 - 12:12 pm: | |
I bought two violins, a viola and a cello so I should be able to write a string quartet, right? Probably, but how long will it take me and what will it sound like?
A PSD file isn't the ideal way to receive a web page template. When I hear "template" I'm assuming it's a well-commented HTML file and that images are already sized and placed in a separate directory. Photoshop is good at creating and manipulating images, but lousy at creating multi-page web sites.
I think you should consider AlleyGater's talent exchange. |
AlleyGater
Citizen
Username: Alleygater
Post Number: 520
Registered: 10-2004
| | Posted on Monday, June 27, 2005 - 12:26 pm: | |
On a more theoretical level, I think a PSD could be a template for a website. But for a novice I think it would make sense for AT LEAST one of the web pages to be broken out into HTML. Otherwise, I think the novice is going to have a lot of problems. Is it because they don't know web design and how to use PS/IR really well? Or is it because the PSD format isn't the ideal way to recieve a template?
But for argument sake, I think I could organize my PSD files well enough (as a professional myself) and then hand off the file to another web professional (like Dave) so that Dave would know what to do with the file with little or no explanation. I could make each page reside in it's own folder, and have every layer of the file properly named, including rollover states, etc. Heck I could do all of the work in Imageready, including the slicing, and mouseover states, so that all Dave would need to do is Save for Web for every layer set. I might be over-simplifying but I think another professional would probably have a very good sense what to do with my PSD Template file. |
Closed: New threads not accepted on this page