شرح كيفية تقسيم صورة ووضع روابط عليها بالفوتوشوب

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


ــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


شرح كيفية تقسيم صورة لوضع روابط
عليها بالفوتوشوب


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


بعد الانتهاء من تصميم الصورة و كتابة
اسماء الازرار عليها مثل " الرئيسية،البوابة،....او اي شيء تريده" ستتبع
الخطوات التالية


قبل البدء سنفرض ان الصورة التي تم
تصميمها هي هذه:






نقوم باختيار اداة slice selector tool كما في الصورة











نقوم بالضغط بالزر الايمن للفارة على الصورة بعد اختيار الاداة و نختار divide slice كما في الصورة


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







نلاحظ ان
الصورة تم تقسيمها بالعرض الى ثلاث شرائح


نقوم بالضغط
على كل شريحة و نحرك حدود الشرائح لتكون فقط حول الازرار المراد عمل وصلات لها كما
في الصورة


ويكون حد كل
شريحة ملاصق للشريحة المجاورة حتي لا يزداد تقسيم الصورة








بنفس الاداةslice
selector tool نضغط
بالزر الايمن على شريحة الزر الاول و نختار edit slice options كما في الصورة


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










طبق ذلك على
كل شرائح الازرار لكي تقوم بعمل وصلات لها





بعد الانتهاء
اذهب الى file>save for web كما في الصورة












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







قم بالضغط
على صفحة الويب بالزر الايمن للماوس واختر


open
with>notepad


سيظهر لك كود
الهتمل للصورة


قم بنسخ
الجزء من الكود من اولtable كما هو موضح بالصورة وقم بوضعه في المكان الذي تريده سواء في
الرئيسية او البوابة او في صفحة الهتمل الاخاصة بك لكن قبل ذلك يجب عمل شيء مهم
وهو تغيير روابط الصور الموجودة في الكود

http://www.image.gostshare.com/files/wy5bf7geyd1iguer64vz.jpg







قم برفع
الصور الموجودة في مجلد الصور على النت صورة صورة بالترتيب وغير رابط كل صورة في
الكود و لاحظ الترتيب و لا تضع رابط مكان آخر

http://www.image.gostshare.com/files/lbrb0vznlyvofhmmjd3n.jpg
انتهى الدرس
بهذا الدرس يمكنك وضع الوصلات التي تريدها في صورة واحدة لاعطائها شكل جمالي
مثال :هنـــــــــــــــــــــــا

ستلاحظ الصورة التي تم تصميمها و الازرار التي عليها تعمل
وشكرا لحسن المتابعة