درس: عمل واجهة موقع احترافية

احمد · 26-Jul-2007, 05:19 PM

Hello

Today i am going to make Tutorial Number 125 from 500 Tutorial Marathon
I will show you how to create a nice web hosting layout

Please create a new document
Size 760x770 pixels
Background color: White

Then with Ellipse tool Create a circle and place it in the middle of the document.

Select Rounded Rectangle tool and create a shape, and place it like me. I will use another color for the rounded rectangle , so you can see better what i am doing.

Select Both layers in Layer palette , and press CTRL+E ( this action will merge the two layers : the circle and the rounded shape into a single layer )

Now add the following layer styles for this layer

This is the result

Now select Ellipse tool one more time and create some small circles

8

For all this circles please apply the following layer styles:

This is the result

Then with the same tool ( ellipse tool) create another circles , and place them inside the last circles
Be sure the size of this circles are the same like the red area from previouse circles

For all this black circles add the following layer styles:

This is my result

Select Rounded rectangle tool , and create a white shape on the bottom of your layout

Then add some servers, from your stock photo collection, and in the same time you can add also some text for your hosting plans

Then with Rounded rectangle tool create some buttons under each plan

Then add the same layer styles as we have used for rounded shapes

This is my result

Now we will create a mirror for all this buttons. to do this please select all the buttons layers in your layer palette

And drag all this layers to the " create new layer button "

You will see the duplicated layers above the normal ones.

With all this layer selected , please press on CTRL+E ( this shortcut will merge all the layers into a single one )

With move tool place the duplicated buttons like me

Then go to Edit > Transform > Flip Vertical

With this layer selected , press on " add layer mask " button

Select Gradient tool and be sure you have this settings

Then create a small vertical line ( follow the blue arrow from the next image )

Now create another rounded shape and place some icons on that shape

Now add another shapes with rounded rectangle tool

Now load the selection for the big black shape
( to load the selection please select the black shape layer and go to Select > Load selection )

You will notice that a selection line will become visible.
Now go to Select > Modify > Contract and use the following value

This is the result

Now please select Elliptical Marquee Tool
Be sure you have the "Subtract from selection" button enabled

Then create a selection like mine

When you release the button you will have the same result like mine

Select Rectangular marquee Tool , and delete also the bottom part of the selection.

At the end you need only this selection

Create a new layer above all layers ( press CTRL+SHIFT+ALT+N ), and fill this selection with white
To fill the selection please use the Paint bucket tool
be sue you press CTRL+D to deselect

Select Rounded rectangle tool and create another shape

Load the selection for this rounded shape
To load the selection for this shape please hold down the CTRL key and with the left mouse button click on the layer thumbnail for this rounded shape

Then you can delete the orange shape, and you have there only the selection

Now press CTRL+SHIFT+I to inverse the selection
Then with the eraser tool delete the corner of the white shape
then press CTRL+D to deselect

On this white shape please add alone some text and images

Now add some text on the buttons,

And you can add also some other details on the black area

Create a new layer ( press CTRL+SHIFT+ALT+N )
Select Elliptical Marquee Tool and create the following selection

Then be sure you have enabled " intersect with selection " button

Create another selection like in the following image

After you release the mouse button you will have something like that

Select paint bucket tool , and fill the selection with white
Press CTRL+D to hide the selection

Then add the following layer styles

This is my result

Duplicate this shape, and resize this shape a little
For this duplicated shape please use the following layer settings

This is my result

I hope you like my final result

لتحميل واجهة الدرس

( اضغط هنا )
باسورد فك الضغط

كود بلغة HTML:

www.de4school.com

Thank you very much
/
/
Ahmed

[url=http://www.de4school.com/vb/showthread.php?t=491]تحميل[/url]

Emerald · 30-Jul-2007, 02:09 AM

حرررررررررررركه رهيب
بالمرهـ
.
.

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

عاشقة التصميم · 03-Oct-2007, 07:08 PM

مشكووووووووووور يا استاذ احمد على الدرس الحلو
يعطيك الف عافية

The Tops · 05-Oct-2007, 09:43 PM

Helol Mr.Ahmad
Thanks on lesson

Thanks
Thanks Thanks
Thanks Thanks Thanks
Thanks Thanks Thanks Thanks
Thanks Thanks Thanks Thanks Thanks
Thanks Thanks Thanks Thanks Thanks Thanks
Thanks Thanks Thanks Thanks Thanks
Thanks Thanks Thanks Thanks
Thanks Thanks Thanks
Thanks Thanks
Thanks

تصاميم · 05-Oct-2007, 10:44 PM

كفيت ووفيت

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

كل الشكر لك

تحياتي

fadloo · 04-Jan-2008, 01:25 AM

يعطيك العافية على نقل الدرس الحلو

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
موقع اجنبي يعطيك أي شعار في العالم بدقة مفتوحة	مدمن تصميم	تصاميم فكتور جاهزة - Vectors	21	18-Mar-2010 01:55 PM
الآن انتقي اروع الألوان لتصميمكـ مع موقع KULER من Adobe	Nado	مدرسة الفوتوشوب - Adobe Photoshop	9	23-Dec-2009 09:23 PM
قوالب اجنبية لن تجدوها فى اي موقع آخر	حصري	تطوير المنتديات والمواقع	17	26-Sep-2009 02:28 PM
صور تصميم احترافية	ايمار	صور التصميم - Pictures For Design	14	09-Mar-2008 07:19 AM
موقع لملحقات الفتوشوب.. ..لعيونكم الحلوة :)	cool.girle	خامات وباترن Patterns	9	11-Feb-2008 07:28 PM

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

درس: عمل واجهة موقع احترافية

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