المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : (1) تصميم موقع كالمجله بكل دقه واحتراف


abohmam
14-10-2010, 08:55 AM
بسم الله الرحمن الرحيم

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

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

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

نبدا على بركة الله تعالى

افتح الفتوشوب ثم اضغط على file ثم new ثم ضع المقاسات المطلوبه 770 في 600 واضغط على ok .

http://www.abc4web.net/vb/imgcache/7896.abc4web.jpg

اضف طبقه جديده .
http://www.abc4web.net/vb/imgcache/7897.abc4web.jpg


اختار الاداة الموضحه بالصوره Rounded Rectangle tool ثم قم بعمل اطار بالعمل مع ترك فراغات يمين ويسار وفوت وتحت

الطبقه الأولى
http://www.abc4web.net/vb/imgcache/7898.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7899.abc4web.jpg


ثم اضغط كلك يمين على اسم الطبقه واختار Blending Opitions وسيظهر لك نافذة التأثيرات اعمل القيم كما هو موضح لك بالصور

التاليه >>> وأهم شي لاتنسى انك تحفظ الاستايل بعدما تنتهي من وضع القيم والحفظ يكون بالضغط على New style ومن ثم ستجده

بنافذة الاستايلات بالاسفل .

http://www.abc4web.net/vb/imgcache/7900.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7901.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7902.abc4web.jpg


ثم اضف طبقه جديده بالضغط على الزر المحدد بالصوره التاليه .
http://www.abc4web.net/vb/imgcache/7903.abc4web.jpg

ثم اختر اداة التحديد وقم بتحديده العمل من اعلى كما هو مبين لك بالصوره

http://www.abc4web.net/vb/imgcache/7904.abc4web.jpg

ثم اختر اداة التدرج وقم باختيار الالوان المناسبه للتصميم واسحب من اعلى الى اسفل التحديد ليظهر لك النتيجه كما بالصوره .

http://www.abc4web.net/vb/imgcache/7905.abc4web.jpg


الحين طال عمرك تذكر يوم قلنا احفظ الاستايل اللي راح يصير بنافذة الاستايلات بالاسفل !! الحين وصل دوره بالشغل راح يكون شكله

بالنافذه كما بالصوره .
http://www.abc4web.net/vb/imgcache/7906.abc4web.jpg

اضغط على الاستايل وراح تشوف ان التحديد والتدرج اللي عملناه صار شكله غير

http://www.abc4web.net/vb/imgcache/7907.abc4web.jpg


ثم اضغط على صورة الطبقه الثانيه كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه بأكملها ...

http://www.abc4web.net/vb/imgcache/7908.abc4web.jpg


ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الثالثه ((طبقة التحديد اللي عملناه بالاعلى)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

السابق شاهد الصوره .
http://www.abc4web.net/vb/imgcache/7909.abc4web.jpg


والحين طال عمره أضف طبقه جديده كما بالصوره
http://www.abc4web.net/vb/imgcache/7910.abc4web.jpg


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

اعلى الى اسفل .
http://www.abc4web.net/vb/imgcache/7911.abc4web.jpg


وسيصبح هكذا

http://www.abc4web.net/vb/imgcache/7912.abc4web.jpg


الحين طال عمرك روح لنافذة الاستايلات واضغط على الاستايل اللي حفظناه

http://www.abc4web.net/vb/imgcache/7906.abc4web.jpg


سيصبح بهذا الشكل

http://www.abc4web.net/vb/imgcache/7913.abc4web.jpg


والحين روح للطبقه الثانيه بنافذة الطبقات واضغط كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه

بأكملها ...
http://www.abc4web.net/vb/imgcache/7908.abc4web.jpg


ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الرابعه ((طبقة التحديد اللي عملناه بالأسفل)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

السابق شاهد الصوره .
http://www.abc4web.net/vb/imgcache/7914.abc4web.jpg


والحين انتهينا من تصميم الشكل الاساسي للعمل ان شاء الله ... نروح على طووول ونضغط على قائمة file ثم save as وتظهر لك

نافذة الحفظ اولا اختر امتداد الحفظ للصوره كما مبين لك بالرقم ((1)) ثم قم بتسميته الى اي اسم تريد كما بالرقم ((2)) ثم اضغط على

الزر save كما بالرقم ((3)) .

http://www.abc4web.net/vb/imgcache/7915.abc4web.jpg

ثم ستشاهد ام تم حفظ التصميم كصوره بالمكان الذي حفظتها به >> انظر شكل التصميم ..

http://www.abc4web.net/vb/imgcache/7916.abc4web.jpg


إنتهينا من الجزء الأول وسيتبع ان شاء الله الجزء الثاني ...

صاحب الشرح أبو ليالي جزاه الله خيرا


=====/ روابط جميع الدروس \=====
:abc4web:
( 1 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12582)
( 2 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12583)
( 3 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12584)
( 4 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12585)
( 5 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12586)
:bar:
.

أبو يوسف
14-10-2010, 11:30 AM
جزاك الله خيرا اخي ابو همام على هذا المجهود وبارك الله فيك

محمود عفيفى
14-10-2010, 04:19 PM
ما شاء الله شرح رائع
جزاك الله خيرا أخى أباهمام :abc_152:

كينج نت
14-10-2010, 04:40 PM
درس مميز ماشاء الله

شـكــ وبارك الله فيك ـــرا لك

لك أجمل تحية .

:abc_102:

أبو الوليد
14-10-2010, 10:34 PM
في انتظار القادم..حياك الله :abc_022:

الدمشقي
15-10-2010, 12:40 AM
شـكــ وبارك الله فيك ـــرا لك أخي أبو همام
لك مني أجمل تحية .

abohmam
17-10-2010, 12:29 PM
بارك الله فيكم جميعا

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

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

سالي الفلسطينية
17-10-2010, 01:30 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .