تصميم أزرار وقوائم من الفوتوشب إلى البرمجة CSS image rollovers

[أبو الوليد]

http://www.abc4web.net/upload/images2/fqpf8nwma32gm27.png (http://www.abc4web.net/upload/)


http://www.abc4web.net/upload/images2/xnnpgwk0hp48mvx.gif (http://www.abc4web.net/upload/)


1. بسم الله ، نفتح عمل جديد 400×300 بكسل ونملأ الخلفية باللون 314052 #


http://www.abc4web.net/upload/images2/9y4afvja6rheowq.jpg (http://www.abc4web.net/upload/)


2. نفتح قائمة Blending Options ونطبق التأثيرين التالين على الخلفية ( بالنسبة للباترين يمكن اختيار أي واحد مناسب )


http://www.abc4web.net/upload/images2/23iubp22v6hr7l1.jpg (http://www.abc4web.net/upload/)


3. نضيف طبقة جديدة ثم نختار أداة Rounded Rectangle Tool مع القيم كما في الصورة وتغيير اللون الأمامي إلى 131C27 # ونرسم الزر


http://www.abc4web.net/upload/images2/orvj036dgkh9kmo.jpg (http://www.abc4web.net/upload/)


4. على طبقة الزر نطبق تأثيري Gradient Overlay و Stroke


http://www.abc4web.net/upload/images2/eh7fhpyoc2vqo2q.jpg (http://www.abc4web.net/upload/)


5. الناتج


http://www.abc4web.net/upload/images2/8ooillpec8ri4sr.jpg (http://www.abc4web.net/upload/)


6. نضاعف طبقة الزر ونملأها باللون 213143 # ثم نحرك الزر المضاعف 5 بكسل نحو الأعلى


http://www.abc4web.net/upload/images2/jd2tagahewk7t5y.jpg (http://www.abc4web.net/upload/)


7. ننشئ تحديد حول طبقة الزر الأصلية ونملأ التحديد باللون 000000 # ثم نطبق فلاتر Blur > Gaussian Blur بقيمة 2 بكسل


http://www.abc4web.net/upload/images2/yi5v8kaldiyofle.jpg (http://www.abc4web.net/upload/)


8. نضيف طبقة جديدة نسميها " إضاءة " ثم نختار فرشاة ناعمة بحجم 120 بكسل ونضغط مرة واحدة أعلى الزر ثم نخفف الشفافية إلى 20 %


http://www.abc4web.net/upload/images2/wiqxgvjhhfakx2b.jpg (http://www.abc4web.net/upload/)


9. نختار أداة الكتابة ثم نكتب النص الذي نجعله تعريفا لعمل الزرار ثم نطبق عليه تأثير Drop Shadow


http://www.abc4web.net/upload/images2/yolrjamriidfvez.jpg (http://www.abc4web.net/upload/)


10. ننشئ مجموعة Group نسميها Normal ونجعل كل الطبقات فيها عدا طبقة الخلفية

نضاعف المجموعة ونغير الإسم إلى Hover ثم نحرك المجموعة أسفل المجموعة Normal في مساحة العمل

نفتح المجموعة Hover ونغير لون طبقة الزر الثانية إلى 13202E #


http://www.abc4web.net/upload/images2/r7ksjyxgrgrxtq1.jpg (http://www.abc4web.net/upload/)


11. نضاعف مرة أخرى المجموعة Normal ونغير الإسم إلى Click أو Active

نفتح المجموعة Click وبأداة التحريك نسحب طبقة الزر الثانية 3 بكسل إلى أسفل


http://www.abc4web.net/upload/images2/rgk8b0xdvihy0eo.jpg (http://www.abc4web.net/upload/)


12. ناتج الأزرار


http://www.abc4web.net/upload/images2/o8ar8qa6wduoc9a.jpg (http://www.abc4web.net/upload/)


