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, ...Photoshop to SkinPhotoshop to Skin
Previous
 
Next
New Post
5/12/2006 10:42 AM
 

Hello DNN people,

I'm a newbie, but I've been developing websites from Photoshop, through Imageready and over to Dreamweaver for over 5 years.  My husband is a .NET developer, so we make a great team.  Generally, if we need more than a brochure site, he has to do the custom development for it and it gets too expensive for most of our small clients.

So, now, he wants us to use DNN and I'm really sold on the idea.  But I have no clue how to get from photoshop to skin.  I see on this forum that a common answer is "RTM."   I HAVE read the manuals, downloaded a bunch of tutorials and they all assume a certain level of knowledge.  (.net, ascx and stuff photoshop designers don't know. Kinda like some developers who can't design themselves out of a paper bag.)

Can someone please start from the beginning, maybe even walk me through one by phone, instant message or something?  Use little words like "coffee" and "lunch." 

I understand that one ought to be able to design the user interface independently from the back end - but is it really true?  I need to be as nimble in this as I am in my current tools and I can't seem to get there.

Thanks - Cathy

 
New Post
5/12/2006 10:56 AM
 

If your design is fairly straightforward you can slice to a certain extent in photoshop, but I don't always do that - since inevitably I have to modify something in photoshop again.

I have just posted a short time ago on another thread in the skinning forum about the basics - what you should do to get started..  When I started in this space, I wasn't lucky like you to have a husband who knew .net developing so it was a lonely road..

I would simply open up the default files for a start and make some small changes by adding in background images and modifying some of the css and seeing the results.

If you prefer to work in html method you will need to polish up your xml knowledge to ensure you can get the formatting of the css as you expect.  You can work directly on the server, but you need then use the host or admin / skins/ *parse skin package* to render the results or zip the skin up and use the uploader.

If you prefer to work in ascx mode - it doesn't require the xml knowledge since you are putting all the information into the skin file.

What specifically are you not able to get started on.. You have much more experience than alot of others who come here so perhaps just a few specific questions from you might get you started. 

I guess the edge I have had over time is my knowledge of code (recognising, not writing) xml, css, photoshop and html prior to working with DNN, so that has given me the ability to master some of the finer details, but that's about it - ... oh and yes sleep deprivation, fixing up mistakes, and no understanding feature creep, which can rear it's ugly head in skinning - believe me.

So how about you ask a couple of specific questions - then I'm sure you'll really manage it quite well  based on your pre existing knowledge.

I can answer some questions on my own forums where I can add images and examples, or you can email me but not always the fastest in responding no matter how hard I try.  I do have msn but it's not public and I am available on an hourly rate for consulting if you want some one on one training - either phone or skype..   But this is a last resort thing - I really think you can get this going if you tell us where you're stuck.

Nimble is only a matter of time  - no matter how many tips you give someone, it's just a time thing as well..

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
5/12/2006 11:49 AM
 

Thanks, Nina, for replying so quickly.  I'd love to sit at your feet for a while.  Yet, you didn't say coffee or lunch once...

I've seen this over and over in this forum ... the general advice is "buy a skin and work your way backwards."  We have a skin... the one that comes with DNN.  Maybe I need a more complex one? And I've studied pages and pages of designs on Snowcovered trying to figure out maybe what to do. 

