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

[abohmam]

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته

حياكم الله جميعا

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

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/photoshop_resources.jpg

إصدارات الفوتوشوب المتوافقة للتطبيق CS أو أحدث
مستوى الدرس : إحترافي
مستوى الشرح : بسيط جدا

الشرح يمكن تطبيقه والإستفادة منه لأكثر من إستخدام منها ( واجهة إسطوانة - واجهة كتاب إلكتروني - إطارات تجميلية لقوالب المنتديات )

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

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box-demo.png

على بركة الله نبدا ونركز جيدا فى ارقام الخطوات التى سوف أكتبها لأننى سوف أحيل عليها عند التكرار.

1- نفتح عمل جديد بالمقاسات المبينة فى الصورة أو بالمقاس المراد تصميمه

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_01.png

2- نقوم بتعديل هام فى خيارات مساحة العرض وهو تحديد ابعاد الشبكة التى سوف نظهرها لكى تساعدنا فى تنسيق التصميم كما نرى فى هذه الصورة

وللوصول الى هذه الخيارات من قائمة Edit نختار Preferences ثم نختار Guides, Grid & Slices ونعدل كما فى هذه الصورة
ملحوظة: الفائدة من هذا التعديل كوننا نحدد ابعاد التصميم بالبيكسل ولانعرف مساحات الشبكة بهذه القيمة ، فنحن بذلك نعرف تحديدا ماذا نفعل فى التصميم.

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_02.png

3- الآن نظهر الشبكة كى تساعدنا فى رسم وتحديد الأبعاد

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_03.png

4- ننتقل إلى صندوق الطبقات ونضيف 6 طبقات كما هو موضح فى هذه الصورة ( الجسم - الهيدر - حلية الهيدر - الفوتر - حلية الفوتر - الأزرار )

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_04.png

5- نقف على طبقة الجسم وبإستخدام أداة رسم الأشكال Rounded Rectangle Tool نرسم مثل هذا المستطيل مع إنحناء فى الحواف بقية 10 بيكسل مثلا

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_05.png

- ثم نطبق على طبقة الجسم هذا الاستايل

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_05a.png
http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_05b.png

6- نحصل على هذا الشكل فنقوم بتحديده بالضغط على Ctrl + النقر بشمال الماوس على الطبقة

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_06.png

7- نستخدم أداة التحديد Rectangular Marquee Tools ولكن نقوم بتعديل طريقة التحديد وهى تحديد جزء من التحديد النشيط Intersect with selection كما هو مبين فى الصورة
ونقوم بتحديد الجزء العلوى من الشكل وكأننا نقوم بقطعه هكذا ....

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_07.png

8- وسوف نحصل على هذا الشكل والذى سوف يكون الهيدر للتصميم

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_08.png

9- نقف على طبقة الهيدر فى صندوق الطبقات

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_09.png

10- ثم نملئ هذا التحديد بأى لون غير لون الخلفية لنحصل على هيدر للتصميم

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_10.png

11- ثم نقف على طبقة الجسم ونكرر الخطوات السابقة لنحدد الفوتر بالترتيب التالي :
1- نقف على طيبقة الجسم ونقوم بتنشيط التحديد
2- نختار طريقة التحديد Intersect with selection
3- نقوم بتحديد الجزء الذى نريده كفوتر من أسفل الجسم بحجم اقل طبعا من الهيدر لنحصل على الشكل التالي

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_11.png

12- ثم نقف على طبقة الفوتر والتى كنا قد أنشأناها من قبل ونضيف لها نفس اللون مثل الهيدر

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_12.png

13- لنحصل على الشكل التالي

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_13.png

14- نقف على طبقة ( حلية الهيدر ) ونقوم برسم تحديد أى رسم هندسي للحلية بإستخدام أداة التحديد النقطي نضع نقاط التصميم من لوحة المفاتيح إضغط على L وسيتم تنشيط أداة Lasso tool
ولاننسى أن نظهر الشبكة لتساعدك على نساوى أبعاد التحديد

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_14.png

15- وسوف تحصل على الشكل التالي :
http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_15.png

16- مازلنا على طبقة ( حلية الهيدر ) قم بملئ هذه الطبقة بلون مختلف عن الهيدر وسوف تحصل على الشكل التالي

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_16.png

17- نكرر الخطوات من 14 إلى 16 ونقف على طبقة حلية الفوتر ثم نملأها بلون لنميزها عن لون الفوتر ايضا لنحصل على هذا الشكل

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_17.png

:fasel:

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

18- نقف على طبقة الهيدر ونطبق هذه التأثيرات على اللير

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_18.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_19.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_20.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_21.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_22.png


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

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_23.png

20- ننتقل إلى طبقة حلية الهيدر ونقوم بتطبيق هذا الاستايل

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_24.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_25.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_26.png

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box_27.png

21- نقوم بنسخ الاستايل من طبقة حلية الهيدر إلى حلية الفوتر مثلما فعلنا فى الخطوة رقم 19

لنحصل على الشكل النهائي للتصميم جاهز للتقطيع

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_conent-box-finale.png

تستطيع إضافة بعض الأزرار أو الدوائر أو لمساتك الإحترافية حسب إحتياجك أو إستخدام التصميم

:fasel:

إنتهى الشرح بعون الله

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

حتى نلقاكم مع درس جديد أترككم فى رعاية الله وحفظه

ولاتنسونا من صالح دعائكم
.
أبوهمام

.

الرد الأول محجوز للتطبيقات المميزة
.

[abohmam]

تطبيقات الأعضاء

تطبيق ابوهمام

http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_content-box-demo3.png
http://www.abc4web.net/abc4web_tutrials/photoshop/abc4web_contant-box/abc4web_contant-box-demo2.png

:fasel:

[كينج نت]

السلام عليكم ورحمة الله وبركاته

مشكور اخي العزيز أبوهمام

شرح احترافي مثل العاده ودرس ممتع ومفيد لمافيه من الفائده المختلفه

بارك الله بجهودك الطيبة وجزاك عنا كل خير

:abc_152:

.

[المغربي الجديد]

جزاك الله خير الدنيا والاخرة
وبارك الله بك وفيك الى يوم نبعث
جميل ومفيد جدا للاخوان
تسلم الايادي
:abc_152:

[رائد ابو فيصل]

بارك الله فيك

لي عوده مع التطبيق

[راجية رضى الله]

ماشاءالله
جزاكم الله خير االجزاء
وبارك فيكم .. جارى التطبيق إن شاء الله

[أبو يوسف]

جزاك الله خيرا أخي ابو همام

خطوات العمل كثيرة إن شاء الله سأحاول التطبيق

.

[الدمشقي]

شرح جميل واحترافي من أيدي مبدعة

شــــ لك ــــكراً أخي الفاضل أبو همام

وجزاك الله خيراً

[ابو فاطمة]

عليكم السلام ورحمة الله وبركاته


جزاك الله خير ياالغالي عاشت ايدك اسئل الله التوفيق

[أبو الوليد]

قمة الإحتراف يا أستاذ:abc_022:

[abohmam]

حياكم الله جميعا

أشكر لكم تواجدكم ومروركم العطر

موفقين جميعا لكل خير

[مهلهل]

جزاك الله خير

[abohmam]

بارك الله فيك

أشكر لك مرورك العطر

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مكتوز]

مشكوررررررررررررررررررررر ررررررررررررررررررررررر جدا

[أبو فارس]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .