جهِّز نفسك لسوالف كاست، واحصل على Macbook Air
ويكيمانيا 2008. الإسكندرية، من 17 وحتى 19 يوليو

 

العودة   سوالف سوفت > قسم تطوير وبرمجة المواقع للمتقدمين > ويب 2.0 و البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
المدوّنات البحث مشاركات اليوم اجعل كافة المشاركات مقروءة

رد
 
LinkBack أدوات الموضوع
مشرف قسم التصميم والرسومات والمونتاج
تاريخ التسجيل: Sep 2003-
#1 (permalink)  
[درس] تحويل ملف فوتوشوب الى CSS في اقل من 30 ثانية


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

مبروك عليكم شهر رمضان الكريم ...

اقدم لكم درس خفيف وسريع وهو تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانية
اولا نقوم بإستيراد الموقع اللي صممناه على الفوتوشوب من خلال
قائمة file ثم open ونحدد الفايل






المرحلة الثانية نقوم بتعديل الفايل عبر ايميج ريدي : من قائمة file نختار Edit in imageready



المرحلة الثالثة تقطيع الصفحة من خلال اداة sliceTool



بعد الانتهاء من تقطيع الملف نقوم بوضع اعدادات slice قبل تصدير الملف الى html
من خلال الذهاب الى قائمة file ثم output settings ثم نختار slice



المرحلة الخامسة نغير الـ Generate Table الى Generate CSS ثم نحدد Referenced
.. طبعا هذا نتركه للخبراء



المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As



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



------------------------------------------------
السموحه على القصور






__________________
مشروع منتداي
مشروع يهدف الى تطوير المنتدى العربي My Smart BB
تحت شعار :
" منتداي : خفيف ، بسيط ، قوي ، مجاني ، عربي 100 % "
فشارك معنا لبناء المشروع
ملك الفوتوشوب غير متواجد حالياً   قديم 15-09-2007, 04:54 PM
رد مع اقتباس
عضو سوبر نشيط
تاريخ التسجيل: Jan 2005-
#2 (permalink)  

يعطيك العافيه يا ملك الفوتوشوب كل عام وانت بخير .......انتقلنا للصدار الجديد (10)

بصراحه جميل واقلاع سريع وخفيف






__________________
www.dooem.net
-----------------------------------------
الشبكه العقاريه للتسويق الاعلاني
seifss غير متواجد حالياً   قديم 15-09-2007, 05:51 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Aug 2007-
#3 (permalink)  

الله يعطيك العافية اخي العزيز
و الله طريقة كنت اجهلها
كنت اعمل كلشي يدويا!!!!!!!!
رمضان كريم
تحياتي






__________________
المدونة
im mhamed
mha4.com غير متواجد حالياً   قديم 15-09-2007, 06:35 PM
رد مع اقتباس
عضو سوبر نشيط
تاريخ التسجيل: Apr 2006-
#4 (permalink)  

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






Remano غير متواجد حالياً   قديم 16-09-2007, 05:38 AM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: May 2007-
#5 (permalink)  

رائع أخي

يسهل هذا الكثير والكثير






__________________
ahmedmens


Alcompuergy [Dot] Com

الكمبيوترجي
Alcomputergy.Com غير متواجد حالياً   قديم 17-09-2007, 03:28 AM
رد مع اقتباس
مشرف قسم ويب 2.0 و فكرة
تاريخ التسجيل: Jun 2005-
#6 (permalink)  

ما شاء الله درس جميل وممتع

ولكن لايوجد ايميج ريدي في PS10

عموما .. شكرا لك






__________________
- مدوناتـ مشرفينـ سوالفـ سوفتـ
Aldirazi | الشرياني | المسعودي | فضفضة | Flasher | الازد | مليباري | قناص النطاقات
owner غير متواجد حالياً   قديم 17-09-2007, 09:52 AM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Jun 2007-
#7 (permalink)  
Smile

ماشاء الله طريقة ماكنتش اعرفها والله
وسهلت عليا كتير جدا جدا






gptmatrix.com غير متواجد حالياً   قديم 17-09-2007, 02:09 PM
رد مع اقتباس
خبير JavaScript
تاريخ التسجيل: Jul 2002-
Blog Entries: 15
#8 (permalink)  

ريحت الكثير بدرسك هذا، وان شاء يعتمدوه المصممين الذين يقسمون القالب بالايميج ريدي، لست أدري هل توجد هذه الخاصية في الفايرووركس؟






