Tutorial: Apple Style Reflection in Photoshop

You know the cool interfaces and looks Apple creates in their software and on their web site? It’s often shiny, glossy, has shadows and reflections are everywhere. You can make reflections yourself really easy in applications like KeyNote and Pages just by clicking one button. It’s not quite that easy in Photoshop but we’ll show you how you can create a high-quality reflection in just a few easy steps. We’ll work with a text but the same principle can be applied to a photograph.

هل ترى الاشكال التى تبتكرها ابل على برامجها و على موقعها الاليكترونى. انها  ظلال و انعكاسات مشرقة و جميلة فى كل مكان. تستطيع ان تبتكرها بنفسك فى بعض البرامج مثل KeyNote  و Pages بمجرد ضغطة زر. الامر ليس بهذة السهولة فى برنامج Photoshop ولكننا سوف نريك كيف تنشأ انعكاسات فائقة الجودة فى بضع خطوات يسيرة. سنأخذ هنا مثالا على نص الا ان الامر يسرى ايضا بنفس الكيفية عتى الصور.

Step 1

Open or create the picture you are going to work with. In our case we start with a bit of white text on a black background. Note that the text and the background are on separate layers.

الخطوة الاولى:
أفتح او أنشأ الصورة التى تود العمل عليها. فى هذا المثال سوف نبدأ بنص ذو لون ابيض و خلفية سوداء. يجب ان تلاحظ ان كل من النص و الخلفية يجب ان يكونا على طبقتين (Layer ) مختلفين.

Step 2

Select the text layer, and in the drop down menu for the Layers palette select Duplicate Layer to make a copy of it.

الخطوة الثانية:
أختر ( Layer )  الخاص بالنص, ثم افتح قائمة (Layer ) المنسدلة و أ ختر منها (Layer Duplicate).

Step 3

Give the duplicate layer a name. I’m going to call it “shuffle reflection” because this layer will be the reflection of the text.

الخطوة الثالثة:
الان يجب ان تعطى اسما للنسخة التى صنعناها, سوف اسميها هنا ( انعكاس Shuffle) أو (Shuffle reflection) لان هذا اللير( Layer) سوف يكون انعكاس النص.

Step 4

Move the “shuffle reflection” text down a bit so it approximately meets up with the bottom of the “shuffle” text.

الخطوة الرابعة:
حرك نص ( انعكاس Shuffle) الى الاسفل بعض الشىْ حتى يتلاقى مع اسفل نص (Shuffle) الاصلى.

Step 5

With the “shuffle reflection” layer selected, go to Layer > Rasterize > Type. This turns the reflection text into a graphic. Now you can no longer edit the text.

الخطوة الخامسة:
أختر ( Layer) ( انعكاس Shuffle) ثم أذهب بالترتيب الى الى قائمة (Layer) ثم (Rasterize) ثم (Type) تلك الاختيارات سوف تحول النص الى جرافيك.

Step 6

Still with the “shuffle reflection” layer selected, go to Edit > Transform > Flip Vertical.

الخطوة السادسة:
أستمر فى اختيار ( انعكاس Shuffle) ثم أختر (Edit) ثم (Transform) ثم (Flip Vertical).

Step 7

Still with the “shuffle reflection” layer selected, click on the Add Layer Mask button in the Layer Palette.

الخطوة السابعة:
أستمر فى اختيار ( انعكاس Shuffle) ثم أذهب الى قائمة ( Layer Palette) و أختر (Add Layer Mask).

Step 8

You can now notice that the “shuffle reflection” layer has changed its look in the Layers Palette and another icon has appeared next to it, that’s the mask.

الخطوة الثامنة:
يمكنك ان تلاحظ الان ان انعكاس Shuffle تغير شكلة فى قائمة (Layer Palette) كما ان ايقونة جديدة ظهرت بجانبة تبدو مثل القناع.

Step 9

Now select the Gradient Tool from the main toolbar.

الخطوة التاسعة:
الان اختر ( Gradient) من قائمة (Tool Bar) الاساسية.

Step 10

Position the cursor in the reflection and click and drag it down. Release and you’ll see the effect. You will have to try this step a few times to get it right. You can also start dragging outside the reflection text if you want.

