codevs.com

Recently I was asked to join Andrew Rauh and Joseph Constan with their future iOS applications and web development. We decided to launch codevs.com, a home to these projects. I went with a red and light gray styled layout for wordpress.It only took about 5 days to develop.

See it in action here:

http://codevs.com

This tutorial will show you how to create a very subtle, indented look with the GIMP. An example of this technique would be the very bottom of this website, in the footer. You can use it for stashing a navigation bar, search bar, or whatever you like.

First, open GIMP and create a new image that is 540 x 145 (or whatever height and width suits your needs).

Now set the foreground to #a04242 and the background to #864645 (again, you can use whatever colors you need or want. It can even be a solid color). Use the gradient tool, dragging it from the top to the bottom. Name the layer Background.

Create a new layer and name it Outline. This will be the white line that gives it an indented look.

Use the rectangle tool to make a 26px or so high box at the top. Fill it with white #FFFFFF.

Reduce the size of the box you used for the outline layer by one pixel from the bottom, or just make a 25px high box. All that matters is that you leave that 1px outline at the bottom. Clear or delete the rest of the white. Next, create a new layer and name it Black.

As suggested by the layer name, fill this layer with Black #000000.

Finally, adjust the opacities on the layers. The outline works well with 19.1 opacity, and the black can be whatever you like.

The tutorial is pretty straightforward, but if you are unfamiliar with GIMP or have questions, feel free to comment. It is pretty easy to customize this technique to your liking.

download: Indented.psd (36.46KB) added: 22/12/2010 clicks: 75 description: PSD for the indented GIMP tutorial

It’s been a month since the last part of my website traffic experiment. Here’s the results of one month’s work. Stumbleupon proved to be a huge help this month.

Using resources such as digg, stumbleupon, twitter, and the Blog Traffic Exchange to gain traffic, all seemed to help. Every time I wrote an article, I received a lot of traffic (notice the spikes in the graphs). The biggest amount of traffic I received was 645 visitors the day I published the gimp tutorial article. I started to see a steady increase in traffic at one point, followed by a sharp decline. When I thought traffic was dead, stumbleupon randomly decided to send 302 visitors to my site. Another reason to love stumbleupon.

More coming in this series!

A lot of websites show off glossy, web 2.0 buttons or navigation bars. With GIMP, they’re easy to make in just a few steps.

First go to file > New…

Create a new document that is 540 x 50. It does not have to be this size. In fact, it can be whatever you want it to be, but that’s the size I will be using for this tutorial.

Now select the gradient tool and set the foreground to #9a0000 and the background to #500909. You can use these colors, a gradient of your own, or even a solid color if you want. Name the layer gradient (or background, it doesn’t matter). This layer can be customized however you want with any color, so it’s up to you.

Create a new layer, and name it “Gloss”.

Select the gradient tool, set the foreground to white, and select “fg to transparent” for the gradient. Drag it from the top to the bottom.

Use the rectangle select tool and select half of the Glossy layer and delete it. Change the Glossy layer’s transparency to about 15%.

This step is optional, but can add to the look of the glossiness. Try different things to get the look you want.

Change the color to black, and use the gradient “fg to transparent again”, dragging it from top to bottom. Set the transparency to about 13%.

And that’s it! You can play with the transparencies, gradients, and colors to how you want. It’s a very simple technique that can be easily altered to your liking.

Feel free to comment with questions or suggestions!

download: Glossy Tutorial .PSD's (96.98KB) added: 22/08/2010 clicks: 127 description: Download the .psd's for this tutorial

There will be a slight delay with some of the content I plan on releasing. I still have three or four phpBB3 styles I need to update and release. In addition, a Drupal theme, a few WordPress themes, and a three more styles are in need of finishing and releasing.

I have a lot of content to release, but it will be delayed slightly due to the start of my senior year in high school very soon. I will resume work once the first few weeks have settled.

As a web designer, there are many tools you can use on your project. Whether these tools are free resources, useful software, or sources of inspiration, a lot of things and lessen the burden of working on a project.

Software

Image Editors

Photoshop – Of all the image editors out there, Adobe Photoshop is definitely one of the most powerful and most popular. However, with the hefty price tag, you might be better off looking at The GIMP or Paint.NET. [link]

The GIMP - Even though I have Photoshop, I prefer to use The GIMP. It does have a somewhat steep learning curve, but once you become familiar with it, it is a fantastic free tool. A lot of the tutorials I will be posting will utilize The GIMP. [link]

Paint.NET – Paint.NET is another free image editor. Although it is pretty good, I prefer The GIMP. [link]

HTML Editors

Dreamweaver – Nothing seems comparable to Dreamweaver in terms of HTML Editors, but once again, it has a hefty price from Adobe. [link]

Amaya – Amaya is not as good as Dreamweaver, but it is a good free alternative. It is an official program from the W3C, so if you’re familiar with their validators and want a free editor, why not give it a try? [link]