Zizwar غير متواجد حالياً   قديم 17-09-2007, 03:40 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: May 2004-
#9 (permalink)  

مشكوووووووووور وبارك الله فيك






__________________
موقع مدارس الرشيد الحديثة
http://www.rasheed.ws
awam10 غير متواجد حالياً   قديم 17-09-2007, 05:11 PM
رد مع اقتباس
عضو فعال
تاريخ التسجيل: Oct 2005-
#10 (permalink)  

جدا ً مشكور ...






__________________
اعلانات لوّن - أسعار رمزية جدا

موقع لوّن- دروس فوتوشوب-خطوط-ايقونات-قوالب-شعارات-فرش و ستايلات فوتوشوب
ABo.AzAzI غير متواجد حالياً   قديم 18-09-2007, 01:09 AM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Aug 2007-
#11 (permalink)  

موضوع رااااااااائع !!!!
تشكر جزيل الشكر






__________________
فايلاتي لتحميل الصور و الملفات .
اسرع موقع عربي لتحميل الصور و الملفات
جرب فايلاتي ولاحظ الفرق :)
http://www.filaty.com

شركة ريفيريا لتصميم و إستضافة المواقع
Reverya.com
Reverya Web Solutions غير متواجد حالياً   قديم 19-09-2007, 07:47 AM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Sep 2006-
#12 (permalink)  

يعطيك ألف عافية ما قصرت يا مبدع ،،، روووعة ، كم اتمنى ان يكون في سوالف سوفت نظام التقييم لكي أقيم موضوعك الرائع






__________________
غلاتي ،
M S A غير متواجد حالياً   قديم 19-09-2007, 07:08 PM
رد مع اقتباس
خبير JavaScript
تاريخ التسجيل: Jul 2002-
Blog Entries: 15
#13 (permalink)  

اقتباس:
المشاركة الأصلية كتبت بواسطة M S A مشاهدة المشاركة
يعطيك ألف عافية ما قصرت يا مبدع ،،، روووعة ، كم اتمنى ان يكون في سوالف سوفت نظام التقييم لكي أقيم موضوعك الرائع
التقييم موجود، وقد أعطيت هذا الموضوع 4 نجمات






Zizwar غير متواجد حالياً   قديم 19-09-2007, 07:33 PM
رد مع اقتباس
عضو فعال
تاريخ التسجيل: May 2006-
#14 (permalink)  

جميل ورايح اجربه

ينطيك العافيه حبيب قلبي






__________________
اعلن في مركز عسكرو منتديات المعروف

تفاصيل وطرق التواصل هنا
الاسعار تبدأ من 100 وعدد الزوار لا يقل عن 4000 زائر يومي بإذن الله
سطام سعد غير متواجد حالياً   قديم 19-09-2007, 11:27 PM
رد مع اقتباس
عضو جديد
تاريخ التسجيل: Sep 2007-
#15 (permalink)  

درس اكثر من روعة

أفدتنا تستاهل كل خير

بارك الله فيك أخي وجعلها في ميزان حسناتك






ghost-soft غير متواجد حالياً   قديم 20-09-2007, 01:10 PM
رد مع اقتباس
مشرف قسم التصميم والرسومات والمونتاج
تاريخ التسجيل: Sep 2003-
#16 (permalink)  

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






__________________
مشروع منتداي
مشروع يهدف الى تطوير المنتدى العربي My Smart BB
تحت شعار :
" منتداي : خفيف ، بسيط ، قوي ، مجاني ، عربي 100 % "
فشارك معنا لبناء المشروع
ملك الفوتوشوب غير متواجد حالياً   قديم 20-09-2007, 10:37 PM
رد مع اقتباس
عضو في سوالف
تاريخ التسجيل: Nov 2005-
#17 (permalink)  

مشكور استاذنا ..






ليث الشرس غير متواجد حالياً   قديم 01-10-2007, 09:24 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: May 2007-
#18 (permalink)  

راااائع جدا
جزاك الله خيرا






__________________
أخى أنت حر وراء السدود ** أخى أنت حر بتلك القيود
إذا كنت بالله مستعصـــمــا ** فماذا يضيرك كيد العبـيـد
مهندس مصرى غير متواجد حالياً   قديم 02-10-2007, 03:07 AM
رد مع اقتباس
عضو جديد
تاريخ التسجيل: May 2006-
#19 (permalink)  

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






__________________
الصمت لغتي فتذكروني لقلة كلامي

ashour_linux@hotmail.com
arbpsd غير متواجد حالياً   قديم 05-10-2007, 11:01 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: Jan 2007-
#20 (permalink)  

