Digital Base – Blog » graphics

Pimpin our Blog

Posted by Gijs Nelissen in All, graphics

We decided to take some time to “pimp” this blog. We still have a long “todo” list, this is just the start…

A quick before & after :)

Before

Old Blog

New & Improved

screenshot13

A quick list of what we did:

  • integrated search box on top
  • recent posts & comments on top
  • added links to search bar
  • updated general layout & cleaned out some of the css

Do you link the pink ?

Cool background Photoshop tutorial

Posted by Hans Bekaert in All, graphics

In this tutorial you will learn a way how to quickly make a cool

background in Photoshop. To achieve this we will play with some filters.

Enjoy!

 

1. Open a new document with these settings:

Cool background Photoshop tutorial 1

2. Select the Brush tool, with a round Brush and a diameter around 17px

Cool background Photoshop tutorial 2

3. Now draw some random lines on the background layer like this:

Cool background Photoshop tutorial 3

4. We will now apply our first filter. Go to the Filter -> Blur -> Radial Blur

Cool background Photoshop tutorial 4

5. The Radial Blur options window will now pop up. Use these settings:

Cool background Photoshop tutorial 5

6. Apply a second filter like this: Go to Filter -> Stylize -> Find Edges

Cool background Photoshop tutorial 6

7. You should get something like this:

Cool background Photoshop tutorial 7

8. Now go to Image -> Adjustments -> Invert

Cool background Photoshop tutorial 8

9. Repeat step 4, then step 6, then step 4 and finally step 8 again and you should get something like this:

Cool background Photoshop tutorial 9

10. now go to Image -> Adjustments -> Color Balance and play around with the rgb bars untill you see something you like. Then press OK.

Cool background Photoshop tutorial 10

11. To finish it off go to Filter -> Distort -> Twirl and use these settings:

Cool background Photoshop tutorial 11

12. Click OK and you're all done!

Cool background Photoshop tutorial 12

 

I hope you enjoyed this tutorial, now go ahead and play with different settings and document sizes.

Easy 3D Text : Photoshop Tutorial

Posted by Hans Bekaert in All, graphics

In this tutorial you will learn how to magically convert normal flat text to cool 3D text easily and quickly.

1. Create a new file, 500 pixels wide and 200 pixels high.

 

2. Create a new layer by pressing Shift + Ctrl + N

Â

3. With this new layer selected, select the Gradient Tool

 

4. Click on the gradient to edit it.

 

5. Use the following colors for the gradient: #396395 and #00bacc and click OKÂ (you can choose different colors if you want)

 

6. While holding Shift, drag the cursor from top to down and you will get a nice gradient background.

 

7. Now we will add some text. Use font Arial 63 pt bold color #ffffff

 

8. Right-click the text layer, select blending options and select Bevel and Emboss. Use these settings:

 

9. With the text layer selected, hold down Alt, press up once and press right once. Do this 4-5 times to get this result

 

 

10. Right-click the top layer, select blending options and deselect Bevel and Emboss. This will flatten the top layer. Select Stroke and use these settings with color #c5c6c6

 

11. All done! Now get creative by using different colors, fonts,..

 

Have fun!

 

Download another free Wordpress Theme: Relaxed Blog

Posted by Hans Bekaert in All, graphics

We created another free Wordpress theme for you to download and use on your Wordpress powered blog.

Download it here

Please vote for us or download our theme on the following websites:

http://www.bestwpthemez.com/

http://www.wordpressthemebase.com

http://www.wpskins.org/

 

Thanks and enjoy this free Wordpress Theme

Download free Wordpress Theme: Classy Blog

Posted by Hans Bekaert in graphics

 

We created a free Wordpress theme for you to download and use on your Wordpress blog.

Download it here

Please vote for us or download our theme on the following websites:

http://www.bestwpthemez.com/

http://www.wordpressthemebase.com

http://www.wpskins.org/

 

Thanks and enjoy this free Wordpress Theme

 

Photoshop Tutorial: Creating a sunset effect (Retouching photographs)

Posted by Hans Bekaert in graphics

So we got an image of a boy running in the sea, but it lacks some atmosphere.
In this tutorial we will see the trick to make the beach where he is running bath in warm and golden sunlight from a sunset.

1. Open the image you want to retouch and also open a random image of a sunset.

 

