Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

今回はエクセルとワードの小技といった内容です。エクセルの列に入力された内容をワードに持っていきたい時、単純にエクセルの内容をコピーして、ワードにペーストしてしまうと、ワード上もエクセルと同じ状態（縦並び）になってしまいます。

これを横並びでワードに貼り付けたいという機会がありました。（少し文章で伝わりにくいと思いますが、要は上記のような状態です。）一つ一つ、改行をバックスペースキーで消していっても良いのですが、大量のデータの時はそういう訳にもいきません。何か良い方法がないか探していましたら、あるではありませんか！一発で解決する方法が…
備忘録として残しておきたいと思います。

会社で使用しているPCがIE9にアップグレードされました。が、これがイライラ始まりでした。

Illustrator（イラストレーター）のパスのオフセット機能を使えば袋文字を簡単に作成することが出来ます。この機能を使ったタイポグラフィの作り方です。難しいことは特にしていませんので、数分で作成できるのではないでしょうか。

快晴の空に雲を追加する方法です。photoshopのフィルタメニューの「雲模様」を使用するかなり基本的な内容です。

海外の記事を参考にfacebookのアイコンをphotoshopで作る方法です。少し手間は掛かりますが、やってることは基本的なことの繰り返しでした。

Photoshopで写真をモノクロにする時は、単純に「彩度を下げればいい」と思っていましたが、実はそうではないらしいです。デザイナーの方々はチャンネルミキサーを使っているようで…知りませんでした。

Photoshopで木目調を作成する方法はいろいろとあると思うのですが、今回はあっという間に作れてしまう方法です。

もともと顔のツルツルのBabyが素材ですので少し解りにくいかもしれませんが、photoshopで顔を綺麗にする方法をメモしておきたいと思います。

Photoshopでさらっとテキストエフェクトを作成したいときに便利です。意外と簡単に出来ます。

Photoshopでテキストのレヤースタイルを設定するだけでプロっぽいテキストに仕上げることができます。数値を設定するだけで非常に簡単です。

写真にレトロな効果を付けるやり方です。Instagram風で付けるレトロな効果とよく似ています。

少しおしゃれな感じの背景を作るチュートリアルです。ただ楽しては出来そうにありません。少し手間がかかりました。

フォトショップでは様々な切抜きの方法があり、パスを使って切り抜くことが多いですが、髪の毛を切り抜く際、先端部分をパスで綺麗に切り抜くことは至難の業です。そんな時「チャンネル」を利用して切り抜きを行えば、髪の毛部分も自然な形で切り抜くことが出来ます。

シールがぺらっとめくれた感じをイラストレーターで作成する方法です。作業量は少し多いですが、手間を惜しまなければ、いい感じに仕上げることができます。illustratorCS5で作成した場合です。

イラストレーターで渦巻きを作成しようとする場合、どのように作成するでしょうか？線ツールにスパイラルツールがありますが、スパイラルツールでは、中心にいくほど間隔が狭くなってしまいます。”等間隔”ということが意外と迷ってしまうところでもあります。今回は等間隔の渦巻きを描く方法を2パターンメモしておきたいと思います。

windowsXPからwindows7にパソコンを切り替えた際に、windowsXPで使用していたillustrator10をwindows7でも使用するべくインストールしたところ、イラストレーターのファイルをいざ開いてみると、あるはずのテキスト部分のみ消えているではありませんか！何故かと考えましたが、答えは簡単で、illustrator10発売時にwindows7は当然無かった訳で互換性が無かったんだろうと思います。まぁサポートされているはずもないので、不具合が起こっても仕方ありません。 諦めかけましたが、解決法がありましたので、メモしておきます。

イラレのデータをやり取りしていると、フォントの有無によってファイルを開く際に「見つからないフォントは代替されました」というウィンドウが表示されることがあります。完全に解消するには、無いフォントをインストールするしか方法はありませんが、無いフォントを有るフォント代替しても解消することは可能です。ただどこにそのフォントが使用されているのかを発見するのが何とも面倒な作業になりますが、どこにどのフォントが使用されているかは簡単に発見することができます。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。今回はゴールドです。こちらは、PhotoshopVIPさんの記事を実際に試させてもらった結果です。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。前の記事のようにエンボスをかけないやり方です。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。

photoshopでレイヤースタイルの設定（+α）だけでテキストエフェクトを仕上げます。

photoshopで写真に縁を付けて影を付けるやり方なのですが、少し手間をかければ、いい感じに仕上げることが出来ます。designwalkerさんのページを参考に作成しました。http://www.designwalker.com/2007/03/peeling.html少しやり方が違うところがありますが…

