Creating Graphics for Web Pages – Tech Tutor VIDEO

By
Education & Training with Tech Training for You!

Being able to insert pictures in our blog posts is an essential first step to making an appealing presentation. Images along with valuable textual content will help you to keep the attention of the person that just clicked onto your page. Would you like to step up your game with the option to create other types of graphics that you could use on your pages? This post (and video tutorial) will show you that it is within your reach.

If you were a graphic designer, you would have expensive apps at your fingertips such as Photoshop or Adobe Illustrator. These apps cost hundreds of dollars and require extensive training to effectively use. In this lesson, I will show you (Mr./Ms. Blogger) that you can do some very useful basic graphic composition tasks. You, in fact, won’t need to spend a dime because there are free tools that are now available to us on the web. The free apps aren’t as sophisticated as the paid ones but when we are through you’ll be amazed at how much you are able to do.

Our session will focus on a practical first use of your new found graphic skills: let’s design a banner for the top of our blog signature. In the new ActiveRain blog styling, there is a text banner that says“POSTED BY”. Let’s create an eye-appealing answer to that question. We will compose several elements into a single graphic that you can insert into your signature block. 1) your name 2) a tagline 3) your phone number 4) your email address 5) your photo 6) a background image

Click the image above to jump to the page
that has the tutorial video

When you are ready to watch the video, click the image on the right to jump to the video tutorial page. Before you do that, take a few moments to look through the narrative below of the things that you will learn in the video.

The free image editing tool that I’m recommending today is at ipiccy.com. We will be using Ginny Gorman as an actual example so you can see real world application. Ginny has a great illustration created by fellow-AR Ellen Caruso which shows a famous pair of Ruby Slippers and an catchy tagline of “because there is no place like home”. The first thing I will demonstrate in the video is how to use the crop tool in iPiccy. We don’t have enough space for the entire illustration in this context so we will crop to the essential elements of the shoes and the wand.

To create a graphic, or composition, we start with a blank canvas. In the case of the new ActiveRain design, we have 700 pixels to work with in the main body of our post. However, the signature block is “padded” with extra margin giving us 680 pixels of maximum width.

The tool we move onto in iPiccy is called the Blend tool. It will ask us for a canvas size. Let’s use 680 pixels wide and 400 pixels of height. As you will see, 400 is more height than we actually need but we crop off the extra white space when through. It gives us room to work.

The Blend tool in iPiccy will let you work with text, photos and shapes

We need to insert the elements that are photos. These will be uploaded to your sidebar “tray” and then you drag and drop them onto the canvas. Objects in iPiccy can be both moved and resized. When you are resizing a photo, ALWAYS do so by one of the four corners. Never use the edges as it will disproportionately stretch your photo.

iPiccy text tool will let you put text objects on the canvas. On the sidebar, you can choose different fonts and colors. Drag to move the text around and place it exactly where you want. Size it by the four corners.

If you right click (control-click, mac) on an object, you will see an options menu. One of the items that is useful with text is “duplicate” as you get another text object with the same font, size, color options and it will save you some time.

When it comes to having a color theme for a graphic, there is a useful site to note: colorpicker.com. On this site you have a tool to slide a pointer around a color selector box to find a color you like. At the bottom of the page, there is also a useful link called “color chart” where it has a very long list of predefined colors and names. In web and graphic design, colors are represented by an RGB value number (RedGreenBlue). This RGB number is represented in a six digit hexadecimal number like DC143C in the case of Crimson. You can select the six digit number in colorpicker and copy it to the clipboard. Then in iPiccy, with any selected object, paste the color number in the sidebar where it shows a color swatch.

colorpicker.com color selector box

In our graphic, we will be using a color rectangular box as a background for the tagline. The rectangle will stretch across the width of the canvas and will stitch our various elements together. The text on top of the crimson rectangle will be white. We will use the shapes tool button which will open up a secondary screen. At the top of this screen is a pull down list with preset shapes like circle, star, and rectangle. Choose rectangle and you will see your shape appear. Click done on the top button and it will drop a rectangle onto our main canvas. Change the color of the rectangle using the color number saved on your clipboard. Change the position and size of the rectangle by selecting it and dragging it around and dragging the corners and edges to get the length and height we need.

Another concept we come across in graphic design is the order of objects. If something is “on top” of another thing it will obscure it. In the video you will see that by right clicking on the text object that is behind the rectangle, you can choose the option “send to front” which will make the text in front of the rectangle so that you can see it.

Next, we move on to a method of cutting out a portion of a photo. In Ginny’s portrait, we cut out the background by using a mask. In iPiccy, choose the photo and then go to the sidebar. Notice the option for“vector mask” which we turn on. There is a down arrow which makes a button visible to “edit mask”. A secondary screen will appear. There is a zoom slider at the bottom which makes the image larger and easier for us to edit. A mask is a series of points to make an enclosed boundary. The technique that I use is this: Go around first with a rough outline of points. Next, follow up with an editing round where you fine tune the points. Notice too, that as you hover over any edge, you can create a new vertex by dragging a point outward. You can add as many new vertices as you need to smooth the edge of the cut out. Finally, notice on the sidebar there is a feather option which will further soften the edges of your cut out shape. When you are through with the mask step, click done and you will notice the background of the photo has been cut out.