اقتباس:
المشاركة الأصلية كتبت بواسطة Zizwar مشاهدة المشاركة
ريحت الكثير بدرسك هذا، وان شاء يعتمدوه المصممين الذين يقسمون القالب بالايميج ريدي، لست أدري هل توجد هذه الخاصية في الفايرووركس؟
هلا بالغالي

معذرة للاخ ملك فوتوشب

انا حولت ملف فايروركس الى CSS في ثواني يالغالي

وهذا الكود ناتج من ملف

كود:
<!-- saved from url=(0014)about:internet -->
<html>

<head>

<title>3ata12.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#L3ata12r1c1 {
	position:absolute;
	left:0px;
	top:0px;
	width:68px;
	height:166px;
	z-index:1;
	visibility:visible;
}
#L3ata12r1c3 {
	position:absolute;
	left:68px;
	top:0px;
	width:131px;
	height:166px;
	z-index:2;
	visibility:visible;
}
#L3ata12r1c4 {
	position:absolute;
	left:199px;
	top:0px;
	width:386px;
	height:166px;
	z-index:3;
	visibility:visible;
}
#L3ata12r1c7 {
	position:absolute;
	left:585px;
	top:0px;
	width:94px;
	height:166px;
	z-index:4;
	visibility:visible;
}
#L3ata12r1c8 {
	position:absolute;
	left:679px;
	top:0px;
	width:74px;
	height:166px;
	z-index:5;
	visibility:visible;
}
#L3ata12r1c9 {
	position:absolute;
	left:753px;
	top:0px;
	width:24px;
	height:156px;
	z-index:6;
	visibility:visible;
}
#L3ata12r2c9 {
	position:absolute;
	left:753px;
	top:156px;
	width:24px;
	height:482px;
	z-index:7;
	visibility:visible;
}
#L3ata12r3c1 {
	position:absolute;
	left:0px;
	top:166px;
	width:67px;
	height:472px;
	z-index:8;
	visibility:visible;
}
#L3ata12r3c2 {
	position:absolute;
	left:67px;
	top:166px;
	width:1px;
	height:1px;
	z-index:9;
	visibility:visible;
}
#L3ata12r5c1 {
	position:absolute;
	left:0px;
	top:638px;
	width:67px;
	height:62px;
	z-index:10;
	visibility:visible;
}
#L3ata12r5c3 {
	position:absolute;
	left:68px;
	top:638px;
	width:169px;
	height:62px;
	z-index:11;
	visibility:visible;
}
#L3ata12r5c5 {
	position:absolute;
	left:237px;
	top:638px;
	width:303px;
	height:62px;
	z-index:12;
	visibility:visible;
}
#L3ata12r5c6 {
	position:absolute;
	left:540px;
	top:638px;
	width:213px;
	height:62px;
	z-index:13;
	visibility:visible;
}
#L3ata12r5c9 {
	position:absolute;
	left:753px;
	top:638px;
	width:24px;
	height:62px;
	z-index:14;
	visibility:visible;
}
</style>
</head>

<body bgcolor="#ffffff">

<div id="L3ata12r1c1"><img name="N3ata12_r1_c1" src="images/3ata12_r1_c1.jpg" width="68" height="166" border="0"></div>
<div id="L3ata12r1c3"><img name="N3ata12_r1_c3" src="images/3ata12_r1_c3.jpg" width="131" height="166" border="0"></div>
<div id="L3ata12r1c4"><img name="N3ata12_r1_c4" src="images/3ata12_r1_c4.jpg" width="386" height="166" border="0"></div>
<div id="L3ata12r1c7"><img name="N3ata12_r1_c7" src="images/3ata12_r1_c7.jpg" width="94" height="166" border="0"></div>
<div id="L3ata12r1c8"><img name="N3ata12_r1_c8" src="images/3ata12_r1_c8.jpg" width="74" height="166" border="0"></div>
<div id="L3ata12r1c9"><img name="N3ata12_r1_c9" src="images/3ata12_r1_c9.jpg" width="24" height="156" border="0"></div>
<div id="L3ata12r2c9"><img name="N3ata12_r2_c9" src="images/3ata12_r2_c9.jpg" width="24" height="482" border="0"></div>
<div id="L3ata12r3c1"><img name="N3ata12_r3_c1" src="images/3ata12_r3_c1.jpg" width="67" height="472" border="0"></div>
<div id="L3ata12r3c2"><img name="N3ata12_r3_c2" src="images/3ata12_r3_c2.jpg" width="1" height="1" border="0"></div>
<div id="L3ata12r5c1"><img name="N3ata12_r5_c1" src="images/3ata12_r5_c1.jpg" width="67" height="62" border="0"></div>
<div id="L3ata12r5c3"><img name="N3ata12_r5_c3" src="images/3ata12_r5_c3.jpg" width="169" height="62" border="0"></div>
<div id="L3ata12r5c5"><img name="N3ata12_r5_c5" src="images/3ata12_r5_c5.jpg" width="303" height="62" border="0"></div>
<div id="L3ata12r5c6"><img name="N3ata12_r5_c6" src="images/3ata12_r5_c6.jpg" width="213" height="62" border="0"></div>
<div id="L3ata12r5c9"><img name="N3ata12_r5_c9" src="images/3ata12_r5_c9.jpg" width="24" height="62" border="0"></div>