Excelからillustratorへ単純にデータをコピーしても、どうも互換性が悪く、グループ化やクリッピングマスクがかかっているなど使い勝手が悪いということはありませんか？イラレの機能を駆使して、エクセルデータをコピーすることで、少し使い勝手の良い表組を作成することが出来ます。

イラストレーターの3D効果は機能としては、すごいと思う一方でなかなか使い所が難しいと思っていましたが、3D効果を使って少し使えそうなTipsをご紹介します。

Photoshopでテキストのレヤースタイルを設定するだけでアクアっぽいテキストに仕上げることができます。数値を設定するだけで非常に簡単にプロっぽいテキストの完成です。

一瞬どのように作るのかと思えるフェンスでも、基本的な機能を組み合わせれば簡単に描くことが可能です。その手順をメモしておきたいと思います。

ページカールをよく見かけますが、より自然な感じに仕上げるにはどうすればいいのか…その手順をメモしておきたいと思います。

Illustratorのアピアランス機能を使えば、メタリックに見えるフォントも簡単に作成することが可能です。アピアランス機能はやはり万能ですね。

上の画像のような、ある程度パターン化されている素材であれば、photoshopを使って継ぎ目のないパターンを作成することが出来ます。※ある程度パターン化されていないと、うまくいかない場合もあります。

イラストレーターには、様々なブラシがデフォルトで入っていますが、自分で作ったオブジェクトを新規ブラシとして登録することも可能です。今回ご紹介するように三角形を新規登録するだけで、簡単に草を描くことも出来ます。

スケッチっぽい感じがどことなくおしゃれです。イラレのアピアランス機能を使えば簡単に作成することができました。IllustratorCS2で作成しています。

せっかくすごいフォトショップブラシをダウンロードしても単色使用ではいまいち。そんな時は、ベクトルマスクを使用して、グラデーションなどでブラシを表現してみてはいかがでしょうか？

イラストレーターCS5を使用するようになって、アピアランスを使って様々な設定を行った後に、スポイトツールを使ってその属性をコピーしようと思ったら…あれ！？できない…CS5では出来なくなったのかと思って（そんな訳はないのですが）、暫く様子を見ていました。でも、やっぱり不便と思うことが多々あり、調べてみたら何のことはない、簡単な事でした。

スタンプやハンコを押したような、少しかすれた感じをイラストレーターで再現する方法です。不透明マスクの機能を使えばあっという間に作成することができます。

先日、イラレでリボンを描く方法をご紹介しましたが、滑らかな感じリボンを描く場合はどうするか…今回はその方法についてご紹介したいと思います。IllustratorCS5で作成した場合です。

イラストレーターで四角形の対角線部分だけが角丸のオブジェクトを描くときや、タブのような四角形の上の部分だけが角丸のオブジェクトを描くときなど、簡単なようで意外と、どのように描いていいのかと迷うことがあります。様々な方法があると思いますが、その書き方をメモしておきます。

○○周年記念等でよく見るリボンをイラストレーターで作成する方法です。作業は至って簡単なのですが、文章で伝えるのがなかなか難しい…うまく伝わっているかどうか…。

久々の更新となってしまいましたが、今回は以前書いた記事に対して、イラレのCS5ではどうするの？というコメントを頂きましてCS5編として書かせて頂きました。ご参考になれば幸いです。
以前書いた記事内容はこちらです。http://forty-n-five.boy.jp/blog/2008/09/illustrator_2.php

動画を静止画にキャプチャーしたいと思ったとき、PrintScreenを押しても、動画部分だけうまくキャプチャー出来なかった経験はないでしょうか？かといって、わざわざ新たなソフトをダウンロードするもの煩わしい…そんな場合は、既存のWindows Media Playerもしくは、Windows ムービーメーカーを使えば、動画を静止画に変換することが可能です。

よく見かける背景ではありますが、不透明マスクを使えば凄く簡単に作成する事ができます。

フォトショップで上記のような帯状のリボンを作成したいと思いますが、使うテクニックはレイヤーマスクのみ。非常に簡単な作業で作成する事が出来ます。

Illustrator（イラストレーター）のアピアランス機能は何かと便利です。先日もアピアランスについて取り上げましたが、この機能を使って窪んだようなテキストを作る方法のご紹介です。Tipsが詳細されているサイト（英語）がありましたので、試してみました。

イラストレーターのアピアランス機能は意外と便利な使い方がありますです。その活用方法をメモっておきたいと思います。

