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

Adobe-Masters.com January 2009 Newsletter

admin — Mon, 05 Jan 2009 10:04:28 +0000

The adobe-masters.com newsletter is now available for downloading. Its the January 2009 issue covering news about the site, 2008 accomplishments, and other web design resources.

This is actually the first newsletter for this site. Look forward to seeing a “How to Make A Newsletter In InDesign” article. Its coming your way soon. Be sure to subscribe for free updates.

Adobe-Masters.com January 2009 Newsletter

Download Link

How to Add A MP3 Music Player to A SBI SiteSell Page - Dreamweaver - Flash - Adobe

admin — Sun, 04 Jan 2009 17:16:31 +0000

Would you like to place an automatic MP3 or music player on your website? I’ve just featured a celebrity kitchen at DaughtersKitchen.com. The best part is that it plays music as soon as someone hits the page. See and hear the DaughtersKitchen.com Celebrity Kitchen demo, hear the music.

How to Add A MP3 Music Player to A SBI SiteSell Page

I used the Create a AS3 MP3 Player with papervision3d spectrum display tutorial files to make the player. The techlabs partners made the play blue and green by default. However, they are very clear on how to change the color using color hex values or color codes. I happened to change the color to red and a few shades of gray as shown below.

Let’s get started with uploading the mp3 player into SBI SiteSell. If you need to catch up with an account, click here to become a SBI owner.

Step One: Editing the Flash File for A ReCompile

Start by opening the flash document with Adobe Flash. Go to the Windows menu to pull out the Actions. Find the “so-deep.ram2000.mp3″ peice and change it to “media-files/so-deep.ram2000.mp3″ so that the file is properly located on your SBI server. Refer back to the techlabs.com link for understanding. Feel free to edit the color codes. Then save and publish.

Step Two: Upload Your Supporting Files

You’ll need to upload the pv3d-spectrum1.swf file into the SBI Site Central. Just look for the “Special File Manager” button. Go ahead and upload your music file too. In this case its the so-deep.ram2000.mp3 file.

Step Three: Editing the HTML File

There are four edits that should be made within the your html to properly display the flash music player. SBI words what we are doing in this step as “relative-reference” your files and images. We are simply providing our files and images location. Adobe Dreamweaver is a good software for these modification edits.

Change “AC_RunActiveContent.js” to “support-files/ac_runactivecontent.js”

Change ’src’, ‘pv3d-spectrum’ to ’src’, ’support-files/pv3d-spectrum’

Change ‘movie’, ‘pv3d-spectrum’ to ‘movie’, ’support-files/pv3d-spectrum’

Change src=”pv3d-spectrum.swf to src=”support-files/pv3d-spectrum.swf

There you have a MP3 music player on your SBI SiteSell page. Don’t forget to subscribe to Adobe-Masters.com for free updates. Any comments?

How to Create A Text Box With Tabs - Spry Tabbed Panels - HTML

admin — Sat, 03 Jan 2009 21:04:08 +0000

I read all about collapsible panels at layersmagazine.com. The collapsible panels are actually text boxes that can be placed on websites and users can expand the box with a click to read the content inside. The boxes were created in dreamweaver.

Playing around with the spry options lead me to creating something that I adore so much, spry tabbed panels. The adobe-masters.com homepage features a text box with tabs for Lead Article, Popular Post, Recent Post, Recent Comments, and About the Site. I like having tabs. They are good for cutting down the amount of spaced used on a web page, especially if you’re presenting lots of content.

The following steps show How to Create A Text Box With Tabs - Spry Tabbed Panels for a simple html page using javascript. We’re using the spry tabbed panel on the DaughtersKitchen.com Cookie Diet page as the example.

Step One - Creating the Tabbed Panel: Open Adobe Dreamweaver. Create a new page as we did on the one page auto template page. Then, select Spry from the Insert Bar drop-down list and choose Spry Tabbed Panels.

Step Two - Customizing the Tabbed Panel: Two tabs are generated in step one by default. Customize these tags with a name by typing in something like “About the Cookie Diet”, “Cookie Flavors”, “Ingredients, or “Testimonials” like the example above.