A mask boundary will cut out unwanted background of a photo

Once all the elements are finally on the canvas, you then have the steps of fine tuning. Drag the objects around to get them placed right and make fine tuning adjustments to the sizes of things as necessary.

Once everything is set, you could click done to lock them all in place. The next step would be to use the crop tool in iPiccy to crop off the extra bottom white space. Finally you would save your graphic to your hard drive.

There is just one little problem with these last couple of steps. In an iPiccy “blend” once you click done, you commit to locking in all the objects. If you later see something you want to tweak, you will be upset to discover that you no longer can edit the individual objects. You would have to start from scratch. My workaround for this is to do a screen capture of the composition. In Windows, you can use the snipping tool to do this. There is also a free app called Skitch that works both in Windows and Mac that does a great job at screen captures. In Mac you also have the option of Command+Shift+4 to draw a rectangular cutout box. By doing a screen capture, you can leave your iPiccy blend in “edit” mode just in case you want to make any more little adjustments.

Finally, when you are saving your file you have the option of file type. JPG works best for photographs (the P in JPG is for ‘Photo’). Because of the algorithm in JPG compression, graphics that have few colors or with words on white background, the image saved will have lesser quality. For these types of graphics, the PNG (portable network graphic) format generally is a better choice.

If you are using your newly created graphic as the start of your ActiveRain signature, you will need to go to the page where you can edit the signature of your blog. At the top left of the page where you see your photo (you have to be logged in), use the dropdown list to choose “Blog Settings.” From there you can edit your signature block. In this case you will use the button to insert image. You will upload the graphic file that you have just saved.

blog settings option to edit signature in ActiveRain

Creating a graphic to use as part of your blog signature is just one thing you can create now that you have an understanding of this set of online tools. Cover images for social media sites is another place where this knowledge will come in handy.

Click the image above to jump to the page
that has the tutorial video

You’ll need to invest a little time to get the hang of using these tools but watch my video tutorial (click the image on the right) and you will see that you can do it! If you don’t have time right now, bookmark the page and come back to it on a stormy weekend day when you are stuck inside (in fact I’m watching the snow fall right now as I type this post!)

 

I’d love to know that you successfully created a graphic for your blog signature using the ideas you saw here.Come back and leave me a comment and a link when you have done it!

Originally Posted at Creating Graphics for Web Pages, by Craig Daniels

Posted by

Hi there! Thanks for checking out my blog today. I'm a tech guy living in New York City but I love that I can reach so many via means of the web. In my blog posts and tutorial videos, you'll get many new takeaway points that you'll be able to apply. By following my blog (button below), you will be able to see my new posts in your "following" newsfeed. If you enjoyed this post also be sure and click "like". It helps me see that my content is hitting the mark!

My blog home page lists my most recent posts, so if you feel like reading more, that's the place to go next!

Click to  

 

close

Re-Blogged 2 times:

Re-Blogged By Re-Blogged At
  1. Praful Thakkar 12/15/2013 11:50 AM
  2. Silvia Dukes PA, Broker Associate, CRS, CIPS, SRES 12/16/2013 11:26 PM
Topic:
ActiveRain Community
Groups:
Addicted to Active Rain
Bananatude
Ask An Ambassador
Tags:
graphics
activerain
activerain signature

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Ambassador
4,300,186
Praful Thakkar
LAER Realty Partners - Andover, MA
Andover, MA: Andover Luxury Homes For Sale

Craig, your post is always very helpful - and as of now, I am just going to bookmark it.

Dec 14, 2013 02:47 PM #23
Rainmaker
3,087,646
Nina Hollander
Coldwell Banker Residential Brokerage - Charlotte, NC
Your Charlotte/Ballantyne/Waxhaw/Fort Mill Realtor

I'm such a dope when it comes to this, so thank you for the tutorial. My next step is to bookmark this so I can go back and review each step.

Dec 14, 2013 09:30 PM #24
Rainmaker
3,812,210
Dorie Dillard CRS GRI ABR
Coldwell Banker United Realtors® ~ 512.750.6899 - Austin, TX
Serving Buyers & Sellers in NW Austin Real Estate

Hi Graig,

We are so lucky to have you in Active Rain..I have this post bookmarked!! Thank you for the tutorial..you rock!

Dec 14, 2013 10:13 PM #25
Ambassador
456,971
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Ralph - I'm glad that you enjoyed

Kathy - kind words, I'm glad to be appreciated :)

Laura - you are welcome, always good to add to what we already know

Praful - come back when you have a little time, thanks for the bookmark

Nina - don't forget the video, it is easier to learn when you watch sometimes

Dorie - good morning Austin - glad to see you visit always :)