InDesignのレイアウトソフトとは違って、illustratorでのページ分割はなかなか面倒。例えば、A3サイズで作成したものを、A4サイズに分割してPDFで保存したいときの方法をメモしておきます。

フルフラッシュサイトなどで、ちょっとした情報をHTMLでポップアップで出したいときがたまにあります。新規ウィンドウでフル画面で表示させるような情報でないときなどに役立つと思います。actionscriptの書き方をメモっておきます。

国旗バッチをフォトショップで作成してみました。理由は新婚旅行で行ったので、その記念です。作成手順掲載します。（あんまり使いどころはないと思いますが…ボタン作成などに応用できるのはないでしょうか…）

今更感はありますが、イラストレーターでアクア風のボタンを作成する手順をメモっておきたいと思います。

Illustratorにこのような機能があったことを最近知りました。HTMLタグでMAPタグがあるのはご存知かと思いますが、通常MAPを利用する際はDreamweaverで操作されるのが通常だと思います。しかし、Dreamweaverでは複雑な形には対応できないと思います。しかしイラストレータを使用すると、どんな複雑なイラストでもその枠通りにリンクを貼り付ける事が可能です。この機能を実際使うかどうかは別問題ですが…

サイト内に動画を掲載したい場合、youtubeなどを使わずwindows media playerを用いて動画を設置する方法をご紹介します。

パソコン操作に関する小技です。知っておくとこれまでよりも少しだけ操作が早まるのではないかと思います。（あくまでも少しだけです）他にも便利な技があれば教えて下さい。

イラストレーターで表を作成する時、どのようにされていますでしょうか？まさか四角をつなぎ合わせているなんてことはないでしょう…何て事を言っておりますが、少し前まで表を作る時は、四角をつなぎ合わせたり、罫線をひっぱったりということをしてました。そんな素人っぽい表の作り方とはこれでおさらばです。

風景写真に綺麗な空を合成したい時に、役立つのではないでしょうか。フォトショップで自然な雲を描く方法です。

こんなにクオリティが高く、すぐに導入できるFlashギャラリーサイトはなかなかないのではないでしょうか。現在作成中のサイトに導入しています。日本語で扱いには多少問題があったのでその解決方法も記しておきたいと思います。

タイトルだけではちょっと意味が分かりにくいですが、要は上の画像のようなものを、簡単に作る事が出来ます。ちなみに上の画像は今現在作成中のサイトですのでテキスト等多少追加しています。（まだ作成中なので、完成すれば公開したいと思います。）そんな訳で実際作成した手順をメモしておきたいと思います。

先日記事にしました「swfobject」ですが、何もIEでFlashサイトを見たときに表示される枠線を消すだけではありません。Flashサイトをフルスクリーン（フルフラッシュ）で見せたいときにも役立ちます。その導入方法は、非常に簡単です。

FlashをHTMLに埋め込むとき、ドリムウィーバーを使用していると、「挿入」「メディア」「Flash」からswfファイルを選択して埋め込んでいる方もいるかと思います。この場合object タグやembedタグが自動的に入力され便利なのですが、如何せんIEで開くと、「ActiveXをインストールしますか？」というダイアログが表示されたり、一度Flash画面をクリックしてからでないとFlash内での操作ができなかったりと、ユーザーにとっては何とも面倒くさい作業です。そこで、objectタグやembedタグを使わずに、SWFObject（javascript）を使用することで、ユーザーがわざわざクリックする必要もなくなります。（SWFObject、ネタとしては古いですので、知っている方はなんだそれ、知らない方は目から鱗だと思います。）

Copyright（コピーライト）に年号を入れている場合、例えば今年だったら年越しの際、2009に変更したりしますか？もしくは、2002などでほったらかしになっているサイトをよく見かけます。100ページぐらいあるサイトであれば、2009にいちいち修正するのも面倒くさい。そんな時、年号部分を自動で更新するようにしてしまえば、このような煩わしさから開放されます。そんなJavascriptの導入方法をご紹介します。（但し、このJavascriptが活躍するのは年に1回だけですが…今の時期調度良いのではないでしょうか（笑））

先日もご紹介しましたexcelからhtmlの変換ソフトですが、またまた便利なフリーソフトがありましたので紹介したいと思います。作業としては前にご紹介したこととほぼ同じです。テンプレートとなるhtmlを作成し、excelの1行目にタイトルを挿入したい位置に記入して、あとはフリーソフトを使って1発変換すれば、一瞬にして大量のhtmlを作成することができます。もしもドロップシッピングの商品CSVを利用して実施に作業した内容をメモしておきます。

