Wednesday, July 8, 2009

Christian Greeting Card Logo II

After some feedback on my Christian Greeting card logo I have decided to change it. Too many people were thinking the apartment abbreviation - Apt. 3 - was the word "apt". So I went back to the drawing board and thought about the whole thing. I scrapped the name and came up with a new one, then I also incorporated my Fatbirds. Here is the rough...



I really like this new one, because it does two things: it signifies that believers are of the same flock (with the name) and it also ties in with my FatBirds.

So what do y'all think? Let me know.

Read More...

Wednesday, June 24, 2009

Christian T-Shirt Design: One Voice

I was speaking to a young man named Mordecai the other day (he runs a youth group at his church in South America) and he mentioned he was trying to create a logo design for some t-shirts. He said he was having trouble coming up with the design for the shirts and so I asked him if he wanted me to take a stab at it. He said sure.

He explained the idea to me, "We live in a small town with 17 different denominations, so we are working together with all the churches to unite the youth under a single movement, and to reach them and tell them about Jesus. We were thinking of the name 'ECHO', which came from the thought that if we are broadcasting Gods love they will feel it!"

Of course, the "echo" idea didn't make it and instead I started looking for a verse from the bible that would be close to what they were trying to do. I found one in John 10:16, "And other sheep I have which are not of this fold; them also I must bring, and they will hear My voice; and there will be one flock and one shepherd."

From this verse I came up with the name One Voice, and from that came the design you see below (done in Illustrator)...



Since this is going to be printed artwork I kept the colors and the design simple. He is very pleased with this design and now we're just waiting for his church to decide on it. It would be awesome to have this design on t-shirts for these young people, spreading the message in their area about our Lord Jesus Christ.

I hope, in His name, it happens. Amen.

Read More...

Sunday, June 21, 2009

My Very Own Christian Greeting Cards

I'm working on creating my own Christian greeting cards which will incorporate the Fatbirds in various scenes with accompanying scriptures from the bible. This idea was given to me by the wife of a designer friend who one day suggested that I take my FatBirds and do something with them.

Here is my first rough draft of the logo for my greeting card line ...


I took the idea for the name from my apartment number, which is also considered the number for the new man. "Therefore, if anyone is in Christ, he is a new creation; old things have passed away; behold, all things have become new." (2 Corinthians 5:17 NKJV)

I always seem to get apartment three wherever I go. Not all the time, but enough to gender the idea. I will be working on making some greeting cards so I will post a couple of those when I get them finished.

Read More...

Saturday, June 20, 2009

Creating My Resume in PDF Format

My dream job? To get up every morning and walk five feet to work.

Being self-taught in everything with no schooling I have had to become as creative in pitching myself as I do when I design something. Recently I had an idea to start searching Google for graphic design jobs. This presented a challenge, because without any schooling (which most design places require) I had to come up with something else to grab their attention.

I chewed on this for a while and then the other day I received a suggestion to make a PDF sampler of some of my work. Since most places want both a sampling of your work and a resume I thought to include both in one PDF to make things simple. Now there is a way to make a multi-page PDF with Illustrator CS, but I opted for creating each page separately and then using Acrobat to produce one PDF file.

The basic idea of a sampler is just to give the potential employer a sampling of your work. I decided to use three samples (for Logos, Characters, and Illustration) with a brief description under each one. It's vital to keep to the particulars of your own talent (or talents), so spend some time thinking about what you are best at and then work on highlighting those skills.

Another thing to consider is the program you created the artwork with. Most all designs done in Photoshop are either saved as JPEGs, GIFs, or PNGs. These formats do not render well in a PDF. They look blurry our pixelated. Which is not good for a sampler or even a resume. I decided to pick the pieces I designed in Illustrator, since these would be vector based and would come out looking clean and professional in the final PDF.

Now you may be wondering "Why didn't he just use InDesign?" Well, truth be told, I'm not very good with that program. Also, I do not have Microsoft Word, which is the main recommended program for writing your resume. Instead I used OpenOffice. The new version has a PDF conversion feature - just click the button and your file is automatically rendered as a PDF. Another big bonus with OpenOffice is it's free.

So for the sampler I created that in Illustrator and for the resume I created that in OpenOffice and then converted that to a PDF, saving both files in one location. Once this was done I just opened Acrobat (version 7) and went to File > Create PDF > From Multiple Files... I then browsed to where I saved my two files and chose each one, then clicked "Done" and Acrobat created one PDF out of both of them.

