Photoshop Actions – Creating Folder Structures for Web Designs – Tutorial

This tutorial will show you how to create Photoshop actions and more specifically how to create an action to create a folder structure for your web design layouts

When creating a screen design of a web page organisation is key, keeping layers in folders enables you to quickly move or hide any layers that you need to. When you initially open Photoshop you should create folders to do this, hence a Photoshop action to do it all instantly, every time you want to design a new layout, here is how.

Video Tutorial


Text Tutorial

These Images and text support the video Tutorial

Step 1 – Actions Panel

step1

Go to Window > Actions or use keyboard shortcut ( Alt + F9 )

Step 2 – A Folder for your Actions

step2

Create a new (label 1 step 2) folder to keep any actions that you make, you can put them all in one folder so you know where they are or create new folders depending on the type of action you are creating.

Step 3 – Create folders and layers for organisation

step3

Create a new action (label 2 step 2) and give it a descriptive name so you can easily tell what it does, you can give it a shortcut key as well using the F1-12 keys , some are already occupied by Photoshop default shortcuts but you can overwrite them.

Here are the defaults using F1-12 keys

  • F1 – Adobe Online Help
  • F5 – Brush style palette
  • Shift + F5 – Fill Layer Dialogue Box
  • F6 – Colour, Swatches, Styles palette
  • F7 – Layers, Channels, Paths palette
  • F8 – Navigator, Info palette
  • F9 – Actions, History, Presets palette

Step 4 – Create a new document

step4

Create a new canvas that is suitable for your web design layouts ( Ctrl + N ) you can even give it a default name

Step 5 – Folder Structure

step5

You have your blank canvas and now you need to create your folders that you will use to organise your web designs make as many folders as you need.

Step 6 – Stop Recording and Test

step6

Hit the stop button (label 3 step 2) so that no more actions or mouse clicks are recorded your action should now be complete hit the shortcut key you assigned it in the video it was F2.

Conclusion

There are so many ways you can use actions to record your clicks and settings try and experiment and think about what you do the most in Photoshop and try to create an action for it…maybe cropping images!.

Comments

Was this tutorial clear and easy to understand? do you use any actions in Photoshop, if so please let us know in the comments below.

Illustration Artists Showcase and Inspiration – Part 2

A mixed collection of talented illustration artists some using 3D programs, oil paints, Illustrator and Photoshop to produce there creations, I have placed a piece of text about each illustrator where possible as well as slightly explaining what they incorporate in to there work.

Angry Blue

About: Under the Angryblue moniker, I design posters, art prints, album art and do way too many shirt designs full of strange imagery. Though I’ve mainly done more aggressive work for metal bands, I’ve managed to do successful merchandise design for Genesis and Ashlee Simpson as well.

Skulls and bones the perfect recipe for vector art and posters this artist uses the vector lines and solid colours to his advantage producing some great poster art

Angry Blue

Poked Studio

About: This studio produces some amazing 3d illustrations often incorporating big eyes and psychedelic colours to amaze any one who looks at them. using blender and photoshop

Poked Studio

Destill

About: Mike is a 23 year old designer and illustrator from Torquay UK, and has gained lots of recognition world wide and is always looking to expand his skills in various fields of design

Illustration mixed with photomanipulation mike brings hisdesigns to life with movement and flow, his designs look cluttered nit are far from that as each illustation is stregically positioned for hte viewrs pleasure, he alos has some really nice typography work in his portfolio.


Birdy and Me

About: Kelly smith lives in Tasmania Australia, in 20006 she graduated with a bachelor of fine arts from Tasmanian school of art and has since gone on to pursue a freelance career in both portrait and fashion illustration

Like it says in her bio her art is like stepping in to a modern fairly tale with faint pencil lines and the odd splash of abstract colour to distract the eye using water colours and vintage colours to support her illustrations.

Birdy and Me

Dan May

Dan May was born and raised in the suburbs of Rochester, NY, Dan spends his days (and nights) painting dreamlike environments that transcend space and time. These delightful yet haunting images are often based in personal observations of both human’s and nature’s relationships with each other, blended with a healthy dose of whimsy, fantasy and cautious relevance.