</body>
</html>






x_yousef_x غير متواجد حالياً   قديم 11-10-2007, 02:56 PM
رد مع اقتباس
خبير JavaScript
تاريخ التسجيل: Jul 2002-
Blog Entries: 15
#21 (permalink)  

اقتباس:
المشاركة الأصلية كتبت بواسطة x_yousef_x مشاهدة المشاركة
هلا بالغالي

معذرة للاخ ملك فوتوشب

انا حولت ملف فايروركس الى CSS في ثواني يالغالي

وهذا الكود ناتج من ملف

كود:
<!-- saved from url=(0014)about:internet -->
<html>

<head>

<title>3ata12.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#L3ata12r1c1 {
    position:absolute;
    left:0px;
    top:0px;
    width:68px;
    height:166px;
    z-index:1;
    visibility:visible;
}
#L3ata12r1c3 {
    position:absolute;
    left:68px;
    top:0px;
    width:131px;
    height:166px;
    z-index:2;
    visibility:visible;
}
#L3ata12r1c4 {
    position:absolute;
    left:199px;
    top:0px;
    width:386px;
    height:166px;
    z-index:3;
    visibility:visible;
}
#L3ata12r1c7 {
    position:absolute;
    left:585px;
    top:0px;
    width:94px;
    height:166px;
    z-index:4;
    visibility:visible;
}
#L3ata12r1c8 {
    position:absolute;
    left:679px;
    top:0px;
    width:74px;
    height:166px;
    z-index:5;
    visibility:visible;
}
#L3ata12r1c9 {
    position:absolute;
    left:753px;
    top:0px;
    width:24px;
    height:156px;
    z-index:6;
    visibility:visible;
}
#L3ata12r2c9 {
    position:absolute;
    left:753px;
    top:156px;
    width:24px;
    height:482px;
    z-index:7;
    visibility:visible;
}
#L3ata12r3c1 {
    position:absolute;
    left:0px;
    top:166px;
    width:67px;
    height:472px;
    z-index:8;
    visibility:visible;
}
#L3ata12r3c2 {
    position:absolute;
    left:67px;
    top:166px;
    width:1px;
    height:1px;
    z-index:9;
    visibility:visible;
}
#L3ata12r5c1 {
    position:absolute;
    left:0px;
    top:638px;
    width:67px;
    height:62px;
    z-index:10;
    visibility:visible;
}
#L3ata12r5c3 {
    position:absolute;
    left:68px;
    top:638px;
    width:169px;
    height:62px;
    z-index:11;
    visibility:visible;
}
#L3ata12r5c5 {
    position:absolute;
    left:237px;
    top:638px;
    width:303px;
    height:62px;
    z-index:12;
    visibility:visible;
}
#L3ata12r5c6 {
    position:absolute;
    left:540px;
    top:638px;
    width:213px;
    height:62px;
    z-index:13;
    visibility:visible;
}
#L3ata12r5c9 {
    position:absolute;
    left:753px;
    top:638px;
    width:24px;
    height:62px;
    z-index:14;
    visibility:visible;
}
</style>
</head>

<body bgcolor="#ffffff">

