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

Instructions and Code for Blogs@psu.edu

How to Resize and Upload an Image as a Banner.

Recent Entries

Extra Credit: Instruction Sets
Post your ideas here: How would you sort the instruction sets into categories? Name the categories and sort the sets.…
By Novakovich | Comments (7)
Section 20 Topics
Sharing your Blog Post on Facebook Renaming the Blog Tab How to remove the blog tab How to link…
By Novakovich | Comments (3)
Subfolder Widget Code
The following code should create folders for locating pages. You can add any number of pages to each folder. In…
By Novakovich | Comments (0)