Tutorials

Vehicle graphic detail

Vehicle graphic detail

Eloine

After 40+ years Chapman’s Dog Grooming of Antioch is going mobile! Here is a closeup of part of the graphics I am doing for the mobile grooming vehicle.

The image of the dog is high resolution so it’s enough for printing on the door of the vehicle and the grass and bubbles were created in Adobe Illustrator so they could be scaled at various sizes. It’s not complete yet but I will be posting updates as the project moves along. I have to credit tutsplus for the wonderful tutorial on how to create realistic bubbles!.

How to make an RSS feed with an easy subscribe link

How to make an RSS feed with an easy subscribe link

Eloine

Getting content spread around!

Making an RSS feed for my website seemed like a very simple concept but when I tried to find informaiton on it I ran into a lot of problems. It seemed like everything I tried didn’t work. Welcome to the world of web development!

For a while I used google reader and shared static web pages through it using their RSS feed engine and then used feedburner to feed it back into our website. This allowed others to subscribe to our news section and know when we had new press releases.

In October of 2011 sometime it seems Google stopped that service and now to share things you must be a Google +1 user. Perhaps G+ is cool but to force that on people is not what I am looking for. I want an easy time for people to view my content without forcing them to make an account. So I needed a back up plan.

Simply put if you want an easy way to have an RSS feed from your site the simplest way is just have a blog. RSS is already built into it. But if you have a static HTML website and don’t want the blog format then there are a few more steps involved. Here I will tell you the steps I used to get it working. It’s not automatic but it does give you more control in choosing what is shared and what isn’t.

A demo of what my goal was is to have a static HTML page that feeds into a news page.

Then if someone doesn’t want to keep checking this page for new news releases they can hit the subscribe button where they have a huge choice of ways to subscribe from email to any number of web based web browsers: http://feeds.feedburner.com/losmedanos/NVrV

[box] Step 1[/box]

You need to write an XML file that will be your RSS engine. I used feedvalidator to help me out on this because without that validation I couldn’t complete the other steps and my feed wouldn’t work. At first everything wasn’t right but on each point it gave me hints on how to fix it and finnally I got the green light for success!

Use a text editor or web editor of choice and put all these items in the following order beginning with your heading:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

Then you start your channel and for some reason unknown to me you have to put the href in for the address of the feed you are writing. I am not sure why but without it it doesn’t work. In this case the full URL ending with lmcnews.xml is the path for my XML feed that we are writing. Make sure you use your own address:

   <channel>
   <atom:link href="http://www.losmedanos.edu/news/lmcnews.xml"
    rel="self" type="application/rss+xml" />

Give your page a short title that means something because it will be picked up later:

           <title>lmcnews</title>

The link can be anything you want your title to link to. In this case I have it going back to where the list will show up

      <link>http://www.losmedanos.edu/news</link>

I filled in description but I am not using it. Later when you create your pretty feed with feedburner and with buzzboost you’ll have the option to turn these things on or off:

      <description>News from Los Medanos College</description>

Need to define the language otherwise the reader doesn’t know how to handle it:

      <language>en-us</language>

They seem to want to know who is responsible

      <managingEditor>(insert your email address here) (and author name)</managingEditor>

The date format was a bit of a bug for me but I just kept messing with it until I didn’t get errors anymore. This is the date that you would change every time you add a new entry so the reader knows what is new to grab.

      <lastBuildDate>17 Nov 2011 00:00:01 GMT</lastBuildDate>

This is another element that I am not using but it’s in here in case I later decide to separate out my feeds by a subject:

      <category>news</category>

Then comes your items where you can just add the newest item on the top of the last one enclosed in the <item> tag. I don’t have the description filled in but this is where you might have an excerpt of  your article for more information than just the title. The pubDate is of course when you want the article to show. I had to put some past articles up so I just gave them the date of the of the article and started the time at midnight.

The GUID tag must be in there for the reader to know the difference between each article. I’ve read there is no syntax for this but each one must be different. In my experience the feed reader read it versus the actual link tag so to be on the safe side I have made these both have the same address rather than giving it a number or a name that is unique.

      <item>
         <title>California Connects provides new group of  
         LMC's MESA students with laptops, software and Internet access 
         to train others in their communities</title>
         <link>http://www.losmedanos.edu/news/comp2011.asp</link>
         <description></description>
         <pubDate>17 Nov 2011 00:00:01 GMT</pubDate>
	<guid>http://www.losmedanos.edu/news/comp2011.asp</guid>
      </item>

Lastly close your XML with these two tags

</channel> </rss>

There are a number of free RSS creators out there if you a do a google search for RSS generator. I tried a few of them but found that I had to modify the output anyway to get it the feed to work write so hopefully the above is enough to get you started on doing it yourself.

[box] Step 2[/box]

The above text is for a simple feed that someone can subscribe to in the browser and it looks like this:
http://www.losmedanos.edu/news/lmcnews.xml

However if you want to gain broader exposure then sign up for a feed burner account.