The paintings and characters that Dan produces almost give you a sense of sadness due to the dark colours and mournful looks of lonely characters that he paints with such detail and texture, i think i can call myself a fan! he also has a really cool Flickr gallery


Camilla d’Errico

About: After a few years in the comic industry Camilla realized she could expand her style into a variety of other industries; snowboards, magazine covers, toys, clothes. Camilla has also begun to carve out a niche for herself in the fine art field thanks to her fiery nature, high level of ambition and persistence in following her dream

Camilla has a few social profiles in her bio including Deviantart and Behance she paints eerie characters showing different emotions on different kinds of media from pieces of wood to canvas giving each illustration a unique feel and texture.

Camilla d'Errico

Digital Delight

About: Niel Quisaba’s Based in tropical Philippines, produces designs for snowboards, tshirts and even web designs his style of squid like tenticles and bubbly illustrations sets his unique style apart from most illustrators.


Imaginary Design

About: Adam Koniuszewski his main passion is graphic design and illustration the tools he uses include Pencil, brush, acrylic, cut-outs, Photoshop, Illustrator.

Looking through Adams designs they are all quite abstract and almost experimental some may look unfinished or cluttered these designs ad the most interest to who is looking at them, he uses his line drawings to great effect with textured backgrounds. he also has a flickr profile and a deviant art profile

Imaginary Design

J Three Concepts

About: True vector illustration with his bright colours schemes and solid colours, his illustrations are mostly made up of smaller doodles and illustration to create a bigger picture, often looking complex to the viewer yet interesting.

J Three Concepts

Zero 13

About: A freelance illustrator, living in Bucharest, Romania. he uses all kinds of tools ranging from rotring pencils, markers, spray paint to Wacom tablet, Photoshop, Illustrator to give birth to his dreams.

Some of these pieces of work are really great master pieces with huge canvases and so much detail to take in, there is often lots of visual shapes and lines to look at and spend minutes looking over each illustration carefully.

Zero 13

Zenvironments

About: Zachariah Johnsen, is a young artist concentrating in watercolour, pen & ink,
And mixed media works on paper. His medium of choice is the micron pen and he uses them exhaustively to describe a world of ghouls, monsters, and misfits – the shady characters in everyday life, but just hidden from normal view.


Design blogs with Flickr Groups everyone come share your work

I have just started my own flickr group here on design shard to showcase work and peoples inspirations.

Join Design Shards Flickr group: Join Here

The 9 most recent flickr entries will be shown in the footer of this blog and from time to time there shall be showcases of excellent work from the group as i know a few other design blogs also do this including My Ink Blog and Fuel Your Creativity.

I also just want to highlight a few of the design blogs in the community that have a flickr group that you may want to join, if ive missed some please let me know and i will add them to the list.

Design Shard Design Shard | Go To Flickr Group

About: This group is to showcase any images that you have created or found around the web, the 9 most recent submissions will be shown on Design Shard Design Blog in the footer area of the site ( Yes thats me ).

ArbentingArbenting | Go To Flickr Group

About: A place for the readers at Arbenting to showcase their creations. I’d love to see anything you’ve done with the Arbenting Freebies but feel free to submit anything.

High Resolution TexturesHigh Resolution Textures | Go To Flickr Group

About: This group is about sharing high resolution textures of any kind. Wood, metal, rust, plants, fabric or anything else that can be considered a texture. Feel free to post your pictures and let the group discuss them.

Colorburned Colorburned | Go To Flickr Group

About: This is the Colorburned Flickr Community. Feel free to add the designs that you created using Colorburned textures, vector resources and tutorials.

Fudgegraphics Fudgegraphics | Go To Flickr Group

About: This group is meant for all the designs created with fudgegraphics freebies such as photoshop brushes, textures or vectors. Feel free to post other designs as well. It’s always nice to have see creative artworks in one single group.

My Ink BlogMy Ink Blog | Go To Flickr Group

