Johnny Saturn

Hi, Folks!

No Tech Thursday today.  It will be picking up next Thursday where it left off, have no fear.

I’m on Twitter now at http://twitter.com/SStory, so feel free interact with me there.  It’s new, it’s different, and it’s the Big Thing until the next Big Thing comes along.

The end of the month is coming, and with it the end of the big Johnny Saturn 20% off sale.  If you haven’t taken advantage of it yet, now would be your opportunity!

Let me also remind you that this Saturday is the premiere of “Saturnday,” the beginning of serialized prose set in the world of Johnny Saturn and Spire City.  Each installment comes with a piece of original art, and all the stories fit directly into Johnny Saturn continuity.  These stories aren’t throwaways, either—they have solid information about the past, current goings-on, and future of Spire City!  And, it’s free—how cool is that?

Scott.

Web Wednesday No. 4

Hi, Folk!

This week, I’m going to touch on the subject of headers and footers.  These are among the easier things to modify in WordPress.

Once you’ve signed into WordPress and have arrived at your Dashboard, go to Design, then Theme Editor.  On the right hand column, under Templates, select Header.

Under <div id=”header”>, you can place any graphics that you want displayed at the top of the site.  In my own case, I put a typical html table with my logo, a secondary logo, and language for the Ad-Minister plugin.  It looks something like this:

<div id=”header”>

<table width=”974″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”272″ height=”95″><a href=”Your URL”><img src=”You logo graphic” /></a>

<h1><a href=”<?php echo get_settings(’home’); ?>”><?php bloginfo(’name’); ?></a></h1>

<div class=”description”><?php bloginfo(’description’); ?></div>

</td>

</td><td width=”234″>

<img src=”My second graphic”/>

</td>

 <td width=”468″><My language for Ad-Minister, or whatever type of graphic or banner tool you wish, such as a project wonderful advert>

 </tr>

</table>

</div>

The dimensions above are set for my site, you are more than welcome to modify them to fit your site’s needs.

Next up is the menu that is above your comic.  As it stands, the menu is set to repeat the menu on the side column, which is may be OK for you as is.  For me it wasn’t because I’ve got a lot of content on my site, and I could stand all the sub-pages and sub-sub-pages messing up my navigation bar and layout as people move about the site.  That’s what will happen if you leave it.  So, my best alternative was to pull all that “Echo function” type language out. 

The menu is underneath the header, and is labeled <div id=”menu”>.  In my case, the best approach was to replace the automatic echo function language with a simple table and html links of my own creation.

<div id=”menu”>

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

</tr>

</table>          

</div>

With this arrangement, you can put in as many or as few links as you wish and retain control over it.

What if you don’t like the size relationships of your header elements?  Some bars are too tall, or not wide enough, or whatever?  To change this about the header, you modify your Stylesheet, not the Header file. This too is accessed via Design and then Theme Editor, this time choosing Stylesheet.  The part of this document that covers your header is under /* THE HEADER */, while the part that covers your Navigation Bar is under /* THE MENU */ and then #menubar.

Before you begin altering your CSS code in the Stylesheet doc, make sure you have backed up your database and perhaps saved a copy of the site onto your hard drive.  It’s all too easy to screw up your site if you don’t know what you are doing.  Even if you are well used to CSS, you are still playing with code that someone else wrote, and mishaps can happen. 

Well, I’ve already written more than I intended, and I didn’t even get to footers.  There’s still a lot of fun stuff on the way, and I’ll get to that in future columns.

Scott.

“Zoom: Academy for Superheroes” is a kid’s movie and a Tim Allen vehicle. 

Overall, I enjoyed this movie, and I don’t feel as if I wasted my time watching it.  Basically, it was the Bad News Bears remade as a superhero movie.

Tim Allen seemed loveable and charismatic, like he normally does, and his comedic routines worked pretty well in the movie.  Courtney Cox played her character as a one note caricature, but that’s probably what the movie and director called for.  None of the four superhero kids really caught on with me, to be honest.

The shocker, for me, was Chevy Chase.  I hadn’t seen anything with him in a few years, and I was shocked to see how old he’d become.  I mean, I know that’s not his fault—we’ve all gotten older, right!  But this Chevy Chase seemed at odds with the young comedic actor in my memory.  Well, I guess that’s my problem, not his.  That having been said, I was not all that entertained by his physical comedy in this—maybe kids were, but not me. 

“Zoom: Academy for Superheroes” rates a solid C from me.

Imagine my shock and awe when Benita emailed this to me…

Random Thoughts Monday:

Hi, Folks!

I’ll be wrapping up “Johnny Saturn” no. 7 soon—more on that when I finish it.  Next month, we are going to unveil the sale of digital download JS titles, so that should be pretty cool.