写真にちょっとした効果を付けて少しプロっぽくみせる方法です。太陽光線を写真に入れてみます。

MovableTypeのページ分割においてMTPaginateをプラグインされている場合が多いと思いますが、そのまま使用するとページナビゲーションがいまいち美しくありません。多くのブログやメジャーサイトで使用されているのはボックス形式のナビゲーション。かくいう私もこれまで味気のないナビゲーションでしたが、ようやくカスタマイズしました。CSSで装飾するだけでちょっとはプロっぽい感じのナビゲーションに仕上げることが出来ます。

例えば800×600ぐらいのサイトを作った時、1024×768の画面サイズでみるとほぼほぼ中央に位置し、見やすいですが、1280×1024の画面サイズで見ると上に詰まったような形になり、折角のサイトがこじんまりしてしまいます。ポートフォリオサイトhttp://forty-n-five.boy.jp/として私も1000×600のサイトがありますが、当初はこのような感じでした。が…、CSSを少し追加するだけで、どんな画面の大きさでも中央に配置することができ、随分見やすくなりました。ソースをご紹介します。

最近多くのweb系のブログで見られるようになった上記のようなソースを綺麗に表示してくれるフォーマット。その導入方法をご紹介します。これまで、ブログでソースを紹介しようにも＜＞を特殊文字で表したり、どこからどこまでがソースなのか分かりにくい部分もありましたが、これを導入することで、美しくユーザビリティにも配慮したソースを紹介することができます。うーんまさにプロっぽい。

海外のサイトを参考にテキストをネオンぽくしてみました。その方法をメモしておきます。

意外と知られていないtarget="_package"。通常aタグで別ウィンドウで表示させたいときは、target="_blank"だと思いますが、target="_blank"ばかりだと別ウィンドウばかり開いてイライラするということがあります。そんな悩みはtarget="_package"で解決。target="_package"だと最初は別ウィンドウで開きますが、別のリンク先をクリックすると、最初に開いた別ウィンドウ内でページが入れ替わります。言葉で説明すると難しいですが、実際に操作してみれば簡単な話です。

ドロップシッピングなんかで商品データベースをCSVにて配布いているサイトがたまにあったりします。このように大量の商品データがある中で、個々のページをそれぞれ作りたい!そんな要望に応えてくれるフリーのソフトがあります。要はExccel(CSV)の内容をhtmlに簡単にもってくることが出来ます。

Flashサイトで右クリックすると上記のようなメニューが表示されます。ちなみにこのようなメニューは、コンテクストメニューと呼ばれています。このコンテクストメニューの表示で、「拡大」「先送り」など制作者サイドにとっては、こんなメニューは表示させたくないことも多いと思います。そんな表示させたくないと言う方は、画像の右側のように非表示にされているサイトもよく見かけます。そこで、今回はその表示させない方法をメモしておきたいと思います。

