Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Slice PSD (skinning)Slice PSD (skinning)
Previous
 
Next
New Post
1/4/2008 11:47 AM
 

Hello everybody!

At the moment I'm working on DNN skinning. I've got a PSD file produced by a designer. The file is the frontpage of a website. I understand that I have to slice the PSD file. The question is Should I slice it like I normally do it with other websites ( I mean not DNN based websites)  or should I consider some specific rules When I slice an image for DNN websites. I tried to find any appropriate documentation but I could not find it. Please anyone help me or let me know where I can get an appropriate documenation.

Thank you !

 
New Post
1/4/2008 1:32 PM
 

There really isn't any "appropriate documentation" other than the skinning document.  The DNN skin is basically just tables or CSS for positioning elements, so slicing a PSD file really isn't different just because you're using DNN.  There are some issues, such as if you decide to use a logo, as in the [LOGO] tag, it helps if the logo is just the logo and not a slice of the image.  But then you need the underlying image without the logo as the table cell background.  The alternative is not to use the logo tag and just show the slice as the table cell background.

Another issue is containers, which may mean extra slices of the PSD file.  Or repeating backgrounds, which reduce your page size but aren't a "slice" as such.  Again, these are really no different than a non-DNN site.

Jeff

 
New Post
1/4/2008 3:01 PM
 

Basically just get your design sliced up as if it was a static (X)HTML page and then read the DNN skinning documentation for how to create the skin package.

You'll have to do some work on deciding what will be dynamic editable content and what will be part of the template, and make your code reflect that.

For instance, I would code everything that goes into "ContentPane" then copy and paste all the code in that DIV element to another file and replace it in my skin file with <div id="ContentPane" runat="server"></div> then copy and paste the HTML in the new file into the source view of the text editor and voila!

 
New Post
1/4/2008 3:22 PM
 

One other thing to remember is that slicing an image isn't the only way to get the result you want, and often not the best way.  For example, if your image has a light blue background for one column, you would be better off using a CSS class for the background of that particular pane than slicing the PSD for it.  If the pane changes size the color background moves appropriately.  And if you choose to change to a pale green, it's a couple characters in a CSS file and your change is made.  You don't have to change the Photoshop master file and reslice.

Also, when I do a Photoshop file for a site, I always break it into layers for almost every element.  Makes changing or adapting much easier.

Jeff

 
New Post
1/4/2008 3:24 PM
 

Jeff Cochran wrote

One other thing to remember is that slicing an image isn't the only way to get the result you want, and often not the best way.  For example, if your image has a light blue background for one column, you would be better off using a CSS class for the background of that particular pane than slicing the PSD for it.  If the pane changes size the color background moves appropriately.  And if you choose to change to a pale green, it's a couple characters in a CSS file and your change is made.  You don't have to change the Photoshop master file and reslice.

Also, when I do a Photoshop file for a site, I always break it into layers for almost every element.  Makes changing or adapting much easier.

Jeff

Yea when I say "slicing" i guess I just mean coding or programming from a picture (psd) to a functional HTML page. I don't necessarily mean turning everything into graphics. It definitely makes sense to do as much as you can with browser-rendering capabilities rather than graphics to reduce download times by the end-user.

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Slice PSD (skinning)Slice PSD (skinning)


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out