WordPress Theme from your Photoshop Design in Seconds

[oliver18754]

I'm still lost on naming the layers properly. Considering there isn't any tutorial on appropriately naming the layers, please make a tutorial in layer naming for Wordpress theme designs. Thanks.

[GouveiaBDesign]

is there anyway you can make a video on what to name these layers exactly? is it just like what the theme core files would be? I am a little confused and I am a sophomore design student so this is all new to me still

[GouveiaBDesign]

this is amazing

[divineIproject]

thanks for this tutorial, really helpful for newbies.

We are also working on converting PSD to CSS. Maybe we will publish something soon.

By the way, are you a manual coding fan?

And also, do you think your audience will like our videos?

[Luxcaput]

can you do all this in elements?

[FolkFriendUK]

Hello! I think this is a fantastic tool, but I'm a bit stuck. How do I show wordpress where the footer is (no naming convention for it that I can find?) so that widgets I put in the footer get put in the correct place on the theme I've made?

[jackarts]

looks like gold to me too. will feedback if it is

[kshyoung]

how to measure the content area from wordpress to a photoshop design?

[AltmisBirli61]

did not work for me

[KRDMarketing]

Awesome video! Thanks so much for this!

[ColdfireNL]

this is gold

[ColdfireNL]

this is gold

[Beluosus]

this is gold

[bjavierduke]

Will be really useful if can provide us with a PSD sample file to show us how name all the layers

[xron25]

what layer do we name the navigation for a wordpress i got content areas and side bars but what about navigation?

[ddiff]

Hey, what could be the problem? When i install your sample in my server, the content and side sections doesn't works... I still seeing the 2 beautyfull gray squares on the web... like photoshop.

[eeehawww]

want to get free wordpress themes. type "freelancekiller" in google...

[pcabiya]

Awesome!

[MissEmilyBrookes]

Hi, I have followed everythin as instructed and when I activate there is no conent in the content box or sidebars in the side bar and it has no option to change the background please help...If this works then I will be upgrading so I can add additional features

Many thanks

[Ximerus]

Темы для/Theme for, WordPress.

webnews.isgreat.org

[flashxpert]

thanks alot ...

[bogensgaap]

pfff... why not just create a zip file and voila..?

I really don't like the localhost-mamp-terminal and other geek stuff. Well, it is way to geeky for me, probably not for you ;-)

[psd2cssonline]

@zZJoennZz If you go to your WP dashboard > Appearance > Edit CSS > Paste in the PSD2CSS generated stylesheet, your theme will upload!

[zZJoennZz]

when I upload and converted, it's just online html not for wordpress :(

[tvshowzzl1]

Nice video! 

[GrendelPL]

@17DM you can use any file-manager tool - like Total Commander / Windows Commander

[Sykora727]

I just cannot find a way to upload my downloaded zip file to wordpress. It's really frustrating. I've looked for the Add New Theme link, but it is no where to be seen.

Please help!

[psd2cssonline]

@Sykora727 In WP there is a place to install a new theme area

(sidebar) Appearance/Theme/Install Theme/Upload, just browse for the file and upload the ZIP

[Dipztick]

Dude, I don't know what to say. You have made life easier! Thank you, I don't speak just for me when I say this, but I say this for every designer that does not know how to make a Wordpress theme (those damn, dirty PHP codes and all those subphp files) or is too lazy to make one :P THANK YOU!

[ByteITNetworks]

Any plans to have your site also create skins for the Thesis Theme? I prefer to use Thesis if possible, simply because it is great for SEO.

[GMELECTRONICS365]

@17DM terminal is what command prompt is for windows.

[gipsydove]

I have photoshop Elements and designed many navigation bars/button sets but don't know how or if i can even make a folder layer. Is it possible in Elements and if not, can you tell me a sollution so i can start working. then i can buy full photoshop i already have clients that really like my work i just really need to get this going! Thanks so much for your time and wonderful program!

[gipsydove]