I was able to modify the tab color within the properties for .TabbedPanelsTab, .TabbedPanelsHover, and .TabbedPanelsSelected in the SpryTabbedPanels.css file.

The expample above also uses a brown background image instead of a color. Insert a similiar background image in the .TabbedPanelsContentGroup by adding a background-image property. You may refer back to the wine and dine page tutorial image from this background image tutorial for help.

Step Three - Make your Spry Tabbed Panel Live, Publish It: This spry tabbed panel was uploaded into site build it for sitesell for this DaughtersKitchen.com page. I’d be happy to share the steps it took to integrate the spry tabbed panel into SBI upon request. Just leave a comment if you’re interested in seeing this as the next Adobe-Masters.com tutorial post. Don’t forget to subscribe for free updates.

How to Create A HTML Food Table In Dreamweaver With A Colored Border

admin — Fri, 26 Dec 2008 08:43:03 +0000

A table should be used on websites if you choose to display various rows and columns of information. Each row can represent an item. Most people take advantage of columns because they section off items according to different features.

In this case the item is food. The example used here shows the food type, a related image, and descriptions within three columns. The food table is a list of Deron’s Top Ten Foods for a purposeful kids foods list.

Click the image above to live demo the site sample. Its actually the first page created on my new DaughtersKitchen.com a product of DaughtersFoodKitchen.com, sponsored by MomsFoodKitchen.com, and hosted by SBI - Sitesell.

How to Create A HTML Food Table In Dreamweaver With A Colored Border

You can get started right away with Adobe Dreamweaver when it comes to creating or inserting new tables into a webpage. Quickly click “Insert” from the top main menu, then select “Table”. Its not difficult. See what I mean on the image below.

After selecting insert and table, there will be the opportunity to enter the amount of rows and columns you wish to have. In addtition to the number of columns and rows, enter table properties such as table width, border thickness, cell spacing, alignment, and even a description.

Table Border Colors

The top ten food list example shows a red background (Bg color) color in the first coloumn and a red border (Brdr color). Check the image below to locate where to modify the colors.

So now you have it. Simple html table examples along with the basics can be found at w3schools.com. Don’t forget to subscribe for free updates.

Hip Hop Sites - How to Make A BeatzNation.com Clone

admin — Thu, 18 Dec 2008 10:35:00 +0000

BeatzNation.com is a goto website for hip hop articles and news. Music fans visit all the time for fresh content and to read up on the latest plays in the hip hop game.

The following tutorial will show you how the BeatzNation.com site was created. The steps layed out in this post can be used to create a website of any topic or niche whether it be music related or something totally different.

Hip Hop Sites - How to Make A BeatzNation.com Clone

Click on the image above to live demo the site.

Are you ready to create a website? Or how about adding another site to your online portfolio? A clone of this site can be achieved in less then 30 minutes by completing 4 simple steps.

Step One: Register A Domain Name

Lets start by registering a domain name. The domain name should be something that describes your site. Mark mentioned some good ideas on how to select a domain. Just try to be creative while using the least amount of characters as possible while completing your Domain Registration.

Step Two: Optimize Your Domain Name

Now that you have your domain you can fully optimize it will rich content and interesting articles in the matter of minutes with enhanced domain parking. Simply sign up for an account, configure your name servers, and enter your keywords. For instance, if you chose an educational topic, you’d enter keywords like training, careers, and universities, etc..

Step Three: Create A Favicon

Favicons are known as “favorites icons”. They are shown inside the browser’s location bar as well as the bookmark menu when someone loads a site. Nick has a great tutorial up on how to make the icon without photoshop and so does hakironce. Creating a favicon is a good way to distinguish your site, so just come up with a image then,

head over to dynamic drive to use the favicon maker tool.

Step Four: Customize the Header

This last step is optional. You are all set after step two as far as the header goes. However, if you’d like to add to it or animate it, open up Adobe Photoshop after seeking out some related illustrations for your site. I found a packet of free hip hop vectors. There were quite a few that came in the packet, so I picked one at random and used a portion of it for the BeatzNation.com header. For best results, always use Adobe Illustrator for editing vectors. After editing the vector in Illustrator I imported it to Photoshop to finish the modifications.