الخطوة العاشرة:
ضع سهم الماوس Cursor فى الانعكاس ثم اسحب الى الاسفل ثم اترك سهم الماوس و سوف ترى الاثر. ربما سوف تضطر الى القيام بهذة الخطوة بضع مرات حتى تقوم بها بالشكل الصحيح, و يمكنك ايضا القيام بالسحب خارج النص اذا اردت.

Step 11

You can now notice that the mask icon in the Layers Palette has changed to look like a gradient.

الخطوة الحادية عشرة:
الان يمكنك ان تلاحظ ان ايقونة القناع قد تغيرت فى قائمة ( Layer Palette) و اصبحت تبدو كما االظل.

Step 12

Now you can crop, flatten and export the finished picture as desired and use it on the web, or wherever else you want.

الخطوة الثانية عشرة:
الان يمكنك ان تقطع او تسطح الصورة كما شئت و تستخدمها على الانتر نت او باى شكل ترغب فية.

Export HTML Gallery With Expression Media

Expression Media comes as a part of Microsoft Office 2008 Special Media Edition. You can also buy it on its own. It’s basically an application for managing digital media files, including photos. You can download a trial version of Expression Media 2 for Mac from http://www.microsoft.com/expression/try-it/Default.aspx.

Step 1

Create your document and consider carefully how you want it to appear on the web. Remember what works in print doesn’t always work on the web.

Step 2

You can work away normally in Word, but if you switch to the Web Layout mode you will find it easier to create nice web pages. You switch mode by going to View > Web Layout.

Step 3

If you type in a hyperlink, e.g. “http://www.emiratesmac.com” and hit enter, Word will recognize it as a hyperlink and make it blue and underlined. If you need to edit a hyperlink, right-click on it and select Hyperlink > Edit Hyperlink.

Step 4

When you’re happy with your web page, go to File > Save as Web page.

Step 5

In the dialog box that opens, click the Web Options button. Here you can enter a title for the page and keywords. Click the OK button and then the Save button.

Step 6

Now you can upload your web page to a server so it’s published online.

Giving Directions With Google Earth

You know how you sometimes have to give directions to a friend who’s coming over to your house for dinner? What you probably end up having to do is either try to explain the way, write down directions, draw a map for them, or all of the above. Next time, save yourself some trouble by just sending them the Google Earth coordinates for your place instead.
by Magnus Nystedt

Step 1
Download Google Earth from http://earth.google.com/. It’s a free download.

Step 2
Install and start up Google Earth. Find the position of your house. In my example I’ve picked the Emirates Palace in Abu Dhabi.

Step 3
Click the Add Placemark icon. A new placemark appears on the map. Move it to the exact desired location.

Step 4
In the floating window that appears, type in a name for the place. Then you can close the window.

Step 5
Right-click on the yellow pin on the map and click Email in the menu that shows.

Step 6
Your email application should open and you’ll find a KMZ file attached. When your recipient opens that file with Google Earth, they will be shown the exact location of your place.

Adobe Tutorial: Create an iPod-Like Silhouette Graphic in Illustrator

I’m sure you have all seen the colorful iPod and iTunes ads that Apple have come up with in recent years. You know the ones with a silhouette of a person standing against a very vibrant colored background? Often the color is solid but more recently Apple has started using various patterns and color combinations. In this brief tutorial I wanted to give you some idea of how you could create your own iPod-like silhouette ad. The PSD file that I use is available for download from http://tinyurl.com/6hwta4.

By Magnus Nystedt

Step 1
Create a new document in Illustrator. I made my document A4 size, and landscape.

Step 2
Select File > Place. Find the “silhouette_start.psd” file. Position and resize to fit the document.

Step 3
Select the silhouette graphic. Then select Object > Live Trace > Tracing Options.

Step 4
Play around with the settings. For example, blur, fill, stroke, etc. Click the Preview button.

Step 5
Click the Trace button when you’re settings are finished and Illustrator will trace the image.

Step 6
Draw a rectangle, put it in the background (Object > Arrange > Send to Back), and give it a funky color.

Step 7
Write a cool message in a suitable font.

