Saturday, April 28, 2012

Artist's Play Room #7

It's time for a new APR Challenge, I can't believe we're onto week seven! Please be patient for a few more minutes while I wrap up last week's challenge.

The theme we worked with last week was "Rainbow". What a fun theme this turned out to be! I'm not surprised though that I'm so thrilled as I covet color, I can't get enough of it! In fact, when I go to do a more morose piece, much of the time it comes out happy and colorful. The more color, the better. Here's my "rainbow" piece and all the wonderful submissions from last week...

Title: "Over The Garden Fence"
This was a real departure for me. I've never done anything at all like this. First, it's NOT from a photograph. I made it up!! I know, wholly cow. I didn't know I COULD. I knew I wanted flowers growing up a fence so I figured out the dimensions of a fence moving slightly off  to the right then sketched in my very favorite flower, the Echinacea (cone flower). The cone flower is also a real butterfly magnet, when you google butterflies, 99 times of a 100 if the butterfly is on a flower, it's a pink cone flower! But I digress. I knew I wanted the background to be deliberately naive and the sunset to just be lines of color. I'm thrilled how my first original piece came out. I've always either worked from reality or a photograph. I'm really happy now. :o)
Victoria created a
painting with many
layers of paint &
colorful feathers 

on her dress.
Cindy has done a wonderfully
colorful painting. So sweet!

I think how the color is
flowing off the paint brush
is wonderful.
Terri made a wonderful
impressionist piece.
I love the riotous 

color she used.
Lou Anne did a mosaic
raindow. She doesn't think 
it's good art, I disagree, 
I love it.
Leslie did a great
job on a commissioned
piece.I especially love
the perspective she's 

achieved. Wow.
I love how expressive 
this piece is with
minimal lines.
So great Darla!
Tracy @ Domestic Gourdess
has made some fabulous
earrings in bright
colors. I love these.
Peace, Baby!
Ayala painted a dower
face with happy colors
in the background, love
the juxtaposition!
Andrea does beautiful
mandalas, this one is a
rainbow of color!
Debbie broke out of the
mould and made a
rainbow catcher!

Lovely idea.
Minnemie has done a great
painting of a Zebra, so
wonderfully expressive, wow.
Gloria has done a
beautiful oil painting
I absolutely love it!
And one last beauty, again by
Gloria, she says when she
doesn't know what to paint
she paints fruit.
There's something just wonderful about painting fruit, I love the curve of the flesh. I've done several fruit paintings so I guess I felt that I should do other things but my friend Diane has changed all that silly thinking. I changed my perspective about repetitive work when she said "I'm a serial painter, I paint in series." That freed me, changed me and allowed me to paint whatever I wanted. If that's more pears, so be it! You can read more about Diane by going here.

If you haven't read the rules & guidelines, please go here. If you've landed here after this challenge has been completed but would like to participate in a current or future Artist's Play Room Challenge, just either click on the APR button in the sidebar or click here and you'll be taken to the latest APR Challenge!

Are you having trouble using the Mr. Linky to add your submissions to APR? Well here's some help! Just click on HELP and you'll be taken to my Linky Help Page. Cool, huh? I've got your back!
This week's theme is totally opposite of last week's. As I've shown above, we did color last week, this week let's explore darkness and light. In your artwork I want you to show me how you'd interpret these two words. If you only want to illuminate one of them (pun intended) then pick one and go for it. Here are some examples of how to interpret Darkness & Light...

Marney has played strongly with 
shadow and highlights 
(light & dark)
Shelly has used black & white 
and  color to illuminate the idea of
darkness and light.
This example by Tummy Mountain 
is literal, a light in the darkness.
Stephanie gives a perfect example 
of how to successfully use a light
background and dark subject.
Robert shows here how just black
and white and the placement of one's
subject truly makes stunning art.
Julia added shadow under each brush 
stroke by loading her paint brush
specific way, wow. (Click to enlarge)
I hope these examples help you find your way to a beautiful and amazing piece of art. As always, feel free to do any kind of art, from collage to watercolor, from crochet to altered books and journaling. Just remeber, you don't have to be great, just create!

Talk to you all soon,
I'm going to make a cup of hazelnut coffee, anyone want a cup while I'm up?
Line forms to the left, taking orders...
;o)
I'm out!
Best,


If you haven't yet, could you pretty please add yourself to my Linky Follower Tool? It's right over there. ------>

Pin It
Mister Linky's Magical Widgets -- Thumb-Linky widget will appear right here!
This preview will disappear when the widget is displayed on your site.
For best results, use HTML mode to edit this section of the post.

Thursday, April 26, 2012

And The Cow Says MOO!

Two very cool things have happened recently. I was trolling the internet and happened upon a blog where the author had listed the best, newest things she'd come across. Buried in several photo editors (which I will review in an upcoming post) was a very cool new site called Klout. Klout measures your influence across the blogosphere and recently some of the major players who use scoring mechanisms to rate websites have started to use Klout scores as one way to rate all things web related. I hurried and signed up for Klout and found that my score is a lowly 14ish. Since Klout is complicated, it's difficult to figure out how to raise one's score successfully so I'm kinda just going about my normal business and not worrying (too much) about what my influence & reach is according to Klout. But I digress, this wasn't meant to be a commercial for Klout.

You see, on Klout you can win stuff caled Perks and I won a free set of 50 MOO.com business cards!! This was totally fortuitous as since I moved 6 months ago, I desperately needed a new set of cards. They just arrived yesterday and they're even better than my first set! I can't get over the quality of MOO cards. They're so thick and luxurious and they're just perfect for artists. MOO allows you to add a different picture to the front of every card without extra charge. Then you put your particulars on the back. I choose my best artwork and use the business cards as a subtle advertisement for me and my Blog/Etsy shop. Take a look at how they turned out... ( I took pictures of the whole process of opening them up so you could experience it with me!)

Normally, MOO cards come in an amazing black
heavy duty box, such great quality. Since
these are a free gift they came in a less
spectacular box.
My Apple, hey, it matches the MOO box!
I just LOVE how the cards look, you should
FEEL them, wow!
Aren't they PUUURRRTY??!? I love just looking
at them. The great thing is that the price
 for 50 cards is low enough that you can
afford to do small runs and get a new set
with your new art every 6 months!
...and here's the best part of MOO.com, I really love this about their company because it engenders loyalty!
THEY HAVE A SENSE OF HUMOR!!
You've gotta love that as a customer. You assume that employees are having fun doing their job if this is the cute little addition thing they slip in. They didn't have to put a little message at the bottom of their generic box. They didn't have to make each customer who "looked" smile and chuckle because they'd been caught out looking into an empty box. That's just something extra, a fun little thing to make you remember to enjoy life. Thank you MOO.

The second wonderful thing that's happened this week is that I've become an affiliate of MOO.com!! So, in a few days or so there'll be one or two links in my sidebar that you, my loyal readers can click on and order your own MOO products. They don't just make business cards, they also do postcards, greeting cards, stickers and mini cards (I made some as tiny thank you's and on the other side I put blank spaces for the name of the art piece a customer bought, my blog name, etsy shop and date the artwork was completed.) Moo's actually having their annual Spring sale where you can get 25% off many of their products. I'm thinking of ordering some postcards and selling them as reproductions of my work on Etsy.

I will be keeping you all up to date about sales and special promotions at MOO.com and if I get any promo codes I'll be sure to extend them to those of you who'd like one. I actually do have a 10% off code for your first order. If you'd like the code, just leave me a comment and I'll get back to you ASAP (just make sure you link your blog or leave your email so I can get back to you!)

I'm off for my requisite nightly hazelnut coffee! If I weren't so lazy I could have a freshly baked gluten free golden cupcake with cream cheese icing. Damn my laziness!
Hugs to you all,
Best,


P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)