2. Now select the image you want to retouch and in the Photoshop menu go to Image > Adjustments > Match Color

 

3. The Match Color dialog box will appear.

 

4. In the source option box select the sunset image. If you have the preview option selected you will see that your original image has now taken over the color attributes from the sunset image.

 

5. Now the effect has a little bit too much effect. So now you can adjust the Fade slider until you see something you like.

 

6. There you go! Check out the before and after retouch inmage below. You can use this retouch function in many occasions so get creative with it.

 

Stay tuned for more tutorials.

 

Photoshop tutorial: Drama Wrinkle effect

Posted by Hans Bekaert in graphics

Lots of people are trying to emulate this popular Photography trend of grunge looking pictures of (old) people.

Now it’s your time to find out the secret to make the wrinkles look very dramatic using Photoshop.

1. Open a photo

Begin by opening a portrait of someone with wrinkles.

I dragged a pic of stockphoto to use as an example.

To open an image, choose File > Open, browse for the image and click Ok

This effect will also work on photos of younger people with smoother skin as well but this photo effect works best on wrinkles.

1

2. Click on the New Adjustment Layer button in the layers palette

2

3. Choose Black & White.

3

4. The Black and White tool will appear. Click OK with the default settings.

4

5. Blend the layer. In the Layers palette, click on the drop down menu and select Overlay.

5

6. Now your image should look a bit more dramatic already.

6

7. Duplicate the background layer by selecting it and pressing Ctrl + J. This new layer will be called Background copy.

7

8. Now apply the Plastic Wrap filter. Choose Filter > Artistic > Plastic Wrap.

8

9. In the Plastic Wrap options window, use these settings:

9

10. From the drop down menu in the Layers palette, select Multiply.

10

11. Now click on the Add Layer Mask button in the Layers palette.

11

12. Now your background copy will have a layer mask like this:

12

14. Right click in the image and the brush settings will appear. Use a large brush and set the Hardness to 0%.

14

15. Erase everything around the face so that the grunge effect is only on the face of the person.

15

16. All done! Before and after view here:

16

Tutorial: How to make a “sun ray” background in Photoshop

Posted by Hans Bekaert in graphics

1. Open a new document: width 30px, height 30px

2. Select the rectangular marquee tool, set it to fixed size: width 15px, height 30px and click the left size of the project. You should get this:

3. Fill the selection with the color #D15600 by setting it as your foreground color and pressing alt+backspace.

4. Now do the same for the right side width this color: #f4bc19

5. Deselect by pressing ctrl+d and go to Edit –> Define Pattern.. and give it the name you want.

6. Open a new document: width 500px, height 500px

7. Select the Paint Bucket Tool and make sure it’s set to Pattern and select your pattern.

8. Fill the background with the pattern by clicking it once with the Paint Bucket Tool.

9. Select the Gradient Tool and set it to Foreground to transparent.

10. Draw the gradient from top to bottom, beginning at 30 % from the top.

11. Go to Filter –> Distort –> Polar Coordinates.. and click OK.

12. All done! You got a nice “sun ray” background. Now go ahead and experiment with the colors and document size. Have fun!

Stay tuned for more tutorials!

Â

The importance of color selection

Posted by Hans Bekaert in graphics

Before starting your design process it’s very important to take some time for choosing the base colors you are going to use in your design. Certain colors will give different impressions, so it’s pretty obvious these impressions should go hand in hand with the main theme and subject of your website.

If you do some research on some common topics you will see a pattern in the use of certain colors for certain subjects or impressions. For example, blue is a color assiciated with trust and reliability. No wonder you will often find blue tints on websites of lawyers, webhosting companies, etc.
The use of lost of white space is even more logical when you see it on medical websites because it has a very sterile feel to it. In contrast, black is used on websites that want their product or subject to have a very prestigous look.

So before selecting the base colors for your website design, think about what look and feel is commonly associated with your subject. Of course you can brek the pattern and suddenly use a color that doen’st seem related to the rest of the colors in your design to highlight a part on your site that needs special attention. No doubt when you have a design with very light shades of grey for example and you put in a section with a bright yellow color, people will automatically be attracted to this section instantly.

Web based color palettes can be very helpfull in the whole color selection process, so google it and perhaps you will be surprised what a difference it can make.