Convert Photoshop designs to CSS website ادوبي فوتوشوب التصاميم تحويل الموقع الى CSS

Posted on April 26, 2008 at 5:13 am نشرت يوم 26 ابريل / نيسان ، 2008 في الساعة 5:13

Are you a kickass Photoshop person? هل انت شخص kickass ادوبي فوتوشوب؟ Can you create amazing looking designs using your Photoshop skills? هل يمكن النظر إلى خلق تصاميم مدهشه باستخدام ادوبي فوتوشوب المهارات الخاصة بك؟ If so, you might find yourself creating web site mockups in Photoshop for clients and then passing on the design to web site coders to get the final product in HTML. إذا كان الأمر كذلك ، قد تجد نفسك خلق نماذج بالاحجام الطبيعيه في موقع ادوبي فوتوشوب للعملاء ، ونقل بعد ذلك الى تصميم موقع المبرمجون للحصول على المنتج النهائي في لغة تأشير النص الفائق.

If you’re one of the many people who create web sites in Photoshop, you might be interested in a free online service that will let you convert your Photoshop design into a strict XHTML compliant CSS web site ! اذا كنت واحدا من العديد من الناس من انشاء المواقع على شبكة الانترنت في أدوبي فوتوشوب ، انت قد تكون مهتمة في خدمة مجانيه على الانترنت من شأنها ان تتيح لك تحويل ادوبي فوتوشوب الخاص بك الى التصميم الدقيق للغة النصوص التشعبيه القابلة للتمديد CSS متوافقه مع الموقع على الانترنت!

psd2css على الانترنت

