Free Adobe Training, Learn, Tricks, Tips, Beginners, How To, Adobe-Masters.com

How to Organize A Header Logo and Menu Icons In Photoshop

MsMoneyGirl.net — Thu, 04 Dec 2008 02:40:25 +0000

I started my first practice of designing a website from scratched months ago here at this How to Design A Website from Scratch, Interfacing In Photoshop for PSD - Part One blog post.

This is a project of me following a Fundamental Interface Design tutorial. I had to clear up some issues along the way. For instance, I had to find out How to Create Menu Icons In Photoshop. So far I’ve created two, but then I hurdled the How to Integrate Menu Icons Into Photoshop Web Design to make it all work. Its a good thing I’ve blogged all the notes thus far. That way its easy to pick up from where I left off.
(Anyone just starting and want to design a website from scratch should start here.)

Getting through the 3 links text links paragraphed above lead me to this design. So moving along…

How to Organize A Header Logo and Menu Icons In Photoshop

My header consists of a logo title and three menu icon buttons as shown below…

Photoshop has both a “distribute horizontal centers” and a “distribute top edges” tool that should be used to organize the header items evenly across the page. I did so by selecting the all 3 menu button layers and clicking the distribute command from the options menu as explained here. View the options menu by hitting Windows > Options.

Okay, now that the header is organized the next step is to keep working towards the final result that will someday look something similar to this.

Did you know…

How to Make An Animated Head Banner Gif - animated banners can be configured in Photoshop

How to Auto-Resize Numerous Images - yes, you can size multiple images in Photoshop too

How to Upload Custom Shapes Into Photoshop - in fact, custom shapes were used to create the menu icons you just read about up above

Free Spry Menu Download - Bonus Website Evaluation HTML Form Included

MsMoneyGirl.net — Tue, 02 Dec 2008 07:32:42 +0000

The How to Add Button Image to Dreamweaver Spry Menu tut unveiled the fact that people are looking for something more than a tutorial. I wouldn’t dare call the people who hit this page for “free spry menu” or “spry menu download” lazy. Instead, I’ve made the vow to provide a free spry menu here at Adobe-Masters.com. I have a work-whenever-I-feel-like-it career, therefore time is not an issue. So here’s my contribution to make an easy way out for those who want it…

Free Spry Menu Download - Web Evaluation Form Include
Instead of submitting a vertical spry menu on a blank page, I’ve included a website evaluation form to partner the spry. Its a simple fully functional form that will let you collect data from your site visitors. Be sure to check out the readme file and Dreamweaver: The Missing Manual for proper setup.

If the spry menu is all you need, just download the file package, copy the code from the index file, save the .css file along with the Spry and Image folders while discarding the rest.

Click on the image below to view the live demo. Download the Free Spry Menu Download - Web Evaluation Form Include at DownloadHTMLForms.com!

Free Angel Vectors - Downloads, Graphic Collection

admin — Wed, 26 Nov 2008 07:34:31 +0000

I’m in my old dictionary for the meaning of “Angel”, in which is defined as one of an order of spiritual beings that are attendants and messengers of God. Struggling with one has been an inspiration to locate a few free angel vectors that were put out here on the world wide web by graphic designers for use by web designers.

I’m booking this as a reference to re-visit for when I decide to make an angelic webpage.

Free Angel Vectors - Editable Downloads

CoolVectors.com - The angel vectors at coolvectors.com sort of remind me of fairies. They’ll easily pass for the tooth fairy or the god mother -:) Some find them useful for wallpapers, but they, like all vectors can be used for almost anything.
KeepDesigning.com - Then there’s the Vintage Angel Vectors that are prominent all over the web for free downloading. Its an eight pack offered for free personal or commercial use. I’m using one of them on this post that you’re currently reading. Its edited with a satin multiply blend mode.
AllForPic.blogspot.com - All for pic has posted just one angel vector. Its a beautiful image of a one-winged praying young girl.
FreeVectors.net - There are a few angel illustrations at the free vector site. Take a look at the City Of Angels, Un Gran Angel, and the Free Wing Pack.
Dezignus.com - An awesome wing pack!
Vector-Images.de - Check out cliparts in the Religion and Mythologie categories that can be downloaded and easily edited with Adobe Illustrator.

