連載

PhotoshopでWebデザインをはじめよう!

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第6回 完成したWebデザインから、画像やCSSコードを生成しよう

Webデザインが完成したら、実際のWebページで使用する画像を書き出します。本記事では、定番の「スライス機能」を使った書き出し方法のほか、Photoshop CC 14.1から搭載された「画像アセット機能」を使った自動書き出し方法を解説しま...

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第5回 写真をレタッチして、配置しよう

Webデザインの仕上げとして、写真を配置します。本記事では、Photoshopを使って写真の汚れや余計やものを消して見栄えをよくするノウハウ、写真をデザイン上に配置する際に役立つ「マスク」機能について解説します。 Photoshop CC ...

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第4回 ロゴを配置して、背景パーツを作成しよう

文字を配置したあとは、オブジェクトを作成したり配置したりして、デザインの作り込みをしていきます。本記事では、Photoshopで扱えるオブジェクトの特徴、シェイプを使ったデザインパーツの作り方、ロゴデータ(Illustratorファイル)の...

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第3回 Webデザインに文字を配置しよう

Photoshopを使ってデザインベースに文字を配置していきます。事前に、最終的なWebページにおいて、画像テキストにするところ、通常のテキストにするところを決めておきましょう。それぞれのメリットとデメリット、文字を入力する際の注意点、文字...

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第2回 シェイプを駆使してデザインのベースを作ろう

PhotoshopでWebデザインする際、最初に行う作業はデザインのベース作りです。ベースとは、背景や写真などの主な要素のアタリを配置したものです。「シェイプ」を使って、各要素に相当するオブジェクトを作成する方法を解説します。Webデザイン...

浅野 桜

【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能

この連載では、Photoshopの初心者を対象とし、Webページをデザインする方法を紹介していきます。初回は、デザイン前に覚えておきたいこと。Photoshopの環境をWebデザインの基本となる単位「pixel」に設定する方法、そして、デザ...