Intro

Blogging, as we all know is much more than writing an article. In most posts, you need to take screen captures, edit, copy, paste, format, etc.. Basically, there is much more to it than meets the eye. Any decent article will take at least an hour to write and may take several. Here I am going to show you how to set up a simple action that can streamline your blogging by creating the main post image or “title image” for you.

Often times a blog will use the same exact style for each and every title image, or something relatively similar. This is a guide on how you can create an action to do this for you dynamically. You can also find a link to download this action, at the end of this post.

Step 1

Open up your image of any size. Just make sure it’s the size that you’d like your blog title images to appear. Ours is 550px by 350px.

Step 2

In your Action Pane, click the folder icon. This will prompt you for a name, which will be for your new Action Set. Name this “Blog Actions”, as this is where you can store all of the actions that you will regularly use on your blog.

Step 3

Click the folded page icon in your Actions Pane, which will prompt you for a name for your new action. You can also assign an action a function key, which will simply make it easier to access this action in the future. Once you press record, your every completed move is being logged by your action. You can hit the stop button at any time to stop recording. Just remember to press record again or you will end up with a half completed action and have to repeat your steps all over again.

Step 4

Once you’ve hit record, create a new layer and draw a rectangular marquee across the lower-middle of your layer. Fill this with black(#000000) and lower the opacity to somewhere between 70-80%.

Step 5

Grab your Type Tool with a relatively large and bold Slab Serif or Sans Serif font, and create your main title. Rename this layer “Title”.

Step 6

Press the Stop button in your actions pane and click the actions menu button in the upper right hand corner. Select Insert Stop… This will insert a stopping point in your action to give you or anyone else a chance to change something. In this case, it would be the actual text of the title font you just got done inserting. For things of this nature, where a change must be made by the user to successfully complete the rest of the action, make sure that the Allow Continue radio button is not checked and give a description of what the user needs to do before pressing play again.

Step 7

Press the Record button in your Actions Pane to resume your action. Right click your type layer and go to Blending Options. Change your Blend Mode to Soft Light.

Step 8

Click on Inner Shadow and give it a small sharp shadow, like the settings shown below.

Step 9

Depending on your background image, you may need a little brighter type for your title. If so, just duplicate the layer you just made. Change it’s Blend Mode to Normal and give it an Opacity of 50%.

As you can see, you have a nice little pressed lettering look for your title. Now we can move on to the next step.

Step 10

Create a new type layer. This time with a much smaller bold type. Something easy to read like a basic sans serif font. Lower the opacity on this layer to around 80%.

Step 11

Stop your action once again, and create another stop point to allow you, or someone else to edit the small description text.

Step 12

You can again hit record if there are other things would like to do with your action, but for this guide our action is completed. Now any user can easily create a title image from just a single graphic. The action will do the rest of the work for them. Remember that for any action you create for you or yourself to not merge layer or flatten your image. Unless of course you don’t want to be able to change anything after the action is played.

Here is what our action panel looks like at this point:

Here is our completed title image:

Grab This Action

The possibilities for improving your workflow with actions are abundant. We have made this particular action available for download if you’d like to use it in your own projects.

Content Jump

1. Make Subtle Use of Gradients
2. Add White Space
3. Stay On A Grid
4. Improve Your Typography
5. Have Clear and Effective Navigation
6. Use An Awesome and Useful Footer

Intro

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, I’ll attempt to put my finger on some of the small details that make up the difference.

A little while back I wrote an article about the 4 Principles of Good Design for Websites, this article is somewhat of a continuation of those principles. In that article I went into detail about the important roles that contrast, repetition, alignment and proximity play in webdesign. This article will piggy back on those principles as I examine 6 ways you can take your webdesign from good to great.

This post is chock full of awesome examples. I made a conscience effort to only pick sites that were great all the way around.

1. Make Subtle Use of Gradients

I’m not sure if there is an effect that can be butchered and make your site look more amateurish than poor use of gradients. Nothing screams bad design quite like a rainbow gradient (well perhaps blinking text is of equal prowess). That being said, the use of subtle gradients will go a long way toward making your site look great. The key is using them sparingly within the flow of the design.

Gradient Meets Bokeh Effect

The Newism site features a colorful, but subtle gradient that is seamlessly mixed with a faint bokeh effect. It’s visually stunning. Just as a side note, if you are interested in recreating a bokeh effect in photoshop, be sure to check out Abduzeedo’s tutorial on it.

Subtle Gradients, Shadows and Textures… Oh My!

The guys at OnWired flat-out make awesome websites, so it stands to reason their personal site would be top notch. To go along with plenty of personality throughout, the design itself is spot-on. Check out the use of subtle gradients and shadows in the design. I also love the touch of grunge and texture that is sprinkled in.

2. Add White Space

The term white space is often misunderstood to literally mean white space. In terms of design it is more accurately described as the space between elements. To break it down even further here is how the folks at A List Apart define it.

“Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between major elements in a composition is “macro whitespace.” Micro whitespace, is—yes, you’ve guessed it—the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.

It cannot be understated just how important it is to let elements breathe in your design. This is probably the single biggest issue for young designers. It’s human nature to try to cram every design element into a small area, fortunately for webdesigners (despite every clients unrelenting belief) there is no such thing as a fold in webdesign, that’s what scroll bars are for… /* end rant */

Excellent Spacing & Subtle Line Breaks

Snook provides a comfy level of padding to break up all the post entries. Also notice the faint line breaks that provide separation, but are easy on the eyes and flow with the overall design.

Beautiful Minimalistic Approach

Made By Sofa features a beautiful minimalistic approach. The spacing is fluent, and they use an image with no background or clutter to speak loudly.

3. Stay On A Grid

The inspiration for grid based designs can best be attributed to newspapers, but if you look closer you can find grids in all kinds of things. From most websites to traffic grids.

The 960 grid and Blueprint are probably the two most popular grid frameworks. I personally love the 960 grid, it’s simple, light weight and a nice starting point. I design with it a lot of the time, but a grid just means that you have some rhyme and reason to your site elements. Alignment plays an intricate role in making your site look refined. Nothing in webdesign should be placed without purpose or alignment to another element.

Griding A Portfolio

Poccuo features their portfolio on their home page. They use a beautiful mix of a 3 column and 5 column look. It’s well spaced and visually appealing.

Columns Within A Design Blog

I love how Web Design Ledger presents their posts on their home page. The newest post is large and featured at the top, the next few are shown in a 3 column grid.

Lots of Equal Length Columns

Ecoki is a beautiful grid design layout. The 4 column, 2 row layout is obvious, but the slideshow/thumbnails and latest reviews are also on a grid.

4. Improve Your Typography

Typography is an artform that is obsessed on by most good designers. It is of prime importance when trying to bring your designs to the next level. Of course it plays an important role in readability, but it’s also quite important to design and mood.

Using Contrast To Direct Attention

SimpleBits does a wonderful job of varying contrasts to direct the viewer’s attention. In typography contrast can be altered through font choices, color variances, and size differential.

Nothing Says Typography Like Ampersand Signs

This site looks so nice and effortless, but you can tell a lot of thought and reason went into the whole process, and that’s especially evident with the typography. The spacing and font choices are flawless, and I’m enamored with the clever use of Baskerville on the ampersand signs.

5. Have Clear and Effective Navigation

Good navigation is so important in design. If a user can’t find what they are looking for quick enough, they are probably moving onto the next site. It’s something I’m very weary of, and I know that MyInkBlog could use some improvement on, and it should be drastically improved in the coming redesign.

Blog Navigation Via Categories

Far too often, blog navigation focuses on pages and leaves the categories as a secondary thought somewhere along the sidebar. Tutorial9 does a fantastic job of realizing users care much more about finding out where their photoshop tutorials are, than where their about us page is. Check out their flawless 2 level navigation with active category highlighting.

Effective Icon Hover Effect

Icons can definitely be hit or miss on websites. The web is filled with the remnants of this web 2.0 trend, but not all trends are completely bad. The reason web 2.0 got ugly was because of it’s overuse and amateur use. As with most things, when done properly it really can be quite effective. Carsonified displays a clever icon hover effect for it’s navigation. It’s simple and monochromatic and ties in flawlessly with the rest of the site design.

6. Use An Awesome and Useful Footer

When the web first started footers were tossed into the junk pile of useless things. They were minor, but necessary evils that needed to be displayed, but little thought went into the design of them. Now they’ve become more and more important to the overall design of a site. Don’t miss out on the opportunity to brand and complete your design through the use of a good footer.

Lots of Info & Credentials

The main purpose of a footer is to display necessary info about the site and copyright info. Brian Hoff adds more personality and interest to his through a 3 column look that displays everything from what he’s working on to books he recommends.

Search Functionality In A Footer?

Elliot Jay Stock’s site features an oversized search form in his footer. It’s definitely not a typical place for one, but I think it works for his site. He is also one of the many designers who have taken to featuring their tweets in the footer.

Final Thoughts

I’d love to hear your thoughts on the subject. What separates great design? What little things do you key on?

I know I say this often, but I really can’t believe that another month has already passed. This month the trail was an eclectic grouping that ranged from CSS3 to an SEO rant.

Articles

Tutorials

Compilations

Freebies

Featured Stuff

Having a good Content Management Systems (CMS) doesn’t mean you will be saved from all the possible security risks your site can face. WordPress is usually the leading choice for a publishing platform because it allows you to add security plugins and edit them for fixing loop holes and more. However, for that reason hackers and phishers often choose Wordpress sites for vulnerable attacks.

Hackers can gain access to your site through specific access points. In many cases just by displaying your Wordpress version information and error messages your site could be left vulnerable. For instance there are “minor” attacks when hackers use site scraping tools to copy your content, allowing them to duplicate it on their own site in order to steal your traffic, as well as obtaining the possibility of diminishing your Google Ranking.

Below we will review a few steps that you can take to stop your WordPress site from being taken over or flooded with malicious attacks. Please join the discussion by leaving a comment with your own tips along with your thoughts.

AntiVirus for WordPress

AntiVirus is exclusively for use with WordPress as a smart and effective solution to preventing any hostile exploits and spam being injected onto your blog. You will be able to monitor possible platform vulnerabilities, viruses, malicious links, worms, and more. You can also set it up so that it can send you important email notifications and whitelistings.

Updating WordPress

As simple and basic as this step may seem, a large portion of WordPress users forget to update their site on a regular basis. You don’t always need to upgrade to the latest version as soon as it’s released, in fact you should wait a while, so that you’re able to download a version that has most of the bugs fixed. If you don’t update you’re definitely taking some unwanted risks that could come back to hurt you in the long run. We recommend not letting your WordPress blog go past 1-2 versions old.

Forbidding Users Access to your Server

No one should have access to search your entire server. This could cause severe problems such as the pirating of content. Use this code:

<?php bloginfo ('home'); ?>

You can also Block WP- folders from being indexed by search engines by blocking them in your robots.txt file. Make sure you add the following in your code:

Disallow: /wp-* 

Securing Your wp-admin Folder

Individuals who intend on attacking can easily use bots for a forced attack that can guess the admin password until they eventually aquire the correct one and login. Here, in this section, you will find a few solutions to this possible issue.

You can prevent a security break-down within the wp-admin folder by limiting the IP addresses that can access it through an .htaccess file. To do this you’ll need to create a new text file and add the following:

order deny, allow
allow from 123.456.78 #Your IP Address
deny from all

Save this file and place inside your wp-admin folder for a stronger combat against unauthorized access to your site.

Turning Off Visitor Registrations

Once you install a new blog with WordPress it allows visitors to register for a guest account on your site, unless you choose not to. If you wish to build a community around your site then I could see how advantageous it would be, however, it’s best to keep registration turned off if possible, due to a majority of the latest exploits being done from within a WordPress account.

Mysterious Passwords

Your WordPress site can easily be hijacked if you use a password that’s too simple, very easy to remember, and repeats numbers or letters. Many users are so busy installing several security plugins, that they pay little or no attention to the importance of choosing a complex password. You can use a variety of tools that can test the strength of your password online. The most recommended would have to be Microsoft’s Password checker.

Backing-Up Your Database

Remember to always back up your site files and database because you never know what the next few moments may hold. It would be ideal if you could regularly back-up your MySQL database. You can do this by exporting your MySQL data in the form of a .sql file that you can store in an easy to access location. You can also download a plugin called WordPress Database Backup to automatically have your site back-up the neccessarry info to keep your site running in case of an emergency.

Further Reading

• Hardening WordPress
• 9 Best WordPress Security Plugins
• 16 Excellent Wordpress Security Plugins To Secure Your Blog
• 20 Wordpress Security Plug-ins And Tips To keep Hackers Away

This is the 1st part of a new series here on MyInkBlog. We’ll be asking top designers what design tools they use to help them complete their work. As a guy who loves to discover new apps and find new and easier ways to accomplish my job, I’m really looking forward to the insight that we receive. I must admit that this idea was partially the result of admiring Grace Smith’s “Show Me Your Dock Series.” So in honor of that, and the awesome work that she does, I’ve decided to have Grace bat leadoff in this series

About Grace Smith

Grace Smith is a talented blogger, designer and the owner of Postscript5. She was kind enough to take the time to share some of the tools she uses and some insight into why she’s chosen them. Check out her thoughtful responses below.

Browser

At the moment it would be Safari 4, however I’ve been testing out Google Chrome over the last few days (having downloaded the developer preview for OSX) and I think once it’s in Beta I will be switching. While I appreciate how useful Firefox can be, I switched to Safari because of the stability problems I was experiencing with Firefox, It was just one crash too many!

Code Editor

I’ve used both CSSEdit and Espresso but always come back to Coda. It integrates everything that I need; namely a code editor, css editor, preview pane, SSH Terminal, website management and an FTP client.

Mail Client

I run all my mail accounts through Google Apps as a desktop app using Fluid, with all my accounts streaming into a single inbox. Previously I used the native Mail app, however I switched to Google to better streamline my email and process.

Billing App

I was a Freshbooks user for several years but recently switched to Curdbee as I needed a simpler, more cost effective solution. Curdbee is an excellent service, offering the necessary functionality and features which suit my needs perfectly.

FTP Client

Coda, although I had been using Transmit for some time before getting into Coda. I do love it’s simplicity and functionality, a great standalone FTP app. I still make use of the ‘droplets’ which are great for recurring uploads.

Twitter App

I use Tweetie because of it’s speed and slick interface although I long for it to add the ability to create groups as that’s the feature I miss most since switching from Tweetdeck earlier this year.

RSS Reader

Google Reader
as a standalone app using Fluid and styled with the exquisite Helvetireader. It’s simply a beautiful and useful piece of kit.

Task Organizer

After longing for a super simple, ‘get your stuff done’ to-do list app, I knew my search was over once I found TaskPaper. No bloated complex software, just a fast, simple app that makes sure I keep up to date with my tasks.

Photo/Design Editor

Photoshop – I’ve been using it since the days of Photoshop 6 and can’t see myself usng any other app. It’s where every design I work on is created and polished.

Vector/Illustration Program

Admittedly I don’t use Illustrator all that often, but when I work on a logo or illustration, it’s my app of choice.

Final Thoughts

Feel free to add your tools of choice for any of the categories above. Also, I’d love to hear your suggestions for the categories I should add to the next designer’s toolbox series (I already have a couple of ideas).

Introduction

I came up with the idea for creating a skyline made of text after some creative thinking and seeing this amazing stock photo. After a brief look around the web, I still can’t find a manipulation quite like it.

In this tutorial, we will be creating the text ‘MIB’, in the night skyline of a Seattle cityscape. To create this effect we will be cutting buildings and repositioning them seamlessly. This means we will have to line up the buildings flawlessly, blend them together and then alter the lighting, to give the illusion that this is how they were constructed. To accomplish this task, we will use a combination of layer masks and adjustment layers, with some cutting and selection methods.

Step 1

To get started, fire up Photoshop and create a new document sized at 3872×2592. It’s advantageous to use such a high resolution image because it allows us to create detail and accuracy. Place this Seattle cityscape into the document, it should fit flushly.

Step 2

Type out the letters ‘MIB’ in a bold font. I used ‘Autumn’, I think it’s a standard font. If you don’t have it, any similar blocky font should work.

Step 3

Now we’ll set the tracking so that the letters are spread over a larger horizontal area. Go to your character palette and set the tracking to +75. The size of the font should be around 260 points.

Step 4

Identify the first road from on the left side of the image and go back to the first row of tall buildings, now place the beginning of the letter ‘M’ to the left of the road. Use the image provided for reference, 1 shows the original text with rounded edges on the inside edges of the M, 2 shows the M with these edges removed , and 3 shows the selection outline of the cut out M, over the original M.

Rasterize the type so its editable by right clicking the type layer and choose rasterize from the list of options that popup. Because we want straight lines, use the polygon lasso tool to cut straight edges where your font is rounded.

Step 5

Set up guides across all the major lines where the type will become the buildings, this will really come in handy. Do this by dragging from the side or top where the rulers are, include any lines you think may help.

Step 6

Copy the background (ctr + j) so we can easily change things. It’s always a wise idea to keep an original copy of a layer before you start any sort of destructive process. In the areas referenced in the image below use the clone stamp tool to copy buildings from the front to make the horizontal line at the bottom of the buildings the same. Making sure you are on this copied layer press ‘S’ on your keyboard to get to the clone stamp tool. Now holding down ‘Alt’ to sample an area, copy/clone samples of surrounding buildings to cover over the circled areas in the images below. Then find the area you wish to cover and replace it with the sampled building, remember to resample when you need to.

Step 7

Beginning with the left hand side of the ‘M’ start cutting out the buildings and repositioning like this image. Lower the opacity of the letters to get a better view of how the buildings look. Use the polygon lasso tool for the straight lined shapes, make the selection as accurately as you can, photoshop will help you by telling you when the line is straight. With the selection made using the Polygonal Lasso Tool or your favorite selection method copy the building as many times as you need to cover the left upright of the ‘M’, press ‘Ctrl + J’ to copy, or simply drag the selection with the move tool selected.

Step 8

Build up the first upright of the letter ‘M’ until it’s filled like this. Make sure the windows and lines on the building are all in sync with each other as much as possible.

Step 9

‘Ctrl + click’ the letters layer so it is selected then go to each of the cut out layers and add a add layer mask on the cut out buildings to blend their edges in; this is working non destructively so if anything needs changing later on it can be done easily. The layer mask will hide the area that overlaps the text, they are not erased and can be easily brought back using a white brush or fill.

Step 10

Before we continue cutting out the top of the building directly behind the ‘M’, add a layer mask and blend it in with a soft black brush. If you want to see the overall effect hit ‘ctrl + H’ to hide the guide-lines, click the eye icon on the letters layer to hide the letters, and hit ‘ctrl + 0′ to zoom out. Select all these layers that make up the left side of the M and hit ‘crtl + G’ to group them and rename them left side of M.

Step 11

Where the lower v shape of the ‘M’ covers buildings cut out the buildings as a whole rectangle, using the polygon lasso tool. Reposition them over the left side of the v that makes up the ‘M’, use the move tool and the ‘alt’ key to copy the building. Add layer masks to these buildings, found at the bottom of the layers palette.

Step 12

Then ’ctrl + click’ the letters layer so the letters are selected. Now we’ll inverse the selection by hitting ‘ctrl + I’, which selects everything outside the letters. Making sure your on the layer mask we created in the previous step, brush over the areas that stick out over the letters area with a black brush, until they blend in.

Step 13

Repeat this process for the right side of the v that makes up the ‘M’, cut out the building below it, reposition it, add a layer mask, ‘ctrl + click’ the letters, inverse the selection and brush with a soft black brush over the areas outside the letters.

Step 14

Now for some more photo manipulation. The effect we are creating is going to blend the buildings in seamlessly. We’ll now create more of a contrast between the buildings that make up the ‘M. So copy the background layer that we used the Clone Stamp Tool on before, so we can correct any mistakes easily. ‘Ctrl + click’ the letters and using the Clone Stamp Tool copy the buildings either side of the v in the ‘M’. Use the image below as a reference. Because the image is high resolution and viewed from further back, the buildings do blend in seamlessly.

Step 15

Now we’ll create the right hand side of the ‘M’, using the same techniques as before. Cut out the building directly behind the right upright of the M out. This is the building we’ll be using to create the last part of the letter.

Step 16

Cut out the shape that we need to connect the right side of the ‘M’, copy this to a new layer and position it in place. Turn the visibility of the letters on and repeat this process for the entirety of the right side of the ‘M’.

Step 17

Select all the layers and merge them. Then add a Brightness/Contrast adjustment layer to them to blend the whole building together.

Step 18

Using the eye drop tool, sample one of the windows with no light, then create a new layer on top of the previous one. Spray in randomly where there are groups of light so the building looks more natural, do this for the whole letter ‘M’. This is a subtle effect and only needs to be done sparingly, from a distance the details blend together, which is how pixels work.

Step 19

Now we’ll move onto the ‘I’. Hide the ‘M’ for now and find the first tall building on the right (the one we cut the top off before) and cut out the main body of this building from the background copy, use the Polygonal Lasso Tool. Then place it at the bottom of the ‘I’ and rotate it counter clockwise so it lines up with the shape of the letter.

Step 20

Using the move tool hold ‘alt + shift’ to copy this layer vertically. Then free transform (ctrl + t) it and flip it vertically.

Step 21

Cut the top of the building three from the right with the triangular top a quarter of the way down and position it on top of the ‘I’ building.

Step 22

Add a layer mask to the top layer and blend in the edges with a soft black brush, using a pen tablet really helps here.

Step 23

Now we’ll create the final letter ‘B’. From the original image of the city, cut out the triangular shaped building below the ‘B’.

Step 24

Using the move tool and holding down ‘alt’ copy the cut out so it covers the right side of the ‘B’ like the following image. Now add a layer mask to each cut out, select the text and add a layer mask to the letters. The buildings should have a slight 3d effect because of the angle of the photograph.

Step 25

Now we’ll make up the rest of the ‘B’ using the same methods as the other letters. We’ll finish the rest of the ‘B’ by filling in the gaps with cut outs from the building, adding in the back of the ‘B’ and middle areas.

Step 26

With the ‘B’ finished we’ll add a Gradient Fill Adjustment Layer on top of all the layers with the first stop set to #a0050a and the last transparent at – 90 degrees. Then add another a Gradient Fill Adjustment layer on top of all the layers with the first stop set to #fbda3e and last set to transparent, at 90 degrees.

Step 27

For each group that makes up the letters, we’ll change the brightness and contrast starting with the ‘B’. Copy the group and merge it, then add a Brightness/Contrast adjustment layer and clip it to the merged group, set the brightness to 24, and contrast to 15. For the ‘I’ set the brightness to 20 and contrast to 35. And for the ‘M’ set the brightness to 18 and contrast to 36. Lastly, add an adjustment layer on top of all layers set to brightness 27 and contrast 8.

Final Thoughts

Finding a good stock photo to start a project off with really pays off. I’m sure we can all agree this one works well. This is really good practice for manipulating images into a space you want them in, and blending them together.

Many techniques and/or “accidents” as I like to call them, were used in creating the design for my “Skull Board”. It was designed as pure fun, but was then printed and applied to a skateboard for entrance in to a local art show a couple months ago.

Reactions that I got regarding the design were better than I had anticipated and it ended up being one of the favorites at the show. Here is a simple walk-through of how I went about creating this design, and how easy it really was.

Step 1

Open a new document. If you are designing this for an actual skateboard deck, you can use the same dimensions and resolution as my document and you will have room to spare once applied to a blank deck.

Step 2

Give your document a black (#000000) background. Choose a large solid brush from your basic brush preset, with a size of about 100px. Draw lines and dots on your black background at either a slight left or right angle. You will end up with something like this.

Step 3

Easy enough right? Now, navigate to Filter->Sketch->Chrome. Use whatever setting gives you the most variation in your lines. My setting had a Detail of ‘0′ and a Smoothness of ‘4′. Hit ok!

Step 4

Now navigate to Filter->Blur->Motion Blur. Most likely you will have to max it out and apply it a few times to get a good amount of blur. Depending on which way you drew your lines, your angle of motion blur will vary. Just make sure you blend with your angle, and not against it. Once you have done that use Select->Color Range… to select the white areas.

Step 5

Now you can either create a new layer and fill your selected area with black, or copy and paste and then press ‘ctrl+i’ to invert it. Color your original blurred background any color you’d like, but for display I colored mine white. Then go wild! Duplicate your blur layer, flip it, flop it, blur it some more, shrink it, do anything you would like. More complex is better in my opinion.

Step 6

With your solid background layer selected, go to Filter->Noise->Add Noise… With the settings as follows… Amount: 10.00%, Gaussian: Checked, Monochromatic: Checked. (In this case, I decided to change my background layer to a blue.) This will add more depth and character to your board, that will make a considerable difference when all is said and done.

Step 7

Create a new layer above your others and using a large Blurry Brush, color it in randomly with colors of your choosing. Set this layer’s blend mode to Color. You can create as many colored layers as you like and mess with the blend modes on each until you are happy. Just remember, you want to be able to see your angle blurs through these layers. You can even move the angle blurs on top of these layers and mess with their opacity and/or blend mode as well.

Step 8

Create a layer at any level of your file, so long as it is visible, and fill it with white (#ffffff). Now destroy it with all of your favorite brushes! Here is the outcome of this step, and the structure of my file thus far.

Step 9

Time for some skulls! Find a decent reference picture as a template for your skull design. There is an excellent set on Flickr. Create a new layer and equip your Wacom if you have one. If not, you can use paths but it takes much longer. (You can find the Wacom Bamboo on Amazon for really cheap these days. An excellent beginners tablet.)

Step 10

The best part about drawing a skull with your tablet is that you don’t have to be a perfectionist. It adds to the whole “destroyed” look. Use a medium, solid brush (60px), and turn on Pen Pressure in your Brush Preferences Pane.

Use the pressure sensitivity of your tablet to your advantage and you will never need to change the size of your brush. You will have created something like this. There is a great video and walk-through of how to draw skulls with a tablet on GoMediaZine. Here is what mine looks.

Step 11

Delete your skull picture template and create a layer beneath your drawn skull and color your skull in with a white background. Then duplicate it, rotate it, resize it, and play with opacity to achieve a result you are happy with.

Step 12

Now using the same basic techniques from the skull, draw some tentacles. The more accent lines and notches the better. Adds more character. Do the same as you did with the skulls and color them in, then rotate, re-size, and duplicate them to your liking.

Here i’ve changed their blend mode to Overlay.

Step 13

The final version of this design is not near as complex as my original. But the same techniques have been applied.

Final Thoughts

Projects like this, while time consuming are great fun. You can experiment over and over again, while mixing limitless techniques and styles, while still producing something fun and unique. If not for anything else, do it for the fun of it! After all, that is why we design things isn’t it? Although, as a freelancer I enjoy getting paid and being professional, I also enjoy not knowing the outcome. Dubbed “accidental designs”.

If you want to get your design produced, I would recommend going to your local printer and getting it printed on “adhesive polypropylene”. Then take it to a skate shop to have it applied and trimmed. Be warned, it won’t last long if you use the deck to skate.

It’s was a busy month for me personally, so I want to apologize for not getting this up sooner, but better late than never I suppose. This past month I found lots of cool new things and sites, so the ‘Featured Stuff’ section has plenty to chew on. I hope you enjoy this month’s compilation, check it all out below!

Articles

Tutorials

Interviews

Freebies

Compilations

Featured Stuff

Vintage styled web designs are a tribute to an era that exists only in the memories of many. What’s overlooked is that no matter how the standards for web design progress, more designers start to resolve back to old vintage styles.

Elements of Design

What’s the secret designers use to create incredible vintage web designs? What are the amazing colors used? And what would be the kind of graphics used with this style of design? Here are a few of our questions answered:

• Old-Style Typography (For Example: Sans-Serif Fonts)
• Creative Worn Illustrations from Old Movie Covers, Books, Vinyls, Ads & More
• Vintage Packaging (For Example: 1960’s Pepsi Cola Ad)
• Dark, Dirty Colors and Textures (Torn, Used Paper)
• Old Photographs & Scrapbooks

In several of these elements used for vintage designs, artists along with designers use their creativity to bring their designs further than before. For your creative inspiration, below you will find 40 beautifully designed vintage websites that take advantage of the old vintage style with clean and clear structure within their designs.

1. Klassiker in Acryl

2. Ctrl + N

3. Tomatic

4. Blind Renaissance

5. Level 2 Design

6. Custom Design

7. WebDesigner.ro

8. Kretivia

9. Edgepoint Church

10. Target Scope

11. Thrush Exhaust

12. DeVotchKa

13. Ready Photo Site

14. Thunderfuel

15. MacTarnahan’s Brewing Company

16. Small Stone Recordings

17. Jeff Sarmiento

18. The New York Moon

19. FortySeven Media

20. Cottonseed Oil

21. mediaBOOM

22. Carrozzeria Verga

23. Slabovia

24. Mister-Aero

25. Tennessee Vacation

26. Lataka

27. Sourcebit TangledDecals

28. Freelenz

29. Blue Moon Piano Bar

30. Rocket Club

31. Big Rig Design

32. The Blizzards

33. BLK + MTN

34. Sottocosto Ska

35. AdaptD

36. Gary Nock

37. Jackson Fish Market

38. ZZZ Drink

39. The Dollar Dreadful Family Library

40. Ali Felski

Further Reading

• 30 Most Incredible Textures for Vintage Style Design
• Vintage Ads Posted by Abduzeedo
• 45 Things That Make A Vintage Design Look ìVintageî
• Make a Vintage Magazine Ad in Photoshop
• 300+ Vintage Style Textures and Photoshop Brushes

Stefan from over at ArtBox7 was kind enough to offer up this set of 8 awesome flourishes. They are available as both vectors and photoshop brushes.

Terms of Use

These vectors and brushes are available for commercial and non-commercial work. Please do not repackage, redistribute or direct link to the download. If you would like to share them please link back to this page.

Share Your Work

I’d love to see the creative stuff you come up with using these brushes and vectors. Please consider posting a link to your work in the comments or share your work at the MyInkBlog Flickr Group.