PSPad – If I didn’t use Dreamweaver, PSPad would be my second choice. It has many features such as line numbers, comparing documents side by side, and many more. It’s a huge step up from good old fashion Notepad, but not as feature heavy as Dreamweaver. Be sure to check it out. [link]

Notepad - Notepad is the most basic of all of these editors, but is already installed on Windows. Notepad is great for beginners because you’ll learn the basics of HTML, and what each element is. Coding by hand is the best way to start off in web design.

Websites

DeviantART - There is a lot of weird art on DeviantART, but once you look past that, you can find tons of resources such as icons, PSD’s, brushes, and more. You can also use it to look for inspiration, as many web designers display their work here. [link]

Typetester - Typetester lets you test out different fonts as well of the styling of those fonts when comparing screen type. It’s very helpful when trying to get an accurate representation of how a font will look in your design. [link]

Lorem Ipsum - Lorem Ipsum is great for dummy text in your design. [link]

WhatTheFont! – What the font is useful for finding fonts you see somewhere, but don’t know what font it is called. [link]

Iconfinder - Use Iconfinder to (as the title suggests) find free icons. [link]

Browsershots - Browsershots is an essential tool for web designers. It allows you to see how your website or design looks in multiple browsers. [link]

Dafont – Dafont has a lot of free fonts for use, and has a lot of good ones. [link]

Font Squirrel - I recently discovered this website. Like Dafont, it has a lot of fonts for download. Not sure if I’d say it’s better, but give both a try. [link]

That’s all for now! Any more useful tools I find will be added to this post.

Got any suggestions to add to the list? Feel free to comment.

A lot of sites I see advocate WordPress plugins, but do not actually use the plugins they claim as “essential” or “needed”. Here’s a list of 25 WordPress plugins I personally use.

1. After The Deadline
   Adds a contextual spell, style, and grammar checker to WordPress. Write better and spend less time editing. Visit your profile to configure. See the Proofreading Support page for help.
   By Raphael Mudge | Visit plugin site
2. Akismet
   Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need an API key to use it. You can review the spam it catches under “Comments.” See also: WP Stats plugin.

   By Automattic | Visit plugin site

3. All in One SEO Pack
   Out-of-the-box SEO for your WordPress blog.

   By Michael Torbert | Visit plugin site

4. BackUpWordPress
   Manage WordPress Backups. Beta Release. Please help testing and give me feedback under the comments section of the Plugin page. Backup DB, Files & Folders, use .tar.gz, .zip, Exclude List, etc.

   By Roland Rust | Visit plugin site

5. Clean Options
   finds orphaned options and allows for their removal from the wp_options table

   By Mittineague | Visit plugin site

6. Contact Form 7
   Just another contact form plugin. Simple but flexible.

   By Takayuki Miyoshi | Visit plugin site

7. Digg Digg
   All-in-One social vote buttons – Digg, Reddit, dDone, Yahoo Buzz, TweetMeme, Topsy, facebook share, facebook like, Polladium, StumbleUpon, Delicious, Sphinn, Post comments, Google Buzz, Designbump, Designfloat, Thewebblend and blogengage.

   By Yong Mook Kim | Visit plugin site

8. Downloads Manager
   This Plugin adds a simple downloads manager to your blog.

   By Giulio Ganci | Visit plugin site

9. Easy Peasy Adsense
   An easy peasy way to insert Google Adsense ads into your WordPress posts and pages.

   By Martin Glover | Visit plugin site

10. Google XML Sitemaps
    This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog.

    By Arne Brachhold | Visit plugin site

11. In Series
    Gives authors an easy way to connect posts together as a series.

    By Travis Snoozy | Visit plugin site

12. IntenseDebate
    IntenseDebate Comments enhance and encourage conversation on your blog or website. Full comment and account data sync between IntenseDebate and WordPress ensures that you will always have your comments. Custom integration with your WordPress admin panel makes moderation a piece of cake. Comment threading, reply-by-email, user accounts and reputations, comment voting, along with Twitter and friendfeed integrations enrich your readers’ experience and make more of the internet aware of your blog and comments which drives traffic to you! To get started, please activate the plugin and adjust your IntenseDebate settings .

    By IntenseDebate & Automattic | Visit plugin site

13. No Right Click Images Plugin
    Uses Javascript to prevent right clicking of images to help keep leaches from copying images

    By Keith P. Graham | Visit plugin site

14. Permalink Finder
    Never get a 404 page not found again. If you have restructured or moved your blog, this plugin will find the right post or page every time.

    By Keith P. Graham | Visit plugin site

15. Related Tweets (by BTE)
    Randomly choose a post from the blog. Search for related websites & posts via the Blog Traffic Exchange and tweet the most relevant related post. Automatically adding hashtags Configuration options are here.

    By Blog Traffic Exchange | Visit plugin site

16. Related Websites (by BTE)
    Add your posts to the Blog Traffic Exchange and add Links to related websites throughout the blogosphere. Configuration options are here.

    By Blog Traffic Exchange | Visit plugin site