Thank you for visiting Adobe-Masters.com.

Subscribe now for free updates.

Watch the latest videos on YouTube.com

The Key to Making Round Corner Edges In Photoshop Pictures

MsMoneyGirl.net — Tue, 16 Dec 2008 15:56:51 +0000

“How can I make the corners round on this image” is what I went to discover this morning…

I was editing a photo for a resize and needed to crop out the a piece of the ceiling. Crop after crop proved that there was no way to get rid of it without cutting out parts of the image that I wanted to keep.

Here was the dilemma…

The lighting in the upper left corner makes the photo odd and wouldn’t add to taking a blog post to the next level. The best solution for this case is to round off the corner edges. Now how do I do that again?

The Key to Making Round Corner Edges In Photoshop Pictures

I’m happy for Matt Thommes’ Fast rounded corners in Photoshop presentation, and yes it was fast. The real key to making round corner edges in photoshop is to (1) make a rounded rectangle, (2) open the Path Window, (3) highlight the vector mask, and (4) right click the vector mask to “Make Selection”. This brought back memories of the website tag tutorial. I used the “Make Selection” there too. (5) The last step requires a copy merge and paste.

So now the edges are round…

Website Hosting, Website Promotion, Marketing, Why I Became A SBI Affiliate

admin — Tue, 16 Dec 2008 06:17:32 +0000

Okay, so I’ve heard enough about SBI. I’ve even had a few clients who have came to me to set up their SBI sites as clones with matching blogs this year, and now I’m finally giving it a thumbs up.

Why I Became A Site Build It (SBI) Affiliate

Brian gives good insight about cheap hosting deals. The SBI hosting is a flat rate of $299 a year for a site. This is quite pricey and I can remember me telling my clients to ditch SBI for something more reasonable like the beloved HostGator Web Hosting that I’m so pleased with. But now I’ve come to realize that the SBI service may be the best thing for new website owners and it brings simplicity to the more experienced when it comes to building a website.

So why did I Become a New SBI affiliate by Joining the SiteSell Five Pillar Affiliate Program? There was alot that lead me to believing in the program and actually signing up. I’ve ran into website owners that were either using SBI to host their site or promoting it on blogs or vlogs. They were all happy with it, plus I’ve heard many success stories and accounts of steady website traffic. But most importantly, I was able to see the proof for myself. Its always better to research and go through the case studies on your own.

SiteSell Website Hosting, Website Promotion

With all of the above being said, I’m ready for a SBI hosting account. Even more so since there’s a Buy One Get One Free SBI Holiday Special that’s being offered up until December 25. So that means two for the price of one, or in my case, one for me and one for a family member. I’ve been a SBI spectator for some months and I know that this type offer isn’t very often, so I’ll be sure to sign up and send out updates to all my friends.

Google Friends Connect Review At Adobe-Masters.com - Wordpress

admin — Mon, 15 Dec 2008 05:32:15 +0000

I just read all about the new Google Friends Connect that’s out to enrich websites by attracting more visitors. Its a social feature for webmasters accessible by Google, Yahoo, AIM or OpenID. I didn’t delay in adding it to the Adobe-Masters.com homepage, and I like it. If all goes well, I’ll integrate it site wide in the side bar.

Google Friends Connect Review At Adobe-Masters.com

Setting up Adobe-masters.com on Google Friends Connect was as simple as uploading two files to my server and inserting the html code into the main index template file since this is a wordpress powered site. The easier alternative would be to follow the expand2web tutorial to add google friends connect to a wordpress site as a widget.

As for the google friends connect goodies…

There’s the ability to add member and social gadgets that will allow site visitors to join and socialize on your site. After set up, you’ll be able to manage members and moderate posts. There’s even a report link that graphs membership totals, and a link to add additional administrators as well.

I’ve notice a few other bloggers like Dav, Orli, Leila, FanManLib, Gene, Louis, Kevin, and Amit who are using this new service too. GFC will be great for meeting new people so be sure to join.

Adobe Dreamweaver CS4 - New Release

MsMoneyGirl.net — Mon, 15 Dec 2008 03:58:51 +0000

