Convert Photoshop designs to CSS website Конвертировать Photoshop дизайны и CSS на сайте

Posted on April 26, 2008 at 5:13 am Отправлен 26 апреля 2008 года в 5:13 утра

Are you a kickass Photoshop person? Вы kickass Photoshop лицо? Can you create amazing looking designs using your Photoshop skills? Можете ли вы создать удивительные перспективных проектов с использованием ваших навыков Photoshop? 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. Если это так, вы могли бы найти себе создание веб-сайта модели в Photoshop для клиентов и затем передавать дизайн веб-сайта кодировщиков, чтобы получить конечный продукт в 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 ! Если вы один из многих людей, которые создают веб-сайты в Photoshop, вы можете быть заинтересованы в бесплатные онлайн услуг, которые позволят вам превратить ваши Photoshop проектирования в строгом соответствии XHTML 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 код сайта может быть трудной и сложной задачей (спасибо Microsoft и существует четыре версии IE на рынке!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. Это гораздо проще, по крайней мере для меня, играть примерно в Photoshop и создайте простое и очень здорово перспективных проектов.

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. абсолютно бесплатна и позволяет загружать файлы, либо в Photoshop или GIMP, поэтому, если у вас нет копии Photoshop, вы можете использовать бесплатно с открытым исходным фото-программа для изменения, 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. Хитрость заключается в том, чтобы части вашей страницы, которую вы хотите отдельного в разных слоях вашего. PSD-файла.

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. Не создавайте кучу слоев - Если вы не являетесь опытным пользователем Photoshop, вы, возможно, из многих слоев, которые все вместе объединить сделать единый объект. 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 “. В Photoshop, вы можете 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” . В Gimp, создайте пустой слой чуть ниже один хотите rasterize, а затем щелкните правой кнопкой мыши на новый слой и выберите "Merge Down". 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. Изменить Gimp слой размеров - По какой-то причине Gimp любит делать слоями же размера, что и изображение. 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” . Для каждого слоя в Gimp, где объект меньше, чем всей страницы (в большинстве ваших слоев), щелкните на слое, затем в меню выберите слой "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 PSD максимальный размер файла - Это большой размер файла, который можно загрузить, но она была просто случайные числа подобраны создателя. 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! Идем дальше и создать веб-страницу в Photoshop или GIMP, а затем загрузите его посмотреть, как выясняется!

Hopefully, the look you had created comes out in your final HTML output. Хотелось бы надеяться, что с нетерпением вы создали одерживает в вашем окончательного вывода HTML. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: Вы также можете попробовать несколько других онлайновых услуг для переноса PSD дизайн веб-страниц, однако они не бесплатно:

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. Эта услуга называется также PSD нарезки, если вы хотите узнать технический термин для нее. 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: Вот некоторые здорово учебники и руководства, что вы можете прочитать о том, как дизайн сайта в Photoshop, а затем преобразовать его в 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 не может быть наилучшим инструментом для крупных конструкторов, это отличный способ для начала, если вы не очень знакомы с HTML и CSS кодирование. And it’s free, so it’s always worth a shot! И это бесплатно, поэтому всегда стоит выстрел! Enjoy! Получать удовольствие! Source: Источник: ToThePC

Technorati Tags: Technorati Tags: , , , , , ,

If you enjoyed this post, make sure you Если вам понравилась эта должность, убедитесь в том, subscribe to my RSS feed подписаться на мои канал ! !

» Filed Under », Поданной в соответствии с Web Site Tips Веб-сайт Советы

Related Posts Похожие Сообщений

3 Responses to “Convert Photoshop designs to CSS website” 3 Ответы на "Конвертировать Photoshop дизайны и CSS на сайте"

  1. Siddharth Сиддхарт said on : сказал: April 26th, 2008 at 8:38 am 26 апреля 2008 года в 8:38 утра

    Nice thingy Nice thingy
    Will use it whenever in emergency Будет использовать его всякий раз, когда в чрезвычайной ситуации :)


  2. Shaun Shaun said on : сказал: April 26th, 2008 at 10:41 am 26 апреля 2008 года в 10:41 утра

    Hi Aseem - Привет 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. Я просто хотел, чтобы вы узнали о том, что максимальный размер файла был bumped к 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. Image Roll остатков, текстовые области, ссылки, почтовый скачать файл (равно как и старые "Сохранить как…" вариант), авто по центру страницы и многое другое.

    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 27 апреля 2008 года в 7:14 вечера

    Shaun, no problem at all, it’sa pretty cool service! Шон, нет проблем вообще, это очень здорово сервис! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. Переход с Photoshop на текущий веб-сайт может быть довольно сложной задачей, если вы не про, так что это действительно помогает.


    Please post your comments/suggestions! Просьба отправить комментарии и предложения!