So, the Bigfoot guys were hoaxers after all.  Turns out their Bigfoot body in the freezer was a rubber ape suit.  Seems like to me they could charged with fraud, interstate commerce laws, and a host of other illegalities.  It’s quite likely the two men will lose their jobs as a police officer and corrections officer.  Admittedly, I don’t care much one way or another whether Bigfoot exists—it’s not my bag, man—but the fact they hoaxed the national media into a bunch of attention just seems wrong.  They wouldn’t be the first people to do so, though…

So now it’s standard practice for Olympians to fake their ages, kick referees in the face, slander their rivals, and throw down medals and march off in a huff?  I haven’t watched the Olympics in years, and it’s a good thing that I don’t!  Sportsmanship is apparently on its death bed, and bad behavior from these national “heroes” is about as common as doping and performance enhancing drugs.  Could it all be as corrupt as the impression I get from reading headlines?  I don’t know—I won’t be watching the darn thing or it’s digitally pre-recorded and enhanced ceremonies.

Benita and I attended the Alice Cooper concert in Indianapolis last night.  I enjoyed the show because I’ve been a big fan of Mr. Cooper for years, and he managed to fit almost every one of his classic songs into the act.  Benita was mildly entertained up until the point where Cooper play-acted as if he were beating a woman (a blow up doll) during “Welcome to My Nightmare.”  That part bothered me, especially when it led into “Only Women Bleed” where Cooper than acted as if beating one of the dancers (coincidentally one of his real life daughters).  I wrote it all off as theatrics and Alice playing a role for the songs, but in retrospect I’m not so pleased with it either.  As Benita explained, half the audience was literate and smart enough to understand that Cooper was playing a part and challenging our sensibilities; the other half was simply cheering for mock violence against women.  This is a black mark against what would have otherwise been a Grade A concert.

I just watched “V for Vendetta,” and I thought it was a moving film.  I’m not writing a review for it yet, because I have not read the graphic novel and I believe I should.  Usually I wouldn’t care about reading the novel one way or another, and I would simply take the movie as it is, but “V for Vendetta” is entirely another thing, isn’t it?  It’s a critically important story that is very timely.  I can’t write it off as pure cinema.  At some point I’ll buy the book and then discuss it in more detail.

You’ll notice all the pretty icons under every post that allow you to Stumble us or Digg us.  If one of our comics or blogs catches your attention, feel free to tell fine folks who follow those services.  Benita and I work quite hard to bring this site to you, and there is nothing I love quite like cartooning, but we can use all the help we can to get our content in front of lots of new eyes.  If you want to help us spread the word and keep Johnny Saturn kicking, feel free to do any of the following (as pulled from the new F.A.Q.):

• Fan Art
• Post links to us
• Post reviews of Johnny Saturn on Amazon.com
• Review our comics on your site or magazine
• Interact with us on the blog
• Mention us on forums you frequent, and post links and link graphics to us when you are able
• Vote for us any or all of the comic top sites, such as the Webcomic List, Buzz Comics, Vote Topwebcomics, Online Comics, or Frumph’s Webcomic List
• Nominate us for industry and web awards
• Suggest us to bloggers, pod casters, magazine editors, etc.
• Stumble Us, Digg Us, or submit/bookmark us by any similar system

Thanks! Scott

You Suck At Photoshop #13: Displacement

News Bulletin:  This is a news breaking story and will interrupt the normally scheduled Indy Friday episode.

Check Out Saturnday – a new weekly column showcasing the prose stories behind the comic book, Johnny Saturn!  Want to know where Greg REALLY was during his two-month hiatus from work and Spire City?  Want to know how Dr. Synn escaped the underground city of Elysium?  Who becomes the new Madam Fishnet after Monica’s death?  Each week’s installment will give you the answers to the questions you are asking, plus you will get bonus artwork by Scott Story illustrating each scene presented.

Written by Scott Story and Benita Story, creators of Johnny Saturn, these short stories to be showcased on Saturdays are meant to fill in the gaps between the story-lines and behind the scenes of the current story arc, Johnny Saturn: Homeland Insecurity.  They tell the secrets and unfold more adventures of the main characters in the world of Johnny Saturn and Spire City.  And they might just give out a few hints leading up to the third and final story arc in the Johnny Saturn Trilogy.

Tune in each Saturday to “Saturnday” beginning August 30, 2008!

And now, back to the normal schedule.

Illustrator is the industry standard for lettering comics, and there are lots of good reasons for this.  Some letterers have been using Manga Studio, which I understand is well-suited for lettering as well.  Photoshop may be used to letter, but if you do then there are some ways to streamline the process, and that’s what I’m going to talk about in this next series of columns. 

Why would you letter in Photoshop?  Great question.  Maybe you don’t have time to learn a new application.  Maybe you already are comfortable with Photoshop.  Maybe you can’t afford Illustrator.  Maybe you don’t want to mess with one program for art, one for lettering, and one for compositing the image.  Whatever the reason, you can letter in Photoshop with ease, especially if you make the preparations I’m going to cover in this series of columns.

