Unique and creative business card designs from all over the world.
01 – Emerson Taymor Business Card
02 – Pomegranit Business Card
03 – Stephanie Towell Business Card
04 – Murillo Design Business Card
05 – Ken Speckle Gifts Business Card
07 – Rubber Band Business Card
08 – Piano Repair Business Card
09 – elkha Business Card
10 – Viewzi Business Card
11 – Bright Corner Business Card
12 – Yuka Suzuki Business Card
13 – Flow Yoga Business Card
14 – Thomas Wood Products Business Card
15 – Greek Restaurant Business Card
16 – Debt Recovery Agent Business Card
17 – il progetto Business Card
18 – Elevator Business Card
19 – Justin Anonuevo Business Card
20 – Sean M. Kinney Business Card
22 – Wunderburg Design Business Card
23 – Junge Schachtel Business Card
24 – Paul Nielsen Personal Trainer Business Card
25 – Celia Keyworth’s Food Business Card
26 – Richard E. Smith Business Card
27 – JWB Business Card
28 – Dave Blank Business Card
29 – Be Positive Design Business Card
30 – Dreamten Studios Business Card
32 – Victoria Vaughan Business Card
33 – Howl Fire Business Card
35 – Ramesh Sharma Post Marriage Counseling Business Card
36 – Steven Belkowitz Business Card
37 – Cehovin Eduard Business Card
38 – 350mldesign Business Card
39 – Visual Dialogue Business Card
40 – Chris Fisher Business Card
I
The world of Photoshop brushes, something that always comes handy while creating some new designs. you can get the classy grungy effect or cool retro effect in couple of seconds, there are Hundreds of thousands of incredible Photoshop brush sets are all over the web, here we have listed 45 Best Photoshop Brush Resources Every designer should have in their Bookmarks
1. Blend Fu
2. Brush King
4. Brusheezy
6. PS Brushes
7. Chez Plumeau
8. Q Brushes
9. Get Brushes
10. Shizoo
11. In Obscuro
12. Brush Fed
13. Bio Rust
14. Valhalla
15. www.hybrid-genesis.com/freebies/free_brushes/regbrushes/regbrushes_01.html
16. Fractured Sanity
17. Aethereality
18. Art Flower
19. Paper Lilies
20. deviant ART
21. Free photoshop [ http://www.freephotoshop.com/html/free_brushes.html ]
22. PS Brush [ http://www.psbrush.com/ ]
23. Bash Carpo [ http://bashcorpo.dk/brushes.php ]
24.Tomle Din [ http://tomledin.com/stuff/brushes.html ]
25. Personainternet [ http://www.personainternet.com/echoica//brushes.php ]
26. Suite Psds [ http://suitepsds.com/psds.php?cid=226 ]
27. Lovely Trash [ http://www.lovelytrash.org/brushes.htm ]
28. Blinding Light [ http://blinding-light.com/download/brushes/0 ]
29. Pootato [ http://pootato.org/downloads?dl_cat=1 ]
30. Anna Von Holdt [ http://www.annikavonholdt.com/brushes/y.htm ]
31. Photoshop Brushes [ http://www.photoshopbrushes.com/brushes.htm ]
Technorati Tags: Designer resources, Free Brushes, Photoshop Brush Download
Source:dzineblog.com
Is all design looking the same to you? Are you following graphic design trends subconsciously?
Whenever you look for inspiration, you are bound to come across at least one of these techniques / effects / elements. These effects are neither “good or bad” however they are the most common elements found in today’s designs.
Stock images have been used to portray each element. On that note of stock, there was a great discussion about the use of stock art over at GoMediaZine.
By far the most overused technique used in design today is the
infamous rays of light usually found tucked away in the background of a
design or at the very forefront of the design such as in the picture
above.
Vectorised silhouettes of people and other objects is definitely
second on the list. Made famous by the iPod campaign this technique can
now be seen everywhere. Notice the combination of the sun rays and
black silhouettes?
Closely contending with number 4, ink splatters are everywhere. Ink
Splatters do add a cool / trendy look to a design and they do blend
well with grunge style designs however ink splatters should be used in
moderation.
Swirls seem to be all the rage at the moment as they are quite
appealing and generally just nice to look at. Flourishes &
ornaments go well together to create organic, fresh designs which is
quite ‘in’ at the moment.
Flowing lines generally add motion and fluidity to a design which
gives it a certain emotion when combined with other elements (ie. funky
circles as seen above) which is generally why they come up so often.
The funky circle colour combo is evident in numerous designs across
the web and like the name suggests it does give a design a quite funky
look however they are being used everywhere!
These smoky effects are not as blatantly obvious as the other ones
as they are always in the background of a design however if you look a
bit closer, these smoky effects are everywhere.
Also I used this design firstly to review a service that gets your design and code it for you. Then I decided that it would be nice to explain a bit of how I designed that site. So in this tutorial I will show you how to create a single page site for your personal portfolio.
The first thing to do when designing a website is structuring. You will need to set where the elements of the site will be, the navigation, main content, sidebars, footer, and etc.. There are usability rules that are always nice to follow, as Steve Krug says: “Don’t do things that force people to think unnecessarily when they’re using your site” Management Consulting News. That’s why we follow some standards.
In my design the whole site will be in only one page so as you can see in the image below I have 6 areas very well defined: Navigation, Featured content, Main Content, Portfolio, Contact, and Footer.
Let’s start with the Navigation and logo. In our wireframe we had set a 50px height area for the menu and where the logo will be placed. With the Rectangle Tool (U), create a rectangle with 50px height and 1200px width. Go to the Gradient Tool (G) and apply a vertical gradient on the rectangle. Change the colors to #989898 (bottom) and #e0e0e0(top). Then position the rectangle to 1pixel in Y, there will be a white line between the rectangle and the stage, it will create a very nice 3D effect in our site’s menu.
Place your logo, I used the abduzeedo logo with a very dark gradient for black to a dark gray. After that add a filter clicking on the (+) icon. Selec Drop Shadow. Use 2px for the distante, 100% for the opacity, 0 for the softness, and 315º.
Let’s add the menu links. My personal site will have only 3 links: About, that will be a text about carreer and on the sidebar a list with my last entries on Twitter. Portfolio, where I will show some of my works. And the Contact, where there will be a contact form and a hCard with my contact information.
I really like menus with the Link name and a short description right below it. In my menu I used Arial Black 18px, that is a font that pretty much every computer has and we don’t use it that much, with the description in a regular Arial 12px. Also I applied on the texts the same shadow I used on the logo. It will give a nice touch. However via CSS it will only be visible on Safari and the new Opera. Both have the Text-shadow property.
In order to make a clear division in our menu let’s create a divider. If you pay attention to nice 3D effects, they are very subtle and it’s kind of simple to create. In this case with 2 lines with 1px width and different colors, one light and other dark we can achieve a very nice effect.
Let’s do the graphics part of the site. I could use Flash to create an animation or a Javascript effect. The idea here is to show the importance of the creative process when designing a page.
Nowadays we can notice that more and more sites are using handwritten elements such as texts and skecthes, also different textures and vintage elements to give a more human feeling to the site. For this design I will use a texture I created in another tutorial I wrote, the “Super Cool Frilly Bits Typography”. Just download the PSD and export the background, then place it on the center of our Featured area. You will have to resize it to in order to make it fit with the layout. Also you will have to create a black background behind the texture image. That will make our layout work no matter what the user’s screen resolution is.
Here I used a screenshot from one of the recent projects I worked on and placed it on the stage. Then I just adjusted it to fit to the Featured area using the Mask featured.
Now let’s add the hand-drawn elements. Firstly I chose a nice font from dafont.com, it’s called “Return of RelayScript”. Also I used another font, Helvetica Ultra Light, because I think that font gives an elegant and modern feeling to the design.
For the other elements some I used the bursh tool and others some vectors from iStockphoto.com. The whole idea of the design is to show the steps of the project with the suggestions and adjustments that are made throughout the process.
For the About area, where almost all the text of the site will be, I used the Divine Proportion to divide it in 2 columns. I recommend you to read a very nice article from Smashing Magazine called Applying Divine Proportion To Your Web Designs, they explain how and why it works so well.
So, my main area was divided in 2 columns, one with 605px and the other with 397pixels, with a padding left and right of 25 pixels in each column.
For the texts, the first paragraph of the main content I used Arial Black with 20px size and 140% line-height. And I used the same to create the title of the sidebar. The rest of the text on the main area I used Arial 14px and 140% line-height in Black. However for the sidebar I reduced the font size to 12px and changed the color to gray
#666.
Also, I created another rectangle and filled it with a gradient. Again, I used the 1px space to create a subtle 3D effect.
The portfolio area will basically have thumbnails of works, a title, a little description and a second navigation to choose from Print and Web works. I created a rectangle of 1200 pixels width by 290 pixels height. I used #999 for the color and a texture from the Styles Palette called Diagonal 30px width. Also I applied an Inner Shadow to the rectangle with 0 Distance, 65% Opacity, 4 for Softness, and Black for the color.
The thumbnails have 200×125 pixels and I added the wet-floor effect. To create this effect is pretty simple, just duplicate the image, go to Modify>Transform>Flip Vertical. After that go to Modify>Mask>Reveal All. Then with the Gradient Tool (G), use a black and white gradient and fill the image with it. Where it’s black it will become transparent and the white will appear. The grays will be midtones.
Here I finished the Portfolio with 4 images. For the title I used Arial Black, 32 pixels and Uppercase. Also I applied a Drop Shadow to it. For the other texts I used the same handwriting typeface that will be saved as image when mounting the HTML.
The second navigation used the handwriting font, but I created a circle to show the selected item with the Vector Path Tool. All the images will be shown in a Carrousel list, so the 2 icons of arrows will be the buttons to move the images.
The last part is the Contact Us. It’s just a form with Name, Email, and Message fields with a hCard icon on the sidebar where the user will be able to downlond my contact information. To create the form I used the Rectangle Tool, however if you want to create forms with real elements you can download form elements in PSD from the http://www.designerstoolbox.com/. They have images of all sorts of form elements from all major browsers and platforms.
In this tutorial I’ve shown you a bit of my design process and how I come up with some ideas. You can notice that I used some references for different sites such as Smashmagazine, iStockphoto, Steve Krung, and others. It’s very important to keep updated with everything that is happening, that will give you lots of very useful resources to design better and more efficient.
I created this design to review a service that gets your design and code it for you, you can check it out at http://abduzeedo.com/psd2html-review. However if you want to code, I recommend you check out this video of the John Hicks on the Future of Web Design, it walks through his process of creating a website. It’s definitely worth checking out.
Click on the image to see the HTML version of this design
Click here to download the Fireworks file used for this tutorial
Source:abduzeedo.com
Technorati Tags: Fireworks tutorial, design tutorials, inspiration
The use of flourishes in design has been a popular trend for a while now, but is still going strong with intricate patterns and smooth flowing vines and leaves creeping into designs for both web and print. Here is a roundup of free ornamental, floral, swirly and curly graphics from across the web.
Source:blog.spoongraphics.co.uk
Technorati Tags: Swirly, Curly Vector Roundup
Feel free to use them in your personal and commercial projects, whilst a credit isn’t mandatory, it is always appreciated! Enjoy.
Source:blog.spoongraphics.co.uk
Technorati Tags: Free High Res Brown Paper Textures downloads
Here’s the footer we’ll be creating, click on the shot below to see the full size version:
Along with liquid headers and footers, gradients are a common hallmark of Web 2.0 style design. For our tutorial we will be using a neat package of gradients that simular 3d / materials that you can get from the excellent Deziner Folio site. Click Here to Download the Gradient Package
Open your new Photoshop file. I’ve created mine with large dimensions – 1440 px x 900px (to fit my 17inch notebook screen). Of course your actual footer shouldn’t be this large, however it’s good to simulate what happens when your browser window is stretched.
Choose a background color, in my case the choice for background is a simple gradient with #b0b0b0 and #e1e1e1. Move your cursor on the screen holding SHIFT to create a vertical gradient down the page.
In web design it’s very important to decide what kind of layout you are going to be creating. That is to decide between a liquid layout (one that stretches out across your browser) or fixed (in many Web 2.0 style sites fixed layouts are usually centralized). In our footer, we will work with a fixed layout measured out to 760px x 420px. These measurements will ensure that even on an 800px x 600px screen, our footer will still appear properly.
Use guides to delineate the size of your website as shown below. Note that if you want create a layout that is optimized for 1024px x 768px setups, then define your guides to delineate a 955px x 600px area.
Although our footer is a fixed width, we still want the footer to stretch out across the page and fill out the remaining area. To do this we will use a pattern made by me in photoshop to simulate a metal plate. To download the pattern click here. Open this image in photoshop and go to Edit > Define Pattern and choose a name for the pattern.
Now open a new file with 1440px for width and 86px for height, and go to Edit > Fill and pick the pattern we just created. Select all (CTRL+A for PC and APPLE+A for Mac), then cut and paste the image into the bottom of our first document. You will get the result shown below.
Now it’s time to user our beautiful gradient package from Step 1. Create a new layer and create a rectangle using Marquee Tool (M) with 100% of document width and 21px of height. Now select Gradient Tool (G) and select a cool gradient. I selected “Black 5 – Gloss” from the gradient package. Now move the gradient tool vertically over the marquee holding down “SHIFT” to ensure it’s exactly vertical.
Move the resulting shape to the top of the shape created in step 4. You should have something that looks similar to the screenshot below.
Now we add a drop shadow effect to the layer we created in Step 5.
Now set your Foreground Color to #545557 and Background Color to #1e211f. Create new layer below the step 4 layer. Use the Marquee Tool (M) to select the content of the step 4 layer. Select Gradient Tool (G), choose the first gradient (combination of back and foreground colors). Draw a gradient over the marque holding shift to get the vertical gradient. Now go to the step 4 layer and set this layer’s blending mode to Multiply.
Now create a new layer above all the other layers and draw a rounded rectangle in the middle of our guides, choosing the color to be #dfdfdf. Right click the layer, click on Blending Options and then create a Drop Shadow effect for the rectangle. Then right-click on the effect layer and choose “create layer”. This will split the drop shadow on to its own layer.
Now you have the rectangle layer and shadow layer, move and resize the shadow to get the result below. You may wish to press CTRL-T to get the transform tool up, then right-click and choose Perspective, then drag the top two handles in towards each other. Alternately you can move the shadow down and use a soft eraser brush to brush out the top edges.
To finish the design add some text, copyright information and your logo to the bottom.
To get the footer ready for use in your HTML file, simply remove the text (the text will be added in HTML), flatten the whole file and cut the background of footer as shown below, then paste it in to a new file. As we did in Photoshop, the pattern can be produced using a background property in your CSS document. This is the reason why we have cut the image so small as this leads to better performance with the smaller file size.
To cut the center of footer just select the content inside guides and cut-it and paste into another file.
Save both files using Save > Save For Web & Devices and select JPG with an appropriate quality setting. JPGs and PNGs are good for images like the one shown where there are a lot of graduations of color. GIF images are better for areas of flat color. This is due to the algorithms each uses.
And you’re done, a lovely footer element! For more great footer ideas, check out Thiuven’s 35 Beautiful Footer Designs.
Source:psdtuts.com
Technorati Tags: Web 2.0 Site Footer