Pin It

Tuesday, April 24, 2012

Blogging 101 (Part Three)

...and the series continues! If you missed my two other blog posts about Blogging 101 you can either click the blogging 101 sidebar badge (or grab it and add it to your site, hint, hint!) or just click on Part One or Part Two

In Part One we learned the basics, how to center images etc., how to italicize, bold or underline text in the sidebar and how to make an image clickable. Then in Part Two I taught you how to make your very own clickable AND copy/pastable blog button. We even added some extra sweet functionality to it like making it open the link it points to in a new tab/window and to display a message when you mouse over your blog button.

This time, I'm going to teach you a very useful thing, how to horizontally align images in a blog post. If anyone of you have tried to do this manually by dragging your uploaded pictures around inside a blog post you know it usually doesn't work. In fact, doing that usually screws up all the other formatting that you added to your blog post! After reading this article you'll be able to easily make pretty, lined up pictures, which not only look cool but saves serious real estate on your blog post!

So, here we go!

We have to start by uploading two pictures to Blogger. Do this by clicking the picture in the link bar above. You can upload your pic anyway you want, just get them on the page! When the first one is up, center it if it's not centered (that function is also in the link bar above or can also be accessed by clicking on your uploaded picture.) Now, before you upload your second picture, click on this first one and add a caption. You don't even have to put anything in the caption, you can just leave it as it is, it just adds the code that allows us to horizontally align our pictures. Here are our two pictures...

Albert Einstein
Author Unknown
When we're done, they'll look like this...
Albert EinsteinAuthor Unknown
Won't that be a cool thing to be able to do with your pictures? Yes? I thought you'd like it! Coincidentally, just this weekend my Inspiration Avenue friends begged to learn just HOW I was lining up all my pictures so prettily. So, this post is dedicated to those lovely women I so adore!

