How to Resize and Upload an Image as a Banner

Make it Personal!

 

This instruction set provides a detailed list of suggested steps to customize your homepage banner.  Changing the default banner is a simple and quick way user's can personalize their blog page.

 

Materials

·               Computer

·               Internet access

·               Adobe Photoshop

·               Penn State blog account

 

The screencast below will provide detailed steps used in this process. Beneath the video tutorial is a list of steps to follow along. The screencast tutorial will provide a visual aid to each task used in resizing and uploading an image to your banner.

 

Screencast Tutorial

 


Warning

When uploading an image from the internet, always be aware of copyright infringement laws.

 

Finding a Picture

 

1.      Open a web browser.

2.     Type www.google.com in the address bar and press enter.

3.     Click the image link in the upper left corner.

4.     Click advanced image search.

5.     Select large under the size drop menu.

6.     Type the desired image search in the Find results box.     

7.     Save the desired picture to your personal space.

Cropping the Image

1.      Open Adobe Photoshop in the Start Menu.

2.      Under the File tab, select Open.

3.      Select the image file in your personal space and click Open. 

4.      Under the Image tab, select Image Size.

5.      In the Pixel Dimensions box, type 905 into width and click OK.

.

Note:  The height adjusts automatically.

6.      On the side Toolbar, click the Rectangular Marquee Tool.


marquee_pic.jpg

7.      In the Top Toolbar, click the style dropdown box


style_pic.jpg

8.      Select Fixed Size.

9.      In the width box type 905 px.

10.  In the height box type 170 px.

11.  Click anywhere in the picture.

12.  Once the box is where you want it, hit CTRL+C. 

13.  Under the File tab, select New.

Note:  Make sure the width is 905 and height is 170.

14.   In the Name box, type the desired file name.

15.  Click OK.

16.  Hit CNTRL+V to paste the picture.

17.  Under the File tab, select Save As.

18.  In the Format pull down box, click JPEG.

19.  In the Save in pull down box, select your personal space.

20.  Click Save.

21.  In JPEG option box, type 12 in the quality box.

22.  Click OK.

Uploading the Image to Your Blog

 

1.      Open your blog dashboard.

2.      Under the Create tab, select Upload File.   

3.      Click Browse.

4.      Under the Look in pull down box, select your personal space.

5.      Click the image file and click Open.

6.      Click Upload.

7.      In the Tags box, type @banner.

8.      Unclick Create a new entry using this uploaded file.

9.      Click Finish.

10.    Click the Publish Site icon.

Note:  Publishing a site may take a few moments.

 

 11.  Click the View Site icon to assure your banner has changed.

Your blog page now has a new banner.  Congratulations.


DSC_3699.JPG


Above:  Courtney Saracco putting the finishing touches on her group's screencast.

No TrackBacks

TrackBack URL: https://blogs.psu.edu/mt4/mt-tb.cgi/68519

Leave a comment

My Screencasts for Blogs@PSU

How to Resize and Upload an Image as a Banner.

Recent Entries

Adding the Banner Heading to Every Page
In the template for "Header", towards the bottom, there is this snippet of code:<mt:If name="main_index">    <div id="homepage-image">&nbsp;</div></mt:If>Just remove the surrounding…
By Novakovich | Comments (0)
Changing the Font Styles for the Title and Headings
This is the basic patter to add to Design/Template/Stylesheet. You can substitute any font style. If the font has more…
By Novakovich | Comments (0)
Changing the Color of the Blog Background
The following code is for a black background:body { color: #fff; } #content { background-color: black; } #container-inner { background-color: black; } …
By Novakovich | Comments (0)

Search This Blog

Full Text  Tag