Once the main PDF was done I then opened it in Acrobat and went to File > Reduce File Size. You can do this two times if you want, but once was sufficient for me. This action reduced the PDF file size from 2.40MB to 1.82MB. Not a big reduction, but every little bit helps.

I then sent this PDF to myself in an email so I could see how it looked and how long it took to download from the server.

You may view the finished PDF of my resume here.

Not bad, eh? Now maybe you have enough information to try your own PDF resume. You don't have to make them both in one PDF, but I found it was easier for me. This way I only have to send potential employers one file, instead of two. If you have any questions just ask them in the comments section.

Read More...

Sunday, June 7, 2009

In God's Hands

Dear Visitors and Subscribers,

It's been a while since I posted anything new and it has been bothering me. So I wanted to write and let you all know what's been going on. You have all been great in visiting my site, subscribing, and making comments, and I appreciate it all very much.

Unfortunately, I lost my job last November and my unemployment runs out this coming January and things have been getting tight here. This is the reason I have not been around much and why I haven't written anything new. Being in a situation like this can suck the creativity out of you and it takes an effort just to write a good sentence.

I am not sure what is going to happen, but I thank the Lord for giving me the opportunity to share what I know with others through this blog. Whether I continue to do this or not is up to Him. If you want you can say a prayer for me, because I could certainly use them.

In the meantime I want to thank all of you for making TBODC into what it is today. I never imagined this site would go anywhere when I first started it and it is a comfort to know it has helped and inspired so many people.

God bless all of you.

Read More...

Saturday, February 28, 2009

Stylish Comments!

In one of my other tutorials, The Making of TBODC Part 4, I showed how I stylized my comment section using the code shared by Faisal Admar. I didn't go into great detail about how I did this, other than just showing you were to place the code in your template. This time I will delve a little deeper into the matter.

Note: As always my tutorials are based on my experience with my own Thisaway template. Other templates will vary in their layout and code structure so please keep this in mind.

And so, on with the show...

To begin with here is the code that Faisal shared from my previous tutorial...
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: white;
}

#comments-block {
margin:0em;
line-height:1.6em;
background: #999;
color: black;
padding:1em;
}

#comments-block .comment-author {
margin:.5em 0;
}

#comments-block .comment-body {
margin:.25em 0 0;
background: #999;
}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0 0 .75em;
background: #999;
}

.deleted-comment {
font-style:italic;
color:gray;
}
If you want to see what this looks like in your comment area then just go to Layout > Edit HTML, search your template code for "comments h4" and then paste all of Faisal's code over that one. Save your template and check out how it looks by clicking on your comments in one of your posts. You will want to revisit the code in your template and play around with the settings (colors, positioning, etc.) to suit your own tastes.

Personally I wanted something more than what this code offered, but having Faisal's code to start with as a base I began to tweak it. Below is the complete comment code that I eventually developed for my blog...
/* Custom Comment Form */
#comments h4 {
margin: 1em 0;
font-weight: bold;
line-height: 1.4em;
color: #4F3314;
}

#comments-block {
margin:0em;
line-height:1.6em;
background: #E3E5B6;
color: black;
padding: 1em;
border:1px solid #A6522B;
}

#comments-block .comment-author {margin:.5em 0;}

#comments-block .comment-body {margin:.25em 0 0; background: #FEF6D2;}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #FEF6D2 url(http://dougcloud.net/show/commentquote.gif) no-repeat top left;
}

.deleted-comment {
font-style:italic;
color:gray;
}
I'd seen on some other blogs how the comments that visitors made were contained within a speech balloon and so I wanted to incorporate this into my own comments section.

First I had to create the image for the "speech balloon" in Photoshop. The image has to be the same width as the comment block, which is the main area where people's comments are displayed. To make the image the exact width I simply took a screen shot of my comments section on my blog and pasted that into Photoshop as a new document. I then created a new layer and, using the Rectangular Marquee Tool, drew a rectangle the width of the comment block and filled it with the color I wanted.



Next on the same layer as my speech balloon I drew a small triangle shape just under the name of the commenter using the Polygonal Lasso Tool and then filled that with the same color as the body of the speech balloon.



Finally I created another layer, moved it under the speech balloon layer, and then drew another rectangle the same width as the comment block and filled it with my background color. I then merged these two layers together to form the image I would use in the comment code.



Next I uploaded the image to my server and then inserted the URL into the proper place in my code. I also included the Hex value of the color which I used for the speech balloon and inserted it into the "background" attribute...
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #FEF6D2 url(http://dougcloud.net/show/commentquote.gif) no-repeat top left;
}
The padding attributes in the code will adjust the image within the comment block and because I gave it a background color the speech balloon will expand to contain people's comments...



You will have to experiment with these values to get the right alignment on your own blog. Also, the colors you use will depend on what colors you have chosen for your own comments section. You may use my code or Faisal's to see which one works for you or if you're feeling bold you can try making your own.

And that's it! I hope I have inspired you to style up your own comment area. And if you have any questions please leave them in my own (stylish) comments section.

Have fun!

Read More...

Saturday, February 21, 2009

Posting In Style!

Working on my mom's blog OldDigger I have found that many of the ladies that frequent her blog have questions about the arrangement of the photos and the text that my mom uses on her post pages. So in this tutorial I will explain how I do this using divs and div styles. I've explained about divs before in a previous tutorial Customized Feedburner Subscription Box. You can check out that tutorial to learn more about them.

Note: As always my tutorials are based on my experience with my own Thisaway template. Other templates will vary in their layout and code structure so please keep this in mind.

And so ... let's get stylish, shall we?

I use divs for my mom's images (like her photos and cards) because you can assign inline styles to them to align text and images, add space between your typed lines, and padding. For example, on my mom's content pages I use the following code to contain her posts...
<div style="text-align: justify; padding-bottom: 20px; line-height: 150%;"></div>
This code has a style attached which justifies the text (text-align: justify;), gives a 20 pixel padding to the bottom of the posts (padding-bottom: 20px;), and adds some additional spacing between the typed lines (line-height: 150%;).

This makes the posts nice and neat looking. To make this work you first need to add the above code to your posts before you begin to write anything. To do this just go to your Create New Post screen and click the Edit HTML tab...



Now paste the div code from above into the window.



Once you've done that then - while you are still in the HTML window - place your pointer in between the div tags, like so...



Now begin by typing a few words, for example...
<div style="text-align: justify; padding-bottom: 20px; line-height: 150%;">Start typing your post here....</div>
After you've typed a few words you can switch to the Compose tab and finish writing your post in that window. The reason you need to start out writing your post in the HTML view between the two div tags (before switching to Compose view) is so that your whole post will then be contained within this one div.



Now if you want this div code to be there every time you create a new post instead of having to paste it there each time, then you can add it to your post template. To do this go to your Settings tab and then click on Formatting. Scroll to the bottom of the page until you see "Post Template" and then just paste the div code into the box there and click the orange Save Settings button.



Now the div code will be there in your Edit HTML window each time you create a new post. To insert images within a post I use individual div tags for each one. I do this because I want the images to be centered within the content of the post and using a div with a style of "text-align: center" accomplishes this nicely. For example, say I wanted to add an image within the post above, I would click on the Edit HTML tab and insert a div to contain that image, like so...
<div style="text-align: justify; padding-bottom: 20px; line-height: 150%;">Hello and welcome to my blog. My name is Margaret Cloud and I am 75 years old. I live in Ferrysburg, Michigan with my husband Charles.

<div style="text-align: center;"><img src="http://dougcloud.net/show/momdad.jpg" /></div>

We have been married 49 years and have two sons Douglas and Ronald. We also have two ferrets named Dusty and Storm and a dog named Willow. I love planting things in my yard, feeding my birds, and blogging. Thank you for stopping by!</div>
This would end up looking like this...

-----------------------

Hello and welcome to my blog. My name is Margaret Cloud and I am 75 years old. I live in Ferrysburg, Michigan with my husband Charles.


We have been married 49 years and have two sons Douglas and Ronald. We also have two ferrets named Dusty and Storm and a dog named Willow. I love planting things in my yard, feeding my birds, and blogging. Thank you for stopping by!

-----------------------
Now if you want both the text and the images to be centered then all you have to do is change the alignment in the main div style, like so....
<div style="text-align: center; padding-bottom: 20px; line-height: 150%;"></div>
This will center everything in the post and then you can just add your images using the standard "img" code...
<div style="text-align: center; padding-bottom: 20px; line-height: 150%;">Hello and welcome to my blog. My name is Margaret Cloud and I am 75 years old. I live in Ferrysburg, Michigan with my husband Charles.

<img src="http://dougcloud.net/show/momdad.jpg">

We have been married 49 years and have two sons Douglas and Ronald. We also have two ferrets named Dusty and Storm and a dog named Willow. I love planting things in my yard, feeding my birds, and blogging. Thank you for stopping by!</div>
To see how this looks you can check out this page on my mom's blog where I've included many of her old greeting cards.

Hopefully this tutorial has been helpful for you so you can make your posts more stylish now. As always, if you have any questions or suggestions please let me know by leaving them in the comments.

Have fun!

Read More...