Non-Destructive Editing in Photoshop
No Reply
March 26th, 2008
Datis Design Weblog
Designing for Communicating
Maybe you have heard destructive and non-destructive editing in Photoshop, but what they really mean ? Advanced Photoshop users always try to use non-destructive editing. This method of editing means that anytime you can change these edits or remove them easily. This method is differ from History Palette , this method is always available for you to edit even when you close and open your file in future but History Palette is only available when you are working on your file and when you close it, the history will gone !
How can we use non-destructive method ?
One of the most common used features in Photoshop is Adjustments, if you use it from Image menu and select one of the Adjustments from there, you will use destructive method, because after adding some of those adjustments then you cant come back and reverse them. But there is a nice way to do it in non-destructive way, for doing, go to layer palette and at the bottom you will see some icons, look at this picture :
As you see there is 3 icons that I have put their names, for using adjustments select your desired layer and select Create a new fill or adjustment layer, after doing this you can always come back and edit the changes you have made to your layer or remove them so easily without losing your original file. But note that not all of the adjustments are included in this way !
One of the other icons is for Add layer mask, this is one of the another useful methods in Photoshop, when working with images usually we need to remove some parts of image or select some part of it and edit them, we usually chose eraser tool or selection tools to edit such things, but with clicking this icon we can easily add a layer mask to our image and edit it as we like without losing our original image.
Another icon represents Add a layer style which we can easily add effects to our layer and edit or remove them later.
One of the powerful features that has been added from CS2 version is ability to work with smart objects. With this powerful tool you can convert your layers to smart object and resize or transform them without losing their original quality. Also you can easily bring Illustrator file into Photoshop which will known as smart object and when you edit the original file in Illustrator and save it, when you come back Photoshop will automatically update it.
For making a layer a smart object you can go to layer menu, select smart objects and select convert to smart object. Or you can choose your layer in layer palette and right click on it and choose convert to smart object.
After converting it to smart object a small icon will appear in layer thumbnail, look at this picture :
If you double click on this icon you can easily edit the original file, if it is from external program, the related program will be open and then you can edit it, if you convert it inside Photoshop, then a file with .psb extension will be opened and then you can edit it and save it, when you come back to your file it will be updated automatically !
At the end always remember that doing your edits in non-destructive mode make your work take longer time, but at the end you have this ability to always come back and edit or remove your effects or adjustments or anything else…
For using a sound in Flash Actionscript we must use Linkage properties and choose Export for Actionscript option. Look at this picture :
Choose a suitable name for Identifier, because you will need it in Actionscript.
In next move we should make an object from our sound :
mySound = new Sound();Then with the name we choose for Identifier before we attach it to our object:
mySound.attachSound("test");With start method we can make our sound file play, the first parameter will tell Flash to start sound at the specific point (in seconds). Second parameter will specify number of loops :
mySound.start(0,99999);Some of sound methods
- stop methol will stop the sound.
- position method will store the stop point of sound in milliseconds.
- setVolume method will specify the sound volume.
- getVolume will get the sound volume. (between 0 and 100)
- setPan will specify on which channel should sound be played, the value is between 100 and -100
- getPan will return the current Pan value.
- setTransform method will use and object with 4 parameters.
- duration method will return the length of the sound in milliseconds.
Happy new year for all Iranians in all over the world… Wish you a good year full of happiness and successes .
Farshad
One of the most important parts in every web site is its navigation system. Its better that navigation system follow these rules :
- Tell me where I am now
- I can easily find the difference between normal text and hyperlinks
- Tell me where I can go from here
- Tell me where I was before
- I should know what will happen if I click the link
Navigation should be somewhere that user can easily find it, Usually in Web 2.0 designs it is on top of the web site where the header is, and it is better that you follow this rule too.
If it is possible for you try to not use complicated menus with so many links and sub menus, try to guide user to reach all places of the web site with least menu links. Users usually lose their path with complicated menus and leave the site.
One of the most not to do is that try not to use flash menus, as I said before menus are the main part of the web site, and if a user couldn’t see the menu, simply he/she will lock in first place and cant go any further and leave the site. Also try to avoid DHTML and Javascripts menus. Maybe someone has disabled its javascript ! One of the other things that you should avoid is not to put only pictures for links (Rollovers), when user roll over it then the text appears, there is no standard for telling that this specific picture guide people to "About Us" page ! If you want to put icons for links, always put texts beside them.
And in the last, remember that simple menus are best for most of the users, always use simple words for links and don’t make users think about the meaning of menu word !
I have decided to make some space for your logo in my weblog, if you have a weblog or web site you can send me your logo in jpg or gif format with the size of 100×100 pixels to my email address.
I would like to ask those friends that send their logos for me to put my weblog link or my logo in their web site or weblog too if it is possible.
Best Regards,
Farshad
SVG stands for Scalable Vector Graphics. Illustrator can export the SVG files, also it ships with SVG viewer plug-in, which works with different browsers to play back SVG graphics and web pages.
Also there is SVGZ format which is compressed version of SVG.
SVG format features :
- Fully scalable for zooming and panning
- Pixel perfect positioning
- High resolution gradients, drop shadow, and other filter effects
- Enhanced color control and color accuracy
- Highest possible printing resolution
- Better typographic control including kerning, text on a path, and unlimited fonts
- Editable and searchable text
- Ability to search text elements within graphics
- Dynamic content, animation, and interactivity through scripting
- Compact download sizes
- Cascading style sheet support (CSS) enabling global web site changes
- Multiple levels of transparency
- Support for other devices such as palmtops, GPS, cell phones
In this tutorial I will create a header with menu for a web site using Photoshop, You can download the final .psd file from this link.
First create a new document in Photoshop as any size you need, I will create a document with size of 800 x 250. Then create three layers and color them as you like, look at this picture for example :
Now I will give some effects to these layers using Layer Style menu, I will give Gradient Overlay to the narrow green layer on the top, Drop Shadow to the blue background, and Drop Shadow, Inner Glow and Gradient effect to light blue layer. Look at these pictures :
Final image will look like this :
Now create some boxes for menu links, Select them all and bring them under the light blue layer. I gave each boxes the Drop Shadow, Inner Glow and Gradient effect, Also you can give an effect with Color Overlay for Rollover part. At the end you can add any other elements that you want, my final image will look like this : (Click on image for full size view)
As you know, colors are one of the important factors for attracting a user attention, when you enter a web site first thing that attract you is the color scheme of the web site. If you like the colors you will stay longer and if you don’t like them you will leave the site !
But each color has its own meaning and personality, choosing a right color when you are designing a web site is very important. Because if the chosen color matches the web site goals and services the user will feel better when browsing the web site. In this post I will tell the meaning of some important colors, hope it will be useful for you.
Red
Useful for love, feelings, danger, warning, food, action, impulse, …
Blue
Useful for trustworthy, success, calmness, power, professionalism, seriousness, …
Green
Useful for nature, money, animals, health, cure, life, harmony, …
Orange
Useful for comfort, creativity, fun, celebration, youth, …
Purple
Useful for justice, luxury, royalty, ambiguous, dream, fantasy, …
White
Useful for innocent, purity, simplicity, cleanliness, …
Yellow
Useful for amusement, curiosity, playfulness, cheerfulness, …
Pink
Useful for softness, sweetness, innocence, youthfulness, tenderness, …
Gray
Useful for neutrality, indifference, reserved, …
Brown
Useful for earth, nature, simplicity, tribal, primitive, …
Black
Useful for seriousness, darkness, mystery, secrecy, …
At the end again I think that following rules won’t give you the best result always, combining creativity and rules is the best choice I think.
Finally Microsoft published a beta version of Internet Explorer 8, it has some new features like :
- Activities
- WebSlices
- Favorites Bar
- Automatic Crash Recovery
- Improved Phishing Filter
Lets hope this version has better rendering engine for web designers and web developers, also for other users.
You can download and test the beta version from here :
Nowadays you see many web sites that known as web 2.0, what is the design elements that make them web 2.0 excluding the technical details ?
In this post I will try to explain these factors briefly, but remember that using these method without using imaginations and inventions will result in repetitive and monotonous web sites. So best choice is understanding these factors and use them with your imaginations. I learnt many of these elements in Web Design from Scratch web site, you can visit this site for detailed information.
Simplicity
If you see the new designs, you rarely see those complex designs with complex data. Web sites are going to be simple and effective. You should tell the user what are you doing in this web site in shortest time, and this can not be done without simplicity. Throw away elements that are not necessary.
Central Layout
When you put your web site in center of the user browser window, user feels good and communicate with your site more easily.
Fewer Columns
In recent years web sites has 3, 4 columns, but today they are going to have 2 columns, because we are going to make our sites more simple and then we don’t need more columns. At most use 3 columns if 2 is not enough for you.
Separate Top Section
Web site header which includes navigation and branding should be separate from the whole site, it means that you should help user to find it easily.
Simple Navigation
Navigation should be fixed and same on all web site pages, user should bee able to work with it easily and go everywhere he/she wants. It is very important part of the web site, without it users can not do anything.
Bold Logos
It is better to design a logo for the web site that user can easily see and remember it.
Bigger Texts
When we discard unnecessary elements, we will have more space then we can make our texts bigger. Bigger texts are more readable for users and makes them feel good.
Bold Text Introduction
If we have a simple and important sentence to tell the users we can put it bold and big in our home page to tell the users what we do when they enter web site.
Strong Colors
With strong colors we can make user to pay attention on specific section, but remember that using this method can make users confuse, so use them smartly.
Gradients, Reflexes, Cute Icons
You see these methods many times in many web sites, don’t you think they became repetitive ?!!!
Those were some methods you can use in your designs, but as I said before try mix them with your imagination and innovations. Again in my opinion FireFox Web site is one of the best examples for above factors, if you see the web site you can see many of these elements .