About: This group was created for the readers of My Ink Blog. So they can show off their work, or the results of stepping through one of the tutorials.

Fuel Your Creativity Fuel Your Creativity | Go To Flickr Group

About: What fuel’s your creativity? Design, Photography, Art…post what inspires you to create your next masterpiece. Anything is welcome, just keep it clean. Your work or the work that inspires you may be featured on my blog from time to time. Cheers!

Online-Photoshop Tutorials Online-Photoshop Tutorials | Go To Flickr Group

About: An archive of pictures for the website www.online-photoshoptutorials.com including uploads from it’s users.

Loon Design Loon Design | Go To Flickr Group

About: “It is all about design”

Gomedia Gomedia | Go To Flickr Group

About: Post your art or designs created using stuff from Go Media’s Arsenal. Periodically, designs we like will be highlighted on our blog at www.gomediazine.com – so make sure it’s something you are proud of!

InspiredologyInspiredology | Go To Flickr Group

About: Inspiredology is about the blog inspiredology.com. The blog showcases inspirational designs in different fields of inspiration. This group is created to have a compilation of images that might not be listed on inspiredology.

Bittbox Bittbox | Go To Flickr Group

About: Anyone and everyone who would like to share their designs and what they have learned or used from BittBox Freebies/Tutorials. Heck, just show us what you got, doesn’t matter where you got it!

BooooooomBooooooom | Go To Flickr Group

About: All you loyal readers of Booooooom.com out there can now upload your own photos here and they will be displayed on the site

Outlaw Outlaw | Go To Flickr Group

About: A place for freelance designers, photographers, graphic artists, web designers, illustrators, and any other creative freelancer can share thier work.

Vector TutsVector Tuts | Go To Flickr Group

About: Like vector graphics? Join the Vectortuts Community! Vectortuts is a vector Tutorial site with thousands of daily readers and a really cool group of active community members.

PSD TutsPSD Tuts | Go To Flickr Group

About: Like Photoshop? Join the PSDTUTS Community! PSDTUTS is a Photoshop Tutorial site with thousands of daily readers and a really cool group of active community members.

Abduzeedo Abduzeedo | Go To Flickr Group

35 Free Hi-Res Fire, Flame and Firework Textures

Fire Textures

Free Hi-Res fire and flame texture pack (1600 x 1064), i took the opportunity to take these on bonfire night ( Guy Fawkes Night ) when there are plenty of open flames, the pack contains 35 Textures in total

10 Random textures included in the pack

( See all 35 textures here )

Rapidshare Download (11.4mb Zip File)

http://rapidshare.com/files/162518776/Design_Shard_-_Fire_Texture_Pack.zip

Mediafire Download

http://www.mediafire.com/?9btjg1xzmwd

Additional info:

  • Camera: Panasonic Lumix DMC-FZ 18
  • DPI: 72
  • Resolution: 1600 x 1064
  • Original Resolution: 3264 x 2448
  • Contains: Flames, Fire, Motion Streaks, Fireworks

Usage Terms

( There are None )

  • Please do not host these textures on you own servers for download, please link to this page or files if you want others to know about them.
  • You are free to use these textures for what ever purpose you intend, commercial and personal, show me the work if you want id be interested to see what you make.

Some look pretty cool, use them for desktop wallpapers, use parts of them, use them as overlay textures use them for whatever your brain can muster.

Where people have used them

Used them in your work ? leave a comment with the link to it ill add it to the post

By Sprite – Transporter 3 DVD cover

By Denzoo- Burn Baby Burn Poster

Designing Print Collateral For An Online Business

Im glad Anne decided to post an article about print design on design shard, she works at a print house called hotcards and they also have a really imformative print design blog for you to check out, enjoy her article.

Hello web designers, developers, and graphic artists of all sorts!

Greetings from the semi-arcane world of print design! Your concern over things like white space, usability, and sweet signature icon sets is strange to us, as our ways must be to you…

Okay, maybe it’s not that bad, but print is a different world. From my perspective working at a printing house, I see more and more web-based companies beginning to invest in print collateral.

