Thursday, 3 November 2016

Make A Header For Your Blog Using Photoshop.

Every blog needs a header rather than a title, I will be helping you make a simple header using photoshop. 

First, you will need to create a new image on photoshop, once you click on new image it will ask you what size you would like the image to be. I chose 1114pixels for the width and 300pixels for the height. 

File > New... > Width 1114pixels > Height 300pixels > Ok.

The background it the first thing that we will be changing, for this you will need to select the gradient tool. In the gradient picker at the top of photoshop, I kept the first block selected. You will also have to select two colours that you want the background to fade from and to. I have chosen green for my first colour (#82c8b2) and white (#ffffff) for my second colour. Then you need to draw a line in the middle of your image from bottom to top.

Gradient Tool [1] > Gradient Picker [2] > Colour [3] > Add the Gradient [4].

Adding a background.
That is the background finished, now to add the banner. You will need to create a new layer and rename this banner 1. I didn't really like the ones that were provided on photoshop so I downloaded some more, you may find one on photoshop that you like if not download one. You will need to find some new brushes, I got mine from www.brusheezy.com/brushes I chose the hand drawn brushes. Download these and unzip the file then install. Once you have installed the new brushes you will need to select the brush tool. Have a look through the brush presets, this is where you will find your downloaded brushes and find the one you are wanting to use. You may need to change the size of the brush, I chose the size 1000px. You will also have to choose which colour you would like your brush, once you have decided on all the settings of the brush add it to your image.

New Layer [1] > Brush Tool [2] > Brush Presets [3] > Size [4] > Colour [5] > Add To Image [6].

Add a banner.


I decide to add two banners, both different colours, add a new layer and rename it banner 2. The brush is still set as what you have just used so the only step now is to change the colour ([5]), then add the second banner to your image. 

Both banners.
For the next step, I will be adding the text but I will be doing this in two different sections. Create another new layer and rename it text 1, then select the horizontal text tool. Next is to choose the font you want to use, again I could not find any on photoshop that I liked, so if you are the same you can download one. I found a font on www.fontspace.com, I chose the messy category and the font beautiful mess. Download the font you would like and unzip the file, once you have done this install the font and it will be added to photoshop. Select the font you have chosen, then select the text size and finally the colour. Position the text box on your image and type the text you want to display. 

New Layer [1] > Horizontal Text Tool [2] > Chose Font [3] > Text Size [4] > Colour [5] > Add Text [6].

Adding Text.
That is the first section of the text, the second section will have smaller and different colour writing (miss this section if you are only adding the one piece of text). Add a new layer and rename it text 2, follow the same instructions as above changing the text font, size and colour. Then add the text to the image. 

That is your header finished. Save the image, make sure you set the format in save as to JPEG. 

Finished Look.

Hopefully, this tutorial has helped and thanks for reading.

Sam.


 







Wednesday, 2 November 2016

Things To Make Your Blogger Blog Look Better.

When scrolling through other people's blogger blogs I realised how many of them looked like clones and mine was one of them.
This was how my blog looked:
Cloned.
My blog was using one of the simple themes, still had the blogger navbar and all the information running down the side of the page.

So I have changed my blogger blog to make it look less like a clone blog. Here are some things that will help you along the way with making your blog look less blogger-ish and cloned.


Add a header to your blog.

Make a header (on photoshop or gimp), to upload it to your blog click on layout. Find the header gadget and click on edit. Click browse images and upload your header from your computer. Mark the box that says 'instead of title and description' and click save.

Layout > Header Gadget > Edit > Browse Images > Upload > Click 'Instead of Title and Description' > Save.


Add a different theme.

You can google 'blogger themes' and find a lot that are easy to download. To change the theme on your blogger click on template in your dashboard column. In the right-hand corner of your screen will be a button saying 'backup/restore' (before you upload your theme back up your blog). Click this, then click on choose file and upload your new theme template. Or if you are confident with HTML and CSS you could change the simple theme to suit your preferences. 

Find a Theme > Layout > Backup/Restore > Choose File > Upload New Theme > Save.


Remove the about me widget.

Click layout on your dashboard panel, find the about me gadget. Click on edit and then click remove at the bottom of the gadget page. Instead of having the about me section on the home page, have an about me page.

Layout > About Me Gadget > Edit > Remove > Save.


Remove the blogger navbar.

Click layout on your dashboard panel, find the navbar gadget, click edit and turn off.

Layout > Navbar Gadget > Edit > Turn Off.


Use social media.

This an easy one, promote your blog on your social media accounts but also do the same back, promote your social media accounts on your blog. Some readers find it easier to contact people on different social media platforms rather than on the blog you created. So add your social media accounts to your 'about me' page or have social media icon links on your home page, make sure they are visible and work. 


Hope this helps, any other suggestions would be appreciated.

Sam.




 



 





Tuesday, 1 November 2016

Move the Search Bar in Opencart

For this tutorial I will be showing you how to move the search bar in Opencart, I will be using my cPanel File Manager. I will be moving the search bar underneath the cart button and make them the same size, on the right-hand side of the screen.


This is where I will be moving the search bar.



On your file manager, you will need to locate header.tlp (path -catalog/view/theme/default/template/common/header.tlp). In this folder, you will need to change a few lines of the code.

On line 72 it should read <div class="col-sm-4”>, this needs to be changed to <div class="col-sm-9”>

Now find line 81, you will need to change a few lines of code. It should read: 

</div>
      <div class="col-sm-5"><?php echo $search; ?> 
      </div>
      <div class="col-sm-3"><?php echo $cart; ?></div>

    </div>

change that section of code to:

</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
<div class="col-sm-3"><?php echo $search; ?>
</div>



Save the changes and refresh your store and the search bar will be underneath the cart.

Final Result.
Sam