13. نخفي جميع الطبقات ونترك فقط طبقة المجموعة Normal ثم نضغط Ctrl+A لإنشاء تحديد لكامل المساحة ثم نضغط Ctrl+Shift+C لنسخ كامل المجموعة


http://www.abc4web.net/upload/images2/nneorw9hhv4uwch.jpg (http://www.abc4web.net/upload/)


14. ننشئ عمل جديد ونترك خيارات القياس كما تظهر لنا ، ونغير فقط في الخلفية نجعلها شفافة


http://www.abc4web.net/upload/images2/qqzpnaafkezqcww.jpg (http://www.abc4web.net/upload/)


15. نذهب إلى Image > Canvas Size وندخل القيم كما في الصورة


http://www.abc4web.net/upload/images2/i0gisprga3wfkf7.jpg (http://www.abc4web.net/upload/)


16. نضغط Ctrl+V ثم نجعل الزر أعلى مساحة العمل


http://www.abc4web.net/upload/images2/f3gkzfovmewmcfi.jpg (http://www.abc4web.net/upload/)


17. ننسخ المجموعة Hover ثم نلصقها في مساحة العمل الجديدة ونكرر ذلك مع المجموعة Click ثم نحفظ الناتج على صيغة PNG


http://www.abc4web.net/upload/images2/efa3aqcqqo3rhj8.jpg (http://www.abc4web.net/upload/)



http://www.abc4web.net/upload/images2/xnnpgwk0hp48mvx.gif (http://www.abc4web.net/upload/)


الخطوة الثانية وهي تطبيق البرمجة على تصميمنا

وسيتم وضعها بالتفصيل فى الرد التالي

كل ماعليكم الآن تحميل الملف PSD + PNG مفتوح وملف HTML والتى تم إضافة الأزرار إليها

وسوف نتابع معكم الشرح


لمعاينة التطبيق حمل الملف من المرفقات مع ملف مفتوح PSD لتصميم الزرار في كلتا الحالتين

لا تنسونا من دعائكم بالخير
.

[abohmam]

بارك الله فيك أخى ابا الوليد
شرح رائع وماتع ماشاء الله

وبعد إذنك تم فصل شرح البرمجة لمزيد من التفصيل والله المستعان

هذا الشرح سوف نستخدم فيه أمر focus
ومعناه التمركز - مركز النشاط

وهذا يعنى اننا سوف نحدد الإتجاهات ( أعلى - منتصف - أسفل ) من الصورة وهو التصميم الذى يظهر عليه الزرار فى الحالات الثلاثة
1- الوضع الثابت
2- عند مرور الماوس
3- عند الضغط على الزرار

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

والآن مع الشرح

ننظر الى هذه الصورة جيدا لنفهم فكرة أن التصميم تم تكوينه من ثلاثة أزرار لأننا سوف نستخدم تقنية CSS3 المتقدمة فى إضافة تأثير مرور الماوس

http://www.abc4web.net/upload/images2/zttvzsdzc1mllcm.jpg (http://www.abc4web.net/upload/)

طريقتين لتكويد الزرار إذا كان تصميم الأزرار رأسيا أي زر فوق زر والطريقة الثانية إذا كان التصميم أفقيا زر بجانب زر

نقوم بإنشاء مجلد للصور ونسميه images وهذا هام لأنه مسار الصورة

بداية سوف أضع هنا الكود العام لصقحة الـ HTML وسوف نضيف الأكواد الأخرى فى اماكنها المخصصة


<html>

<head>
مكان أكواد الـ CSS
</head>

<body>
مكان ظهور الأزرار
</body>

</html>



http://www.abc4web.net/upload/images2/uzswm9qflgc0txg.png (http://www.abc4web.net/upload/)

كود HTML بالنسبة للزرار إذا كان التصميم رأسيا

الكود الخاص بالجسم وهو الذى سيظهر فى الصفحة


<p><a class="button">abc4web</a></p>