I've designed the full site its the layer set that I have a rpoblem with I can't create a layer within a layer nor can I open a layer set in one of your files.Is there another way to use that single psd file to create the entire web site instead of having to create a new psd for each page.If not what is the best way to link them together. Thanks again!

[Mak3d0n3c0T]

crap !!

[Benjamin5050]

@17DM "Zilla", My bad!! have you worked it out?

[RocketBoxTv]

Sorry to say, but the program is a piece of crap. Every image was ruined by extremely low quality to the point that you could not even see the image, just static. Thanks for wasting 7:49 of my life

[emLevit]

So I design my theme with Photoshop, do all the hard work and than I have to pay for the conversion? riiiiight...

[ejwmsphotography]

What size is your sidebar and content bar?

[HeartOverDrive]

thanks! but when i install the theme it says on wordpress that the style sheet is missing!? help!

[RocketBoxTv]

You should put a list of all the names+Description of the names needed per layer

[abbigirl1234]

VERY COOL! abd to think i nearly paid someone $100 to do this for me manually. I'll give it a try now

[psd2cssonline]

@17DM If you do a quick google search you can pull up what a hosted terminal is... this is only used if don't already have a WP running on a server.. it allows you to locally host it.

[Benjamin5050]

Is there a first part to this vid. like building the PSD theme from scratch? names for each layer etc..?

[psd2cssonline]

@Benjamin5050 yes there are over 40 vids on what you can do using our tool. I would look at the Menu and Background ones first and then start looking at the other media ones

[Benjamin5050]

@17DM start> Run> cmd

but the commands are not the same, type help for command list, but tbh all he did was unzip the file, you can do that by opening the ZIP file in Winzip or WinRAR, then just FTP the Css files o your wordpress domain. (i use fileziller for this)

did that help?

[plutie]

Super useful!

[FaultedJonny]

What i mean is, when i made it, i named the layers but the theme wasnt in the center and i was unable to edit the content areas

[psd2cssonline]

@FaultedJonny if you use _center in conjunction with _frame and _bkgdbg will keep everything in line esp if the content expands in Wordpress. go to our tutorials for the video demos or check them out on here. just search for those functions on the channel

[FaultedJonny]

Im having some problems, i uploaded the file to wordpress and i was unable to edit the main areas and everything :S

[hersmiless]

i tried activating the layout you made but it just gave the image, no links or content. :(

[psd2cssonline]

@hersmiless you should be able to upload the Zip file that we used as an example on our site. Please let us know if you have any issues and email us at support

[FaultedJonny]

What would the layer name be for a navigation bar?

[psd2cssonline]

@FaultedJonny you can name the layer anything that you want; check out the Link and Link Over and Hover Examples on our channel for more details

[FaultedJonny]

@psd2cssonline But how can i position the pages list along the top.

[noushazar]

PSD to Css

[nigelrobertson81]

I just attempted the psd2css, and it made nothing close to a wordpress theme. am I missing something? I followed the example and saved as a zip file, and just got a broken wordpress theme. :(

[psd2cssonline]

@nigelrobertson81 send the PSD to our support.. or try downloading our sample and testing it to see where your mistakes are...

[maxandtysonshow]

Is there any way the screenshot can be changed in the theme preview, if not is this going to be considered in later versions?

[psd2cssonline]

@maxandtysonshow great question... we will look into it...

[kabascoolr]

how do i name the layers! Like, what name to give to what?

[psd2cssonline]

@kabascoolr did you still have questions regarding the layers?

[kabascoolr]

@psd2cssonline yes!

[psd2cssonline]

@kabascoolr go to our website and check out the documentation tab for all the layer names and descriptions

[rynout]

@psd2cssonline but are 'content_wordpress' & 'sidebar_wordpress' the only layer naming conventions for wordpress? Or can I use all layer naming conventions mentioned in the documentation tab to import a template into wordpress?? Please Respond. Nice video by the way. =)

[nimad1990]

it is not working for me it never says finished it keeps loading but suddenly page not found shows up

[psd2cssonline]

@nimad1990 what kind of internet connection do you have? There is a file size limit as well...

[zamirvarandas]

4:12 ^^

[JoeyD1187]

at 5:14 - how did do it so that terminal opened with that?

[JoeyD1187]

how did you get the correct code in terminal? thats where i lost ya

[ssx95351]

This is great, took a while to figure out why the sample was not working. I don't know if it's just me but, every time I installed the sample Word Press theme by going through the control panel (Appearance>Add New Themes>Up Load) it did not work. Kept telling me it was missing Style sheet. I did what this video said to do, FTP the files and it worked! =)