The challenge for those with a background in web business is to figure out how to create compelling, effective print design to advertise their online presence.

Print Design Philosophy

One of the great things about designing for print is that you can create the most bold, colorful designs you can imagine. The crucial bit is to recognize the difference between creating a busy design, and a complex design.

A print design can have a lot of color and depth and interesting stuff for the eye to absorb, but it has to focus on one central message.

Print designs can’t be laid out like a web page, with a bunch of different elements to look at, because viewers simply aren’t going to browse around your printed piece. The goal in print is to suck the viewer in for five seconds, get your point across, then release.

Choosing Your Weapons

Print design often begins with choosing what type of print collateral you’re going to develop. Obviously, some forms of print advertising are going to work better for web companies than others. Lucky for those with small budgets, web business can generate a lot of traffic using inexpensive forms of printing like business cards, flyers, and postcards.

These smaller items work because you want people to actually have something they can carry with them, get your URL from, and check it out, without having to write it down themselves off a poster or billboard.

A perfect example of this is direct mail. Call it ‘junk,’ but mail that advertises a website can turn over an unbelievably strong ROI because it asks almost nothing from a recipient but that they sit at their computer, like they always do, and check out a new site.

How The Environment Affects A Print Job

One of the major differences between web design and print design is that your finished print job is going to be out there working and competing for attention in the great outdoors. Before you begin designing, think about:

  1. Where you printing is going to be displayed, and,
  2. How it’s going to be perceived by your target audience.

Location Factor #1 – Weather

By now, you’ve heard about choosing paper and coating that best fits your design. Maybe you’re thinking of choosing a matte finish because it traps ink differently than a high gloss. But wait! A high gloss also stands up to adverse weather conditions better than a matte.

Will your print design be in direct sunlight? Will it be exposed to rain? Choosing UV and water-resistant materials will help to weatherproof your printing, but it will also change the way your design looks. Be aware of the variables that comes when working with diverse materials.

Location Factor #2 – Lighting and Landscapes

Also think about how your print designs will look under different types of lighting, and in different landscapes. Don’t choose colors that will fade into a concrete urban background, even if they do look great online or in Photoshop. Also remember that most reds look brilliant during the day, but they fade into shades of grey at night or in low lighting situations. This is called The Purkinje Effect.

Perception Factor #1 – Limited Access To The Viewer

Print is almost the web’s opposite when it comes to how is viewed. Online, viewers seek you out, and you offer an interactive viewing and listening experience that will hopefully engage people for an extended period of time.

In print, your goal is to grab attention away from whatever else someone is focusing on, and control their experience so that they almost helplessly absorb your message before moving on.

When it comes to large pieces displayed in public areas, you have approximately 2-4 seconds to grab attention and deliver your message. And in general – take a poster, for example – they will be standing about 3 feet away from your work.

If they have to move in closer to read, they’ll walk away. If design elements are too big and overwhelming, they’ll also walk away, because the eye simply won’t register what’s right in front of it as significant.

Perception Factor #2 – Functionality

Although the impulse with print can be to really let that think-outside-the-box-i-ness run wild, the trick is to always combine visual and tactile appeal with functionality. Most printing is a particular size and shape for a reason.

For example, designing a crazy business card that stands out from the pack is great, but if it’s too large, fat, or heavily textured to fit in a wallet, it probably won’t get included in to that special place people go for important names and numbers.

The same applies to club cards, brochures, and other printing that can be displayed in shops and restaurants and the like. If printing doesn’t fit into display fixtures, it will frustrate the middle-person who’s supposed to be putting it into the appropriate slot.

Much as is the case with a graphic artist handing off web designs to a programmer – frustrate that middle-person, and waste your investment.

Common Ground

In print design, as in web design, the functionality of a printed piece, or an entire campaign, rules the day. If it disintegrates in the rain, disappears in low light, baffles with its complexity, or annoys your waitress, it’s dead in the water.

Create print designs with an awareness of the environmental and human factors that come into play, and you’ll be amazed at the power of print to drive web traffic.