Feedburner of course was acquired by google a little while back and like a lot of good things on the internet and they are changing how it works. At the time of writing this post they haven’t quite switched to their beta version. So until then you can just paste in the address of your XML file and then it will tell you if your feed is valid or not. If you have success then follow the rest of the instructions for adding functionality to your feed. You will be given a new address that people can use to subscribe to your feed.

But you aren’t done yet!

[box] Step 3[/box]

One last step is to click on the “Publicize” tab and the “buzzboost” where you can republish your feed as HTML right back into your site. Also on the that tab is a link for “Email Subscriptions” just in case people like to subscribe the old fashioned way with pain old email!

NOTE that if you republish your feed as HTML you can control how it looks by styling with CSS. So if for example you don’t like the bullets you can delete them. Google support documents this pretty well.

What you won’t find in their help page is how to get rid of their logo and you do that by putting this bit of code in your CSS:

#creditfooter {display: none;}

I’m sure there are other ways to do all of the above but so far this is the best way I have found for the situation I am of managing a website without an RSS engine already built in. Any other ideas I would love to hear!

How to draw a vector-based jack o’lantern in Photoshop with shape layers

How to draw a vector-based jack o’lantern in Photoshop with shape layers

Eloine

Happy Pumpkin!

Since it’s season appropriate I thought I would share what I taught my photoshop class on how to make a Jack o’lantern using the pen tool and shape layers.

Below is what the final image looks like that for the most part would scalable as a vector based graphic before I turned it into a bitmaped image for display purposes here.