COMMERCIAL BREAK:
(Oh, and here's an IA plug, we're doing a Postcard Swap over on Inspiration Avenue, the button is grab-able from my sidebar. Go on over and read all about it, all are welcome & it's gonna be a whole lot of Mail Swapping FUN!!)
Now back to our regularly scheduled program...

Let me explain generally what we're doing with the pictures so you have a framework of where we're going. What we're doing is using simple code to set up invisible rows and columns kind of like a spread sheet, then putting each picture into it's own "square" called a cell. This orders them into a horizontal space so they look lined up! Doing this is called setting up a table. The whole set of cells makes up our table. The code is relatively simple and there's two ways we can go about using this code to it's best advantage. To decide what way to go, answer this question...
  1. Do you want to add a caption like a title or comment to each picture that you're lining up?
  2. Do you just want to line up a bunch of pictures, one after the other, keeping it absolutely simple?
If you don't want or need any captions that center themselves under each photo and all you want is for your pictures to line up horizontally, then you can put in the code yourself, it's pretty simple. What I do is keep a text file that has the basic code copied to it so all I have to do is copy it and add the specific details of each picture into their own "cell" in the "table". Easy Peasy! Here is what the basic code looks like.



Let me explain each piece of this code, then when I show you the more complicated one, you'll understand what you're seeing. First, the "center" does just that, centers our pictures. Remember from the previous Blogging 101 series', we need them in pairs with < > around them, we first tell blogger we want to center all that comes next by saying center (with < > around it), then at the end of what we want centered we put it's pair, telling blogger to STOP centering with /center (with < > around it), right? OK. (Please also remember this  applies to many pieces of code, it mostly comes in pairs, start doing something, then stop doing something!)

The next part, table, tells blogger we're gonna make a table, notice it's pair is at the END of the sequence too with /table. Right after that is cellspacing, this can be set at whatever you want, from 0 to like 100 (although that would put some HUGE space between pictures), that's what cellspacing does, it puts space between each cell of the table we're creating. For instance, with the horizontal pictures above, I used a cellspacing of 10, sometimes I want a wider space so I'll use 20. Here, I want to mention that there's a similar code bit called cellpadding, it works similarly, you can use either or both. I tell you about it now because the more complicated code that blogger creates for us, (that I'll tell you about below soon), uses both padding and spacing. Cellpadding puts padding within each cell, between the picture and the cell's border. Cellspacing puts spacing around EACH cell. (Don't worry if you're confused, just put a number from 1-20 in either cellpadding or cellspacing until you get the distance you want between the pictures.)


This is a visual example of cellpadding!
Each cell has padding around it.
This is a visual example of cellspacing!
A space is added between cells .
Here's why I tend to use cellspacinging, if you look closely, comparing the two sets of pictures, you'll notice that the names (Albert Einstein, Author Unknown) are different distances from their requisite picture. With cellspacing, it puts the space ALL THE WAY AROUND the picture & caption, which keeps the caption close to the picture as opposed to cellpadding which tends to move the caption down.

Ok, onward...
Here's the code box again.

The next part is tbody, which tells blogger that next we're gonna be filling the body of the table with cells that we're going to create. Now into the nitty gritty of the code. We start with tr, which encompasses all the table cells, then the first td, which, in pairs, goes around each cell using < >. Notice that table, tbody, tr and td all have pairs of /table, /tbody, /tr and /td. These, if you remember from a previous Blogging 101 are called opening and closing tags. It's the opening and closing tag td that repeats with each cell. So, right after the opening tag td, we put the info for the first picture we want to see in our horizontal line. After putting in the picture info we use the closing /td tag, which closes that cell. We then put an opening td tag again, opening a new cell, saying we're adding another picture in this row, then add the picture info, then the closing /td tag cell. We continue until we can't fit more pictures across our blog post. (I'll talk about blog post width in a minute, let's just finish here...) Then, when we're finished adding pictures in a horizontal row we add all the requisite closing tags that go with our opening tags, so we're adding /tr, /tbody, /table and /center, all with the < > around each one.

Side Topic: Blog width and number of pictures you can get across a post.
My blog post section is about 600 pixels wide, some are more narrow, around 500-550 (they might have a sidebar on both the left and right side, making the post part narrower. Some are actually a little wider than 600. Your total width of pictures have to be at least 10-20 pixels smaller than your blog center width. Don't forget to include the cellpadding (or spacing) you add between each picture! For instance, if your blog post width is 600 and you want to have four pictures in a horizontal row, then each photo cannot be any wider then 140, assuming that you use only 5 cellpadding (which would be a total of 15 extra pixels added to the widths of the total width of pictures...

140+5(padding)+140+5(padding)+140+5(padding)+140=575 pixels

The great thing is that when you upload a picture to blogger and choose a size (I choose small usually) then blogger adds height and width functionality to the picture code for you! If you remember from previous Blogger 101 posts, you can tell blogger what width and height you'd like your pictures. So, choose whatever requisite width you've calculated will fit your blog and put that as the width, then you can calculate the height that will keep the ratio of height to width the same so the picture stays the same dimensions. (if this calculation is too complicated, you could try taking out the height= part and only changing the width, this should change the ratio as the width changes, although I've never tried it this way, lol, so don't quote me!)

Ok, back to the code...

So, let me show you what the code will look like with the two above pictures added where they should be added.


And this is what that code above will look like! (oh, and if you noticed, I tried using just the width code, and it WORKS, it changes the picture to the correct height ratio to go with that width.)

Now, if you don't understand the picture code that I added between the td and /td then you'll have to go back to Blogging 101 Part 1 & Part 2 to learn what you're looking at.

I'm going to go over the basic code one last time so when you see the complicated code you won't freak out, lol. Let me show you the basic code, in the most simple way, then you'll "see" what I see when I look at the jumble of code I'm about to show you.


There are several sections to the basic code. I've explained about Line 1 and Line 3, it's LINE 2 that we're really concerned about. This is what the basic code will look like when we have three pictures in a horizontal row. We're gonna start on the left orange arrow and move along, with up and down arrows, toward the right, explaining as we go. 

First we open our table, that's tr, then we open our first cell with td and put the image code (our picture #1) then we close that cell, /td. Then open cell two with td, put the image code (picture #2) then close our second cell, /td. Finally, we open the third cell with td, put the image code (picture #3) and close our third cell, /td. Don't forget to close the table now, with the /tr. No matter what other code is added around this basic code, it's still just a simple table with three cells. 

Now I want to teach you how to use the code that Blogger makes, no having to type in your own code, just moving code around, manipulating it's placement. Since you understand what you're looking at, this should make putting pictures in a row much easier and quicker than what you have to do above, making your own table.

So, imagine you open your new blank blog post and want to add a line of pictures horizontally across the screen. You want to do this easily, without having to build your own table. What you do is this...

  1. Center your cursor using the button in the header bar, it looks like a bunch of stripes, I've highlighted it in pink!
  2. Upload the first image you want in your row of pictures. It doesn't matter if it's from a URL or from your computer or some other way.
  3. Click the uploaded picture so it's highlighted. Choose "add caption" and type what you want in the caption. (later, if you don't want to use the captions, you don't have to use them. It's just that adding the caption adds the extra "table code". What blogger does is when you add a caption to a picture it makes a table with only one cell, putting one picture into that cell, and "attaching" a caption, which allows blogger to make sure the caption stays with the picture)
  4. Now, click just below that caption you've added and if you cursor isn't centered then start at #1, if it is centered then start at #2 of this list.
  5. Continue until you have enough photos in a vertical line that will fill the width of your post (about a total of 550 pixels). This is usually three or four pictures unless their seriously small.
  6. Now, click the HTML button on the very left of the header bar, next to the arrows. You're gonna now be able to see the code for the pictures you just added in your post. This is what you'll see...

Don't panic when you look at the extra code in this box, you'll get to mostly ignore it because it's unimportant. Let me show you what this code above would look like...
Einstein
Nice People
Sharing is Caring
Now, we want to manipulate the code by dragging it around so the pictures will be horizontally aligned with the captions under the correct image. Below is the same code as above, just highlighted to teach you what we want to highlight and drag around.


The pink parts are the three coded pictures each in their own cell & table and the blue parts are the captions, also each in their own cell (a special kind of cell for captions). All the rest of the (black) code is making individual tables with each picture/caption combo. Notice that it's totally similar to the code I showed you that puts the pictures in a line, but each picture is in a table of one! We want to use this fact, use the first picture's table but add two more cells to it, for a total of three cells for our three pictures. Remember, each cell is opened by td and closed by /td with < > around each tag. If you notice, each pink section has it's requisite opening and closing td tag. Each caption, in blue, has it's own specially classed td cell that "goes" with the picture cell. Don't worry, separating the picture cells and the caption cells doesn't "break" anything, in fact, once we move all the pink sections to make lined up pictures, we can erase all the other code, if you don't want the captions.

We will be working with the pink parts first, then the blue parts. Let me go over what we're gonna do generally then I'll try and show you visually. We're going to use the first pink section of code as the place we build the entire horizontal line of pictures. We will be moving the other two pink parts up so they sit right after the first pink section. Then we'll do the same with the blue parts, putting the second and third blue sections right after the first blue section. Basically we'll be eliminating the second and third picture's non highlighted black text. We only need one set of tr and /tr tags for the pictures and one set of tr and /tr tags for the captions. The great thing is that we can just highlight sections of code and carefully drag them to the right place. No copy/pasting or typing new code!

So, lets start with the picture of the code again, but I'll highlight the first move...


What we're doing first is moving section B to right after the /td of section A. (NOTE: I can't put the < > before & after the /td as I type because that tells blogger it's a closing tag and then blogger looks for the opening tag! This applies to ALL tags I type. That's why code is either a photograph or within a textbox.)

Ok, so we highlight section B, just like I've shown you in pink, then click and HOLD down the mouse button and drag the code so it's right after the /td at A. Now "drop" the second pink section B. When you're moving text, you'll notice that Blogger will put a straight vertical line like this...  |   exactly where your code will go if you drop it. As you drag your code, the vertical cursor moves with you. We want that vertical line to be right after the /td (with no extra space) where A ends. OK?

We now want to do the exact same thing with the third pink part, let me show you what the code looks like after B is moved to right after A below.


Notice that A/B are now together, I'm pointing to A's closing cell tag /td and B's opening tag td. We now want to move C to the END of B, again, right after where B's closing /td tag is. Highlight and drag C just as I told you to drag B. You will notice that after B is moved that all the black code is left, same thing will happen with moving C. Soon, we'll go "rescue" the captions (if you want to use them!). This is what your code will look like AFTER you move C.


Okie Dokie Pokie! Now we've done the major moving, putting A, B & C in the SAME table.  Notice that I've highlighted the captions for each picture. Look close, you'll see #1 says "Einstein", #2 says "Nice People" and #3 says "Sharing is Caring". If you want the captions under the picture they went with, all you have to do is move #2 and #3 to the back of #1, just like we did when we put our pictures A, B & C together.

(If you don't want any captions and were only using them to add the necessary code then you need to delete them and all the other superfluous code also. You have to eliminate all the blue captions and also 99% of the black code around them. The only black code we need to keep that's below the pink part is the closing /tr right after the pink part and the closing /tbody and /table that's just after the first blue caption. Remember, tags come in pairs and we have opening tags tbody and table above the pink part so we need to close our tags BELOW the pink part.)

But, let's assume we want those cute captions that go under each picture...

We want to highlight #2 and drag it to the end of #1, right after it's closing /td. Then highlight #3 and drag it to the end of #2, right after it's closing /td. This is what it'll all look like AFTER you move #2 & #3 so they snug up with #1 (just like we did with the pictures).


The pink part is the three picture cells making our pictures line up within the table. The blue part is the three captions that will now line themselves up below their own picture. The green part is the extra code that is left over after we move the pictures A, B & C and the captions #1, #2 & #3. This code must be deleted, it's the code that was making a table for each photo, to keep the picture and caption together when they were in a vertical line (in the beginning, before we started moving stuff.) If you notice, the green is made up of opening and closing tr's, tbody's, tables (with extra code that you don't need to understand, lol) etcetera. 

You need to delete the GREEN, but make SURE you leave the closing tags /tbody and /table that are right under the blue captions, they close your table, remember? Guess what? You're nearly done, all the hard part is DONE. All we have to do is put a number in for the cellspacing!! If you have a lot of pics that you're trying to squeeze into a line, then use a small number like 2, but if you have more space to use up then use 10 or so. You can play and see what number makes the space you want. Oh, and to truly see what space you'll get, you have to preview your page which is beside SAVE above the header tools. 

The other thing I want to mention is that your code may be wider or narrower and therefore the "cuts" to start a new line may break at different places. Just see the basic code then it doesn't matter where the line breaks happen. Here's what our completed horizontally aligned pictures with captions look like...
EinsteinNice PeopleSharing is Caring
We've finished! Whew, that was some serious thinking work! Did you get it? I sure hope so! Because I couldn't come up with a better way to teach it. I know I used a lot of words but I wanted to make sure EVERYONE understood.

**One Last Note: One of the comments I received about this post mentioned the size of the pictures you can use to put in a row. I should have made that clear, the pictures DON'T have to be the same size, they can totally be a mix of long and wide and tall and small. I used three the same size because they LOOK better, lol. Hey, life if a series of looking good!

I'll be back soon with my artwork for this week's APR challenge (rainbow), until then, be good to one another and enjoy your Spring week.

Best,

P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)




Pin It
Related Posts with Thumbnails
blog links
Arts blog
 
^ Scroll to Top