Steven Powers (SMP): How To Create A Digital Artists Blog

How To Create A Digital Artists Blog




Every digital artist has one thing in common ...the need to display their art on the Internet.  But going about doing that can be somewhat confusing since there are many different avenues and approaches.  Here I will discuss my views and processes of displaying content on various sites, creating online portfolios, linking them together, simple workflows and the use of free and open-source applications that I use.

This is not an all inclusive tutorial but more of an overview of my process.  I use a combination of free and paid sites and open-source software to keep overhead down.  I cover a few examples of HTML code that I use on my blog for gadgets and online portfolio but I try to keep is simple.


"Choosing a Username and Branding"
First decide on a user name that you would like and research it's availability.  I personally want to use my name since I primarily wanted to promote my work and interests, but I found that there were a lot of "Steven Powers".  Most of which were photographers, artists and a few actors.  So I added my initials to the end of my name to differentiate me from the rest.  This worked well since that is also how I sign my artwork. Another aspect to keep in mind is "branding", which was to the choice to use "Steven Powers SMP" as my domain name, email, user name, etc.  So start up Firefox and and search for possible user names for you keeping those points in mind.

Combing Various Sites and Functionality
There are multiple sites that can be used to promote ones art work, but using in conjunction work even better.  It allows for people to find you from different avenues. A few of the top sites for artists to display their content are deviantART, CGPortfolio, Artflakes, Filter Foundry, along with images sites like Flickr and Picasa. Video content can be hosted at YouTube and Vimeo When you link them all back to a central site like a blog, you will be easy to find.
To start I choose to create an account at Fine Art America that will host your gallery and offers a Prints On Demand service. The cost is only around $30 / year and comes with an extra web site separate from the FAA but will mirror your gallery, blog, etc and allows you to customize a few features.  This second site now means that when you post on FAA or Artist Websites everything is synchronized automatically and when someone uses a search engine, you are listed at two separate sites.  Now one could just stop here with FAA and your personal site at Artist Website.  You will have your online portfolio, blog (simple one image with text only) and Prints On Demand service. They will do all the hosting and web designing for you with minimal effort on your part, but you won't be able to monetize your site with Google AdSense, donation plugin etc or use your on domain so people can search you by name.  But if that was all you wanted you most likely would not be reading this ...but it is OK to go the simple route since you will have more time to spend creating.

The next thing I did was to create a gmail account solely for my art, a blog on Blogger, bought a domain for $10, and created a Picasa account to host the low res images for my blog..  I could have gone with a blog on Word Press but everything that I wanted to do to customize the blog seemed to come at a price compared to Blogger where it was free. The process I went through to choose Blogger over Word Press was very time consuming and frustrating since both interfaces have their advantages and disadvantages. The next step is to design the blog keeping in mind that Blogger only offers a  maximum of 10 stand-alone pages not including individual posts. These pages I use for my Home, Portfolio, Tutorial, Contacts etc. With a little creativity one can make it work. Next is to decide on a theme of what I was trying to do ...what the purpose of my site was.  For me I wanted to promote my work and to share and discuss digital art and all the useful applications (primarily free and open source), workflows and various tips.

So now my overhead has been kept to $40 / year ...not bad.  But with that, there were some issue to overcome.   First off was working with blogger and it's interface.  I recommend using their interface as little as possible. Next thing to do is to look at a slew of other artist's websites and see what you like and what you don't.  Don't get crazy at first, but see what kind of layout you want and what features you would like to have.  Again don't try to do it all at once.
Site Design
From there you want to set the site layout in bloggers interface and adjust colors for text etc. The thing that I found helpful was to do create my header (after deciding the dimensions of my blog) and use the header image as color pallet.  This will help with consistent theme throughout the site. It would be advised to use bloggers template design to assign colors or CSS if you'd like.  I personally use the template designer for the sites so it can be altered quickly and easily in the future when I need to make site wide changes. One can find a slew of HTML, CSS and Blogger "How-To's" online just by querying your question.
Once you have the dimensions and the header set in Blogger you will need to look at the "gadgets" (also known as widgets in Word Press) that blogger uses. Widgets enable you to add specific content to your blog like Google's search engine, slide show, etc.  The one I used the most was the HTML widget.  It allowed me to customize my contacts / "Follow Me" section. The slide show was something else I wanted to I use the one for Picasa instead of the Fine Art America one that they offered.  Of course that meant I had to create a Picasa account and upload images (lower resolution ones) that will be displayed in the slide show.  No matter what you decide to use, make sure they work together and has a purpose.  You don't want them to be distracting or your blog will feel cluttered.