Step 8
Select File > Export. If you want to put it on a web page, select to export as JPG file.

Step 9
You’re now finished. If you want to, you can add some final touches in Photoshop.You can see my final result at http://tinyurl.com/6eq3sl.

Create a Pie Chart in Excel 2008

We continue our series of short and simple tutorials on the various applications in the Microsoft Office 2008 suite for Macintosh. This time we tackle something that many of you may find trivial, creating a pie chart. However, many beginners find creating charts difficult, so we thought it would be appropriate to show you how. Pretty much all instructions apply equally well to earlier versions of Excel for Mac.
by Magnus Nystedt

Step 1
Start Microsoft Excel 2008 and create a new spreadsheet document, which may start up in Pay Layout View. Personally I prefer Normal View, so first thing I do is switch view by clicking on the Normal View button.

Step 2
Type in the data you want to make into a pie chart; in this example I typed in various categories of clothing in the first row, and typed how much was sold in each category in the second row.

Step 3
With your mouse, select the data in the first and second rows.

Step 4
Click on the Charts tab in the Elements Toolbar, then click on Pie in the sub-menu that appears.

Step 5
Excel now creates a pie chart based on the data you typed in. Re-size the pie chart and move it around until you have it in the desired position.

Step 6
You can now do some final touches to the pie chart, such as dragging out one section from the pie chart to highlight its importance.

Adobe Tutorial: Deploying a Flash Video Movie to a Web Site

In this tutorial we’ll import a video clip into Flash, and publish it in a format so you can put it on a web site, including the player movie (SWF), Flash Video content (SWF or FLV), and HTML page. Most Web sites use JavaScript in the HTML document to detect whether the browser has the Flash Player (and the required version of it) installed. In addition to this Javascript, Flash CS3 now creates a separate Javascript file that the HTML file must use in order for the SWF to bypass protection controls in an Internet Explorer browser. Note – The following video formats are supported for importing embedded Flash videos if Quicktime 7 or above is installed on your Mac: .avi, .dv, .mpg, mpeg, .mov.

Brian is an Educational Technologist trying his best to learn as much Adobe software as possible.

by Brian Nielsen

Step 1
Set stage dimensions to the same dimensions you wish the movie to appear in your html web page. Click File menu > import > import video.

Step 2
Click radio button “On your computer” and navigate to location of video you wish to import to the Flash stage. Click Open button.

Step 3
When prompted to do so, select the first radio button “Progressive download from a web server”. Enter an Output filename for the movie to be imported.

Step 4
Select the color of the skinning you wish to use for the FLV player. Click finish button and you will be prompted to save the FLA file before encoding begins.

Step 5
Select File > Publish Settings. Select Flash (.swf) and HTML as the two formats to be published. Select to where you want to save your files.

Step 6
Five file objects will be created: a JavaScript file, an HTML file and a SWF file with your movie name, a FLV file, and a skinoverlay SWF file.

Step 7
The HTML can now be modified and styled in an editor program like Dreamweaver. You can also create a completely new HTML page and include the FLV movie by copying the SWF object embed code into the new HTML document.

Step 8
Javascript files are not always needed to embed SWF into HTML documents. However, the generated Javascript file and JS code within the published HTML should be used to bypass Internet Explorer protection.

Step 9
Finally to deploy, FTP the folder containing all your HTML, JavaScript file, FLV movie and SWF files to your web server.

Insert Video Into Powerpoint 2008

Most of us have sat through long and boring presentations using PowerPoint. They often look the same and are too full of text. Sometimes it would spice things up a bit if the presentation contained some video; and with PowerPoint 2008 it’s become easier than ever to put video in PowerPoint. So grab that digital camera you have (they can often shoot video), make some brief movie clips, and take your presentations to a new level.

by Magnus Nystedt

Step 1
Create a new slide and select the appropriate slide layout.

Step 2
Select Insert > Movie and select the video file you want to insert.

Step 3
Select “When clicked” or “Automatically” in the dialogue that is displayed. You can change this later if you need to.

Step 4
Resize and position the movie on the slide.

Step 5
Select the options in the Movie section of the Formatting Palette. Also look at the options in Quick Styles and Effects in the same window.

