abohmam
04-03-2009, 09:15 PM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم و رحمة الله و بركاته
أهلاً بكم في الحلقة الثانية من دورة تصميم استايل مكتبة الصور (البطاقات) و تركيبه بالكامل ،،،
* روابط دروس الدورة:
تصميم واجهة موقع أو استايل للمنتدى (http://www.abc4web.net/vb/showthread.php?t=2291)
تحميل اسكربت vCard3 (http://www.abc4web.net/vb/showthread.php?t=2290)
الدرس الأول (http://www.abc4web.net/vb/showthread.php?t=2289)
الدرس الثاني (http://www.abc4web.net/vb/showthread.php?t=2288)
الدرس الثالث (http://www.abc4web.net/vb/showthread.php?t=2287)
الدرس الرابع (http://www.abc4web.net/vb/showthread.php?t=2285)
:bar:
بسم الله نبدأ :
بعد قيامنا بتصميم الاستايل، نقوم الآن بفتح صورة الاستايل على الفوتوشوب و بالطبع الصورة بصيغة JPG كما ذكرنا في آخر الحلقة الأولى بتخزينها بهذا الامتداد .. و من ثم في منطقة الطبقات سنجد قفل على طبقة الصورة نقوم بالضغط عليه مرتين و من ثم OK .. الآن نقوم باختيار أداة التقطيع كما في الصورة :
http://www.abc4web.net/vb/imgcache/7638.abc4web.gif
و قبل كل شيء نقوم بإظهار نافذة التحديدات و الأحجام عن طريق Window من الأعلى و من ثم نقوم باختيار Info و ستظهر لنا النافذة، و بعد ذلك نقوم بالضغط على علامة + في النافذة و نختار Pixels كما في الصورة :
http://www.abc4web.net/vb/imgcache/7639.abc4web.gif
و أول عملية هي التحديد من الزاوية العلوية اليمنى إلى الزاوية السفلية اليمنى و من ثم نسحب إلى اليسار لتحديد الأعمدة و جزء بسيط من محتوى الواجهة (أنا طلع عندي العرض 14 بكسل على نافذة Info) كما في الصورة :
http://www.abc4web.net/vb/imgcache/7640.abc4web.gif
و نقوم بتطبيق نفس العملية على الجهة اليسرى من الزاوية العلوية إلى السفلية و نحاول أن نقوم بالموازنة أي العرض على اليمين يساوي العرض على اليسار و سنجد التطبيق كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7641.abc4web.gif
بعد ذلك نقوم بتحديد البانر بالكامل كما في الصورة :
http://www.abc4web.net/vb/imgcache/7642.abc4web.gif
و من ثم نقوم بتقطيع البانر إلى ستة قطع بالبدء من اليمين على التوالي إلى اليسار (و نأخذ جزء بسيط من المحتوى أيضاً) و القطع كالتالي :
[1] القطعة العلوية اليمنى المطابقة لعرضها للعامود الأيمن
[2] القطعة التي تليها اليمنى أيضاً
[3] القطعة المتوسطة
[4] جزء بسيط من التمدد
[5] القطعة اليسرى
[6] القطعة العلوية اليسرى المطابقة لعرضها للعامود الأيسر
و سنجدها كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7643.abc4web.gif
و من ثم نطبق بنفس الطريقة العمل على الفوتر (الأسفل) بتحديده بالكامل و من ثم تقطيعه لستة قطع بحيث تكون مطابقة للأعلى (عند التقطيع يتم تلقائياً التحديد بمطابقة الجزء للجزء المقابل) و سنجد عملنا كما في الصورة :
http://www.abc4web.net/vb/imgcache/7644.abc4web.gif
و بعد ذلك نحدد المحتوى الداخلي بالكامل كما في الصورة :
http://www.abc4web.net/vb/imgcache/7645.abc4web.gif
و أخيراً نقوم بتخزين القطع بكاملها عن طريق اختيار File بالأعلى و من ثم Save for Web كما في الصورة :
http://www.abc4web.net/vb/imgcache/7646.abc4web.gif
و بعد ذلك ستظهر لنا نافذة التخزين و نقوم بالضغط على زر Save في أعلى اليمين كما في الصورة :
http://www.abc4web.net/vb/imgcache/7647.abc4web.gif
و أخيراً ستظهر لنا نافذة مكان تخزين مجلد الصور المقطعة و نقوم باختيار مكان التخزين و فئة التخزين (فقط صور Images Only) كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7648.abc4web.gif
و سيقوم برنامج الفوتوشوب بتخزين مجلد images في المكان المحدد و بداخله الصور جميعها، و الصور التي تهمنا عددها 14 صورة (6 للبانر تم ذكرهم، 6 للفوتر، 2 العامودان الأيمن و الأيسر) و المجلد يحتوى على 15 صورة منهم صورة المحتوى الداخلية فنقوم بحذفها فهي لا تهمنا و يصبح لدينا الصور جاهزة و عددها 14 كما ذكرت ... كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7649.abc4web.gif
وبذلك نكون قد انتهينا من التقطيع .. و أتمنى أن أكون قد وفقت في إدراج هذه الحلقة و إن كان بها خطأ فالعذر من الله ثم منكم ،،،
مع أحر التمنيات لكم بالتوفيق .. انتظرونا بالحلقات القادمة
أخوكم...AhMeD
منقـ(مع أجمل تحية للكاتب)ـول
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم و رحمة الله و بركاته
أهلاً بكم في الحلقة الثانية من دورة تصميم استايل مكتبة الصور (البطاقات) و تركيبه بالكامل ،،،
* روابط دروس الدورة:
تصميم واجهة موقع أو استايل للمنتدى (http://www.abc4web.net/vb/showthread.php?t=2291)
تحميل اسكربت vCard3 (http://www.abc4web.net/vb/showthread.php?t=2290)
الدرس الأول (http://www.abc4web.net/vb/showthread.php?t=2289)
الدرس الثاني (http://www.abc4web.net/vb/showthread.php?t=2288)
الدرس الثالث (http://www.abc4web.net/vb/showthread.php?t=2287)
الدرس الرابع (http://www.abc4web.net/vb/showthread.php?t=2285)
:bar:
بسم الله نبدأ :
بعد قيامنا بتصميم الاستايل، نقوم الآن بفتح صورة الاستايل على الفوتوشوب و بالطبع الصورة بصيغة JPG كما ذكرنا في آخر الحلقة الأولى بتخزينها بهذا الامتداد .. و من ثم في منطقة الطبقات سنجد قفل على طبقة الصورة نقوم بالضغط عليه مرتين و من ثم OK .. الآن نقوم باختيار أداة التقطيع كما في الصورة :
http://www.abc4web.net/vb/imgcache/7638.abc4web.gif
و قبل كل شيء نقوم بإظهار نافذة التحديدات و الأحجام عن طريق Window من الأعلى و من ثم نقوم باختيار Info و ستظهر لنا النافذة، و بعد ذلك نقوم بالضغط على علامة + في النافذة و نختار Pixels كما في الصورة :
http://www.abc4web.net/vb/imgcache/7639.abc4web.gif
و أول عملية هي التحديد من الزاوية العلوية اليمنى إلى الزاوية السفلية اليمنى و من ثم نسحب إلى اليسار لتحديد الأعمدة و جزء بسيط من محتوى الواجهة (أنا طلع عندي العرض 14 بكسل على نافذة Info) كما في الصورة :
http://www.abc4web.net/vb/imgcache/7640.abc4web.gif
و نقوم بتطبيق نفس العملية على الجهة اليسرى من الزاوية العلوية إلى السفلية و نحاول أن نقوم بالموازنة أي العرض على اليمين يساوي العرض على اليسار و سنجد التطبيق كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7641.abc4web.gif
بعد ذلك نقوم بتحديد البانر بالكامل كما في الصورة :
http://www.abc4web.net/vb/imgcache/7642.abc4web.gif
و من ثم نقوم بتقطيع البانر إلى ستة قطع بالبدء من اليمين على التوالي إلى اليسار (و نأخذ جزء بسيط من المحتوى أيضاً) و القطع كالتالي :
[1] القطعة العلوية اليمنى المطابقة لعرضها للعامود الأيمن
[2] القطعة التي تليها اليمنى أيضاً
[3] القطعة المتوسطة
[4] جزء بسيط من التمدد
[5] القطعة اليسرى
[6] القطعة العلوية اليسرى المطابقة لعرضها للعامود الأيسر
و سنجدها كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7643.abc4web.gif
و من ثم نطبق بنفس الطريقة العمل على الفوتر (الأسفل) بتحديده بالكامل و من ثم تقطيعه لستة قطع بحيث تكون مطابقة للأعلى (عند التقطيع يتم تلقائياً التحديد بمطابقة الجزء للجزء المقابل) و سنجد عملنا كما في الصورة :
http://www.abc4web.net/vb/imgcache/7644.abc4web.gif
و بعد ذلك نحدد المحتوى الداخلي بالكامل كما في الصورة :
http://www.abc4web.net/vb/imgcache/7645.abc4web.gif
و أخيراً نقوم بتخزين القطع بكاملها عن طريق اختيار File بالأعلى و من ثم Save for Web كما في الصورة :
http://www.abc4web.net/vb/imgcache/7646.abc4web.gif
و بعد ذلك ستظهر لنا نافذة التخزين و نقوم بالضغط على زر Save في أعلى اليمين كما في الصورة :
http://www.abc4web.net/vb/imgcache/7647.abc4web.gif
و أخيراً ستظهر لنا نافذة مكان تخزين مجلد الصور المقطعة و نقوم باختيار مكان التخزين و فئة التخزين (فقط صور Images Only) كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7648.abc4web.gif
و سيقوم برنامج الفوتوشوب بتخزين مجلد images في المكان المحدد و بداخله الصور جميعها، و الصور التي تهمنا عددها 14 صورة (6 للبانر تم ذكرهم، 6 للفوتر، 2 العامودان الأيمن و الأيسر) و المجلد يحتوى على 15 صورة منهم صورة المحتوى الداخلية فنقوم بحذفها فهي لا تهمنا و يصبح لدينا الصور جاهزة و عددها 14 كما ذكرت ... كما في الصورة التالية :
http://www.abc4web.net/vb/imgcache/7649.abc4web.gif
وبذلك نكون قد انتهينا من التقطيع .. و أتمنى أن أكون قد وفقت في إدراج هذه الحلقة و إن كان بها خطأ فالعذر من الله ثم منكم ،،،
مع أحر التمنيات لكم بالتوفيق .. انتظرونا بالحلقات القادمة
أخوكم...AhMeD
منقـ(مع أجمل تحية للكاتب)ـول