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



تصميم فورم مراسلة

منتدى دروس الفوتو شوب


تصميم فورم مراسلة

السلام عليكم ورحمة الله وبركاته إخواني في هذا الدرس سأقوم بشرح تصميم نموذج مراسلة إحترافي بإستخدام برنامج الفوتوشوب وبعد ذالك في موضوع مستقل آخر سيتم شرح طريقة تركيب

إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 07-29-2008   المشاركة رقم: 1 (permalink)
المعلومات
الكاتب:
اللقب:
الرتبة


البيانات
التسجيل: Aug 2007
العضوية: 45
المشاركات: 389 [+]
بمعدل : 0.10 يوميا
اخر زياره : 11-07-2009 [+]
معدل التقييم:
نقاط التقييم: 14

التوقيت

الإتصالات
الحالة:
salim غير متواجد حالياً
وسائل الإتصال:

المنتدى : منتدى دروس الفوتو شوب
السلام عليكم ورحمة الله وبركاته

إخواني في هذا الدرس سأقوم بشرح تصميم نموذج مراسلة إحترافي بإستخدام برنامج الفوتوشوب

وبعد ذالك في موضوع مستقل آخر سيتم شرح طريقة تركيب النموذج في صفحة إنترنت وكتابة الكود الخاص بإرسال الرساله عن طريق ASP بلغة البرمجة #C

المصدر : http://www.abdulmalik.althari.com
بعد تنفيذ هذا الدرس ستقوم بعمل نموذج مراسله مثل هذا إن شاء الله تعالى
تصميم فورم مراسلة main.jpg
الأن بسم الله نبدأ الدرس

-------------------

1 - أفتح برنامج الفوتوشوب

تصميم فورم مراسلة 1.gif

2 - أفتح صفحه جديده

تصميم فورم مراسلة 2.gif

بالمقاسات التالية , العرض 500 والإرتفاع 470 كما في الصورة التالية

تصميم فورم مراسلة 3.gif

3 - الأن في صندوق الأدوات الموجود في الفوتوشوب كما في الصوره أختر أداة المربع ذات الزوايا المائلة
وأكتب في خانة Radius رقم 10 وهو يمثل درجة ميلان الزوايا

تصميم فورم مراسلة 4.gif

4 - الأن أرسم مربع كبير يمثل خلفية نموذج المراسله كما في الصورة التالية

تصميم فورم مراسلة 5.gif

5 - من نافذة الطبقات Layers ( إذا لم تكن مفتوحه أضغط F7 لتضهر ) قم بالضغط على الطبقه المربعه التي تمثل خلفية نموذج المراسله بالزر الأيمن من الفاره
وأختر الخيار Blending , ستضهر لك نافذه مهمه وهي نافذة Layer Style وتمثل ستايل او شكل او تنسيق الطبقه

الأن قم بعمل كما في الصور

تصميم فورم مراسلة 6.gif

تصميم فورم مراسلة 7.gif

تصميم فورم مراسلة 8.gif

ليضهر كما في الصورة تصميم فورم مراسلة smile.gif

تصميم فورم مراسلة 9.gif



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

تصميم فورم مراسلة 10.gif

ومن Layer Style أعمل كما في الصور

تصميم فورم مراسلة 11.gif

تصميم فورم مراسلة 12.gif

تصميم فورم مراسلة 13.gif

لتضهر النتيجة
تصميم فورم مراسلة 14.gif

الأن سنقوم بإضافة حركه جميله لتزيد مستطيل العنوان أكثر جمالاً وهي لمعه بسيطه ولكنها مؤثره تصميم فورم مراسلة smile.gif

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

تصميم فورم مراسلة 15.gif

ثم قم بمسح التأثيرات التي عليها لتكون ( ساده )

تصميم فورم مراسلة 15a.gif

أضغط على هنا وأختر اللون الأبيض

تصميم فورم مراسلة 16.gif

الأن أضغط على الطبقه الزر الأيمن من الفاره وأختر Resterize Layer ليمكنك قص المستطيل

وكما في الصوره

تصميم فورم مراسلة 17.gif

الأن قم بقص المستطيل هكذا

تصميم فورم مراسلة 18.gif


ثم أختر درجة الشفافية 50%
تصميم فورم مراسلة 19.gif

لتضهر النتيجة تصميم فورم مراسلة smile.gif

تصميم فورم مراسلة 20.gif