First, you need to make a Custom Shapes file of all your balloon and tail shapes.  Here’s what you do:

1)      Make your balloon shapes.  The shapes can be whatever you want, from the standard oval, to thought balloons, angry balloons, and queasy balloons— whatever you want. 

2)      Use the Magic Wand tool and select the balloon.

3)      Go to the Paths palette, which is usually grouped with Layers and Channels, and can be brought up in any case under the Window pull down.  Hit the Make Work Path From Selection icon, which is the fourth icon over on the bottom of the Paths palette.

4)      Go to the Edit pull down, select Define Custom Shape. Give your balloon a name in the popup box that appears, and then press OK.

To create your own custom shape file, and collect your custom balloons as you make them, here are the steps.

1)      Select Custom Shape from the main toolbar. 

2)      In the options bar at the top, there will be a Shape pull down with an arrow next to it.  Select the arrow, and display the custom shapes in that file.

3)      There is an arrow icon in the upper right hand corner of this pull down box. Select it.

4)      In the menu that pops up, select Preset Manager

5)      In the Preset Manager, select all the shapes that were already in the file, leaving only your new balloons intact.  Select Delete.  It’s OK to do this, because you are making a new file, not writing over an old file and destroying the existing custom shapes.

6)      Select Done.

7)      Go back to the shape pull down box, select the arrow icon in the upper right hand corner, and select Save Shapes.

      Name your new file appropriately.

9)      Now, whenever you wish, you can load your new lettering shapes!  Easy as that.

Well, that’s enough for this week.  There are some important tool presets that I’ll get into that can make your job much, much easier.  There’s also the question of font choice and size, and putting the whole thing together.

Scott.

Note: The reason that I create the balloons and tails separately is because this gives you much more flexibility on how you can arrange your balloons, especially if you are into lots of connected and overlapped balloons.

Note: At the end of this particular series, I’ll include all my presets and files for you to experiment with.

Here’s Benita and I at the Indy Webcomic meetup.  Aren’t we cute?  I have no idea who the shadowy figure in the background is.

Hi, Folks!

Hope all is well out in internet land!

Last week I wrote about setting up a WordPress/Comicpress website, and some of the plugins that would come in handy.  This week, I’m going to dive into some of the basic approaches to fleshing your site out.  I’m going to assume, for the moment, that you’ve successfully installed your site, you’ve uploaded your comics, and everything is working the way it should.  That’s assuming a lot, I realize, because these things never seem to come off without a hitch or two, but hang in there.

Most of your modifications are going to be done on your WordPress Dashboard under “Design” and then “Theme Editor.”  Within the Theme Editor, you will see a column on the right of files you many access, and on the left each file’s code, and on the bottom an “Update File” button.  Pretty straightforward, really.  I would suggest that before you go modifying these files, copy and past their language into a WordPad file and save it—this way, if you mess the site up, you have the language to paste back in and restore the website.  Do this, or copy the whole file into a safe directory on your hard drive.

The files that you are most likely to access and change from the Theme Files are “Header,” “Stylesheet,” and “Footer.”  The Stylesheet is a CSS file, aka Cascading Style Sheet document, and this is where you can change all the sites colors, fonts, and many elements associated with the site’s appearance.  If anything puts off inexperienced website builders more than CSS, I don’t know what it is.  Luckily, it’s not that hard to learn. 

If you plan on changing your site’s color themes, I suggest you have the colors you want worked out in advance.  Web colors usually are expressed as hexadecimals, and they are preceded in the Stylesheet file by #.  There are many places you may go on the web to determine your color choices and their hexadecimals, such as:

http://www.htmlvalidator.com/htmlval/fontsandcolors.html

http://mediazeal.com/colorthemes.html

http://www.colorschemer.com/online.html

There are many more such online applications and guides to help you choose your colors.

Changing the colors of pages and fonts on your site is as simple as going to the existing choices in your Stylesheet and replacing your hex values for the existing one, then hitting “Update File.”  Open your site in another screen, and reload it often to see the results of your color changes.  You can also change many of your site’s design elements, or proportions, from the Stylesheet file, but I’m leaving that to a future column.

Another useful tool to use in setting up your site is Widgets.  While in the Design, go to Widgets, and there you will see an assortment of options, including Pages, Links, Meta, Recent Posts, etc.  I use Archive Dropdown, Bookmark Comic, and Text Widgets.  On the left side of the screen, next to each widget, is an “Add” button.  Hit that, and the Widget reappears on the right side of the screen.  Before you do anything with said Widget, press “Save Changes.”  You can save multiple Text widgets.

The Text Widgets are particularly useful, because you can use these to install Project Wonderful ads, Amazon.com ads, Google ads, Web Rings, and the like.  Copy your ad language, past it into one of the text boxes under Widgets, press the “Change” button at the bottom of the opened Widget, and the ad should then appear on your site.

Next week I’ll cover Headers and Footers.  See you then!  Scott.