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

[said]

شبكة نور الفجر
تقدم هذا الدرس مفصل أهداء الى أعضاء ديزاد باتنة


الموضع الاصلى معرب (http://translate.google.com/translate?u=http%3A%2F%2Fwww.norfgr.com%2Fshowthre ad.php%3Ft%3D373&langpair=en%7Car&hl=ar&ie=UTF-8)


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


http://www.talk-mania.com/tutorials/tutorial125/56.jpg


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.


http://www.talk-mania.com/tutorials/tutorial125/1.jpg


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.


http://www.talk-mania.com/tutorials/tutorial125/2.jpg


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


http://www.talk-mania.com/tutorials/tutorial125/3.jpg


http://www.talk-mania.com/tutorials/tutorial125/4.jpg


http://www.talk-mania.com/tutorials/tutorial125/5.jpg


http://www.talk-mania.com/tutorials/tutorial125/6.jpg


This is the result


http://www.talk-mania.com/tutorials/tutorial125/7.jpg


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


8


For all this circles please apply the following layer styles:


http://www.talk-mania.com/tutorials/tutorial125/9.jpg


http://www.talk-mania.com/tutorials/tutorial125/10.jpg


http://www.talk-mania.com/tutorials/tutorial125/11.jpg


This is the result


http://www.talk-mania.com/tutorials/tutorial125/12.jpg


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


http://www.talk-mania.com/tutorials/tutorial125/13.jpg


For all this black circles add the following layer styles:


http://www.talk-mania.com/tutorials/tutorial125/14.jpg





http://www.talk-mania.com/tutorials/tutorial125/15.jpg


http://www.talk-mania.com/tutorials/tutorial125/16.jpg


http://www.talk-mania.com/tutorials/tutorial125/17.jpg


This is my result


http://www.talk-mania.com/tutorials/tutorial125/18.jpg


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


http://www.talk-mania.com/tutorials/tutorial125/19.jpg


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



http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 717x222 وحجمها 27 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/20.jpg

Then with Rounded rectangle tool create some buttons under each plan

http://www.talk-mania.com/tutorials/tutorial125/21.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/14.jpg

http://www.talk-mania.com/tutorials/tutorial125/15.jpg

http://www.talk-mania.com/tutorials/tutorial125/16.jpg

http://www.talk-mania.com/tutorials/tutorial125/17.jpg

This is my result

http://www.talk-mania.com/tutorials/tutorial125/22.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/23.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/24.jpg

You will see the duplicated layers above the normal ones.

http://www.talk-mania.com/tutorials/tutorial125/25.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/26.jpg

With move tool place the duplicated buttons like me

http://www.talk-mania.com/tutorials/tutorial125/27.jpg

Then go to Edit > Transform > Flip Vertical

http://www.talk-mania.com/tutorials/tutorial125/28.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/29.jpg

Select Gradient tool and be sure you have this settings

http://www.talk-mania.com/tutorials/tutorial125/30.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/31.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/32.jpg

Now add another shapes with rounded rectangle tool

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 711x565 وحجمها 43 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/33.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/34.jpg

This is the result

http://www.talk-mania.com/tutorials/tutorial125/35.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/36.jpg

Then create a selection like mine

http://www.talk-mania.com/tutorials/tutorial125/37.jpg

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

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 720x478 وحجمها 29 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/38.jpg

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

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 735x275 وحجمها 48 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/39.jpg

At the end you need only this selection

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 722x343 وحجمها 21 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/40.jpg

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

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 716x330 وحجمها 11 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/41.jpg

Select Rounded rectangle tool and create another shape

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 713x300 وحجمها 15 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/42.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/43.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/44.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/45.jpg

On this white shape please add alone some text and images

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 725x300 وحجمها 50 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/46.jpg

Now add some text on the buttons,

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 684x281 وحجمها 34 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/47.jpg

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

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 720x326 وحجمها 45 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/48.jpg

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

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 643x289 وحجمها 49 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/49.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/50.jpg

Create another selection like in the following image

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 684x372 وحجمها 75 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/51.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/52.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/53.jpg

Then add the following layer styles

http://www.talk-mania.com/tutorials/tutorial125/9.jpg

http://www.talk-mania.com/tutorials/tutorial125/10.jpg

http://www.talk-mania.com/tutorials/tutorial125/11.jpg

This is my result

http://www.talk-mania.com/tutorials/tutorial125/54.jpg

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

http://www.talk-mania.com/tutorials/tutorial125/14.jpg

http://www.talk-mania.com/tutorials/tutorial125/15.jpg

http://www.talk-mania.com/tutorials/tutorial125/16.jpg

http://www.talk-mania.com/tutorials/tutorial125/17.jpg

This is my result

http://www.talk-mania.com/tutorials/tutorial125/55.jpg

I hope you like my final result

http://www.norfgr.com/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 760x770 وحجمها 160 كيلو بايت .http://www.talk-mania.com/tutorials/tutorial125/56.jpg




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©