منتدى استراحات زايد

منتدى استراحات زايد (http://vb.ma7room.com/index.php)
-   منتدى أخبار المواقع والمنتديات العربية والأجنبية (http://vb.ma7room.com/forumdisplay.php?f=183)
-   -   [ درس ] اساسيات تصميم قالب (من البدايه للنهايه) (http://vb.ma7room.com/showthread.php?t=1317197)

محروم.كوم 09-20-2013 12:50 PM

[ درس ] اساسيات تصميم قالب (من البدايه للنهايه)
 
http://www.al3alamy.net/rep/r1.png

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

كيف حالكم اخوانى الكريم



يارب تكونو بخير و بأفضل حاله ان شاء الله :)


حبيت ان اطرح لكم موضوع مهم جدا جدا وهو

اساسيات تصميم قالب الويب من البدايه للنهايه


أول شئ

:: TRAIDNT FORUM :: - Powered by vBulletin
يعنى أ قالب ؟؟ : قالب هو تصميم الموقع من حيث الاكواد و الصور و المحتوى وكل شئ
مثال
قالب اخبارى : بتلاقى فيه اكواد وصور ومحتوى اخبارى
:: TRAIDNT FORUM :: - Powered by vBulletin
قالب رياضى : تصميم رياضى فيه اكواد وصور ومحتويات رياضيه


طيب

ازاى اوصل للمرحله بتاعت تصميمى بالشكل ده انه يكون التصميم احترافى و مفيهوش غلطات نهائى ويكون فى اسرع وقت اقدر اخلصه :)

:: TRAIDNT FORUM :: - Powered by vBulletin

فى مراحل لازم نمشى عليها (اساسيات التصميم للقوالب ) =متفق عليها من الجميع =

:: TRAIDNT FORUM :: - Powered by vBulletin
طيب أ الاساسيات دى ؟

  • اختار الفكره المناسبه للقالب (رياضى - اخبارى - متعدد الاغراض)
  • اختار الوان القالب حسب نوعه و حاول تختار الوان جديده مناسبه و مريحه للعين
  • اتفرج على اكثر من فكره قبل ما تبدء فى التصميم
  • حاول كل فكره تشوفها تدرسها كويس يعنى مثلا الهيدر ده اتصمم عن طريق اضافه تدرج وخلفيه باترن و فرش و حاول فى كل فكره تضيف حاجه جديده من عندك و متقلدش نفس الفكره لأنك مش هتستفاد حاجه غير ضياع للوقت
  • جمعت افكارك ؟ جمعت ألوانك ؟ جمعت الصور الخاصه ؟
هنا البدايه .....:: TRAIDNT FORUM :: - Powered by vBulletin




أى قالب بيتكون من

Header + Container + Footer


وفى قوالب خاصه ممكن تكون

Sidebar Or Navbar out-of Header

و غيرها طبعا بس الاساس انه بيكون من هيدر و فوتر و محتوى

www.traidnt.net
القالب أول حاجه بيتصمم بالفوتوشوب



تعمل أول حاجه الهيدر و تخلصه بكل اضافاته وصوره و هكذا فى المحتوى و الفوتر ...


خلصت التصميم خالص (الصفحه الرئيسيه) على الفوتوشوب

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

خلصت التصميم فى الفوتوشوب



ابدأ فى توزيع التصميم على الدريم ويفر

ازاى !!!!
www.traidnt.net
زى ماقولنا الهيدر الأول

المحتوى بعد كده

الفوتر الاخر خالص

بس بشرط أ هو ؟؟؟


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





خلصت توزيع الهيدر و الفوتر و المحتوى ؟؟ كله تمام ؟ ؟ ؟
ابدأ فى توزيع الصفحات الفرعيه



بدأت فى توزيع الصفحات الفرعيه حاول تضيف بعدها التأثيرات الجماليه على التصميم





بعد اما عملت التأثيرات



انتهى القالب

www.traidnt.net
أ سبب نجاح القالب الخاص بيك ؟


حاول تكون الفكره عامه متكونش فكره معقده علشان تعرف تعدل عليها بعد كده

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






ازاى تعمل التعديلات ؟؟؟


التعديلات بسيطه خالص

زى ماقولنا

القالب هيدر و فوتر ومحتوى

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



www.traidnt.net
مده العمل ؟؟؟ للقالب ؟؟؟ وهل احترافى ؟؟؟
مده العمل

يوم = تصميم فوتوشوب

يوم = توزيع دريم ويفر
نصف ساعه يوميا = تعديلات و تطوير فى القالب

الأجمالى

ثلاثه أيام
= قالب احترافى 100 %





www.traidnt.net
ملاحظات عامه قبل التصميم
  • حاول تجمع كل يوم فلاتر + فرش + خطوط + باترن ...... للفوتوشوب
  • حاول تضيف كل يوم HTML5 للسى اس اس بتاعك
  • حاول تشوف قوالب كتيره اوى من مواقع اجنبيه وعربيه
  • حاول تكود قوالب جاهزه مره واثنين وثلاثه علشان تتعلم وتستفاد
  • اوعى تنسى وسومات الأرشفه وخصائص السى اس اس المعتمده من المعايير القياسيه لأنها بتسبب مشاكل جامد اوى فى الأرشفه
  • حاول تكون واخد بريك كل فتره صغيره متطولش فى التصميم علشان متزهقش بسرعه و التصميم يبوظ منك
  • الحاجه اما بتزيد عن حدها بتتقلب ضدها لازم لازم متستمرش كتير فى التصميم و تحاول وانت بتصمم تطلع فكره جديده مطلعش فكره قديمه وخلاص (يبقى كده بضيع وقت على الفاضى )










www.traidnt.net
انتهى الدرس :)


أسف حاولت استخدم الطريقه العامه للتعبير لأن موضوع الدرس كبير و لقيت ان الطريقه العامه هى الأفضل للتعبير :) + انا لما كنت بتعلم الاساسيات دى كنت واخدها بالطريقه العامه وفعلا جابت نتيجه :)




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




الموضوع : حصرى لترايدنت

www.traidnt.net
كتابه : العالمي





الساعة الآن 06:59 PM

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227