Trying to understand and code a CSS website can be a difficult and arduous task (thanks to Microsoft and there four versions of IE in the market!). محاولة لفهم قانون واحد CSS موقع يمكن ان يكون مهمة شاقة وصعبة (شكرا لشركة مايكروسوفت وهناك اربعة الاصدارات من أي إي في السوق!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. انه من الاسهل بكثير ، على الأقل بالنسبة لي ، ان تؤديه في جميع انحاء ادوبي فوتوشوب وتهيئة بسيطة ولكنها تبحث كوول - تصاميم.

PSD2CSSOnline Psd2cssonline is completely free and allows you to upload files in either Photoshop or GIMP, so if you don’t have a copy of Photoshop, you can use the free open-source photo-editing program, the GIMP. خال تماما ويتيح لك ايداع ملفات اما في أدوبي فوتوشوب او الاعرج ، حتى اذا لم يكن لديك نسخة من ادوبي فوتوشوب ، يمكنك استخدام الحرة المفتوحه المصدر برنامجا لتحرير الصور ، والاعرج.

الشعبه الى CSS

When creating your web site design, you need to make sure you use layers as this is what PSD2CSSOnline reads to figure out the different parts of a web page. عند انشاء تصميم موقع الويب الخاص بك ، انت بحاجة الى التأكد من انك تستخدم طبقات وهذا هو ما يلي psd2cssonline الى الرقم الى اجزاء مختلفة من صفحة على الشبكه العالمية. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. الحيله هي ان تبقى اجزاء من صفحتك التي تريد منفصل في طبقات مختلفة من حسابك. الشعبه الملف.

There are a couple of simple guidelines you should follow in order for this process to work. وهناك القليل من المبادئ التوجيهيه بسيطة يجب اتباعها من اجل لهذه العملية الى العمل.

  • Don’t make a bunch of layers - If you are an advanced Photoshop user, you might have created many layers that all combine together to make a single object. لا تقدم مجموعة من طبقات -- اذا كنت متقدمة ادوبي فوتوشوب المستخدم ، قد تكون لديكم خلق الكثير من الطبقات التي تجمع بين جميع معا لجعل واحد من وجوه. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. فعلى سبيل المثال ، شعارك في الواقع قد يكون من 5 الى 6 طبقات مختلفة -- ولكن لا يزال الشعار هو كائن واحد. Do not upload the file with the logo still separated out into the 5 or 6 layers - merge them together into one single “logo” layer. لا تحميل الملف مع الشعار لا يزال من فصل الى 5 او 6 طبقات -- دمجها معا في واحد "شعار" طبقة.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. والمزج والتعتيم خيارات -- انت بحاجة الى اي طبقة rasterize مع التعتيم على اي شيء آخر سوى 100 ٪. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. في أدوبي فوتوشوب ، يمكنك rasterize طبقة بالنقر بزر الماوس الايمن فوق الطبقة واختيار "rasterize نوع" او "طبقة rasterize". In the Gimp, create an empty layer just below the one you want to rasterize and then right click on the new layer and choose “ Merge Down” . في الاعرج ، وخلق طبقة فارغه اقل بقليل من واحد تريد الحق rasterize ثم انقر على طبقة جديدة واختيار "دمج الاسفل". This will rasterize the layer and merge it. هذا وسوف rasterize ودمج الطبقة.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. تعديل الاعرج طبقة الاشكال -- لسبب من الاسباب الاعرج يحب لجعل الطبقات بنفس حجم الصورة. This makes inefficient as you end up with lots of big image files in your web page. وهذا يجعل من غير فعالة كما انك ستنتهي مع قطع كبيرة من ملفات الصور في صفحة الويب الخاصة بك. For any layer in the Gimp where the object is smaller than the whole page (most of your layers), click on the layer, then in the layer menu choose “ Autocrop Layer” . لفي اي طبقة الاعرج يكون الهدف فيها هو أقل من صفحة كاملة (ومعظمهم من الطبقات الخاصة بك) ، انقر على طبقة ، ثم طبقه في اختيار قائمة "autocrop طبقة".
  • 4MB PSD File Size Limit - This is the largest file size that you can upload, but it was just a random number picked by the creator. 4MB الشعبه حجم الملف الحد -- وهذا هو اكبر حجم الملف التي يمكنك تحميلها ، ولكنه كان مجرد عدد باختيار عشوائي من قبل الخالق. You can email him and he’ll let increase the limit! ويمكنك الكتابة له وقال انه سوف اسمحوا زيادة الحد!

That’s all you need to keep in mind! هذا كل ما تحتاج ان نأخذ في الاعتبار! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! والمضى قدما فى انشاء صفحة الويب الخاصة بك في أدوبي فوتوشوب او الاعرج وبعد ذلك رفع لترى كيف تبين!

Hopefully, the look you had created comes out in your final HTML output. ومن المأمول ، كنت قد اوجدت نظرة يخرج الخاص بك في الناتج النهائي للغة تأشير النص الفائق. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: يمكنك ايضا محاولة من اصل اثنين من غيرها من الخدمات عبر الانترنت لتحويل الشعبه تصاميم لصفحات الويب ، ولكنها ليست حرة :

http://psd2css.com/

http://www.xhtml4u.com/

http://www.psdslicing.com/

http://www.htmlblender.com/

This service is also called PSD slicing, if you want to know the technical term for it. هذه الخدمة كما دعت الشعبه التقطيع ، اذا كنت تريد ان تعرف التقنيه المصطلح ، لأنه. If you don’t feel like paying people to do this slicing for you and PSD2CSSOnline didn’t work out for your complicated design, you can do the slicing yourself! إذا كنت لا تشعر مثل دفع الناس الى القيام بذلك لتقطيع ولكم psd2cssonline لا يعمل بها لتصميم معقدة الخاص بك ، يمكنك ان تفعل تقطيع نفسك!

Here are some cool tutorials and guides that you can read on how to design a site in Photoshop and then convert it into HTML: وإليك بعض الدروس الراءعه والادله التي يمكنك ان تقرأ عن كيفية تصميم موقع في ادوبي فوتوشوب وثم تحويله الى لغة تأشير النص الفائق :

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

While PSD2CSSOnline may not be the best tool for big designers, it’sa great way to get started if you’re not very familiar with CSS and HTML coding. Psd2cssonline بينما قد لا يكون افضل اداة لكبير مصممي ، it'sa طريقة راءعه للبدء اذا كنت غير مالوفه جدا مع CSS ولغة تأشير النص الفائق الترميز. And it’s free, so it’s always worth a shot! وانه مجاني ، لذا فإنه دائما قيمة بقذيفه! Enjoy! يتمتع! Source: المصدر : ToThePC Tothepc

Technorati Tags: Technorati العلامات : , ، , ، , ، , ، , ، , ،

If you enjoyed this post, make sure you اذا كنت تتمتع هذه الوظيفة ، تأكد انك subscribe to my RSS feed اشترك في بلدي ار اس اس ! !

» Filed Under »المقدمة بصورة مشتركة بموجب احكام Web Site Tips الموقع على الانترنت النصائح

Related Posts الوظائف ذات الصلة

4 Responses to “Convert Photoshop designs to CSS website” 4 ردود على "تحويل ادوبي فوتوشوب تصاميم CSS الى الموقع الالكتروني"

  1. Siddharth سيدارت said on : وقال علي : April 26th, 2008 at 8:38 am نيسان / ابريل 26th ، 2008 في الساعة 8:38

    Nice thingy نيس thingy
    Will use it whenever in emergency وسوف تستخدم في حالات الطوارئ انه كلما : (


  2. Shaun شون said on : وقال علي : April 26th, 2008 at 10:41 am نيسان / ابريل 26th ، 2008 في الساعة 10:41

    Hi Aseem - مرحبا اسيم --

    I want to thank you for the great website and the great article on psd2cssonline.com . أود ان أشكركم على الموقع الالكترونى للالكبير والعظيم على المادة psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. اردت فقط ان تعلموا ان الحد الأقصى لحجم الملف قد صدم الى 8mb الآن.

    And we’re adding new features all the time! ونحن اضافة ملامح جديدة كل الوقت! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. صورة مبالغ لفة ، نص المجالات ، وصلات ، ملف مضغوط تحميل (فضلا عن القديمة 'حفظ باسم…' الخيار) وصناعة السيارات وتمحورت صفحة واكثر.

    Thanks again for the great website and article. مرة اخرى الشكر الكبير لموقع والمادة. Keep up the good work! الابقاء على العمل الجيد!

    – --
    Shaun شون
    http://psd2cssonline.com


  3. akishore akishore said on : وقال علي : April 27th, 2008 at 7:14 pm نيسان / ابريل 27th ، 2008 في الساعة 7:14

    Shaun, no problem at all, it’sa pretty cool service! شون ، لا مشكلة على الاطلاق ، it'sa جميلة كوول الخدمة! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. تحويل من ادوبي فوتوشوب الى الموقع الفعلى يمكن ان يكون مهمة شاقة جميلة اذا كنت غير مؤيد ، حتى يساعد ذلك حقا.


  4. dilip patel dilip باتل said on : وقال علي : April 30th, 2008 at 2:09 am نيسان / ابريل 30th ، 2008 في الساعة 2:09

    hi like the site very much like psd2cssonline.com and and it’s relay working in it and the give whole div base codding in within a few second and also i have try to make his naming conversation and after i have uplode that file on it and seen the result its good only the few changes are require after the codding like bg color etc مرحبا مثل موقع psd2cssonline.com يشبه الى حد كبير جدا وانه وتقوية العاملين فيه واعطاء كل div قاعدة codding في غضون بضعة الثانية وأنا أيضا ان نحاول جعل له تسمية المحادثة وبعد لقد uplode هذا الملف على انه وينظر الى النتيجة الجيدة فقط هي تحتاج الى تغييرات قليلة بعد codding مثل حرس الحدود اللون الخ

    Thanks شكرا
    dilip


    Please post your comments/suggestions! يرجى بعد تعليقاتكم / اقتراحات!