Real Design Network

October 20, 2006

5 Useful Photoshop Tips

Filed under: Photoshop Tutorials, General Tutorials, General — wardo @ 11:07 am

After My Top 5 Photoshop Tips tutorial I decided to write another one based on the same theme but with slightly more advanced features. The first tutorial was aimed at beginners where as this one may teach something new to advanced Photoshop users as well.

    Quick Masking. This is a very useful feature for selecting parts of an image and can be more accurate and faster than the lasso tool. Press Q and then select the brush tool. You can now paint over any part of an image you want to select. When you have the selection covered press Q again or use the magic wand tool to make your selection.
    Copying effects. After spending a long time creating the perfect effect, why waste time doing it all again on another layer. Simply right click on the layer effects icon on the layer in the layers palette and select ‘copy layer style’. Then, just right click on the layer you want to apply the effect to and select ‘paste layer style’ to crate the exact same effect.
    Finding layers fast. Sometimes when you are creating complex images you may have a large stack of layers and find yourself having a hard time finding the layer you want. You can get around this easily and save yourself time and frustration by selecting the move tool and making sure ‘auto select layer’ is ticked in the options bar. now you can just click on a layer in your document to select it in the layers palette.
    Re-Applying filters . Sometimes, you may need to apply a filter more than once to achieve the desired effect. Rather than going through the filter drop down menu every time, you can just press ctrl+F to apply the filter you last used with the same settings.
    Feathering Selections. When selecting part of an image using the lasso or magic wand, the selection is often too jagged. You can get around this by simply setting the feather value in the options bar to 10.

September 25, 2006

Abstract Brushing Tutorial

Filed under: Photoshop Tutorials, General Tutorials, General — wardo @ 5:04 pm

One of my favorite ways to create nice looking header is to use abstract brushing techniques. I am going to try and get you on the right track with an easy to understand tutorial.

Step 1

Go to www.deviantart.com and do a search for Photoshop brushes. You should get lots of nice looking brushes in the results to choose from. Find a brush you like the look of and download it. Once it is downloaded you will need to make it available to Photoshop. Copy the brush from where you saved it and go to where Photoshop is installed on your computer. Once you find your adobe folder go to photoshop-presets-brushes and paste your brush in this folder. On my computer, the path to install the brush to is C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Brushes.

Step 2

Now open up Photoshop and create a new document with a white background, 700px wide and 100 high. Now look over to the top right of the window and there should be a tab that says brushes (if not you can access it by going to ‘window’ and clicking on ‘brushes’). Click on this tab and a window will drop down. There will also be a small arrow next to the text that says brushes. Click on this arrow and then go to ‘load brushes’. Find the brush you placed in the brushes folder and select it.

Step 3

You now have your brush available and we can start brushing. Press ‘D’ on the keyboard to reset the colors to the default (black and white) and create a new layer in the layers palette. Now the select the brush tool and find your brush set. Select a brush you want to use first and move the brush somewhere over the canvas and do a single click of the mouse. Do this a few more times around the canvas until some kind of pattern is forming.

This is what I have so far. Obviously yours could look vastly different but the principles are the same:
Photoshop tutorial

Step 4

Create a new layer and begin brushing with a different brush, this time in white. Remember to do single clicks. After 2 or 3 clicks, create a new layer, select a new brush and select black for the color. Keep repeating this process until you have something you think looks interesting.

Step 5

Now its time to add some color. Create a new layer above your brush layers. Then click on ‘create new fill or adjustment layer’ at the bottom of the layers palette. Then select hue/saturation from the menu. tick the colorize box and move the sliders until you find a color you like. You may be able to stop here or if you like you can add a color balance from the ‘create new fill or adjustment layer’ menu. Once again, experiment with the settings until you find something you like.

This is what my image looks like:
abstract brushing


Now you know the steps required to make an abstract header. However, you don’t need to stop here. You can create more layers, use a combination of brush sets, add images etc. It may take a little practice and trial and error but you will be able to come up with some nice looking images using these techniques.