[MrStudMuffin]

nice

[anokigryphon]

Is there a way to have a wordpress menu as a side bar? like a side bar on the left?

[VvmagancommercevV]

Can you setup page buttons in Wordpress?

[Finessa667]

how do I do this if I don't have a MAC?! can i enter that script into the "edit css" tab?

thanks for your help!

also can this be done with fireworks documents?

[Finessa667]

how do I do this if I don't have a MAC?! can i enter that script into the "edit css" tab?

thanks for your help!

[Win7Geek1]

Is this Free right?

[psd2cssonline]

@Win7Geek1 first two weeks are free and then it is 19.95 for unlimited conversions

[Helenaannejane]

where do u get the template from?

[boswell255]

Wow, this is perfect.Thanks so much for taking the time to develop and maintain this. I was put off by coding themes for my personal site, because I'm more of a designer than a code monkey. I'm reinspired to make a theme now. Cheers!

[Reymysterioforlife1]

mate can u help me with something :(

[iWebBuddy]

Thanks for the tutorial.

[moheh]

thank you so much! this is exactly what i needed

[UNKNOWNnotSATO]

hay :D ..good tuto :D

5-rate xD

but i have a question ..

how can i set it up so that you cant save the pictures ? i think i shoult edit the css.. but i dont know how ..:S ..pls help

[mohamedj12]

Hello can you help me i have been trying to do this but it wount let me upload my psd file for some reason can u help me out

[michaeladeyeye]

brilliant, I was wondering if I could add like a menu bar linking it all back to my website, I would like to design word press to so it looks exactly like my site, is that possible

[gregorygroupnet]

I see what you are saying and got the point i think.

[AllEyesOnEgyptTV]

That was so cool... trying it now. thanks

[maddinAT]

great, thanks!

[psd2cssonline]

Shoot!! I intended to reply to a users question and accidentally hit 'remove'. Sorry! The question was something like 'I didn't understand what you did with the shell. Is there is a simpler way to install?' Answer: Yes! you can use the standard WordPress theme install in the admin GUI to install the zip file psd2css Online generates. No need to unzip anything anywhere :)

[Yamcha67]

@psd2cssonline

Does this work for sophisticated PSD documents? I have a design I made for a blog.. but its not as simple as the one you've shown on this youtube video..

[socceruci]

I'm going to try this out it looks like a real time saver :)

[dimpil1]

Does this work for Thesis?

[purevil89]

Can I make a custom sidebackground?

I mean.. like the sidebars but the ones on the background.

[bosscherdesign]

Do you listed, anywhere, a list of all the names of layers that are needed for wordpress? I see in the video you named two, but do any of the other ones need to be named specifically? If so, please advise.

[animalis99]

The generator makes a html page with html-files not a wordpress theme? what is wrong?

[psd2cssonline]

Possibly you weren't logged in? Or maybe you didn't name the layers right? If you have an account (free for the first 2 weeks) and name the layers right, it will not make simple HTML files but will in fact make a complete, correct and working WordPress theme. If you think it's not working, post your PSD to the forums at the site and we'll figure out what's going on. Thanks!

[pixeltierra]

i love you!!!!

[RyanMichaelBrown]

why cant i get sound on this video

[DallasCowboys94Ware]

it works, the audio is just low.

[alexandreuc]

great! i cant believe i didnt know this site yet

thank you

[codymoss3300]

Does that psd2css logo have to be there to the side or even on top?

[psd2cssonline]

It doesn't have to be anywhere on your design. I don't watermark your work. The logo you see is just on my site and in my examples.

[jad2x24]

this is awesome dude..

[theapplemackid]

what size should i make the psd file in photoshop in pixels?

Thanks

[psd2cssonline]

Whatever size you want your web page to be. But keep in mind, most people use their browser at between 900 and 1280 pixels wide.

[rubent100]

i also want to know does this work for sophisticated sites? i mean not just simple boxes? how can i do this?

[psd2cssonline]

Sure - whatever you can draw in PS, you can have as art in the site. Then for 'sophisticated' sites, use any WordPress plugin or widget that you want, or you can still use the other advanced psd2css Online features in the theme as well.

[djmixmind]

Does this really work for custom sites?

Someone please hit me back!

[ateensmakeupbag]

can I use Microsoft Expression Web 2 instead of photoshop?

[psd2cssonline]

I don't know - does it make Adobe PSD files?

[kunnublog]

eg. on starting your mouce move after 1 minute after 1 minute you waste much more time on show wp psd and others..

sorry, for this suggestion but your video tutorial is valuable and your site is awesome.

thanks :)