Where to Find Angel Graphic Tutorials

ByuDragon.com - This is a seven page tutorial for creating a carol angel for the holidays.
GoMediaZone.com - Learn how to create an animated flash file of an angel growing wings.

I wonder if there’s any other angel vector files available for download? I’m hoping they’ll help me to love more. Feel free to submit your links.

Adobe Illustrator CS4 - New Release

admin — Mon, 24 Nov 2008 23:38:53 +0000

Yes, I’m still enjoying the Adobe Illustrator CS3 version. But after looking into what the new Photoshop CS4 offers, I’m interesting in seeking what’s new in Illustrator CS4. Yes, for the most part readers here are happy with the responsible links I contribute, so I’ll be sure to continue doing what I do. No stopping now, so get ready to explore this new Adobe Illustrator CS4 with me…

Adobe Illustrator CS4 - New Release

The New Adobe Illustrator CS4 offers ten new features. See them all in a nutshell on adobe.com. The best new feature of all I’d say is the Multiple Artboards capability. The previous versions can hold more than one art peice, but the new CS4 allows you to treat them as seperate files. See a quick demonstraton here. Thegraphicmac is saying don’t upgrade, but he’s digging these new multiple artboards. And by the way, the maximum is 100 artboards.

Adobe tells us all the features on the text link click above, but what’s the new interface and how does it look? Get an insiders look at gomediazine.com. The new preset tool is great for users who work multiple projects. Be sure to chime in for the blob brush video presentation along with the document management video, and then the creativepro take.

So what’s new in Dreamweaver? I can’t wait to find out! All of this comes with the Adobe Creative Suite 4 Master Collection.

Adobe Photoshop CS4 - New Release

admin — Mon, 24 Nov 2008 01:20:44 +0000

Adobe Photoshop is the industry standard for professional photo editing, graphic design, and digital imaging. Adobe Photoshop CS4 is the latest and most current version of the software that was recently launched this fall. Click the image for the product link but do consider the Adobe Creative Suite 4 Master Collection if you are a “I want it all person”.

The previous Adobe Photoshop CS3 version is great, so I’d imagine CS4 to be much better. So what’s exactly does CS4 offer that the previous version don’t?

Adobe Photoshop CS4 - New Release

An email from graphicsoft.about.com listed six (6) new features: OpenGL Graphics Card Acceleration, Adjustments Panel, Masks Panel, Content-Aware Scaling, and other improvements. Check out some of the other improvements at OnOneSoftware.com.

As explained in an example of extracting a tree from a photo to place over a new background, NotesOnDesign is happy about the new mask panel as a better way extract objects instead of the CS3 extract filter.

Watch the What’s New In Photoshop Video…

Adobe Creative Suite 4 Master Collection

admin — Sun, 23 Nov 2008 17:36:58 +0000

It seems like it was just yesterday when I brought and wrote about the Adobe Creative Suite 3.3 Master Collection, and now Adobe is out with version 4. So now that 3.3 is old news, its upgrading time. Here’s the Adobe-Masters.com page updates…

The wonder working software is now packaged in a sleek new mettalic-like box.

Here’s all the goodies it comes packed with:

Adobe InDesign CS4 for professional page design
Adobe Photoshop CS4 Extended for new dimensions in digital imaging
Adobe Illustrator CS4 for powerful vector graphics creation
Adobe Acrobat 9 Pro for Adobe PDF creation, collaboration, and high-end output
Adobe Flash CS4 Professional for creating rich interactive content
Adobe Dreamweaver CS4 for developing standards-based websites and applications
Adobe Fireworks CS4 for web prototyping and designing
Adobe Contribute CS4 for updating websites and blogs
Adobe After Effects CS4 Professional for industry-standard motion graphics and visual effects
Adobe Premiere Pro CS4 for capturing, editing, and delivering video
Adobe Encore CS4 for authoring DVD and Blu-ray Discs and exporting SWF files to the web
Adobe Soundbooth CS4 for creating and editing audio quickly and intuitively

Adobe Creative Suite 4 Master Collection is a value pack. Its a one stop shop for Adobe where you’ll never need to make another purchase for design creations after getting this all-in-one package deal.

