This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Showing posts with label Custom Blog Design Tutorial. Show all posts
Showing posts with label Custom Blog Design Tutorial. Show all posts

Thursday, January 13, 2011

Make a Simple Rotating Header in Photoshop

In this tutorial, I am going to show you how to make a header like this one:  **it is the same concept as making a Blinky

It is great for Photography blog designs and just if you want to add a little something different, but it is MUCH easier than doing a flash header.  NOTE: You can only save this as a GIF file, so your quality will not be as high as a JPEG or PNG, so if you need something really high quality, this is not the best tutorial for you :)

Let's get started!  First, I have opened 4 different images (you can use as many as you like).  Then I am going to grab my Crop tool.  I am going to crop all of these to 800px by 350px (do what ever you like, but make sure to crop all of them the exact same).

After I have Cropped all of my images, I made a new document the same size as my cropped images.

Now drag all of your images on to the new document that you have made, and arrange your layers in the order that you would like them to go in the Header (top to bottom)

Once you have done that, you are going to go to your Window > Animation

Now you should have a window appear that looks something like this:
Now, click on the New Frame button (shown below)

Then you are going to Hide your top layer like shown below (click on the eye to hide).

Now it should look something like this (both slides should show a different image).  Then Click on the New Frame button again.

... and hide the next layer down.

.... and repeat the last 2 steps until you are finished with all your layers (don't hide your last image though).

Now if you push the Play button, you will notice that your slideshow will go REALLY fast, so to make it the speed you want it, click on the Sec. below each slide, and select a time.  I selected 5.0 secs, but you can do whatever suits you :)

Last thing, make sure that the slideshow is set to Forever.

Now, we are going to do a File > Save for Web & Devices...

 Then you are going to select GIF (it won't work with any other file type).

 Then you can adjust your quality settings, these are the options I chose:

Now you need to upload your file to your Free Photobucket account.   (before you upload, make sure that you click on Customize your upload options (shown at the bottom of the image below).
 Make sure that you select Best possible quality(while staying 1mb or less)  **my account says 2mb because I have a pro account.  (If you skip this, Photobucket might edit the dimensions of your image)
Once you have uploaded your GIF file, copy your Direct Link code

When you go to edit your Header, make sure that you select the From the web option, YOU CANNOT UPLOAD it from your computer.... it will not work.
Click Save, and there you have your new rotating header, it is not quite as slick as a flash header, but it is way easier, and faster!

Monday, January 3, 2011

Make a Cute Blog Monday! One Super Cute Blog

I know, technically it is Tuesday, I am 18 Minutes late....  I meant to get it done on Monday :p

This is brand new, but I think I am going to steer away from Weeks, for the time being anyway, every Monday (or almost every monday), I am going to make a cute blog, and show you how I did it!

This weeks blog is "One Super Cute Blog" Click Here to see it live.






I used the new 2010 Orange Awesome Inc. Template to get started.  You can find it under your Template Designer.


I used Colour Lovers (Totally Free Website) to make my background.  I have a tutorial here that shows you how to do it :)  This is the background that I came up with:


I made my header using Picnik (Totally Free & No Sign up or Registration Required).  I used my newest illustration pack for sale over at my Design Shoppe (sorry it is so bare at the moment, but I promise, I will add more soon).

Click Here for a tutorial on how to make headers in Picnik, and below, I have shown what I did differently from the tutorial.  When I saved it, I saved it at 900px wide, and I saved it as a PNG instead of a JPEG.


Now I need to make a few adjustments to the to make it look nicer.  First thing I am going to do is change the top bar from Blue, to Transparent.  If you don't know how to do that, CLICK HERE for a tutorial.

Next I am going to play with the layout of the blog.  So I went to the Template Designer, and selected a body and footer layout that I liked.

Now I am going to change the font colors, sizes, etc.  They are all under the Advanced section:

I am not excited about how the date looks, so I changed it a little.  If you want your Date to look like mine, go back to your Add CSS under Advanced, and add this code:

.main-inner .widget h2.date-header {
    background: repeat-x scroll center bottom #FE4365;
    border-bottom: 0px solid transparent;
    border-top: 0px;
    margin: 0 -15px 1px;
    padding: 0 0 0px;
}

.main-inner .widget h2.date-header span {
    border-left: 0px;
    border-right: 0px;
}

If you want the color something different than the pink that I chose, change the #FE4365 to the color value of your choice.   You can use ColorPicker.com to find a color.  Now your Date should look like this:

I also didn't like the orange border around the Post Body area, and the Gadget area, so if you go to your Advanced, and Post Background and Gadget Background, you can change it there.  I changed mine just white.


I love Non-Web Fonts :)  I never understood why web fonts were always so boring, so CLICK HERE for a tutorial on how to change your font to something a bit more fun.  This is how mine turned out:


If you don't have any pages, CLICK HERE for a tutorial on how to make them, and how they work.

Once you have your pages, the Navigation Bar will look like this:

First off, I don't like how it goes all the way across, and I don't like that it is transparent, and I really don't like the Orange....

So first, I am going to go to my Add CSS section, and add this code:

.tabs-outer {
    background: white;
    width: 900px;
    margin: auto;
}

.tabs-cap-top, .tabs-cap-bottom {
    border-top: 0px;
}

This is how it will look now, if you don't want it white, put a color value in the place of where it says "white".  Also, if your header is something other than 900px wide, change 900 to match the width of your header.

Now to fix the buttons, go to Advanced, Tabs Background and Tabs Text to get it to the colors of your choice.

Here is my Final Nav Bar: