المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : (2) تصميم موقع كالمجله بكل دقه واحتراف


abohmam
14-10-2010, 09:00 AM
الجزء الثاني من تصميم موقع كالمجله

الآن اذهب الى قائمة file واضغط على open واختار الصوره اللي حفظتها ... راح فتح التصميم كاملا بشاشة الكمبيوتر لديك !!
الحين من صندوق الادوات اختر اداة التحديد المربع وقم بتحديد البنر العلوي كامل كما بالصوره

http://www.abc4web.net/vb/imgcache/7926.abc4web.jpg


ثم نذهب الى قائمة Edit ونختار Cut
ثم اذهل لقائمة file واختر New واضغط ok !!
راح تلاحظ بأن النافذه التي ظهرت لك بها مقاسات خاصه وهي مقاسات التحديد اللي قمنا بقصه لأن الفوتوشوب سيقوم بإعطائنا

نفس مقاسات التحديد اذا قمنا بنسخه او قصّه لذلك لاعليك الا ان تضغط ok .

http://www.abc4web.net/vb/imgcache/7929.abc4web.jpg


الآن اذهب الى قائمة Edit واختر Paste وراح تشوف ان التحديد اللي حددناه وقصّيناه اصبح جاهز عندنا بدون زياده ولا نقصان

وبدون اي مشاكل .... وهو الآن بمثابة الشكل العلوي للتصميم .... ونقوم بحفظه بإسم header ونختار الامتداد jpg .

http://www.abc4web.net/vb/imgcache/7931.abc4web.jpg



والآن نرجع لتصميمنا الاساسي ونقوم بتحديد التصميم من الأسفل ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر

New واضغط ok كما فعلنا سابقا .... ثم نذهب الى قائمة Edit ونختار Paste يعني نلصق اللي قصّيناه من التصميم ... ويصبح كما

بالصوره التاليه
http://www.abc4web.net/vb/imgcache/7933.abc4web.jpg


ثم نقوم بحفظه بإسم footer ونختار الامتداد jpg .

وايضا نرجع لتصميمنا الاساسي ونقوم بتحديد صغير بحيث يكون بعرض التصميم كاملا وبإرتفاع صغير كهذا التحديد

http://www.abc4web.net/vb/imgcache/7935.abc4web.jpg


ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر New واضغط ok ثم نذهب الى قائمة Edit ونختار Paste وينتج

معانا مثل هذا
http://www.abc4web.net/vb/imgcache/7936.abc4web.jpg


ونقوم بحفظه بإسم bottom ونختار الامتداد jpg .

ستلاحظ الآن أن اصبح لدينا 3 صور للتصميم هي :

الشكل العلوي
http://www.abc4web.net/vb/imgcache/7938.abc4web.jpg


شكل المنتصف
http://www.abc4web.net/vb/imgcache/7940.abc4web.jpg


الشكل السفلي
http://www.abc4web.net/vb/imgcache/7942.abc4web.jpg



والحين بدينا بالجد !!!
يعني التركيز مطلب رئيسي يجب فهم التطبيقات التاليه لأنها مهمه جدا واي لخبطه راح تتلخبط أمور كثيره وتتعقد بعدها وماراح نوصل


الى نتيجه مرضيه .

عملية تقصيص التصميم

عملية التقصيص هي الاساس في عملية تصميم المواقع بحيث تجعل تصميمك أكثر جمالا وتناسقا وبدون زيادات لا تعجبك ولا تعجب

المتصفح لــذلك لابد من التركيز في هذه النقطه بشكل قوي .

الحين روح لقائمة window ثم اختر منها info ((نافذة مقاسات التصميم)) من خلالها تستطيع تقطيع التصميم بدقه فائقه وبأحجام

متساويه وللعلم النافذه هذي هي اللي نعتمد عليها بجميع تصاميمنا بأخذ المقاسات بدقه متناهيه ... انظر الصوره

http://www.abc4web.net/vb/imgcache/7944.abc4web.jpg


الرقم 1 هو عرض التحديد .
الرقم 2 هو ارتفاع التحديد .
اذا مافهمت شنو نقصد راح تفهم معانا حاليا .......

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم header تبع الشكل العلوي ... ثم اختر اداة التحديد

http://www.abc4web.net/vb/imgcache/7946.abc4web.jpg


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

http://www.abc4web.net/vb/imgcache/7948.abc4web.jpg


ولاحظ أن لابد من حفظ المقاسات التي بالنافذه لطول وعرض التحديد او اكتب المقاسات بالقلم على ورقه جانبيه حتى لا تنسى .

ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7950.abc4web.jpg


والآن احفظ الصوره بالضغط على file ثم save as واعطه اسم hl وقائمة format اختر منها الامتداد الموضح بالصوره

http://www.abc4web.net/vb/imgcache/7952.abc4web.jpg


ثم قم بتحديد الجزء الأيمن من الشكل واعطه نفس مقاسات الجزء الأيسر اللي قلنا لك احفظها بورقه جانبيه كما هذه الصوره

http://www.abc4web.net/vb/imgcache/7954.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

http://www.abc4web.net/vb/imgcache/7956.abc4web.jpg


ثم قم بحفظ الصوره بإسم hr .

والآن قم بتحديد جزء عريض نوعا ما من الشكل حتى يصبح بمثابة بنر للتصميم ونكتب عليه اسم موقعنا مثلا او اي شيء نريد تابع كما

بالصوره
http://www.abc4web.net/vb/imgcache/7958.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

http://www.abc4web.net/vb/imgcache/7961.abc4web.jpg

ثم قم بحفظ الصوره بإسم hb .

والآن بقي لدينا شيء أخير بالنسبه للشكل العلوي وهو تحديد جزء صغير حتى نضعه كخلفيه للشكل العلويه وهذا ينفعنا بأن اذا حدث

تمدد للتصميم لا يتشوه نهائيا ... تابع التحديد بالصوره

http://www.abc4web.net/vb/imgcache/7963.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا

http://www.abc4web.net/vb/imgcache/7965.abc4web.jpg

ثم قم بحفظ الصوره بإسم hback .

والآن انتهينا من تقطيع الشكل العلوي للتصميم واصبح لدينا 4 صور خاصه بالشكل العلوي وهي كالتالي :
http://www.abc4web.net/vb/imgcache/7950.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7956.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7961.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7965.abc4web.jpg


والآن بعدما انتهينا من الشكل العلوي راح نأخذ الشكل السفلي ونقطعه كما فعلنا بالشكل العلوي تماما !!!

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم footer تبع الشكل السفلي ... ثم اختر اداة التحديد

http://www.abc4web.net/vb/imgcache/7946.abc4web.jpg


وحدد الجزء الأيسر ولابد أن يكون عرض التحديد بنفس العرض اللي عملناه للشكل السابق واللي حفظناه بورقه خارجيه ... تابع

الصوره
http://www.abc4web.net/vb/imgcache/7967.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7969.abc4web.jpg


ثم قم بحفظ الصوره بإسم fl .

ثم حدد الجزء الأيمن من الشكل واعطه العرض كما بالشكل التالي :
http://www.abc4web.net/vb/imgcache/7971.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7973.abc4web.jpg


ثم قم بحفظ الصوره بإسم fr .

والآن طال عمرك حدد جزء من الصوره ليصبح بمثابة بنر سفلي للتصميم يفيدنا في أن نكتب كلمة حفظ الحقوق او اسم المصمم او غير

ذلك حسب رغبتك ... تابع التحديد

http://www.abc4web.net/vb/imgcache/7974.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7975.abc4web.jpg


ثم قم بحفظ الصوره بإسم fb .

والآن نقوم بتحديد جزء عرضه صغير حتى نقوم بجعله خلفيه للفوتر سيفيدنا بالتمدد وحتى يمنع التشوه ... تابع التحديد :

http://www.abc4web.net/vb/imgcache/7976.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7977.abc4web.jpg


ثم قم بحفظ الصوره بإسم fback .


والحين انتهينا من تقطيع الشكل السفلي ولله الحمد ونتج لدينا ايضا 4 صور كما بالشكل العلوي وهي كالتالي :
http://www.abc4web.net/vb/imgcache/7969.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7973.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7975.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7977.abc4web.jpg


والحين شنو بقى لنا ما قطّــعناه ؟
بقى طال عمرك شكل المنتصف وهو أسهل مرحله من التقطيع !!!

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم bottom تبع الشكل السفلي ... ثم اختر اداة التحديد
http://www.abc4web.net/vb/imgcache/7946.abc4web.jpg


قم بتحديد الجزء الأيسر كما تعودنا سابقا >>> لاحظ لابد وأن يكون العرض بنفس المقاس اللي حفظناه <<< تذكــر شنو قلنا .

http://www.abc4web.net/vb/imgcache/7978.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7979.abc4web.jpg


ثم قم بحفظ الصوره بإسم left .


والآن قم بتحديد الشكل من الجزء الأيمن وايضا بنفس العرض كما بالصوره :

http://www.abc4web.net/vb/imgcache/7980.abc4web.jpg


ثم اذهب الى قائمة Edit واختر Cut ثم اذهب الى قائمة File واختر New ثم اضغط من النافذه التي ستظهر لك ok ثم اذهب الى قائمة

Edit واختر منها Paste ... وسيظهر لنا هكذا
http://www.abc4web.net/vb/imgcache/7981.abc4web.jpg



ثم قم بحفظ الصوره بإسم right .


والآن انتهينا من تقطيع شكل المنتصف >> أرأيت ما أسهله << ونتج لدينا صورتان فقط !! وهما كالتالي :
http://www.abc4web.net/vb/imgcache/7979.abc4web.jpg

http://www.abc4web.net/vb/imgcache/7981.abc4web.jpg

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

التصميم كشكل المجله .

لااااااااااااا تستعجل على رزقك كل شي بوقته حلوووو وجااااااي بالطريق كل شي ان شاء الله ... تابع معنا

انتهينا من الجزء الثاني وسيتم عمل الجزء الثالث ان شاء الله .

ومازال الشرح لأخينا ابي ليالي جزاه الله خيرا

=====/ روابط جميع الدروس \=====
:abc4web:
( 1 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12582)
( 2 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12583)
( 3 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12584)
( 4 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12585)
( 5 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12586)
:bar:
.

أبو يوسف
14-10-2010, 11:27 AM
جزاك الله خيرا اخي ابو همام على هذا المجهود وبارك الله فيك

أبو فارس
14-10-2010, 01:19 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

محمود عفيفى
14-10-2010, 04:17 PM
ما شاء الله شرح رائع
جزاك الله خيرا أخى أباهمام :abc_152:

ام هشام
14-10-2010, 10:02 PM
بارك الله فيك وجزاك الله كل خير