17. Secure WordPress
    Little basics for secure your WordPress-installation.

    By jremillard | Visit plugin site

18. SexyBookmarks
    SexyBookmarks adds a (X)HTML compliant list of social bookmarking icons to each of your posts. See configuration panel for more settings.

    By Shareaholic | Visit plugin site

19. Twitter for WordPress
    Displays your public Twitter messages for all to read. Based on Pownce for WordPress by Cavemonkey50.

    By Ricardo González | Visit plugin site

20. W3 Total Cache
    The fastest and most complete WordPress performance plugin. Dramatically improve the speed and user experience of your site. Add browser, page, object and database caching as well as minify and content delivery network (CDN) to WordPress.

    By Frederick Townes | Visit plugin site

21. WordPress.com Stats
    Tracks views, post/page views, referrers, and clicks. Requires a WordPress.com API key.

    By Andy Skelton | Visit plugin site

22. WP-Stats-Dashboard
    Displays the WordPress.com stats graph, your traffic and social metrics monitoring on your dashboard.

    By Dave Ligthart | Visit plugin site

23. WPhone
    A lightweight admin interface for the iPhone and other mobile devices.

    By Stephane Daury, Doug Stewart, and Viper007Bond | Visit plugin site

24. WP SlimStat
    A simple but powerful web analytics plugin for WordPress.

    By Camu | Visit plugin site

25. WP SlimStat Dashboard Widgets
    Adds some widgets to monitor your WP SlimStat reports directly from your dashboard.

    By Camu | Visit plugin site

26. Yet Another Related Posts Plugin
    Returns a list of related entries based on a unique algorithm for display on your blog and RSS feeds. A templating feature allows customization of the display.

    By mitcho (Michael Yoshitaka Erlewine) | Visit plugin site

Most of these plugins are pretty self-explanatory. However, I feel as though some of these plugins should be explained and promoted a little bit more.

Some people find IntenseDebate to be a nuisance or dislike it altogether. I for one LOVE it. It’s a nicely styled comment system that is packed full of features. It also allows logins from twitter, facebook, wordpress.com, ect. and you can sync info with other blogs using IntenseDebate (which can equal more traffic?). Some people prefer Disqus, but I for one found IntenseDebate to be much better.

All in One SEO Pack, Google XML Sitemaps, Permalink Finder, and W3 Total Cache are ESSENTIAL to running a good blog. They help make it run well and make it search engine optimized.

Finally, I’m watching the plugin, Related Websites (by BTE). It is a very interesting concept, linking to related blogs, and blogs link back to you. I got approved, but it is not working entirely yet. Once everything is ironed out I’ll be sure to give the Blog Traffic Exchange a very good review.

That’s it for my WordPress plugins list. Feel free to share with others!

Over the next few months, and even up until next year, I will be documenting the traffic my website receives, and the methods used to gain this traffic. My main goal is to get my web design work out there (of course I need to update a lot of my work and release it first!) and attract customers asking for custom work. No guarantees if my effort will pay off, but if they do, I figured why not share the methods in a blog post?

My methods I will use:

• Twitter
• Stumbleupon and Digg (I love stumbleupon, never used digg)
• The Blog Traffic Exchange [Link]
• deviantART
• Releasing phpBB3, wordpress and drupal themes with link back to me in footer
• $50 in Google Adwords and $25 in Yahoo search, provided by hostmonster

Current relevant stats for July 26-31 (6 day span):

Total Hits – 2,184, Unique IPs – 322, Avg Pageviews – 338

Most traffic comes from: www.stumbleupon.com 9% 117, www.dacgoblue.com 1% 22, www.deviantart.com 0% 3, bit.ly 0% 2, intensedebate.com 0% 1, twittme.mobi 0% 1, www.facebook.com 0% 1, www.google.com

I will post updates on this in either monthly, 3 month, or a year’s span.

Another old layout. Still not a fan ha.

This is a another black and blue layout I made a very long time ago. Once again, I’m not a huge fan of it, and don’t think I could make much money off of it, so I’m making it available for anyone to use.

Just keep my name in the foot and everything will be good to go. I’d also appreciate it if you tell me if you choose to use it, because feedback is always a good thing.

Demo: http://demo.davidcicala.com/website%20project%202/

Download:

download: black and blue 2.zip (1.03MB) added: 29/07/2010 clicks: 172 description: Another black and blue layout

A very old layout I did. Black and blue. Simple.

A while back (maybe a year or two ago) I designed this layout. At the time I considered using it as my portfolio site. However my tastes in web design have changed, and I’m not longer a huge fan of it (although it is nice! haha). I don’t think I’d make much money off selling it. So I’ve decided to release it for download.

Just keep my name in the foot and everything will be good to go. I’d also appreciate it if you tell me if you choose to use it, because feedback is always a good thing.

Demo: http://demo.davidcicala.com/website%20project/

Download:

download: black and blue.zip (3.71MB) added: 29/07/2010 clicks: 196 description: A black and blue web site layout