What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Website Template (Different Tab Versions)


K

kmanyep

New Member
Messages
4
Likes
0
Hi,

I just created a website template in CS5 Extended. This is the first time
I've created overlaping tabs in the design. The active tab is different than the
inactive tabs, and there is a lot of transparancy in use. I also used a special
font for the tab text so I want to save the tabs as images.

My problem is that I slice up my photo, and export all the image files. But I
have to go through and change all the layer settings to get the next tab to look
active, then export that image file, and then do the same thing with the next
tab.

Then if I need to change the tab text later, I have to do the same things all
over again.

I'm sure there must be a better way. How do I get Photoshop to save different
versions of the template in the same PSD file, or save different versions of the
navigation tab without having to reslice and modify everything all the time?

Right now I try to make layers visible/invisible depending on what tabs are
supposed to be sliced out, but this is way too much work.

Is there a better way? I've searched many youtube.com tutorials on Photoshop
but I'm not sure what to search for (besides tabs). None of the videos I've
watched show me how to do this. They all stop after creating the tabs. I need to
know how to slice out and maintain different versions of the navigation bar.
 
are you familiar with layer comps layer comps is like a seperate layers window you can activate it by going to windows > Layer Comps
create a new comp in that panel like you would a new layer in the layers panel.

You can then set certain layers or groups to be visible from your layers panel in each comp. I usually do a comp for each tab and an extra comp for roll over effects so if I had black menu buttons then I would do 1 comp where the buttons are white

I then slice each comp as I slice i right click and name the slices (you can even code in links at this stage. once you have slidced your index page go to the next page and slice it making sure you choose html and images and name the html as what you want the page to be named ie about.html

then slice your rollover comp which should only have menu items or whatever you have effects on and save the slices as home_rollover as an example then in dreamweaver you can click the image and in the common panel select rollover and navigate to your rollover version of your image.

There is no simple quick fix unless you make the menu in its own psd that way you only have to slice the static version and the rollover. And the just embed the menu in every page.

Download Adobe edge from the browser labs if you want flash like animations but in HTML, HTml5 javascript etc.
 
I don't think I've ever heard of that layer comps. I've only just started with Photoshop the other day. This is my first project in Photoshop. I want to code all the HTML myself so I don't want the HTML rendered, I just want the images.

I will try what you suggested and see if that will make it easier to use. You were doing the same thing I was trying to do, but I was saving the different versions of the tabs by editing the layers everytime and that was becoming a pain.

I've uploaded a screen shot of my template to my website. I've been using a lot of tutorials and trying to figure out how Photoshop works. Can you take a look at my template and tell me what you honestly think about it?

You will see what I'm talking about with the tabs as well. I want the active tabs to look different, and I also want to add rollover tabs to the top and also to the left navbar.

Hopefully, I'm on the right track with this.... It's pretty basic, but I've been playing around with different effects, and shapes. I discovered the transparancy options, and I have to say they are amazing.

So far I am really happy with this program. It's probably the best purchase I've made in a long time.

It works better if you click on the image in the browser to enlarge it, so you can see all the textures better.

What do you think?

Thanks!
 
Last edited by a moderator:
you can upload images direct in your post we dont allow links to new members.

slicing the html and images still leaves you with a plain html document where you can tweak it etc it just has your images in the same way as it looked in photoshop
 
I'll try it and see what happens. I just saw a video on layer comps, it looks like they do exactlly what I wanted to do.

Do you know if they save slices? If a different layer comp needed to be sliced a different way. If not, how would you work around that? Is there a way to save different versions of slices?
 
No they dont save slices as far as I know they are specific to documents and each comp is treated like a new document but I may be wrong
 
I'm still having trouble with these tabs. I have the rest of the website done, but I can't get the tabs working. I have no idea how to slice these.

Do you know how I could slice these? I've tried many different ways, but I can't get anything to look correctly.

(attached the tabs)

tabs.png
 
Back
Top