So here are some questions.  I'm about to reveal all that I DON'T know and I feel pretty stupid admitting it all... but I think there's a lot of designers out there who don't know the same stuff.  And who ever said there was dignity in this anyway?

  1. You said ... if my design is straightforward... by that I assume you mean nice neat boxes that don't have fancy graphics or a lot of embedded links and roll-over behaviors?  It's not.  Does it have to be?  What do you mean by straightforward?
  2. What is XML and is it essential that I understand it to go from photoshop to skin?  (maybe that's the stupid question?)
  3. What is ASCX mode?  Designers don't know what this is.  At least I don't. 
  4. What do you mean by working on the server?  I don't go into the DNN files on the server.  I want to hand the graphics (sliced and coded) over to a developer.  (And I expect a lot of developers would like a designer to give them the graphics they want.  True?  Anybody?
  5. Do I have to learn by working backwards (taking apart an existing skin and analyzing it?)  Can't we start with a photoshop file or design and go forward?
  6. Is is ok to post the URL for the site I want to convert on this forum?

I can give you a for instance --

If I want a simple container that has a colorful tab at the top, here's what I think I would do..

  1. Create my tab in photoshop (with rounded ends, let's say.)
  2. Go into my slicing tool and slice the tab into 3 slices -- the 2 rounded ends and the nice rectangle in the middle.  I make the slice in the middle an HTML area with a background color instead of an image.
  3. Optimize into HTML.
  4. Then go into my HTML editor and I have a table with 3 cells -- the left rounded end, the middle HTML area and the right rounded end.

Then what?  What do I do with it?  How does it become a container? 

Thanks.  I'm listening.

Cathy

 

 
New Post
5/12/2006 12:14 PM
 

Ha  you know I must be feeling tired - 2am does that - but I thought you wanted to have the words Coffee or Lunch .. *sigh* I was too busy looking at your questions...

It's late here so this is my last post before retiring for evening.. however, this is a quick answer to your quest for knowledge -

1 - Basically YES.. with DNN I suggest for starters - think in squares and rectangles.. until you get the flow in your mind of how modules work and the space they can sometimes take up.

2 - XML - Extensible Markup Language - I learnt it back in 1999 - If you can just think of it being a language that is a data carrier - it helps different applications talk together..   In my small skinning video - I explain how this works, and basically a html file is and unparsed or unwritten file. The DotNetNuke skinning engine takes data from the xml file - which carries usually design informaiton relating to which CSS classes some of the skinning elements in the html file contain.   It then creates a page which has an ascx extension.  That's sort of regarded as *control file* and it injects the skin and content into the default.aspx file in the root directory (this is a very crude explanation)  But the XML is a must to know about if you want to create complex skins with alot of css formatting in the menus and skinobjects.  So I prefer ASCX files.

3 - ASCX mode is the control method or the finished file format .. that doesn't require reuploading to the skinning engine - (via zip file) for DotNetNuke to inject information it reads from the XML file to create the formatting.

4 - Working on the server - in my books mean opening the file you're looking at while logged in or on the site.. you make changes, hit refresh and then hopefully changes are there.. No a skinning specialist is often specifically engaged to work between the developer and the designer.  I dont' really call myself a designer.. I've seen amazing work by these fabulously talented people, and I've seen amazing developers write some brilliant work, and I work with them both to create their masterpieces online.  That is the role of a specialist skinner. Lots of developers think they can skin, but I work with many of them in the fine tuning of things they don't know and really aren't expected to know.

5 - I have posted this in several places.. and based on my own experience, I still take an existin file and take it apart to create my skins - Why, you might ask.. the code to make it work is there.. so I am just making changes to it..   If you stat from nothing, and you are a beginner, how will you know where to go - by opening these files and making subtle changes to begin with you'll see similarities - it will help you pick it up.

6 - You can post the url on this site - Lots of people do, and it depends how much scrutiny you want to be under by others..    Not me though - I don't criticise people's efforts.  We all start at a beginning point at some time!!

You are confusing container with menu -  

http://www.codeproject.com/dotnet/dnntabskin.asp

This is a tutorial on how to make that menu -

A container in my opinion is the balance between doing something elegant, or totally making a mess of it with these boxes and borders that sit outside content on the site. I don't use them much - but lots of people do.

So that tutorial will give you step by step to make that menu..

I hope that gives you a start!

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
5/12/2006 12:27 PM
 

Cathy,

I have developed a Windows application that converts a single HTML page into a ready-to-install DNN skin package. I have had a few people test it and there are a few minor bugs but it's very close to ready for release (will be called Skinning Studio).

I am quite interested in having it tested by web designers who have no prior DNN skinning experience since that is the primary market for the application. You seem like a good candidate for this, so if you are interested in trying it out, I will be happy to send you a free copy of the app in exchange for some candid feedback. You can reach me at nik.kalyani at dotnetnuke.com.

Nik

 

 


Nik Kalyani
Co-founder
DotNetNuke Corporation
Blog | Twitter | FaceBook
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Photoshop to SkinPhotoshop to Skin


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