Reviewing my top ten dreamweaver tutorials list and the One-Day Web Publishing Workshop notice makes me want to know more about the all new Adobe Dreamweaver CS4 user interface. All workshop attendees will receive the workshop workbook and a 30-day trial to the Lynda.com Online Training Library. But here’s a focus on the new software release itself…

Adobe Dreamweaver CS4 - New Release

Check out the new user interface in its entirety in this video!

The Adobe Dreamweaver CS4 offers a “Live View” of your website. This is the top new feature and I think its a great announcement by adobe and blogged by vhxn. I was happy with the “design view” in Adobe Dreamweaver CS3 coupled with the “preview in browser” function but this new live view for code editing is even better.

The “InContext Editing” is a nice edition for team collaborations. Its a feature where end users can make modifications to web pages own there own. But they say here that a this service will be available as a preview technology (that requires an internet connection) from adobe.com. Jeff speaks more about the InContext Editing it here.

The “Code Hinting” feature is something very positive for programmers. The code hints feature helps you insert and edit code quickly and without mistakes. Its a good thing for javascript and ajax frameworks.

Now I’m looking for information on the new “html data sets”. This new capability is cool enough to let you insert dynamic data in html format. Doug is listing this as a top 5 feature. From what I’ve seen on the short visual, this is something I wouldn’t mind using it.

Woa, just after I thought of ending this post leaving the rest of the new features as a thing to do for some other time, I’m learning that the new Dreamweaver lets you edit PSD files without opening Photoshop. Now that’s a nice feature. Adobe also boasts the capability to edit AIR applications directly from Dreamweaver, and the ability to view and navigate related files. Lastly, the new release integrates with Subversion.

The Adobe software at up to 75% off for students, teachers, and schools as well as the Free Shipping on ALL Adobe CS4 is so well worth it for the new Dreamweaver software. These purchase links are for the Academic Superstore. In addition to Academic Superstore, I always check amazon or adobe to select the best buy.

Getting Started With Dreamweaver and CSS One-Day 2009 Workshop

MsMoneyGirl.net — Wed, 10 Dec 2008 06:49:50 +0000

Want to learn how to use dreamweaver? I received the details for a full day of in-depth training by an industry pro.

The pro instructor is Brian Wood, an Adobe Certified Creative Suite Master.

The workshop is set up for you to learn everything you need to know about building compelling CSS-based websites using Adobe Dreamweaver CS4, a software upgrade from previous Adobe Dreamweaver CS3.

Getting Started With Dreamweaver and CSS One-Day Workshop

Should I go? I’m really thinking about it. According to the workshop pamphlet, art directors, graphic designers, production artists, publishers, and web designers should attend. The basic at a hands on level will be covered. Attendees will get to add images, links, navigation and more, while learning to work with the tools, workspace and panels in Dreamweaver CS4. Then there will be the opportunity to experience spry navigation menus, and design and video content incorporating from Photoshop, Illustrator, Fireworks and Flash.

Would you like to attend this all new 2009 workshop? The workshop will be held at the following locations: Los Angeles, San Diego, New York City, Philadelphia, Cleveland, Minneapolis, Portland, Seattle, San Francisco, and Chicago.

Find out more at mogoseminars.com.

Watch the latest videos on YouTube.com

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

Adobe-Masters.com January 2009 Newsletter

Related Tutorials:

How to Add A MP3 Music Player to A SBI SiteSell Page - Dreamweaver - Flash - Adobe

Related Tutorials:

How to Create A Text Box With Tabs - Spry Tabbed Panels - HTML

Related Tutorials:

How to Create A HTML Food Table In Dreamweaver With A Colored Border

Related Tutorials:

Hip Hop Sites - How to Make A BeatzNation.com Clone

Related Tutorials:

The Key to Making Round Corner Edges In Photoshop Pictures

Related Tutorials:

Website Hosting, Website Promotion, Marketing, Why I Became A SBI Affiliate

Related Tutorials:

Google Friends Connect Review At Adobe-Masters.com - Wordpress

Related Tutorials:

Adobe Dreamweaver CS4 - New Release

Related Tutorials:

Getting Started With Dreamweaver and CSS One-Day 2009 Workshop

Other Tutorials: Adobe-Masters.com: