درس عمل ستايل موقع أو كتاب إلكترونى

[محمود عفيفى]

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


هذا أول شرح لى بقسم الفوتوشوب وأرجوا ان ينال الدرس رضاكم
وأنا متقبل لأى إنتقادات :abc_145:

(( درس عمل ستايل موقع أو كتاب إلكترونى ))


نفتح صفحة عمل بمقاس 1024×776



من قائمة View أختر New Guide ثم اكتب 40px
كرر العمل لكن المره دى اكتب 984px
المساحه التى سنعمل داخلها = 944 بيكسل


أملا الخلفيه بهذا اللون f1f8f9



1- عمل الهيدر


باستخدام اداة Rectangle Marquee Tool اعمل مستطيل بالأبعاد التاليه
1024 × 100

ندرج طبقة جديدة ونملا التحديد باللون الاسود 000000

http://www.abc4web.net/vb/imgcache2011/9763.abc4web.jpg



نضيف تدرج لهذه الطبقه


http://www.abc4web.net/vb/imgcache2011/9765.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9767.abc4web.jpg

الألوان المستخدمه
529ad0
67bfea


حمل هذه الصوره من هن (http://img97.imageshack.us/img97/4162/halftone.png)ا وضعها فوق طبقة الهيدر
غير blend mode الى Soft Light
والشفافيه opacity الى 21%


http://www.abc4web.net/vb/imgcache2011/9768.abc4web.jpg




الان نضيف شئء من اللمعه تحت لوجو موقعنا


ندرج طبقه جديده ونسميها Glow


بإستخدام أداة التحديد البيضاوى Elliptical Marquee Tool


أجعل الـ Feather
=
18 Px




نستخدم Fixed Size
نرسم دائره بأبعاد
150 × 150 Px

ونملأها باللون الأبيض FFFFFF

http://www.abc4web.net/vb/imgcache2011/9769.abc4web.jpg




غير الـ blend mode لهذه الطبقه الى Overlay
وقلل الشافيه الى 50%

http://www.abc4web.net/vb/imgcache2011/9770.abc4web.jpg


نعمل الان لوجو

http://www.abc4web.net/vb/imgcache2011/9771.abc4web.jpg

(إستخدمت خط Motken noqta للعربى
و MACTYPE للموقع)

توجد هنا مجموعة خطوط رائعه من أخى كينج نت (http://www.abc4web.net/vb/showthread.php?p=49242)



حمل هذه الصوره وضعها بجانب اللوجو (من هنا (http://img30.imageshack.us/img30/4817/shinek.png))


بإستخدام أداة الـ Pin Tool اعمل هذا التحديد

http://www.abc4web.net/vb/imgcache2011/9775.abc4web.png


أو نحدد الطبقه بـ Ctrl ونختار أداة الرسم البيضاوى ونعمل التحديد

ندرج طبقة جديدة

نملا التحديد باللون الأبيض ونقلل الشفافيه الى 20%

http://www.abc4web.net/vb/imgcache2011/9776.abc4web.jpg



2- عمل الناف بار


باستخدام اداة Rectangle Marquee Tool اعمل مستطيل بالأبعاد التاليه
1024 × 70



املا التحديد باللون الأبيض FFFFFF ونحركه أسفل الهيدر مباشرة


http://www.abc4web.net/vb/imgcache2011/9777.abc4web.jpg


نضيف blending options لهذه الطبقه
http://www.abc4web.net/vb/imgcache2011/9778.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9779.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9780.abc4web.jpg




الأن سنقوم بعمل خطين بين طبقتى الهيدر والناف
بإستخدام القلم Pen وسمك الفرشاه 1px
نرسم خطا بطول العمل من اليمين لليسار أو العكس :abc_145:

أثناء الرسم نضغط Shift حتى يكون الخط مستقيما

http://www.abc4web.net/vb/imgcache2011/9781.abc4web.jpg


الخط العلوى بلون 008dcd
السفلى بلون FFFFFF



الان أصبح الشكل هكذا

http://www.abc4web.net/vb/imgcache2011/9782.abc4web.jpg




الان نضيف اللينكات

http://www.abc4web.net/vb/imgcache2011/9783.abc4web.png



استخدمت اللون 525252 فى الكتابه والخط هو abc4web_Tehran



باستخدام اداة Rectangle Marquee Tool اعمل مستطيل حول أول لينك بالأبعاد المناسبة
ندرج طبقة جديده ونملا التحديد بأى لون


http://www.abc4web.net/vb/imgcache2011/9784.abc4web.jpg


نضيف blending options لهذه الطبقه
http://www.abc4web.net/vb/imgcache2011/9785.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9786.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9787.abc4web.jpg


الان نضع طبقة التحديد أسفل طبقة أول لينك



اصبح الشكل كالتالى

http://www.abc4web.net/vb/imgcache2011/9788.abc4web.jpg



3- عمل الفوتر


باستخدام اداة Rectangle Marquee Tool اعمل مستطيل بالأبعاد التاليه
1024 × 40
املا التحديد بأى لون

http://www.abc4web.net/vb/imgcache2011/9789.abc4web.jpg



نضيف تدرج لونى لهذه الطبقه

http://www.abc4web.net/vb/imgcache2011/9790.abc4web.jpg

http://www.abc4web.net/vb/imgcache2011/9791.abc4web.jpg




بعد الكتابه على الفوتر (إستخدمت فونت abc4web_Vanilla)

http://www.abc4web.net/vb/imgcache2011/9792.abc4web.jpg


هذا هو الشكل النهائى

http://www.abc4web.net/vb/imgcache2011/9793.abc4web.png




تحميل ملف الـ PSD

http://www.multiupload.com/VWZYNRHLWE


الخطوط المستخدمه


http://www.multiupload.com/I0PZSKMU91



أخير لا نُجيز إستخدامه فيما حرم الله :abc_088:


التطبيقات على الدرس

www.abc4web.net (http://www.abc4web.net/vb/showpost.php?p=51551&postcount=33)

[ابو فاطمة]

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


عاشت الايادي ياالغالي تسلم

[محمود عفيفى]

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

[كينج نت]

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

حياك الله اخي العزيز محمود العفيفي

بدايه موفقه وطيبه بإذن الله أكيد سيتم التطبيق والاستفاده بإذن الله

نفتح صفحة عمل بمقاس 1024×776

هذا المقاس كبير ولن يفلح مع جميع الأخوه لاختلاف دقت عرض الشاشة

لتنويه فقط ولفت الانتباه أخي محمود ليسى إلا :abc_145:

مشكور للمجهود الطيب وبنتظار المزيد بالتوفيق.

:abc_152:

.

[ذوالجناح]

جزاك الله خيراً وبارك الله فيك
أكيد بتعمل على قالب كتاب إلكتروني وستفاجئنا به قريباً :abc_051:
جاري حفظ نسخة من الشرح ولي عودة إن شاءالله

[محمود عفيفى]

وعليكم السلام ورحمة الله وبركاته
حياك الله أخى كينج نت وجزاك الله خيرا
بالنسبه للمقاس هو كبير علشان مش هيكون فى نقطة تمدد كما تعلم
على فكره الشاشه عندى 17 :abc_145:
الاستايل 800 بيكون شكله مش حلو خصوصا على الشاشات الكبيره ونقطة التمدد بتجعل الاستايل مش جميل :abc_028:

[محمود عفيفى]

جزاك الله خيراً وبارك الله فيك
أكيد بتعمل على قالب كتاب إلكتروني وستفاجئنا به قريباً :abc_051:
جاري حفظ نسخة من الشرح ولي عودة إن شاءالله
حياك الله أخى ذو الجناح
عملت كتاب إلكترونى على الاستايل ده وبإذن الله سأضع شرح له قريبا

http://img211.imageshack.us/img211/9213/43938264.png

أبعاده 800 ف 600 بإذن الله يمشى مع كل الشاشات

[الهمام]

ألف شكر أخي الكريم

[كينج نت]

وعليكم السلام ورحمة الله وبركاته
حياك الله أخى كينج نت وجزاك الله خيرا
بالنسبه للمقاس هو كبير علشان مش هيكون فى نقطة تمدد كما تعلم
على فكره الشاشه عندى 17 :abc_145:
الاستايل 800 بيكون شكله مش حلو خصوصا على الشاشات الكبيره ونقطة التمدد بتجعل الاستايل مش جميل :abc_028:



حياك الله اخي محمود حتى ولو لم يكن نقطة تمدد

فلو افترضنا شخص يتصفح على نسبة عرض 800 - 600

فكيف سيكون شكل الكتاب لديه أكيد لن يشاهد التصميم بالكامل

بالتوفيق

[محمود عفيفى]

حياك الله اخى كيجن نت
انا حاليا أتصفح بشاشه 800 ف 600
بيكون شكل الاستايل اللى بالمقاسات السابقه (800) ممتاز
لكن اعنقد انى الوحيد اللى عندى الشاشه دى لأنها قديمه اوى :abc_145:
فبعمل حساب الباقيين لو شافوا الاستايل بيكون شكله مش حلو
ومعظم المنتديات الأجنبيه بتعمل المقاسات دى بيكون شكله عندى كبير شويه
لكن بيكون شكله افضل من ال800 عندهم

[abohmam]

جزاك الله خيرا أخى محمود على هذا الشرح الرائع

بارك الله فيك وجارى التطبيق والإستفادة

لك التحية والشكر

[محمود عفيفى]

بارك الله فيك أخى أبو همام
بإذن الله نرى تطبيق ضرب نار :abc_145:

[الراعي]

تسلم يمينك اخي محمود على الجهد الكبير وعلى الشرح المفيد
جايين ان شاء الله بتطبيق لهذا الدرس القيم ....دمت مبدعا.

[الدمشقي]

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

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

http://img4.imageshack.us/img4/936/0055x.png

:abc_022:

[أبو يوسف]

جزاك الله خيرا اخي محمود وبارك الله فيك

[محمود عفيفى]

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

[محمود عفيفى]

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

جزاك الله خيرا أخى الدمشقى ولك بالمثل إن شاء الله

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

:abc_022:

أشكرك جزيلا أخى الدمشقى
وبإذن الله سيتم مراعتها عند وضع الدرس على المثال هذا
ولا حرمنا الله من نصائحك الغاليه
دمت بود :abc_152:

[محمود عفيفى]

جزاك الله خيرا اخي محمود وبارك الله فيك
امين وإياك أخى أبو يوسف
بإنتظار تطبيقك بإذن الله :abc_088:

[غفوري]

الله يجزاك خير
ويوفقك ربي

[محمود عفيفى]

أمين وإياك اخى
نورت الموضوع :abc_152:

[abohmam]

حياك الله أخى محمود وشكرا على هذا الشرح الرائع

وهذا تطبيق سريع حرصت التقيد بما تم شرحه على قدر المستطاع

إذا قدر الله سيتم تقطيعه وعرضه ان شاء الله بعد الإضافات الحلزونية :abc_025:

http://img707.imageshack.us/img707/1263/abc4webstyle.jpg

[محمود عفيفى]

ما شاء الله تطبيق رائع أخى أبو همام
حفظك الله وزادك من فضله :abc_152:

[سالي الفلسطينية]

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

[محمود عفيفى]

بارك الله فيكِ أختنا سالى

[ابوعلي]

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

جاري العمل يا رب تظبط معي

تحياتي

[محمود عفيفى]

حياك الله أخى أبو على ومرحبا بك معنا :abc_028:
بإذن الله نرى تطبيق جميل

[ابوعلي]

الأن سنقوم بعمل خطين بين طبقتى الهيدر والناف
بإستخدام القلم Pen وسمك الفرشاه 1px
نرسم خطا بطول العمل من اليمين لليسار أو العكس

أثناء الرسم نضغط Shift حتى يكون الخط مستقيما

اخي من بعد ازنك في هيدي النقطة ما فهمتها
ممكن تشرح اكثر
اخوك مبتدء
اذا ما في مانع تقبل تحياتي

[محمود عفيفى]

اخوك مبتدءزى حلاتى يدوب اعرف الأداوت :abc_145:

تفضل أخى أبو على شرح فديو
http://www.multiupload.com/3HZ06UQ49K
عملت زووم علشان الخط يبان
أضغط على مفتاح Shift من لوحة المفاتيح ثم أرسم
بالتوفيق

[ابوعلي]

الله يعطيك الف عافية يا رب عذبتك معي يا غالي

ان شاء الله بميزان حسناتك

تقبل تحياتي

[محمود عفيفى]

ولا تعب ولا حاجه
أنت تأشر ياحج :abc_145:
وفقك الله لما يحب ويرضى

[ابوعلي]

اول تجربة الي

http://www.m5zn.com/uploads/2010/2/12/photo/gif/plniyu04xvqn8.gif (http://www.tobikat.com)

رائيكم

مشكور اخي محمود تحياتي

[محمود عفيفى]

حياك الله أخى أبو على
تطبيق جميل ما دامت البدايه :abc_088:
ملاحظه بسيطه
طبقة الدائره لم تغير الشافيه ولا خيارات الدمج
نقف على الطبقه ثم :-

http://img691.imageshack.us/img691/3977/12022010104911.png

حمل الشرح اللى فى القسم (انا اتعلمت عليه وتابعت دروس الإخوه هنا )
موفق بإذن الله ... لك مني أجمل تحية .

[محمود عفيفى]

بسم الله الرحمن الرحيم
هنا سيتم عرض التطبيقات

1- تطبيق أخى أبو همام

http://img707.imageshack.us/img707/1263/abc4webstyle.jpg

2- تطبيق اخى أبو على (ما زال فى البدايه وبإذن الله يتحفنا قريبا)


http://www.m5zn.com/uploads/2010/2/12/photo/gif/plniyu04xvqn8.gif


3- تطبيق أخى الراعى


http://dc08.arabsh.com/i/01132/cto7ox25ftqd.png

[الراعي]

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

http://dc08.arabsh.com/i/01132/cto7ox25ftqd.png

[محمود عفيفى]

وعليكم السلام ورحمة الله وبركاته
ما شاء الله أفضل من المشروح
جزاك الله خيرا أخى الراعى ويارب دايما تمتعنا بتطبيقات الرائعه :abc_139:

[ياسر برناوي]

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

كيف حالك إن شاء الله دائما بخير ؟

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

موفق بإذن الله ... لك مني أجمل تحية .

[علاوي الشهري]

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

[أميرال النوفل]

اوف اوف اوف :abc_085::abc_085::abc_085: ايش الابداع هذا

[مستر سعيد]

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

[أبو الوليد]

جزاك ربي خيرا على الدرس المفيد أخي محمود :abc_152: عمل متقن وشرح واف :abc_022: تطبيقي

http://www.abc4web.net/uploaded/8833_01307995847.jpg (http://www.abc4web.net/vb)

[علي حمدان]

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

[الكشفي]

شكرا لك على الموضوع الجميل:abc_152:

[عبد حميد]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
ألف مبروك .. لقد سعدت بهذا الموضوع
:abc_022:

[مغترب]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
موفق بإذن الله ... لك مني أجمل تحية .

[يحمد الفزاني]

ألف شكر أخي الكريم

[داركي]

شكراااااااااااااااااااااا

[مدريدي صامت]

:abc_085::abc_085::abc_085::abc_085::abc_085::abc_ 085::abc_085::abc_085:

[أبو صخر]

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

[خيالووو]

تشكرا ياغالي علي ذوئك

[المكي]

شكرا لك وباركك الله

[مهلهل]

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

[معين الكثيري]

الف شكر .. جزاك الله الف خير

[الركايبى]

tnxxxxxxxxxxxxxxxxxx

[الـــراقـي]

سلمت الايادي

[سامر السنهوري]

شــــــــــــــــــكرا