September 22, 2006

CSS Positioning Overview

Filed under: CSS Tutorials, General Tutorials, General — wardo @ 10:49 am

One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

  • Static
  • Relative
  • Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.

September 7, 2006

Update

Filed under: General — wardo @ 4:59 pm

I’m glad to report that Real Design Network’s traffic has increased significantly recently, partly due to the new tutorials section. I will be posting more tutorials in the near future on a range of topics including web site promotion and CSS. Hopefully, these new tutorials will help others and also draw more people to the site so that they can learn more about web standards and find some top quality web designers.

August 29, 2006

My Top 5 Photoshop tips

Filed under: Photoshop Tutorials, General Tutorials, General — wardo @ 11:51 am

Photoshop is a fantastic program which I have used for all my image editing needs since I started designing web pages quite a few years ago. There are endless shortcuts and tips that you can pick up and I’ve written 5 of my favorites below:

  1. Cycling through blending modes. You can easily more through the blending modes by selecting the move tool from the toolbar and pressing Shift and the + key to move forwards or Shift and the - key to move backwards.
  2. Selecting a layer. This is my favorite shortcut of all. When you want to select a single layer, simply hold down Ctrl and click on the thumbnail of the layer in the layers palette to select it quickly.
  3. Give yourself more space. Sometimes when you are working on a large image you need all the space you can get. Press the tab key and the toolbar and windows disappear so you can concentrate on your image. Press the tab key again to get them back.
  4. Hiding Selections. The marching ants selection can sometimes get in your way and make it difficult to see intricate details. you can hide the selection by pressing Ctrl and H.
  5. Unlocking the background. This is something I have only discovered recently but it is very simple. Sometimes when you open a file, the background layer is locked so you cannot edit it. This can be very annoying but you can get around it by simply double clicking on the thumbnail in the layers palete and clicking ok when the new layers dialogue box appears.

August 22, 2006

Excellent Website Promotion Resource

Filed under: General — wardo @ 11:33 am

I have recently come across an excellent resource for anyone looking for ways of increasing traffic to their site. The article from seomoz.org lists 10 ways to boost your traffic and gives useful examples of sites that have used their suggestions well. You can view the article at www.seomoz.org/blogdetail.php?ID=1220.

August 4, 2006

Tutorials Section

Filed under: General — wardo @ 1:51 pm

I am just about to begin work on a new tutorials section for the site. I will be writing about the techniques I find most useful when creating web pages. I will hopefully be able to persuade other designers to post their favorite techniques as well, so we will have a useful, varied and unique list of tutorials for our visitors. I will be starting off the tutorials section with an overview of blending modes so check back over the next couple of days.

July 25, 2006

Google Co-op

Filed under: General — wardo @ 8:34 am

Google have launched a new program called co-op which incorporates human feedback into its search results. Although the system is still very new and not very useful at the moment, it is something you should start looking into if you aim to gain good results on Google.

Google co-op works by allowing human editors to assign a label to a url which allows users to find very specific and targeted results. The system also allows users to subscribe to certain content. This shows Google that the content from a particular site is trusted, so it is more likely for that site to perform well in search results.

This is a very interesting topic and for more information you can visit http://www.profitchoice.com/articles/coop.php

July 20, 2006

Back to Reality

Filed under: General — wardo @ 2:46 pm

I am now back from my excellent holiday in Thailand. I had a great time and I would recommend it to anyone. Its also good to be back working on this site again and to my delight, I returned home to discover the site being noticed by the search engines. We still have lots of work to do but we are now on the second or third pages of results for some of our key phrases. Thats not bad going for a site thats only a few months old!

July 5, 2006

Update

Filed under: General — wardo @ 8:37 am

I apologise for the directory not being updated for a few days, I am currently in Thailand on holiday. I will be back mid July and will get everything up to date as soon as possible. I will continue to approve new submissions whenever I get a chance to get to an Internet cafe.

« Previous PageNext Page »

AddThis Social Bookmark Button