كود CSS للزرار إذا كان التصميم رأسيا
وهذا الكود يتم وضعه بين وسمي

<head></head>


نضيف هذا الكود


<style type="text/css">
/*<![CDATA[*/
.button {
background: url(images/abc4web_button_H.png) no-repeat 0 0;
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم */
}
a.button:active {
background-position: bottom;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال ) */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
/*]]>*/
</style>


نلاحظ التعليمات التى تم إضافتها باللغة العربية


وبذلك سيكون الكود الكامل للصفحة كالتالي



<html>
<head>
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<meta content="ar-sa" http-equiv="Content-Language" />
<title>abc4web CSS Button</title>
<style type="text/css">
/*<![CDATA[*/
.button {
background: url(images/abc4web_button_H.png) no-repeat 0 0;
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم */
}
a.button:active {
background-position: bottom;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال ) */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
/*]]>*/
</style>
</head>

<body bgcolor="#2e3c4c">

<p><a class="button">abc4web</a></p>

</body>
</html>



http://www.abc4web.net/upload/images2/xnnpgwk0hp48mvx.gif (http://www.abc4web.net/upload/)

إذا كان التصميم أفقيا هكذا

http://www.abc4web.net/upload/images2/gx9hy9g8efytqqo.png (http://www.abc4web.net/upload/)


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

والتغير فقط فى أكواد CSS

نقوم بتغير إسم صورة الزرار
وكذلك إتجاه ظهور صورة الخلفية عندما يمر الماوس ( يمين )

ولفعل ذلك نبحث عن هذا الكود

background-position: bottom;

ونستبدل كلمة bottom والتى معناها أسفل بـ right أى اليمين هكذا

background-position: right;

وكذلك نبحث عن إسم الصورة

background: url(images/abc4web_button_H.png) no-repeat 0 0;

ونقوم بتغيرها إلى

background: url(images/abc4web_button_V.png) no-repeat 0 0;


وسيكون الكود الكامل هكذا

<html>
<head>
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<meta content="ar-sa" http-equiv="Content-Language" />
<title>abc4web CSS Button</title>
<style type="text/css">
/*<![CDATA[*/
.button {
background: url(images/abc4web_button_V.png) no-repeat 0 0;
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم */
}
a.button:active {
background-position: right;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال ) */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
/*]]>*/
</style>
</head>

<body bgcolor="#2e3c4c">

<p><a class="button">abc4web</a></p>

</body>

</html>


[/URL][URL="http://www.abc4web.net/upload/"]http://www.abc4web.net/upload/images2/xnnpgwk0hp48mvx.gif (http://www.abc4web.net/upload/images2/xnnpgwk0hp48mvx.gif)

طبعا هذه أمثلة لطريقة ظهور الزرار فقط أما باقى الأمور ككيفية توسيط الأزرار أو إنشاء قوائم

فالأمر مجاله أقسام برمجة المواقع

أتمنى لكم جميعا الفائدة من هذه المشاركة

ولاتنسونا من صالح دعائكم

:fasel6:
أبوهمام
.

[المياه المظلمة]

باااااااااااااااااااااااا اااااااااارك الله فيك

[أبو الوليد]

باااااااااااااااااااااااا اااااااااارك الله فيك


وفيك البركة يا طيب :abc_022: حياك الله

[مغترب]

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

[toufik_alg]

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

[جروح بارده]

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

[أبو صخر]

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

http://www10.0zz0.com/thumbs/2011/03/28/19/788424792.jpg

[abohmam]

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

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

موفقين بإذن الله

[أبو فارس]

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

[abohmam]

حياك الله أخى ابا فلرس

أشكر لك مرورك وتواصلك ودعائك

[رشوان]

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

[احمد بادي]

يعطيك الصحة على هذا العمل الرئع خونا أبوالوليد ومشكور :abc_052::abc_050::abc_026:

[احمد بادي]

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