キーボードがおかしい！IE使用中だけ、@を押すと[になり、半角/全角キーを押すと‘になるなどの現象が突然おこり始めました。キーボード自体がおかしいのかと思い、コンパネからいろいろ操作するも直らずに困っていましたが、ついに解決することが出来ました。IEには本当にいらいらさせられる（笑）

リンクボタンを押すときに出てくる点線って少し気になりますよね。ましてや上のようになんだかずれているときなんて気になって仕方がない！そんなリンクボタンを押したときに出る点線についての対策法について書きたいと思います。

Photoshopで画像の端をめくれた感じにするチュートリアルは数多く紹介されていますが、Illustratoｒの場合はどうすればいいのかと考えた時に、上記のように、いとも簡単にめくれた感じを表現する方法がありました。そのやり方をメモしておきたいと思います。

フォトショップでなかなか使うことのない「ノイズの低減」機能をご存知でしょうか？これを利用するだけで、そばかすフェイスも綺麗に変身。他にも多少修正は必要ですが…

非常に簡単な作業で、アクアボタンっぽいものが作成できます。ってことでやり方をメモメモっと。今回はイラストレータで作ります。

非常に簡単な作業で、アクアボタンっぽいものが作成できます。ってことでやり方をメモメモっと。

高級感のあるサイトなどに人物を使用する際には、多少なりとも人物に加工が必要ですね。そんな時に一瞬で人物に高級感を与える方法をメモっておきます。

思わず押してみたくなるボタンってありますよね。細かい部分ですが、こういったボタンのデザインにもこだわっていきたいですね。そんな訳で、フォトショップで非常に簡単に思わず押してみたくなるボタンを作ってみましたので、その方法をメモしておきます。

フォトショップでテキストをちょっとおしゃれにする方法です。Tipsが紹介されているサイト（英語）がありましたので実際にやってみました。その手順をメモしておきます。このやり方を身に付けておくと様々なデザインに利用できそうですね。

よく見かけるリアルな人物画像。いったいどうやって描いているのかと常々気になっておりましたが、その方法が判明しました。初めて実践してみましたが何となくそれっぽくはなったので良しとします。でもこれは今後使えそうなテクニックです。（ちなみになぜリップスライムかは特に理由はありません。男前代表ということで（笑））

画像で色の一部分を変更したい！そんな時に役立つTipsです。フォトショップで、いとも簡単にで色の置き換えをすることが可能です。

フォトショップのものさしツール使っていますか？これまでなかなか使う機会のなかったものさしツール。それが意外に便利な使い方があります。それは、画像の傾きを一瞬にして直してくれるというもの。写真を撮った時や、スキャナで画像を取り込んだ際、画像が傾いていることが多いですよね。そんな時にものさしツールが役に立ってくれます。

桜の写真から幻想的な画像を作ってみました。作り方は至って簡単！こちらのサイトで作り方が紹介されています。（http://uradesign.com/）こちらのサイトでは他にもフォトショップに関することや、イラストレータについて紹介されていて参考になるサイトです。今回作成した全体像は続きを読むからどうぞ。

画像を切り抜く時、皆さんはどうされますか？フォトショップ（Photoshop）で画像を切り抜く方法はいろいろありますが、まさかイラストレータで画像を切抜きされている方は少ないのではないかと思います。（イラストレーターにもクリッピングマスクはありますが…）従って、イラストレータ上に切り抜いた画像を持ってくるときはフォトショップで画像処理を行った後、イラストレータに持ってくるという手順になります。ただ、このもって行き方に新たな発見がありました。（というかＤＴＰをやっている方にとっては当たり前の作業だと思いますが…webしかやったことのない人間にとっては意外と知らないことかもしれません）その方法とはフォトショップの「クリッピングパス」を利用します…

どのサイトを参照したかは忘れてしましたが、JavascriptとCSSでFlashで作ったような写真ギャラリーができます。導入方法は、先日記事にした他人のサイトのJavascriptやCSSを丸覗きできるFireFox拡張機能で私のサイトを覗いてもらえれば、「home.css」「homeslider.js」「jquery-1.2.1.min.js」があるはずです。それとこの記事のソースを見てもらえればどのようにしているのかが分かるかと思います。

英語なんでちょっと難解な部分もありますが何とか分かる範囲かなって感じです。私も何となくフォトショップで画像を加工してみました。（なんだかよく分からなくなってしまいましたが…）

上のようにPhotoshopで画像の端をめくれた感じにする方法を紹介します。定番な加工なんで、やり方を身につけておくべきでしょう！方法を紹介してくれているサイトがありました。それは…

jquery.jsを使えば透明感のあるロールオーバーがいとも簡単に設置できます。Flashを使っているみたいな感じになります。導入方法は…のちほど更新します。（今日はもう寝ます）

Googleサイトマップとは、Googleのクロールの精度を高めるためにGoogleのクローラにサイトの情報を提供し、Google のインデックスにより多くのページを登録してもらうためのものです。ぜひ導入しておきたいものです。Googleサイトマップを導入する方法（MovabeleType編）をご紹介します。

たくさんある画像を美しく見せるためのFlashで作る写真ギャラリーです。実際にデモもみれますし、Flashファイルをダウンロード配布してます。

Photoshopの本を買わずともこういったサイトがあるとWeb制作の幅が広がりますね。

「お問合せはこちら」などソースにmailto:hogehoge@co.jpという具合にアドレスをそのまま記入していませんか？悪徳広告業者はソース上の@を自動的に収集するなどしてアドレスを無作為に引っ張っている場合があります。これを防ぐにはアドレスを暗号化することです。上記のサイトから簡単に暗号化することが出来るので、アドレスを公開する場合は暗号化しておくことをオススメします。

トラックバックのURLにわざわざフォームを使用しているものが多いですよね。これには理由があります。トラックバックはコピーして使用してもらいたいものなので、いちいち文字を選んでもらわなくてもフォームにしておけばワンクリックで文字列を選択してくれるからです。
導入方法は至って簡単。実際に私が導入したソースは…

画像のロールオーバーの設定は、JavascriptやCSSで設置できますが、jQuery_Auto.jsを導入するだけでいとも簡単にロールオーバーの設定が出来ます。サンプルは、上記の画像にマウスをもっていくと分かります。