How to Create Business Template in Photoshop

Step 18 – Coding Client Zone

Instead of making new page for login panel, we will get advantage of jquery (that is already implemented into our code) and will create a fixed div that will be hidden by default. Let’s make some design at first. The form will slide from the top. It’s position will be fixed and it will be stretched on 100% width of page and shouldn’t be longer that the header so the user will have possibility to hide it with menu item. I kept my design simple. It’s just to show off above all. Check the sources for more informations. In psd file you will find mock-up of the form, in graf folder two background images that I used here. If you wish, you can prepare your very own, more complex backgrounds. Ok, this is the html. Place it anywhere in the body tag.



And here’s css for that piece of html:

And it’s done. Now we can name it blank.html and make few copies of it for further pages. There won’t be any additional cutting (well, maybe just a few elements actually), so the only part here is proper html and css. Download mine html sources to see it all. Hope you learned something with this tutorial and let me know if you wish to see more of that kind. See you around! Oh, I almost forgot to admit: To shrink the jpg files use IrfanView. Just open up a jpg file in this image browser and save it with 90% quality. Your image shouldn’t loose a lot of quality, but it’s weight could lower twice time or so. Alright, that would be all for now. Remember, when you learn html and css it is most important to analyze, analyze, analyze… Edit already created file, change some value, save, refresh and check out what’s happened. It is the best way to learn.

Final Results


Download the Source File

JA | 0.53 MB

Download from Website

Authors Comment

profile[5]Hai! My name is Maciej Kwas. I am self-taught graphic designer and web developer from Poland. I am currently studying Civil Engineering at the Lublin University of Technology. You can follow me on Twitter and read some personal stuff on my blog.

Here’s my facebook.

See you around!

Related posts
LayoutsPhotoshop TutorialsUpdated

How to Create a Beautiful Audio App User Interface

LayoutsPhotoshop TutorialsUpdated

Create a Vintage Style Poster in Photoshop

LayoutsPhotoshop TutorialsUpdated

How to Create a Professional Web Layout in Photoshop

LayoutsPhotoshop TutorialsUpdated

Create a Captivating Street Dance Competition Poster with Photoshop


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get 57 Photoshop Actions Free from Our Awesome Newsletter!

Subscribe and get the latest Photoshop tutorials, tips, and more via email. As a way of saying thanks, you'll also receive a free copy of Lomocam Photoshop Actions by SparkleStock ($7 retail value).