純粋に書き出したい画像のx倍のサイズで書き出せばRetina用の画像を作成することができます。
（「横300px 縦100px」の2倍のRetina画像の場合は「横600px 縦200px」）
そりゃそうですね（汗）
ですが、
頭のなかで暗算をしたときにサイズを間違う可能性が確実に少しだけ上がります。
これが良くないです。
人間は確実にミスをする生き物なのでミスが起きにくい工程で作業すること、
ミスが起こりにくい環境を作ってあげることがとても大事だと思います。
そこで作業する時は通常のサイズで作業して、書き出すときに2倍3倍にして書き出してあげます。
例として「横300px 縦100px」の2倍のRetina画像を書き出してみます。
1. 画像をphotoshopで開く。
2. 開いた画像レイヤー（「背景」という名前になっています）をレイヤーパレットからスマートオブジェクトに変換。
3. 切り抜きツールで「横300px 縦100px」で切り抜く。
4. （切り抜きが完了すると「レイヤー0」という名前になっています）これを右クリックして書き出し形式を選択
5. 書き出しのウィンドウが表示されるので、「200%」の「画像サイズ」で書き出します。
これだけです。なかなか簡単ですね。
2. 「Retina用画像とオリジナル画像」を一気にphotoshopで書き出す方法
「画像アセット」と言うのを使用します。
こちらもとても簡単です。
先ほどと同じ1.〜 3. の工程を行います
1. 画像をphotoshopで開く。
2. 開いた画像レイヤー（「背景」という名前になっています）をレイヤーパレットからスマートオブジェクトに変換。
3. 切り抜きツールで「横300px 縦100px」で切り抜く（切り抜きが完了すると「レイヤー0」という名前になります）
4. psd ファイルを好きな名前で保存する。
5. 「レイヤー0」の名前を「200% background@2x.jpg」に変更します
6. 【ファイル】→【生成】→【画像アセット】チェックを付けます
これだけでpsdを保存した階層に「myfile-assets」ようなフォルダーが作成され
その中に解像度が2倍のレティーナ用ファイル「background@2x.jpg」が生成されています。
またpsdファイルを更新するたびに自動的に再生成されます。
ですので画像修正したり何度も生成したりする可能性がある場合はこちらのアセットを使うととても便利です
Retina画像の『倍率』『圧縮率』の決め方
レイヤーにどういう名前をつけるかによってこれらを自由に設定できます。
・倍率の決め方
2倍にするなら「200% middlefile.jpg」
3倍にするなら「300% largefile.jpg」
複数のファイルを同時に生成する場合はカンマで区切ります
「 200% middlefile.jpg , 300% largefile.jpg 」
・JPEG画像圧縮率の決め方
必要な出力画質を .jpg(1-10) または .jpg(1-100%) のようにアセット名の末尾に追加します。
jpeg 80%で保存したいなら「.jpg8」
jpeg 100%で保存したいなら「.jpg10」
とします。
文章にすると面倒くさそうですが慣れるととても簡単なので、どちらも一度やってみることをお勧めします。
以上PhotoshopでRetina用画像を作成する方法でした。