Step 6
When you save the PowerPoint file, make sure you run the Compatibility Checker. Also check the report it produces for suggestions about potential compatibility problems and what you can do to address them.

Adobe Tutorial: Down and Dirty With Photoshop

In the recent Adobe D-Day event, which was held in Dubai’s Knowledge Village, we had a very enjoyable forty minute session with the well known Photoshop Guru, Scott Kelby. I was holding my pen to write some notes while Mr. Kelby was demonstrating his Down and Dirty tricks, as he puts it. His pace was so intense and his style was so attractive, that it was hard to get even two minutes during that time to write down my notes. Here is a tutorial inspired by Mr. Kelby’s Down and Dirty Tricks.

Zaid Al-Hilali is an Adobe Certified Instructor operating from Dubai. You can reach him on +971 50 736 2306. You can also find him hanging out at www.emiratesmac.com and 
www.digitalmediame.com.

Step 1
Type the text that would go eventually on a poster or advertisement. It is recommended to use a sans serif font. In this example, I used Impact here.

Step 2
Open a suitable photo that has good contrast and distinctive elements.

Step 3
From the menus choose Image > Adjustments > Threshold.

Step 4
Drag Threshold slider at the bottom of the dialogue window until you get main details showing in black and other parts in white. Hit OK button.

Step 5
With the Magic Wand Tool, click on a black part of the image to select black areas. Then to select all other black areas, simply choose Select > Similar to select all other black areas in the image.

Step 6
Now, We shall copy selected black areas into clipboard by choosing Edit > Copy.

Step 7
Back in our original image with text, we need to place copied black details into our text. Hold down the Command key on your keyboard and click with the mouse on text layer’s thumbnail in the Layer Panel to select its contents. (You should see moving dots around text).

Step 8
Paste copied black details into our text by going to Edit > Paste Into.

Step 9
Finally, adjust pasted graphics to reveal desired parts through your text by scaling it, and add Drop shadow if desired.

Working With Styles in Word 2008

by Magnus Nystedt

Adobe Tutorial: Ken Burns Effect in Flash

The Ken Burns Effect is a panning and zooming effect that can be done in Flash to create the impression that a camera is moving from left to right and is zooming in, over a still image. It’s named after American filmmaker Ken Burns (http://en.wikipedia.org/wiki/Ken_Burns) who made it famous in his American Civil War series. He only had old still photographs and drawings to work with, so he needed them to come alive. The effect of panning and zooming accomplished just that. Burns was not the first person to do this, but he was the one who made it famous, hence it was named after him.

Brian is an Educationl Technologist trying his best to learn as much Adobe software as possible.

by Brian Nielsen

Step 1
Create a new Flash document in the Flash Document Window. Click File > Import to Stage > Browse to the image you wish to use.

Step 2
The image you use should be wider than the stage itself. In the following example the image is 800 pixels wide by 300 pixels high and sits on a shorter stage (colored blue in this example) of only 600 pixels wide by 300 pixels high.

Step 3
Go to View > Pasteboard. Reduce the magnification if necessary until the whole image is visible within your Flash workspace.

Step 4
To provide a good view of both the image and stage, turn on “Show all layers as icons” (the green square icon, located on the left side of the timeline). Ensure that the leftmost side of the image on frame 1 is up against the leftmost side of the stage.

Step 5
Select frame 60 on the timeline. Then select Insert > Timeline > Keyframe.

Step 6
With the keyframe in frame 60 still highlighted, choose Modify > Transform > Scale. Increase the size of the image to about 140% its original by pushing against both the top and bottom of the Transform Bounding Box.

Step 7
Choose any frame on the timeline between the keyframe on frame 1 and the keyframe on frame 60. Select Insert >Timeline > Create Motion Tween to create the panning and zooming camera effect.

Step 8
Turn off the “Show all layers as icons” by clicking the green square icon on the left side of the timeline. Press Control > Test Movie to test the Ken Burns effect that you have created in Flash.

Step 9
To make the panning and zooming effect last longer, simply add frames by first clicking the timeline then hitting F5 on the keyboard repeatedly until you have added all the frames you want. You can also make the animation stop by adding the script “stop();” to the last frame.

Next Page »