[button link=”http://www.eloine.com/ex/finalWpumpkin.psd” color=”orange”] Download layered PSD[/button]
vector based pumpkin

Start with a outline of what you want to do. Below is the sketch I started with and took a picture with my cell phone to get it into Photoshop.

Then select the pen tool and make sure the first icon for shape layer is selected. Then I traced around the outside of pumpkin and made sure my fill color was a dark orange. I used #964b09

To get the shadow effect I click the layer Fx button at the bottom of the layers palette and select inner shadow and make sure your settings look pretty close to mine. (Click image to make bigger)

Duplicate this layer to make a copy of your shape you just made and then go to  Edit > Free Transform Path.  This will make a bounding box around your duplicated object. Use your mouse and click and drag in from the left and the right to shrink the second oval. Repeat the process until you get to the center of the pumpkin.

You should have something close to the image below. If some of the shapes don’t look right just use the pen tool and then press  your control key and make sure your curser looks like a hollow arrow (called the direct selection tool). Then touch the edge of the path you created to activate the control points that you can move or bend.

After you are satisfied turn off all the layers that are the pumpkin so you can see the sketch and make a new layer above layers of the pumpkin and name it “face”

Using the shape tool outline the pumpkin eyes, not and mouth and make sure your fill color is white. Then duplicate my settings below for  the inner shadow replicate my settings by using this color #812c03 (Click image to make bigger)

 

For the gradient overlay your going to create a custom gradient with the colors #fff4c5, #ffdd4d and #6c1501 (Click image to make bigger)

 

After you finish with the pumpkin and it’s face don’t forget to make a little shape for the stem and put that on the layer beneath everything else.

When all done group all your layers together by clicking the folder icon at the base of the layers panel and dragging the layers in there. This is so you can flip or transform or apply various options to all the layers at once.

I made a new file and then applied a radial gradient of an orange yellow to a very dark orange for the glowing sun or moon or whatever that is. Then with the pen tool I made a shape filled with black that the pumpkin would sit on.

 

Below is the pumpkin with a new layer on top with the blend mode set to overlay and using a soft white brush I painted in some glow and then a black brush I painted in some shadows.

 

When I turn off all the layers but the one mentioned above you can see what I did to create the glow and shadow over the transparent area represented by the dark checkerboard pattern.

Lastly I thought this image needed a spooky tree. I could have drawn it but being the Fall it was so much easier just to shoot a picture of a barren old branch.

 

I then went to image > color range  and shift + clicked  areas of the sky to make a selection of everything else but the branches. (click image to make larger)

 

I then when to select > inverse  selection to select only the branches. I pasted that into Adobe Illustrator and then told it to trance the image. I could have done that with Photoshop but it takes up a lot of RAM because it’s not as clean a trace. The other option would be just to fill this area with solid black to make a silhouette and that would have achieved the same appearance. It just wouldn’t have been scalable. That is an option though if you don’t have Adobe Illustrator.

Next just choose the blend mode of darken  to make sure none of the white shows over the orange sky and only the black.

 

 

Lastly I used brush number 134 and varied it’s size, scatter  and turned off color dynamics in brush presets to make the black grass.

I hope you enjoyed the tutorial and can find it useful when making other things!

How to draw a cute ladybug in Photoshop

How to draw a cute ladybug in Photoshop

Eloine

 

Step by step

LadybugWhen drawing from scratch I usually  draw my little cartoons with a combination of Adobe Illustrator and Photoshop but I decided to not stick with what was familiar to me and try to do the whole drawing in just photoshop. I used mostly used shape layers tracing a drawing that I sketched out on paper. I will show you below the steps from inspiration to completion on how to create this bug on the right. Hopefully you can take these steps and create your own cute little creature using these techniques.

Sketching the idea

Step 1

I still have trouble drawing on screen. There is nothing wrong with it if you can do it but I like to rough out an idea on paper and then scan or take a photo of the basic idea using that as a reference.

Use elipse tool to draw the body

Step 2

After you have imported the image select the Ellipse tool or press the U key and make a circle for the body. This will be the most bottom layer above the layer that is being traced.

Use anchors to pull the shape out

Step 3

Not that this is not a scientific drawing but a lady bug body isn’t perfectly round so to give it some identity I used my Direct Selection Tool (A) to click the path of the circle and this revealed the anchor point with the various handle bars. I could then stretch them to reshape the bottom of the bug.

In addition I clicked on layers style icon at the bottom of the layers palette to bring up the gradient overlay. I thought a dark brown to black radial blend would give it an illusion of depth by giving it a slight shadow under the area where the wings will be.

Use the pen took to create a shape layer

Step 4

Next I selected the pen tool and made sure that a new shape layer was selected versus the paths. Then I traced the outline of the drawing for the first wing noting that one wing would overlap the other. After creating the initial curves I can then click on each anchor point and adjust the curve by rotating the control bars associated with the anchor points as mentioned in step three.

click on layer effect to add both inner and outer shadow

Step 5

I can now apply a layer FX by selecting a slight inner shadow where the wing curves and a drop shadow where the wing rests on the body.

Make one wing overlap the other

Step 6

Draw the second wing the same as above and then position it underneath the left wing so that one shadow appears to overlap the other.

Make each shape and group them together

Step 7

I traced the shape of one foot with the pen tool and then duplicated and stretched each foot by hitting the transform tool to match the drawing. This will make 6 duplicate layers so it’s best to group them all in one folder called foot by clicking the folder icon at the bottom of the layers pallet.

Use the pen tool to create the legs

Step 8

I created each angle of the leg by using the line tool in the shape block of the tool box. I could have joined each segment into one but I like to keep each section editable. Again I grouped these layers together as well.

Use elipse too to create the head and add a gradient overlay for the face shine

Step 9

Using the ellipse too I matched the head shape and put it on the layer below the wing. I added a gray to black gradient overlay to the face so the smile would show and add a suggestion that light is coming up from the white ground below.

Draw a circle filled with gray for the eye shadow depth and stroke it

Step 10

Make a circle for the eye and fill with gray and a stroke of black. This will be the outer part of the eye.

Add two more elipse shapes with no stroke, one white and one black

Step 11

Add a white circle slightly smaller and move it up so the outline is thicker on the bottom than on the top.

Add a small dot for the pupil.

Add the right eye and change the layer stack order. Draw a custom shape for the mouth.

Step 12

Duplicate layer with the outlined eye and shrink (transform) it a little to make it look like it’s further away and move the layer order to below the head.

 

Combonation of the shape layer and layer mask to create a group of dots.

Step 13

Add more circles for the dots on the bug with the elipse tool.

For the dot that goes over the right edge I made a selection of the right wing and inverted the selection. Then applied it as a layer mask to visually cut off the edge of the dot. It’s still there if you get rid of the layer mask but hidden from view.

A little highlight and curly antenna and we are almost done!

Step 14

Lastly a little shine suggestion with a shape of white at 50% transparency on top layer.

The curly antenna was drawn with the pen tool as a path and then stroked as a path.

Lastly I decided this would be a cute little accent for my RSS feeds as my follow me bug. I used the custom speech bubble shape and smooshed it around with the direct selection tool. The font I used is an old one called giddyup std. I liked how it matched her little antenna!

 

Floating in the clouds

Floating in the clouds

Eloine

Ever want to put type in a cloud in photoshop?

In this tutorial I am going to show you how to make your text float in a cloud but really you could do this with any object.

  1. Start with a good photo of some clouds or download the source files at the end of this post to try it for yourself. Make sure there are areas of the clouds that are very white so you can get it to wrap around better. I played with the level in the photo to adjust for this slightly.
  2. Make sure that your clouds are on the bottom layer in photoshop. This will work with CS4 as well at CS5. I am not sure about CS3.
  3. Click the T tool and type something. This will make a new layer of type but you won’t see any clouds around it yet. 🙂
  4. The next step is to couple click on the type layer to bring up the layer styles. Make sure the settings looks follows with slight adjustments on the slider for the effect.
  5. The most important thing is the area I have circled above to blend the underlying layer if. You’ll need to split that white point slider by holding down the option key on a Mac or the Alt key on the PC and you can split the slider. Notice as you slide the lighter areas of the cloud will waft around the type.
  6. Perhaps you like the effect but some portion is covered up more than you would like. Your not done then so you can do a little more adjusting by duplicating your type layer and making a mask of only what you want to show through.
  7. After duplicating the layer and making sure it’s selected click the “layer mask” icon in the layers palette.
  8. Fill the layer mask with black and then select a soft brush that has white as the foreground color and paint on the mask the parts of the type that you would like to reappear.
    Download the source file here. (3.4 mb)