<div id="L3ata12r1c1"><img name="N3ata12_r1_c1" src="images/3ata12_r1_c1.jpg" width="68" height="166" border="0"></div>
<div id="L3ata12r1c3"><img name="N3ata12_r1_c3" src="images/3ata12_r1_c3.jpg" width="131" height="166" border="0"></div>
<div id="L3ata12r1c4"><img name="N3ata12_r1_c4" src="images/3ata12_r1_c4.jpg" width="386" height="166" border="0"></div>
<div id="L3ata12r1c7"><img name="N3ata12_r1_c7" src="images/3ata12_r1_c7.jpg" width="94" height="166" border="0"></div>
<div id="L3ata12r1c8"><img name="N3ata12_r1_c8" src="images/3ata12_r1_c8.jpg" width="74" height="166" border="0"></div>
<div id="L3ata12r1c9"><img name="N3ata12_r1_c9" src="images/3ata12_r1_c9.jpg" width="24" height="156" border="0"></div>
<div id="L3ata12r2c9"><img name="N3ata12_r2_c9" src="images/3ata12_r2_c9.jpg" width="24" height="482" border="0"></div>
<div id="L3ata12r3c1"><img name="N3ata12_r3_c1" src="images/3ata12_r3_c1.jpg" width="67" height="472" border="0"></div>
<div id="L3ata12r3c2"><img name="N3ata12_r3_c2" src="images/3ata12_r3_c2.jpg" width="1" height="1" border="0"></div>
<div id="L3ata12r5c1"><img name="N3ata12_r5_c1" src="images/3ata12_r5_c1.jpg" width="67" height="62" border="0"></div>
<div id="L3ata12r5c3"><img name="N3ata12_r5_c3" src="images/3ata12_r5_c3.jpg" width="169" height="62" border="0"></div>
<div id="L3ata12r5c5"><img name="N3ata12_r5_c5" src="images/3ata12_r5_c5.jpg" width="303" height="62" border="0"></div>
<div id="L3ata12r5c6"><img name="N3ata12_r5_c6" src="images/3ata12_r5_c6.jpg" width="213" height="62" border="0"></div>
<div id="L3ata12r5c9"><img name="N3ata12_r5_c9" src="images/3ata12_r5_c9.jpg" width="24" height="62" border="0"></div>

</body>
</html>
هل بالتقسيم العادي، ام هناك خصائص معينة لإستخراج صفحة نمطية؟
بارك الله فيك






Zizwar غير متواجد حالياً   قديم 11-10-2007, 03:18 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: Jan 2007-
#22 (permalink)  

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

تحياتي






x_yousef_x غير متواجد حالياً   قديم 11-10-2007, 03:56 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Aug 2007-
#23 (permalink)  

السلامـ عليكمـ

يعطيك العافية يا ملك الفوتشوب .. موضوع جداً رائع ويستحق كل الثناء

اسمح لي بنشر هذا الموضوع للإستفادة ،، تحياتي لك وشكراً لأناملك






__________________
دليل ادما دليل مواقع عربية
أضف موقعك من هنا
شات . العاب ادما . تصميم مواقع . تبادل روابط نصية Page Ranking : 4 . 3 . 2 . 1 . 0 :)
أوراق منثورة غير متواجد حالياً   قديم 12-10-2007, 03:24 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Nov 2005-
#24 (permalink)  

جزاك الله خير أخوي






__________________
كود PHP:
<?php
$name 
"w w w . A l m S l o o B . c o m";
$name .= "من طلب العلا سهر الليالي";
echo 
$name;
?>
منتديات المسلوب العربي .. نلتقي لنرتقي

www.almsloob.com/vb
Abderisaq غير متواجد حالياً   قديم 27-10-2007, 06:31 PM
رد مع اقتباس
عضو فعال جدا
تاريخ التسجيل: Jan 2005-
#25 (permalink)  

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






__________________
سبحان الله ...
secret غير متواجد حالياً   قديم 27-10-2007, 08:25 PM
رد مع اقتباس
رد


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

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

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


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طريقة حفظ أنماط Css بشكل منفصل ( External Sheet ) ca2oom إصلاح وصيانة المنتديات 19 03-03-2008 02:13 AM
تحويل ملف الصوت mid الى HEX لارسالة كنغمة لجوال, ارجو المساعدة العاجلة سيف جرافيكس أخبار الإنترنت والتقنية ومناقشتها 0 02-01-2006 09:07 AM
35 ملف عبارة عن بريمجات متنوعة ..!! ابومنار تطوير الويب 23 01-03-2005 09:59 PM
أزرار الريل بليير والفلاش لاتعمل FHM إصلاح وصيانة المنتديات 11 08-12-2002 12:30 AM
التحويل منPHP3 الى PHP + ترقية 1.3 الى النسخة الذهبية MATRIX إصلاح وصيانة المنتديات 2 05-07-2001 01:43 AM


الساعة الآن: 08:56 AM بتوقيت المملكة العربية السعودية