Dec 14, 2013 10:40 PM #26
Rainmaker
2,454,054
Richie Alan Naggar
people first...then business Ran Right Realty - Riverside, CA
agent & author

Craig carry on in your sharing...Techy things usually have to be gone over more than once...good posting and Ginny is a good subject example

Dec 14, 2013 11:06 PM #27
Rainmaker
1,945,042
Andrew Mooers | 207.532.6573
MOOERS REALTY - Houlton, ME
Northern Maine Real Estate-Aroostook County Broker

Videos you do are the easy show and tell, learn! Thanks!

Dec 14, 2013 11:31 PM #28
Rainmaker
441,840
Ann Nguyen
eXp Realty of California, Inc. - Truckee, CA
Lake Tahoe Truckee Homes For Sale

Bookmarked...thank you Craig for this great turorial!

Dec 15, 2013 12:30 AM #29
Rainmaker
973,313
Aaron Hofmann
Atlanta Communities - Smyrna, GA
aka Mr. Smyrna Vinings

Craig, Great tutorial. Very thorough and easy to follow, so hopefully I will follow your guidance and make a nice graphic for my signature

Dec 15, 2013 05:59 AM #30
Ambassador
456,971
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Richie - I'm happy to offer video tutorials as further way to not only read but SEE it in action!

Andy - I know you are speaking from experience! thanks :)

Ann - you are welcome see you on the bookmark return click :)

Aaron - be sure and come back and post a link if you update your signature. I'd love to see the update

Dec 16, 2013 03:09 AM #31
Rainmaker
509,324
AJ Heidmann ~ CRS
McEnearney Associates, Inc. - Alexandria, VA
YOUR Alexandria & Arlington, VA Real Estate Expert

Craig - Great tutorial... but I have it book marked.  The next phase is to block some time to work through each step after my settlement on Wednesday.  Keep 'em coming!

Dec 16, 2013 06:01 AM #32
Rainmaker
1,490,499
Inna Ivchenko
Barcode Properties - Encino, CA
Realtor® • Green • GRI • HAFA • PSC Calabasas CA

Great tutorial!

Bookmarked! Suggested!

So grateful to you, Craig for sharing this knowledge.

 

Dec 16, 2013 06:23 AM #33
Rainmaker
2,761,535
Laura Cerrano
Feng Shui Manhattan Long Island - Locust Valley, NY
Certified Feng Shui Expert, Speaker & Researcher

I can always learn something new from the graphic design folks. Changes every week it seems! :)

 

Love and light,

Laura

Dec 16, 2013 01:23 PM #34
Ambassador
559,434
Peter Pfann @ eXp Realty Pfanntastic Properties in Victoria, Since 1986.
eXp Realty, Victoria BC www.pfanntastic.com - Victoria, BC
Talk To or Text Peter 250-213-9490

Wow Graig, as always amazing stuff and an excellent presentation, thanks.

Dec 16, 2013 01:31 PM #35
Ambassador
1,973,156
Silvia Dukes PA, Broker Associate, CRS, CIPS, SRES
Tropic Shores Realty - Ich spreche Deutsch! - Spring Hill, FL
Florida Waterfront and Country Club Living

Craig, I just found this today.  Great tutorial, thank you!

Dec 16, 2013 11:28 PM #36
Rainer
26,449
Sandy Colburn
Big Water, UT
Lake Powell Real Estate - Homes - Acreage

Thank you for sharing your knowledge, Craig.  These tips work well for all photo editing including listing photos. 

Dec 17, 2013 01:15 AM #37
Rainmaker
974,759
Beth and Richard Witt
Long Island Cash Home Buyer - Huntington, NY
Long Island Cash Home Buyer 516-330-6940

Thanks so much Craig this is awesome... came over thanks to Silvia's re-blog...

Dec 17, 2013 06:20 AM #41
Rainmaker
496,044
Steven Nickens
Elite Pacific Properties Maui - Wailea, HI
R(S)GRI ABR, Maui Real Estate Hawaii

Craig, Great info now I just have to put it to use

Mahalo, Steve

Dec 17, 2013 12:17 PM #42
Rainmaker
1,533,410
Lyn Sims
RE/MAX Suburban - Schaumburg, IL
Schaumburg IL Real Estate

Great tutorial.

Jan 26, 2014 06:27 AM #43
Rainmaker
534,949
Kenneth Cole
Weichert Realtors Appleseed Group, 2043 Richmond Ave. S.I.N.Y. 10314. office phone 718-698-9797, Appleseedhomes.com... - Staten Island, NY
NYS Licensed Real Estate Salesperson

Craig, you are the master.  Thanks so much.

Jul 03, 2014 10:11 PM #44
Rainmaker
159,542
Michele Milic
Realty ONE Group ~ 702.419.5359 - Las Vegas, NV

It seems like every time I need an answer for something your post pops-up.

Thank you Craig.

Jun 09, 2015 07:27 AM #45
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?

Ambassador
456,971

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
*
Spam prevention

Additional Information