درس : واجهة خطوة بخطوة + psd

احمد · 29-Jul-2007, 07:01 AM

Hello

This is the Tutorial number 68 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

Today i will show you how to create a Game Layout

Open a new document in photoshop
Size: 760x770 pixels
Background color: #333333

Select rectangular marquee Tool and create a big rectangle like in my following image

Go to Edit > Transform > Warp

And use the following settings:

After you will hit enter this will be the result

Now i will create a carbon fiber pattern
( To learn how to make a pattern please visit this link: )

To create a new pattern please open a new document in photoshop ( 4 x 4 pixels )
Zoom this document to 1600 % and with the pencil tool create small dots with the colors you will see i the next image

Then Go to Edit > Define Pattern...
Chose a name for your pattern and press Ok

Close this document and let's go back to our template

We will add now some layer styles for the white shape

Now you have to use the carbon fiber pattern

This is my result

Duplicate this shape, and change the size with the transform tools
Set the vertical scale to 90 % , then hit Enter

This is the result

We have to change the layer styles for this layer. So please add the following layer styles

This is my result

Now we will add more details.

I will add a stock image

Now create a new document
The size must be 350 X 1 Pixel with a transparent background

Select Gradient Tool, Set the following gradient

Create a new layer ( press CTRL+Shift+ALT+N )
Then with the gradient Tool Make a line from Left to right while you keep the SHIFT key pressed

this is the result

Now drag this layer on your game layout
Duplicate a few times , and place it like me

Now we will add the same lines on the right side of the layout but with a different technique

Create a new layer ( press CTRL+SHIFT+ALT+N )
Select rectangular marquee tool , and make a thin selection
You can use the fixed size

Then make the selection on the layout

Select Gradient Tool ( set to reflected gradient ) and draw a line from the middle of your selction to bottom
Then press CTRL+D to deselect and this will be your result

Add as many lines you want. I will add another one on the right side
Then i will add also some text buttons on the left side

Now you can add a text logo
On your text logo you can add the following layer styles

This is the result

You can add as many details as you want. This is my final result

لتحميل واجهة الدرس psd
( اضغط هنا )

كلمة سرفك الضغط
www.de4school.com

mohamed_gr0 · 11-Aug-2007, 08:06 PM

ممتاز جداااااااااااااااااااا

TRA7EB · 11-Aug-2007, 08:18 PM

الله يعطيك العافية

مـــــاقصـــــــــرت

درس حلووووووو

pink · 11-Aug-2007, 08:22 PM

درس احترافي ويباله فناتكه يطبقونه..

يعطيك الف عافيه اخوي..

كبير المصممين · 12-Aug-2007, 08:36 AM

بارك الله فيك أخي أحمد و لكن
لو وضعت الخطوط المستعملة
لكي لا تتحول الخطوط إلى ليرات
و شكرا مرة أخرى

cola boy · 18-Dec-2007, 02:28 PM

وااااو الدرس مرة مفيد مشكور اخوي على الدرس

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
درس: عمل واجهة موقع احترافية	احمد	دروس اجنبية - Lessons	10	01-Feb-2010 11:12 AM
عمل واجهة موقع رياضية خطوة بخطوة	احمد	دروس اجنبية - Lessons	3	01-Mar-2009 01:31 PM
عمل واجهة موقع موبايلات	احمد	دروس اجنبية - Lessons	3	26-Jan-2008 07:58 PM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

درس : واجهة خطوة بخطوة + psd

دروس اجنبية - Lessons