If you’re like me and already have the Adobe Master suite, then you’ll just need the Adobe Creative Suite 4 Master Collection Upgrade from Master Collection CS3 disk.

How to Add Button Image to Dreamweaver Spry Menu

admin — Mon, 17 Nov 2008 04:04:28 +0000

This short write up will be good for customizing a menu bar in dreamweaver with a button image. The menu will be a spry type and vertical.

How to Make A Vertical Menu In Dreamweaver

Feel free to read this link for instructions on how to create a vertical menu bar. See the MsMoneyGirl.net: Paid Shopping vertical menu example below.

After creating your vertical menu you’ll see that’s its very basic. It will look like this at first. Adding a button to the menu will make the page more stylish. The button used in the example shown above is a gradient pink outlined in a yellow stroke.

How to Add A Button to Dreamweaver’s Spyry Menu

The easiest way to add a button to your new spry menu is to head over to the CSS menu to locate the “u1.menubarvertical a” style. It can be found under SpryMenuBarVertical.css within your html document.

Then, you’ll need to click on “Add Property” to insert the button image. After doing so you should see the new appearance of your new button.

You can stop here or add a colored text box with round corners to make the page even more interesting.

Where to Find Buttons

This tutorial assumes that you already have a button that you’d like to use. If not, check out this How to Use Free Illustrator Buttons In Photoshop and On Website article. You’ll find the same nice button download link I used for the example menu bar example shown above. As an alternative, try the cool text tool.

Now for some good web videos or a free spry menu…

Watch the latest videos on YouTube.com

Odesk - Find Web and Graphic Designers

admin — Thu, 13 Nov 2008 19:39:01 +0000

So Odesk is the hot topic for today probably for its profile on Good Morning America! Odesk is a site where you can Hire, Manage, and Pay remote contractors as if they were in your office. Read about “O Desk” below…

I’m signed with Odesk as a web programmer. The site is a connection to web professionals. I recommend it all the time to contacts who visit Adobe-Masters.com for purposes of installing html forms.

The outsourcing program allows website owners and company to post projects for a fixed price or hourly rate. Its a great site for new projects. Odesk is known around the web as a working solution that has your back. I give it a thumbs up for all businesses, webmasters, designers, and programmers.

How to Create A Colored Text Box with Rounded Corners - Dreamweaver Tutorial

admin — Tue, 04 Nov 2008 00:28:17 +0000

What’s up! I just made comments popup in wordpress and now I’m creating a text box for my new shopping page while taking a break from differing with politicians…

Ever wanted to post a box with rounded corners some place on your website to display some text message to your web visitors?

There are generally two ways of accomplishing this desire. The first way is to use an image editing software such as Adobe Photoshop to create the box with text to save it as an image. The second way is to generate the box using xhtml and css using a web editing software such as Adobe Dreamweaver.

Here we will take the second option to compose our text box with xhtml and css for better search engine optimization. We can add text to the actual web page, where in the first option we’d be adding the text to an image. Search engines are good for crawling text on a page, but they cannot pick up text in the form of an image (unless you’re using alt or title tags, but that’s a different story).

How to Create A Colored Text Box with Rounded Corners - Dreamweaver Tutorial

So why not do it the easy way? Use the CSS Rounded Box Generator as a tool. Be sure to follow the steps below to generate the box.

Enter your colors
Save all five corner images, upload them to your images folder
Copy the css, and paste it into your css file
Copy the html, and paste it into your html file

Want to see it? Let me show you an example. I’ve created a Yellow colored text box for my new shopping template. Its at the top on the left sidebar.

After using the generator tool, I happened to noticed that their were two modifications that were necessary to properly fit the box on the left sidebar. I changed the both width settings to a fixed 160px, specifyed my image locations, then I changed the the auto setting in the margin to 0 to remove the indent. All of these were css modifications for a brand new round corner text box.

Now for some good web videos…

Watch the latest videos on YouTube.com

EyeGlass Graphics - Zenni Optical On Fox News

admin — Fri, 31 Oct 2008 15:42:01 +0000

Zenni Optical was on FOX news! I found the article and video on the Zenni on Fox link.

I wrote about the Variable Dimension Frames From Zenni in the past because its a good choice for eyewear. Its great to know where to find Great Eyeglasses For Less.

Click the image below to download eyewear graphics and cliparts.