How to Create Business Template in Photoshop

How to Create Business Template in Photoshop

How to Create Business Template in Photoshop
step-017f[5]

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.

step-018[5]


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.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Dark Conceptual Portraits Course (71% Off)
Sponsored

Discover how to create stunning photo manipulations in Photoshop. In this course, you'll learn everything from photographing models to creating dark conceptual artworks. If you enjoy our photo manipulation tutorials, you will absolutely love this course.

6 comments on “How to Create Business Template in Photoshop”

  1. I have been trying so hard to make my own templates. There are so many tutorials out there, but it always seems like one or two things are missing from the final product. Either that, or I am missing something within the instructions.

Leave a Reply

Your email address will not be published.

cross