Convert Photoshop designs to CSS website 전투 근무 지원 웹 사이트로 변환 디자인을 photoshop

Posted on April 26, 2008 at 5:13 am 게시 4 월 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을 사용하면 설계로 변환하는 전투 근무 지원 웹 사이트를 지원하는 엄격한!

온라인 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!). 전투 근무 지원 웹 사이트를 이해하고 코드를 시도 될 수 힘들고 어려운 작업 (덕분에 4 개의 버전의 마이크로 소프트와이 시장에서 즉!). 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 중 하나를 사용하면 파일을 업로드 또는 김프, 그래서 photoshop의 사본을하지 않은 경우, 오픈 - 소스를 사용할 수있습니다 무료 포토 - 편집 프로그램, 김프합니다.

psd을 전투 근무 지원

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%. 불투명도과 블렌딩 옵션 - 당신은 아무것도 필요가 불투명 래스터 이외의 모든 계층과 100 %합니다. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. photoshop에서하실 수있습니다 레이어 래스터 레이어를 선택하여 오른쪽 - 클릭하여 "래스터 형식"또는 "래스터 레이어"합니다. 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” . 이 김프를 작성 레이어 바로 아래에 빈 래스터하려는 하나를 마우스 오른쪽 단추로 클릭하여 새 레이어를 선택하고 "병합 다운"합니다. This will rasterize the layer and merge it. 이것은 그것 래스터 레이어와 병합합니다.
  • 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. 사메가바이트 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이나 김프하고, 나중에 알고 보니 방식을 볼 수 업로드!

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: 또한 다른 온라인 서비스를 사용해보십시오으로 변환 몇 개 웹 페이지 디자인을 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의 사이트에서하는 방법을 설계하고 다음을 변환을 형식 :

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 코딩합니다. 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 관련 기사

2 Responses to “Convert Photoshop designs to CSS website” 2 개의 응답을 "로 변환 photoshop 디자인을 전투 근무 지원 웹사이트"

  1. Siddharth siddharth said on : 말했다 : April 26th, 2008 at 8:38 am 2008년 4월 26일에서 오전 8시 38분

    Nice thingy 좋은 껍데기 같은
    Will use it whenever in emergency 이 때 사용할 수 비상 :)


  2. Shaun 숀 said on : 말했다 : April 26th, 2008 at 10:41 am 2008년 4월 26일에서 오전 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. 난 그저되었다는 사실을 알려 8메가바이트의 최대 파일 크기는 지금이 없을까요.

    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


    Please post your comments/suggestions! 게시하시기 바랍니다 귀하의 의견 / 제안!