7 - الأن سنقوم بإضافة تصميم مستطيل للحقول الخاصه بنموذج المراسله

أرسم مستطيل كما في الصوره

تصميم فورم مراسلة 21.gif

ثم أعطه التأثيرات التاليه

تصميم فورم مراسلة 22.gif

تصميم فورم مراسلة 23.gif

تصميم فورم مراسلة 22a.gif

تصميم فورم مراسلة 24.gif


لتضهر النتيجه كما في الصوره

تصميم فورم مراسلة 25.gif

الأن أضغط على الطبقه بالزر الأيمن واختر هذا الخيار ليتم مضاعفة الطبقه

تصميم فورم مراسلة 26.gif

ثم أنزلها قليلاً

تصميم فورم مراسلة 27.gif



كرر العمليه لتقوم بمضاعفة الطبقه مره أخرى

تصميم فورم مراسلة 28.gif

الأن يأتي دور حقل نص الرساله نقوم بتصميم مربع بهذا الشكل

تصميم فورم مراسلة 29.gif

ثم نقوم بإضافة التأثيرات التاليه

تصميم فورم مراسلة 29a.gif

تصميم فورم مراسلة 30.gif

تصميم فورم مراسلة 31.gif

الأن نقوم بتصميم مربع زر الإرسال كما في الصوره

تصميم فورم مراسلة 32.gif

ونضيف التأثيرات عليه

تصميم فورم مراسلة 34.gif

تصميم فورم مراسلة 33.gif

تصميم فورم مراسلة 35.gif

الأن أنتهينا ما بقي إلا عناوين النموذج نقوم بكتابتها بكل سهوله عن طريق أداة الخط

تصميم فورم مراسلة 36.gif

ليضهر النموذج بهذه النتيجة تصميم فورم مراسلة smile.gif ...

تصميم فورم مراسلة 37.gif



الأن بإستخدام الفوتوشوب سنقوم بعمل حركه ليتم تقطيع التصميم وإضهاره على صفحة إنترنت

من صندوق الأدوات أختر أداة التقطيع

تصميم فورم مراسلة 38.gif

وقم بتقطيع النموذج كما في الصوره

تصميم فورم مراسلة 39.gif

بعد ذالك أضغط على File >> Save for Web...

تصميم فورم مراسلة 40.gif

ثم أضغط Save

وأختر المجلد الذي تريد حفظ الملفات فيه

تصميم فورم مراسلة 41.gif

ستكون الملفات هكذا

index.htm <<< صفحة الإنترنت الذي سيعرض فيه النموذج مقطع ومركب في جداول وجاهز للإستخدام
images <<< مجلد الصور وهي مقطعه أتوماتيك هديه من الفوتوشوب ^_~

قم بفتح ملف index.htm لترى تطبيق عملك كاملاً على صفحة إنترنت *_^

لتكملة الدرس إنتقل إلى الخطوة التاليه ...........

---# إنتهى الدرس الأول #---


أتمنى أني أفدت الكثير بجهداً وفير , وشكراً لكم لحسن إستماعكم ^_^

وهديه لكم (( ملف الفوتوشوب لنموذج المراسلة + نموذج المراسلة مقطع ومركب ))

ملف مضغوط Winrar
ملف مضغوط Winzip
------------------------------------

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

إخواني في هذا الدرس سأقوم بشرح طريقة عمل نموذج مراسلة بإستخدام ASP .NET بلغة البرمجة #C
المصدر : http://www.abdulmalik.althari.com
هذا الدرس مستند على درس التصميم في قسم التصميم بإستخدام برنامج الفوتوشوب
لعمل تصميم نموذج مراسله مثل هذا
تصميم فورم مراسلة main.jpg
ولعمل الخطوات البرمجية وتنسيق النموذج في المتصفح تابع هذا الدرس تصميم فورم مراسلة smile.gif

بسم الله نبدأ
---------------------

أفتح Visual Studio 2005
تصميم فورم مراسلة 1.gif

أكتب اسم المجلد وغير اللغة إلى #C
تصميم فورم مراسلة 2.gif

إفتح الملف اللي سويناه في درس التصميم عشان تاخذ كود الصفحه من التصميم المقطع وتنقله إلى ملف Default.aspx تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 3.gif

تصميم فورم مراسلة 4.gif
في ملف index.html أنسخ الكود اللي بين <body>
تصميم فورم مراسلة 5.gif