[FeedbackVideoDotCom]

Amazing! I have a wordpress theme that automatically adds links to pages to the horizontal menu at the top of the page as I make them. Is there a way to set that up with PSDtoCSS Online (rather than pre-define the menu buttons) ?

[psd2cssonline]

You can draw the menu in Photoshop, use some of the psd2css Online features like _link, _linkover, _menu and _hmenu. Then edit the index.php file that is generated by hand and make the href tags in the _links point to the pages you need.

[Evo2561]

Another question, Does it split the design into header.php, footer.php, post.php etc for the Wordpress themes?

[psd2cssonline]

Nope. I don't believe that's a requirement for a WP theme, it's just a coding style suggestion.

[Evo2561]

OK Cool, I did actually mean Vertical stretching btu think I got myself a little confused, was half asleep when I wrote that comment.

[Evo2561]

Just a quick question before I try this myself, are the templates that are outputted able to stretch horizontally? or does the content layer stay the same height as you design it in photoshop?

[psd2cssonline]

Stretching horizontally isn't supported directly. You'll have to modify the generated code by hand to get that to work. Vertical stretching is a little simpler but still requires some modification by hand. We have a number of video tutorials on how to to the vertical stretch.

[Evo2561]

I Just have to say this is outstanding, I have been a web designer for a couple of years and have only just discovered how versatile and easy wordpress is to mod, now I can add my own designs to it it's even better! I couldn't imagine how much work you have put in to make this work the way it does, so major respect to you, and good luck in adding those extra features.

[ThoughtCityTV]

this is beautiful; if i knew you i would kiss you...........on second thought; a hug will suffice. anyway is this free? and if not; its still worth it

[Menifestozz]

Hi, can I know what are all the name of layers that your program detect and code it? In this video it shows only 2 layers. Can I know the rest? The search button ability added?

Love this website of yours. Great help for me.

[psd2cssonline]

Hi - Check the documentation on the site. youtube won't let me post a link in the reply here, but check the psd2css online site. All the various supported layer names are listed in the documentation. Thanks!

[thetmyster]

K Thanks, and can it support Search bar?

and categories and moving / hover buttons

[psd2cssonline]

At the moment you can copy and paste the search bar code in the generated index.php to another DIV. That will work. But I'll be adding the ability to just draw it where you want soon.

[thetmyster]

How TO you get the HOver JS Thingy,

T

[psd2cssonline]

Make 2 layers in your Photoshop file - one called something_link, the other called something_hmenu.  Use psd2css Online to convert it and it will just work.

[chewbaca1989]

Gawdang, cool.

[JohnnyHMV1]

1st comment :D..

Awesome feature man. Will help me ton!

Thanks and keep it up!