"Design Tools, Posting and Examples"
Now for posting.  If you want to display videos, you will should create a YouTube account utilizing your chosen username to keep things consistent.  Adding videos from your YouTube account is very easy and is built into Bloggers interface.  But for posts I have used three applications for creating the content and then just copy and pasting them into a new post.  This is the quickest and easiest way to use it.  Blogger's interface can be troublesome at times and will cost a lot of time to fixing the issues.  The three applications are Dreamweaver, KompoZer and BlueGriffon.  Dreamweaver is a great professional application that is the industry standard but is a commercial product and frankly over kill for a blog.  If you eventually do create your on site or multiple sites (or even blogs) it is worth it for the flexibility and functionality.  The down side is that Dreamweaver doesn't work on Linux, but KompoZer and BlueGriffon do and they are also free. KompoZer is very much like Dreamweaver in regards to interface and ability to manage multiple sites, but its development is currently stalled. None the less, I use it with out issues on both Windows and Linux. Currently I am using BlueGriffon to do this post and it is a very good interface even though a bit different from what I use.  It works like a hybrid mix of a text and HTML editor.  Very easy to use and uses very little resources. When posting I merely copy what I have done in BlueGriffon or Komposer and paste into Blogger. Then I preview before posting and making any corrections with in Blogger as needed.  The procedure is quicker than it sounds though not as quick as doing everything locally and using a FTP client to post on your own website ...but then again that would incur a higher cost.  You can use any of these or all of them that you have to accomplish the same tasks.
Below are a few examples of the HTML coding that I use on my blog.  You don't need to understand HTML fully but it would help if you understood the basics.  HTML coding is beyond the scope of this article but the Internet is a great resource in educating on the subject.


This is the example of the "Follow Me" section on my blog.  I used the HTML Gadget with the code below.  The images are hosted on Picasa.
Example of HTML Gadget that I used for my "Follow Me":




Here is part of my portfolio and the code I use.  It is very simple yet effective. again the thumbnails are hosted on Picasa with links to the full resolution versions on Fine Art America.
On-line Portfolio example:
"Top Section of Portfolio with Title and Digital Painting Gallery"
"HTML Code for Navigation of Portfolio to Internal Links"
This is the top section of my portfolio page found HERE. The first ten lines of the HTML code are for the title and internal links to the sections within the page note the addition of "#" preceding "Digital Paintings, Traditional Art, and Sketchbook" to allow for navigation within the same page.  This is needed to overcome the 10 page maximum allowed by Blogger. The above HTML code is for the title of the portfolio page with links to areas on the same page for the three sections of the portfolio. The "#" preceding the the anchor indicates to the browser that the link is internal to the page. Think of it as adding bookmarls to a word doc and linking an internal hyperlink to that bookmark.

The second section is where I have inserted images that are hosted on my Picasa account and links to the high res versions on my Fine Art America account, which I have chosen to have open in a new tab denoted here

  • " target="_blank" "
When I add new images I merely copy the last image and paste it in and change the title, links etc making it easy to expand the portfolio as I go ...as long as I am productive and don't spend too much time on my blog.

"HTML Code for displaying Images of Digital Paintings Gallery"

The above code is only for the "Digital Art" section of the portfolio but all section are arranged the same. It looks worse than it is and is the reason to use a WYSIWYG editor link KompoZer. Don't get caught up in the coding if you don't understand it, but I would suggest learning the basics because sometimes it is faster to fix issues in HTML. The big thing is to have the thumbnails hosted on Picasa and the links for them assigned to high resolution images on FAA (or what ever you choose). One way to create the thumbnails is to create a image file in GIMP or Photoshop as a thumbnail template with the desired dimensions and copy each piece of art to a new layer using the transform tool to fill the dimensions. I end up with a better looking thumbnail then to use a program to create thumbnails automatically, which could be done in IrfanView or similar applications.

The basic structure of code for each image is as follows:

  • Thumbnail source hosted on Picasa
  • Dimensions
    • "height: 100px; width: 160px"
  • Title
    • "title="name of image" "
  • Target
    • " target="_blank" " opens in new window
  • High resolution link to FAA
    • " a href="http://fineartamerica.com/featured/bumble-bee-steven-powers-smp.html" "

Though there may be easier ways to create a blog for artists, it is quite cost effective. With utilizing free utilities and the various sites , I can post to my Blogger account, add video content from my YouTube account, FlickR for a slide show, utilize Picasa  hosting low res images and online portfolio of thumbnails with links to full resolution versions hosted on Fine Art America. Which also enables buyers to purchase prints. Total cost is around $50 / year. So now that you know how to do it, it is up to you to create and share your digital artwork.

Hope this helps,
Steve

3 comments:

  1. These are great tips that combine both good practices from the technical and creative aspect of digital design.

    ReplyDelete
  2. Your welcome. Thanks for the comments.

    ReplyDelete