وألصقه في ملف Default.aspx بين التاق <div> وأضغط على Design لتشاهد تصميم الصفحه
تصميم فورم مراسلة 6.gif

سيضهر لك التصميم بهذا الشكل
تصميم فورم مراسلة 7.gif
لا تتفاجئ , يجب عليك نسخ مجلد الصور داخل مجلد مشروعك , أفتح المجلد الذي تم تقطيع فيه التصميم وانسخ مجلد الصور images
تصميم فورم مراسلة 8.gif

ثم ألصقه في المشروع
تصميم فورم مراسلة 9.gif



ثم أعمل تحديث لصفحة التصميم
تصميم فورم مراسلة 10.gif

ليضهر بهذا الشكل تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 11.gif
أضغط على المستطيل التالي ضغطه واحده ثم أختر Source ليضع المشر على صورة المستطيل التي حددتها
تصميم فورم مراسلة 12.gif

أنسخ عنوان الصوره وألصقها في تاق td الذي يمثل صف الصوره مثل هكذا ( لاحظ الصوره جيداً
تصميم فورم مراسلة 13.gif
يجب عليك إضافة خاصية background في td ثم قم بمسح تاق <img> الذي بداخل td كاملاً
تصميم فورم مراسلة 14.gif

: منتديات صحابي http://www.s7aby.com/t8476.html#post84647
الأن إذهب للتصميم سترى بأنه بإمكانك الكتابه في مكان الصوره مباشره وأصبحت كخلفيه تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 15.gif

الأن اعمل نفس الطريقه السابقه في كل مكان تريده ان يكون خلفيه تصميم فورم مراسلة smile.gif لتضع فيه الحقول
بعد ما تنتهي حدد المكان الذي ستضع فيه الحقل الأول ثم أضغط مرتين على الأدة TextBox
تصميم فورم مراسلة 16.gif
وهكذا لجميع الحقول

عند حقل نص الرساله أضف نفس الأداة السابقه ولكن عند Properties في خاصية TextMode أختر MultiLine ليكون متعدد الأسطر كم في الصوره

: منتديات صحابي http://www.s7aby.com/showthread.php?p=84647
تصميم فورم مراسلة 17.gif

الأن جاء دور زر الإرسال , أضغط على الصوره مره واحده ثم أختر Source
تصميم فورم مراسلة 18.gif

إنسخ عنوان الصوره ثم إمسح التاق <img ..> كاملاً أو في صفحة التصميم اضغط على الصوره واضغط Delete
تصميم فورم مراسلة 19.gif



في مكان زر الإرسال أضف أداة ImageButton
تصميم فورم مراسلة 20.gif
ثم في الخيارات Properties في خاصية ImageUrl ألصق عنوان صورة الإرسال تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 21.gif
الأن نريد أن نجعل الحقول متناسقه مع التصميم بحيث سنجعل حقل نص الرساله بدون إطارات , إتبع الصوره التاليه
تصميم فورم مراسلة 22.gif
تصميم فورم مراسلة 23.gif

الأن أصبح الحقل بدون حدود إطارات تصميم فورم مراسلة smile.gif
هنا ستجد أن الحقل من اليسار إلى اليمين بحيث ان السكرول بار على اليمين ونريد أن نجعله على اليسار
تصميم فورم مراسلة 24.gif
في ال source أكتب في تاق td
dir="rtl"
تصميم فورم مراسلة 25.gif
لتجد أن السكرول بار أصبح على اليسار تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 26.gif
الأن الحقول التي بسطر واحد مثل الاسم والبريد والعنوان يجب علينا تنسيقها , أتبع الصور التاليه
تصميم فورم مراسلة 27.gif

تصميم فورم مراسلة 28.gif

تصميم فورم مراسلة 29.gif





أختر لون الخلفيه Trasparent لتصبح شفافه تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 30.gif
واعمل نفس الطريقه في باقي الحقول
الأن اضف Label جمب زر إرسال ليتم عرض النتيجه فيه تصميم فورم مراسلة smile.gif
تصميم فورم مراسلة 31.gif
الأن أضغط مرتين على زر الإرسال ليضهر لك صفحة أكواد السي شارب
تصميم فورم مراسلة 32.gif
ثم تكتب هذا الكود كاملاً ليتم إرسال الرساله بالشكل الطبيعي , أرجوا أنك تراعي أسامي الحقول التي كتبتها في صفحة التصميم لكل حقل ID خاص به وهنا مكتوبه
كود:
SmtpClient smtpClient = new SmtpClient();MailMessage message = new MailMessage();try{MailAddress fromAddress = new MailAddress(txtEmail.Text, txtFrom.Text);// You can specify the host name or ipaddress of your server// Default in IIS will be localhost smtpClient.Host = "localhost";//Default port will be 25smtpClient.Port = 25;//From address will be given as a MailAddress Objectmessage.From = fromAddress;// To address collection of MailAddressmessage.To.Add(txtTo.Text);message.Subj ect = txtSubject.Text;//Body can be Html or text format//Specify true if it is html messagemessage.IsBodyHtml = false;// Message body contentmessage.Body = txtBody.Text;// Send SMTP mailsmtpClient.Send(message);lblStatus.Text = "تم إرسال الرساله بنجاح";}catch (Exception ex){lblStatus.Text = "لم يتم إرسال الرساله , " + ex.Message;}

ويجب عليك في أعلى الصفحة تضيف هذا الكود وهو إستدعاء لباكج تبع البريد والإرسال
كود:
using System.Net.Mail;

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

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


jwldl t,vl lvhsgm











التعديل الأخير تم بواسطة salim ; 07-29-2008 الساعة 10:24 AM
عرض البوم صور salim   رد مع اقتباس

قديم 07-29-2008   المشاركة رقم: 2 (permalink)
المعلومات
الكاتب:
اللقب:
:: رفيق الدرب ::
الرتبة
الصورة الرمزية
 
الصورة الرمزية اللامنتمي


البيانات
التسجيل: Jul 2007
العضوية: 615
المشاركات: 10,663 [+]
بمعدل : 2.81 يوميا
اخر زياره : 02-25-2011 [+]
معدل التقييم:
نقاط التقييم: 27

التوقيت

الإتصالات
الحالة:
اللامنتمي غير متواجد حالياً
وسائل الإتصال:

كاتب الموضوع : salim المنتدى : منتدى دروس الفوتو شوب
افتراضي

شرح رائع

شكرا









عرض البوم صور اللامنتمي   رد مع اقتباس
قديم 08-05-2008   المشاركة رقم: 3 (permalink)
المعلومات
الكاتب:
اللقب:
الرتبة


البيانات
التسجيل: Aug 2007
العضوية: 45
المشاركات: 389 [+]
بمعدل : 0.10 يوميا
اخر زياره : 11-07-2009 [+]
معدل التقييم:
نقاط التقييم: 14

التوقيت

الإتصالات
الحالة:
salim غير متواجد حالياً
وسائل الإتصال:

كاتب الموضوع : salim المنتدى : منتدى دروس الفوتو شوب
افتراضي

شكرا لكم .على التشجيع









عرض البوم صور salim   رد مع اقتباس
قديم 10-17-2009   المشاركة رقم: 4 (permalink)
المعلومات
الكاتب:
اللقب:
:: المدير العام ::
الرتبة
الصورة الرمزية
 
الصورة الرمزية Dzayerna


البيانات
التسجيل: Aug 2009
العضوية: 5342
المشاركات: 18,093 [+]
بمعدل : 5.96 يوميا
اخر زياره : 05-31-2013 [+]
معدل التقييم:
نقاط التقييم: 1893

التوقيت

الإتصالات
الحالة:
Dzayerna غير متواجد حالياً
وسائل الإتصال:

كاتب الموضوع : salim المنتدى : منتدى دروس الفوتو شوب
افتراضي










عرض البوم صور Dzayerna   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
انتقلنا من تصميم التواقيع الى تصميم الاكواد الخاصة بالمنتديات sad boy ركن هـــــــــاكات vBulletin 3.x.x 3 05-05-2011 02:30 AM
حل جميع فروض السنة الثانية ثانوي **مراسلة**شعبة آداب و لغات أم بدر الدين قسم السنة الثانية ثانوي 21 03-06-2011 01:18 PM
تصميم zahir ess منتدى تصاميم الأعضاء 3 01-22-2011 07:25 AM
تصميم ...؟ sad boy منتدى تصاميم الأعضاء 8 11-04-2010 06:52 PM
تصميم DemoN Dz منتدى أرشيف المواضيع المخالفة و المكرره 5 09-03-2007 10:50 AM


الساعة الآن 04:19 PM


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.1 TranZ By Almuhajir
new notificatio by 9adq_ala7sas
جميع حقوق محفوظة لشبكة صحابي لكل جزائرين والعرب

//

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 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302